/* ==========================================================================
   BODYBUILDING BIBLE: Design System
   Dark premium: near-black canvas, one acid accent, very large type,
   generous whitespace, soft radii, motion only where it carries meaning.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* surfaces: each step is a real elevation, never decoration */
  --bg:        #08090b;
  --bg-1:      #0d0f12;
  --bg-2:      #131619;
  --bg-3:      #1a1e23;
  --bg-glass:  rgba(10, 11, 14, 0.72);

  --line:      rgba(255, 255, 255, 0.07);
  --line-2:    rgba(255, 255, 255, 0.13);
  --line-3:    rgba(255, 255, 255, 0.22);

  /* text */
  --fg:        #f2f4f6;
  --fg-2:      #a4abb5;
  --fg-3:      #858d97;
  /* Muted text is still text: keep it subdued without dropping below a
     readable contrast on the elevated dark surfaces. */
  --fg-4:      #7a838d;
  --prose-fg:  #dfe3e8;
  --warning:   #fbbf24;
  --accent-text: #d2ff69;
  --fg-dim:    #6d757f;  /* alias consumed by the inherited molecules.js SVGs */

  /* one accent, used sparingly */
  --accent:      #c6f94f;
  --accent-deep: #a5e01e;
  --accent-ink:  #0b0d08;
  --accent-a12:  rgba(198, 249, 79, 0.12);
  --accent-a20:  rgba(198, 249, 79, 0.2);
  --accent-a40:  rgba(198, 249, 79, 0.4);
  --accent-a08:  rgba(198, 249, 79, 0.08);
  --accent-a13:  rgba(198, 249, 79, 0.13);
  --accent-a16:  rgba(198, 249, 79, 0.16);
  --accent-a45:  rgba(198, 249, 79, 0.45);
  --accent-a50:  rgba(198, 249, 79, 0.5);
  --accent-a80:  rgba(198, 249, 79, 0.8);
  --accent-a90:  rgba(198, 249, 79, 0.9);

  /* Bewertungsfarbe: bleibt auch bei einem alternativen Seitentheme grün. */
  --score-accent:      #c6f94f;
  --score-accent-deep: #a5e01e;

  /* Molekülkartenfarbe: semantisch fest, nicht vom Seitentheme abhängig. */
  --map-accent:      #c6f94f;
  --map-accent-deep: #a5e01e;
  --map-accent-ink:  #0b0d08;
  --map-accent-a40:  rgba(198, 249, 79, 0.4);
  --map-accent-a20:  rgba(198, 249, 79, 0.2);

  /* Diagrammfarben: dieselben Farbtoene wie die Beitragsarten, aber auf die
     Helligkeit heruntergezogen, die auf dunklem Grund lesbar bleibt und auch
     bei Rot-Gruen-Schwaeche unterscheidbar ist. Reihenfolge ist fest, nie zyklisch. */
  --viz-1: #7ca206;
  --viz-2: #469dc4;
  --viz-3: #c2833b;
  --viz-4: #9586ca;

  /* content kinds: same lightness/chroma family so the set reads as a system */
  --k-wiki:           #7dd3fc;
  --k-article:        #c6f94f;
  --k-story:          #fdba74;
  --k-stack:          #c4b5fd;
  --k-transformation: #f9a8d4;
  --k-tierlist:       #86efac;
  --k-recipe:         #fcd34d;
  --danger:           #fb7185;
  --split-body-base:    #364258;
  --split-body-detail:  #536178;
  --split-body-outline: #111827;

  /* type */
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero:  clamp(3rem, 8.2vw, 7rem);
  --fs-h1:    clamp(2.25rem, 5vw, 4rem);
  --fs-h2:    clamp(1.875rem, 3.4vw, 2.875rem);
  --fs-h3:    clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lead:  clamp(1.0625rem, 1.5vw, 1.3125rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-label: 0.6875rem;

  /* geometry */
  --r:     18px;
  --r-sm:  12px;
  --r-xs:  8px;
  --wrap:  1240px;
  --gut:   clamp(1.25rem, 4vw, 3rem);
  --sec:   clamp(4.5rem, 9vw, 8.5rem);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 40px -12px rgba(0, 0, 0, 0.65);
  --shadow-3: 0 40px 90px -20px rgba(0, 0, 0, 0.8);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #f5f6f2;
  --bg-1:      #ffffff;
  --bg-2:      #eef0eb;
  --bg-3:      #e2e5de;
  --bg-glass:  rgba(245, 246, 242, 0.82);
  --line:      rgba(20, 25, 22, 0.09);
  --line-2:    rgba(20, 25, 22, 0.16);
  --line-3:    rgba(20, 25, 22, 0.27);
  --fg:        #151815;
  --fg-2:      #4e5750;
  --fg-3:      #59635b;
  --fg-4:      #5f6961;
  --prose-fg:  #343b35;
  --warning:   #8a5a00;
  --accent-text: #587700;
  --fg-dim:    #707a72;
  --accent:      #c6f94f;
  --accent-deep: #a5e01e;
  --accent-ink:  #0b0d08;
  --accent-a08:  rgba(198, 249, 79, 0.08);
  --accent-a12:  rgba(198, 249, 79, 0.12);
  --accent-a13:  rgba(198, 249, 79, 0.13);
  --accent-a16:  rgba(198, 249, 79, 0.16);
  --accent-a20:  rgba(198, 249, 79, 0.2);
  --accent-a40:  rgba(198, 249, 79, 0.4);
  --accent-a45:  rgba(198, 249, 79, 0.45);
  --accent-a50:  rgba(198, 249, 79, 0.5);
  --accent-a80:  rgba(198, 249, 79, 0.8);
  --accent-a90:  rgba(198, 249, 79, 0.9);
  --k-wiki:           #0879a8;
  --k-article:        #668900;
  --k-story:          #a6520a;
  --k-stack:          #7057b2;
  --k-transformation: #aa3b73;
  --k-tierlist:       #167b46;
  --k-recipe:         #8b6500;
  --danger:           #c22d49;
  --split-body-base:    #b6c0cf;
  --split-body-detail:  #d0d5dd;
  --split-body-outline: #64748b;
  --viz-1: #668900;
  --viz-2: #247fa8;
  --viz-3: #a8621c;
  --viz-4: #705fac;
  --shadow-1: 0 1px 2px rgba(20, 25, 22, 0.12);
  --shadow-2: 0 18px 40px -12px rgba(20, 25, 22, 0.2);
  --shadow-3: 0 40px 90px -20px rgba(20, 25, 22, 0.28);
}

:root[data-accent="pink"] {
  --accent:      #ff5fa2;
  --accent-deep: #f02f7d;
  --accent-ink:  #1a0710;
  --accent-text: #ff79b3;
  --accent-a08:  rgba(255, 95, 162, 0.08);
  --accent-a12:  rgba(255, 95, 162, 0.12);
  --accent-a13:  rgba(255, 95, 162, 0.13);
  --accent-a16:  rgba(255, 95, 162, 0.16);
  --accent-a20:  rgba(255, 95, 162, 0.2);
  --accent-a40:  rgba(255, 95, 162, 0.4);
  --accent-a45:  rgba(255, 95, 162, 0.45);
  --accent-a50:  rgba(255, 95, 162, 0.5);
  --accent-a80:  rgba(255, 95, 162, 0.8);
  --accent-a90:  rgba(255, 95, 162, 0.9);
}
:root[data-theme="light"][data-accent="pink"] {
  --accent:      #c52d70;
  --accent-deep: #a71958;
  --accent-ink:  #ffffff;
  --accent-text: #a71958;
  --accent-a08:  rgba(197, 45, 112, 0.08);
  --accent-a12:  rgba(197, 45, 112, 0.12);
  --accent-a13:  rgba(197, 45, 112, 0.13);
  --accent-a16:  rgba(197, 45, 112, 0.16);
  --accent-a20:  rgba(197, 45, 112, 0.2);
  --accent-a40:  rgba(197, 45, 112, 0.4);
  --accent-a45:  rgba(197, 45, 112, 0.45);
  --accent-a50:  rgba(197, 45, 112, 0.5);
  --accent-a80:  rgba(197, 45, 112, 0.8);
  --accent-a90:  rgba(197, 45, 112, 0.9);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "cv02", "cv03", "cv04";
}

img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2a2f36; }

/* --- 3. Layout primitives ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 880px; }
.section { padding-block: var(--sec); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grow { flex: 1; min-width: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.lead { font-size: var(--fs-lead); color: var(--fg-2); line-height: 1.55; max-width: 62ch; }

.section-head { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h1, .section-head h2 { font-size: var(--fs-h2); }
.section-head .lead { max-width: 54ch; }

.hr { height: 1px; background: var(--line); border: 0; }

/* --- 4. Boot splash ------------------------------------------------------ */
.boot { min-height: 100dvh; display: grid; place-items: center; }
.seo-boot { display: none; }
.js .seo-prerender { display: none; }
.js .seo-boot { display: grid; }
.boot-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  color: var(--accent);
  animation: pulse 1.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Bildkarten behalten auch im hellen Theme ihre dunkle Bildfläche. */
:root[data-theme="light"] .cat-body h3,
:root[data-theme="light"] .analysis-subject-picker .kind-opt .t { color: #f2f4f6; }
:root[data-theme="light"] .cat-body p,
:root[data-theme="light"] .analysis-subject-picker .kind-opt .d { color: #a4abb5; }
:root[data-theme="light"] .cat-arrow { color: #a4abb5; border-color: rgba(255, 255, 255, 0.18); }
:root[data-theme="light"] .analysis-subject-picker .kind-opt .analysis-token-cost { color: #c6f94f; }

/* --- 5. Buttons (UIverse-flavoured: sweep + glow, no gimmicks) ----------- */
.btn {
  --btn-bg: var(--bg-2);
  --btn-fg: var(--fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.35rem;
  border-radius: 99px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid var(--line-2);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--spring), border-color 0.25s, background 0.25s, color 0.25s, box-shadow 0.35s var(--ease);
}
.btn::after {
  /* light sweep on hover */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.14) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ease-out);
}
.btn:hover { border-color: var(--line-3); transform: translateY(-2px); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.btn.primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  border-color: transparent;
  font-weight: 600;
}
.btn.primary:hover { box-shadow: 0 0 0 1px var(--accent-a40), 0 12px 32px -8px var(--accent-a45); }

.btn.ghost { --btn-bg: transparent; border-color: var(--line-2); color: var(--fg-2); }
.btn.ghost:hover { color: var(--fg); background: var(--bg-2); }

.btn.quiet { --btn-bg: transparent; border-color: transparent; color: var(--fg-3); padding-inline: 0.75rem; }
.btn.quiet:hover { color: var(--fg); transform: none; }

.btn.danger { color: var(--danger); border-color: rgba(251, 113, 133, 0.28); }
.btn.danger:hover { background: rgba(251, 113, 133, 0.1); }

.btn.lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn.sm { padding: 0.5rem 0.95rem; font-size: var(--fs-xs); }
.btn.block { width: 100%; }

/* --- 6. Pills, tags, badges --------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.8rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.3s var(--spring);
}
a.pill:hover, button.pill:hover { color: var(--fg); border-color: var(--line-3); transform: translateY(-1px); }
.pill.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 500; }
.pill.draft { border-color: var(--accent-a40); color: var(--accent); }
.pill.tag::before { content: "#"; color: var(--fg-4); }
.pill.on.tag::before { color: var(--accent-ink); opacity: 0.55; }

.kind {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kc, var(--fg-2));
  background: color-mix(in srgb, var(--kc, var(--fg-2)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--kc, var(--fg-2)) 22%, transparent);
  white-space: nowrap;
}
.kind::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; }

.k-wiki           { --kc: var(--k-wiki); }
.k-article        { --kc: var(--k-article); }
.k-story          { --kc: var(--k-story); }
.k-stack          { --kc: var(--k-stack); }
.k-transformation { --kc: var(--k-transformation); }
.k-tierlist       { --kc: var(--k-tierlist); }
.k-recipe         { --kc: var(--k-recipe); }

.mono { font-family: var(--font-mono); }
.dim { color: var(--fg-3); }
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* --- 7. Header ----------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background 0.35s var(--ease), border-color 0.35s, backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.hdr.stuck {
  background: var(--bg-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.hdr-in {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 76px;
}
.hdr.stuck .hdr-in { height: 66px; transition: height 0.35s var(--ease); }

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.brand-logo {
  width: 84px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; flex: none;
  position: relative;
  overflow: hidden;
  background: var(--accent);
  transition: transform 0.4s var(--spring);
}
.brand-logo img {
  display: block;
  position: absolute;
  width: 90px; height: auto; max-width: none;
  left: -3px; top: -11px;
  filter: invert(1) contrast(1.08);
  mix-blend-mode: multiply;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  letter-spacing: -0.05em;
  transition: transform 0.4s var(--spring);
}
.brand:hover .brand-logo { transform: rotate(-3deg) scale(1.03); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-txt { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.03em; line-height: 1.1; }
.brand-txt small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; color: var(--fg-3); text-transform: uppercase; font-weight: 400; }

.nav { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.nav a {
  position: relative;
  padding: 0.5rem 0.7rem;
  border-radius: 99px;
  font-size: var(--fs-sm);
  color: var(--fg-3);
  transition: color 0.2s, background 0.2s;
}
.nav a:hover { color: var(--fg); background: var(--bg-2); }
.nav a.on { color: var(--fg); }
.nav a.on::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 16px; height: 2px; border-radius: 2px; background: var(--accent);
  transform: translateX(-50%);
}

.hdr-search {
  position: relative;
  flex: 1 1 24rem;
  min-width: 14rem;
  max-width: 420px;
  margin-left: auto;
}
.hdr-search input {
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 2.4rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: var(--fs-sm);
  transition: border-color 0.2s, background 0.2s;
}
.hdr-search input::placeholder { color: var(--fg-4); }
.hdr-search input:focus { outline: none; border-color: var(--line-3); background: var(--bg-2); }
.hdr-search .ico { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--fg-4); pointer-events: none; }
/* Gemeinsames Darstellungsmenü */
.appearance-menu { position: relative; flex: none; }
.appearance-menu > .btn { padding-inline: 0.75rem; gap: 0.45rem; }
.lang-flag {
  display: block; width: 1.45rem; height: 0.9rem; flex: none;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.theme-switcher { gap: 0.4rem; padding-inline: 0.7rem; }
.accent-switcher { gap: 0.45rem; padding-inline: 0.7rem; }
.accent-dot {
  width: 0.72rem; height: 0.72rem; flex: none; border-radius: 99px;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-a12);
  transition: transform 0.25s var(--spring), background 0.25s, box-shadow 0.25s;
}
.accent-switcher:hover .accent-dot { transform: scale(1.18); }
.theme-icon {
  width: 1rem; flex: none; color: var(--fg-2); font-size: 1rem; line-height: 1;
  transition: transform 0.3s var(--spring), color 0.2s;
}
.theme-switcher:hover .theme-icon { color: var(--accent); transform: rotate(14deg) scale(1.12); }
.appearance-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80;
  min-width: 290px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  animation: popIn 0.18s var(--ease-out);
  display: flex; flex-direction: column; gap: 6px;
}
.appearance-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: var(--r-xs); background: var(--bg-1); }
.appearance-tabs button { padding: 0.45rem 0.3rem; border-radius: calc(var(--r-xs) - 2px); color: var(--fg-3); font-size: var(--fs-xs); }
.appearance-tabs button[aria-selected="true"] { background: var(--bg-3); color: var(--fg); }
.appearance-options { display: flex; flex-direction: column; gap: 1px; }
.appearance-options button {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.7rem; border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--fg-2); text-align: left;
  transition: background 0.15s, color 0.15s;
}
.appearance-options button:hover, .appearance-options button[aria-pressed="true"], .appearance-options button[aria-checked="true"] { background: var(--bg-3); color: var(--fg); }
.appearance-options button[aria-pressed="true"]::after, .appearance-options button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--accent-text); }
.appearance-options .lang-flag { width: 20px; height: 14px; }
.appearance-swatch { width: 0.75rem; height: 0.75rem; border-radius: 99px; background: var(--accent); }
.appearance-swatch.pink { background: #f472b6; }
.hdr-auth { display: flex; align-items: center; gap: 0.5rem; flex: none; }

.account-menu { position: relative; flex: none; }
.account-trigger {
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 99px;
  background: none; cursor: pointer;
  transition: transform 160ms ease-out;
}
.account-trigger:hover { transform: translateY(-1px); }
.account-trigger:active { transform: scale(0.97); }
.account-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  min-width: 180px; padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
.account-popover::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px;
}
.account-menu:hover .account-popover,
.account-menu:focus-within .account-popover,
.account-menu.open .account-popover {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.account-popover a, .account-popover button {
  width: 100%; display: flex; align-items: center;
  padding: 0.55rem 0.7rem; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--fg-2); text-align: left;
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.account-popover a:hover, .account-popover button:hover { background: var(--bg-3); color: var(--fg); }
.account-popover button.danger { color: var(--danger); }
.account-popover button.danger:hover { color: var(--danger); }

.burger { display: none; width: 40px; height: 40px; border-radius: 10px; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--fg); margin: 4px auto; transition: transform 0.3s var(--ease), opacity 0.2s; }
.burger.on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1280px) {
  .hdr {
    position: fixed;
    inset: 0 0 auto;
    background: var(--bg-glass);
    border-bottom-color: var(--line);
  }
  .nav, .hdr-search { display: none; }
  .hdr-auth { display: none; }
  .burger { display: block; margin-left: auto; }
  .hdr-in { gap: 0.75rem; }
  .hdr.stuck .hdr-in { height: 76px; }
  .hdr + main { padding-top: 76px; }
}

@media (max-width: 560px) {
  .theme-label { display: none; }
  .theme-switcher { padding-inline: 0.65rem; }
}

.mobile-nav {
  position: fixed; inset: 76px 0 0; z-index: 55;
  background: var(--bg);
  padding: 2rem var(--gut) 3rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  overflow-y: auto;
}
.mobile-nav .hdr-search { display: block; flex: none; width: 100%; max-width: none; min-width: 0; margin: 0 0 1.25rem; }
.mobile-nav .search-pop { position: relative; top: 0.5rem; right: auto; width: 100%; }
.mobile-nav a { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; padding: 0.7rem 0; color: var(--fg-2); border-bottom: 1px solid var(--line); }
.mobile-nav a.on { color: var(--accent); }

/* --- 8. Search overlay --------------------------------------------------- */
.search-pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(460px, 78vw);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--shadow-3); overflow: hidden; z-index: 70;
  animation: popIn 0.22s var(--ease-out);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.search-pop a { display: flex; gap: 0.9rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); transition: background 0.15s; }
.search-pop a:last-child { border-bottom: 0; }
.search-pop a:hover { background: var(--bg-3); }
.search-pop .t { font-size: var(--fs-sm); font-weight: 500; }
.search-pop .s { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.search-pop .none { padding: 1.5rem 1rem; text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
.search-pop .search-all {
  background: var(--bg-1); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* --- 8b. Suchergebnisseite ----------------------------------------------- */
.hit {
  display: block; padding: 1.25rem 1.25rem 1.35rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s, padding-left 0.3s var(--ease);
}
.hit:hover { background: var(--bg-1); padding-left: 1.6rem; }
.hit-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.hit-by { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-4); }
.hit h3 { font-size: 1.1875rem; letter-spacing: -0.025em; }
.hit.is-read h3 { color: var(--fg-2); }
.snippet {
  margin-top: 0.45rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-3);
  border-left: 2px solid var(--line-2); padding-left: 0.85rem;
}
.snippet mark, .prose mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--fg); border-radius: 3px; padding: 0 2px; font-weight: 500;
}

/* --- 9. Hero ------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 6rem); overflow: hidden; }
.hero-glow {
  position: absolute; top: -35%; left: 50%; transform: translateX(-50%);
  width: min(1100px, 130vw); aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-a12) 0%, transparent 62%);
  pointer-events: none; filter: blur(30px);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
}
.hero-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
  max-width: 16ch;
}
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); }
.hero .lead { max-width: 56ch; text-align: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.5rem; }

.hero-word { display: inline-block; will-change: transform, opacity; }

.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin-top: clamp(3rem, 6vw, 5rem);
}
.stat-strip > div { background: var(--bg); padding: clamp(1.25rem, 3vw, 2rem); text-align: center; }
.stat-strip .n { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.stat-strip .l { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-top: 0.6rem; }
@media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- 10. Category tiles -------------------------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.cat-tile {
  position: relative;
  grid-column: span 3;
  aspect-ratio: 3 / 4;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  isolation: isolate;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.cat-tile.wide { grid-column: span 6; aspect-ratio: 3 / 2; }
.cat-tile.half { grid-column: span 6; aspect-ratio: 16 / 9; }
.cat-tile:focus-within { border-color: var(--line-3); }

.cat-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.75) brightness(0.62) contrast(1.08);
  transform: scale(1.02);
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.cat-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.96) 0%, rgba(8, 9, 11, 0.55) 42%, rgba(8, 9, 11, 0.12) 100%);
  transition: opacity 0.5s var(--ease);
}
.cat-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.1rem, 2.4vw, 1.75rem); gap: 0.5rem; }
.cat-body h3 { font-size: clamp(1.25rem, 2.2vw, 2rem); letter-spacing: -0.04em; }
.cat-tile.wide .cat-body h3 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.cat-body p { font-size: var(--fs-sm); color: var(--fg-2); max-width: 42ch; opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.cat-tile:focus-within .cat-body p { opacity: 1; transform: none; }
.cat-meta { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.cat-arrow {
  position: absolute; top: clamp(1.1rem, 2.4vw, 1.75rem); right: clamp(1.1rem, 2.4vw, 1.75rem); z-index: 2;
  width: 38px; height: 38px; border-radius: 99px;
  border: 1px solid var(--line-2); background: rgba(8, 9, 11, 0.5); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: var(--fg-2);
  transition: background 0.35s var(--ease), color 0.35s, transform 0.45s var(--spring), border-color 0.3s;
}
.cat-tile:focus-within .cat-arrow { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover { border-color: var(--line-3); transform: translateY(-4px); }
  .cat-tile:hover img { transform: scale(1.08); filter: grayscale(0.2) brightness(0.72) contrast(1.05); }
  .cat-tile:hover .cat-body p { opacity: 1; transform: none; }
  .cat-tile:hover .cat-arrow, .cat-tile:focus-within .cat-arrow { background: var(--accent); color: var(--accent-ink); border-color: transparent; transform: rotate(-45deg) scale(1.06); }
}

@media (max-width: 1000px) {
  .cat-tile, .cat-tile.half { grid-column: span 6; aspect-ratio: 4 / 3; }
  .cat-tile.wide { grid-column: span 12; aspect-ratio: 16 / 9; }
  .cat-body p { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .cat-tile, .cat-tile.wide, .cat-tile.half { grid-column: span 12; aspect-ratio: 16 / 10; }
}

/* --- 11. Post cards ------------------------------------------------------ */
.grid-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }

.pcard {
  position: relative;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s, transform 0.45s var(--ease);
}
.pcard::before {
  /* accent hairline that draws in on hover */
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--kc, var(--accent)), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.pcard:hover { background: var(--bg-2); border-color: var(--line-2); transform: translateY(-3px); }
.pcard:hover::before { transform: scaleX(1); }

.pcard-cover { margin: calc(-1 * clamp(1.2rem, 2.2vw, 1.6rem)) calc(-1 * clamp(1.2rem, 2.2vw, 1.6rem)) 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); }
.pcard-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.pcard:hover .pcard-cover img { transform: scale(1.05); }

.pcard h3 { font-size: 1.3125rem; letter-spacing: -0.03em; line-height: 1.2; }
.pcard p { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pcard-foot { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; padding-top: 0.4rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.pcard-foot .sep { color: var(--fg-4); }

/* compact list row (knowledge base) */
.prow {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: center;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s, padding-left 0.3s var(--ease);
}
.prow:hover { background: var(--bg-1); padding-left: 1.6rem; }
.prow h3 { font-size: 1.1875rem; letter-spacing: -0.025em; }
.prow p { font-size: var(--fs-sm); color: var(--fg-3); margin-top: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prow .meta { display: flex; align-items: center; gap: 0.6rem; }

/* read / unread marker + progress */
.readmark {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4);
  white-space: nowrap;
}
.readmark .ring {
  width: 15px; height: 15px; border-radius: 99px; flex: none;
  border: 1.5px solid var(--line-3);
  display: grid; place-items: center; font-size: 9px; line-height: 1;
  transition: background 0.3s var(--ease), border-color 0.3s, color 0.3s;
}
.readmark.done { color: var(--accent); }
.readmark.done .ring { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

.pcard.is-read h3 a, .prow.is-read h3 { color: var(--fg-2); }
.pcard.is-read { border-color: rgba(255, 255, 255, 0.05); }

.progress { display: flex; flex-direction: column; gap: 0.6rem; }
.progress .bar-track { height: 5px; }

/* --- Tierlist ------------------------------------------------------------ */
.tierlist { display: flex; flex-direction: column; gap: 3px; border-radius: var(--r-sm); overflow: hidden; }
.tier-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 3px; align-items: stretch; }
.tierlist.readonly .tier-row { grid-template-columns: 76px minmax(0, 1fr); }

.tier-label {
  display: grid; place-items: center; padding: 0.5rem 0.25rem; min-height: 76px;
  color: #0b0d08; font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; letter-spacing: -0.02em; text-align: center;
}
.tier-label input {
  width: 100%; background: none; border: 0; text-align: center; color: inherit;
  font: inherit; padding: 0; min-width: 0;
}
.tier-label input:focus { outline: 1px dashed rgba(0, 0, 0, 0.4); outline-offset: 2px; }

.tier-drop {
  display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start;
  min-height: 76px; padding: 4px;
  background: var(--bg-1); border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.tier-drop.over { background: var(--bg-3); border-color: var(--accent-a40); }
.tier-drop.pool { border-radius: var(--r-sm); border-color: var(--line); min-height: 96px; padding: 8px; align-items: center; }

.tier-item {
  position: relative; width: 68px; height: 68px; flex: none;
  border-radius: 6px; overflow: hidden; background: var(--bg-3);
  cursor: grab; touch-action: none; user-select: none;
  display: grid; place-items: center;
  transition: transform 0.2s var(--spring), box-shadow 0.2s;
}
.tier-item:hover { transform: scale(1.06); box-shadow: var(--shadow-2); z-index: 2; }
.tier-item.dragging { opacity: 0.3; }
.tier-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tier-item-text { font-size: 10px; text-align: center; padding: 4px; line-height: 1.2; color: var(--fg-2); word-break: break-word; }
.tier-item-cap {
  position: absolute; inset: auto 0 0 0; padding: 2px 3px;
  font-size: 8px; text-align: center; line-height: 1.2;
  background: rgba(8, 9, 11, 0.82); color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tierlist.readonly .tier-item { cursor: default; }

.tier-tools { display: flex; flex-direction: column; gap: 2px; justify-content: center; padding-left: 2px; }
.tier-tools button {
  width: 22px; height: 17px; border-radius: 4px; font-size: 10px; line-height: 1;
  color: var(--fg-3); background: var(--bg-1); transition: color 0.2s, background 0.2s;
}
.tier-tools button:hover:not(:disabled) { color: var(--fg); background: var(--bg-3); }
.tier-tools button:disabled { opacity: 0.3; cursor: default; }
.tier-tools input[type="color"] {
  width: 22px; height: 17px; padding: 0; border: 0; border-radius: 4px;
  background: none; cursor: pointer;
}

.tierlist-sources {
  display: flex; flex-direction: column; gap: 0.65rem;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-1);
}
.tierlist-source-controls {
  display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap;
}
.tierlist-source-controls .input { flex: 1 1 240px; min-width: 180px; }
.tierlist-source-summary {
  color: var(--fg-2); font-size: var(--fs-sm);
  padding-top: 0.35rem; border-top: 1px solid var(--line);
}
.tierlist-source-results {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.tierlist-source-result {
  display: flex; gap: 0.75rem; align-items: center; justify-content: space-between;
  padding: 0.65rem 0.75rem; background: var(--bg-2);
}
.tierlist-source-result strong { font-size: var(--fs-sm); }
.tierlist-source-result-summary {
  max-width: 52ch; margin-top: 0.2rem; font-size: var(--fs-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pool-wrap { position: relative; }
.tier-pool-card { width: 82px; text-align: center; }
.tier-pool-image {
  display: block; width: 68px; margin: 4px auto 0; padding: 2px 1px;
  border-radius: 4px; color: var(--fg-3); font-size: 9px; line-height: 1.15;
  cursor: pointer; transition: color 0.2s, background 0.2s;
}
.tier-pool-image:hover { color: var(--fg); background: var(--bg-3); }
.tier-pool-image.busy { cursor: wait; opacity: 0.6; }
.tier-pool-image input { display: none; }
.pool-x {
  position: absolute; top: -5px; right: -5px; z-index: 3;
  width: 17px; height: 17px; border-radius: 99px;
  background: var(--danger); color: #fff; font-size: 9px; line-height: 1;
  opacity: 0; transition: opacity 0.2s;
}
.pool-wrap:hover .pool-x { opacity: 1; }

.tier-ghost {
  position: fixed; z-index: 200; width: 68px; height: 68px;
  margin: -34px 0 0 -34px; pointer-events: none;
  border-radius: 6px; overflow: hidden;
  box-shadow: var(--shadow-3); opacity: 0.9;
  display: grid; place-items: center; background: var(--bg-3);
}
.tier-ghost img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 560px) {
  .tier-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .tier-label { font-size: 1rem; min-height: 60px; }
  .tier-item, .tier-ghost { width: 54px; height: 54px; }
  .tier-drop { min-height: 60px; }
  .tierlist-source-result { align-items: flex-start; }
  .tierlist-source-result-summary { max-width: 28ch; }
}

/* --- 12. Avatars --------------------------------------------------------- */
.avatar {
  --sz: 34px;
  width: var(--sz); height: var(--sz); flex: none;
  border-radius: 99px; overflow: hidden;
  background: var(--bg-3);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: calc(var(--sz) * 0.38);
  color: var(--fg-2);
  border: 1px solid var(--line-2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { --sz: 96px; }
.avatar.xl { --sz: 128px; }
.avatar.sm { --sz: 26px; }
.avatar.sys { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

.byline { display: flex; align-items: center; gap: 0.55rem; font-size: var(--fs-xs); color: var(--fg-3); }
.byline strong { color: var(--fg-2); font-weight: 500; }

/* --- 13. Reader ---------------------------------------------------------- */
.reader { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 1080px) { .reader { grid-template-columns: 1fr; } }

.reader-head { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.reader-head h1 { font-size: var(--fs-h1); }
.reader-head .lead { font-size: var(--fs-lead); }
.reader-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.aside-panel { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.5rem; }
/* Nur solange die Leiste eine eigene Spalte hat. Darunter steht sie im Fluss und
   darf nicht auf Bildschirmhoehe begrenzt werden. */
@media (min-width: 1081px) {
  .aside-panel {
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.45rem;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .aside-panel::-webkit-scrollbar { width: 6px; }
  .aside-panel::-webkit-scrollbar-track { background: transparent; }
  .aside-panel::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
  .aside-panel:hover::-webkit-scrollbar-thumb { background: var(--line-3); }
}
.panel {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.35rem; display: flex; flex-direction: column; gap: 1rem;
}
.panel > .label { margin-bottom: -0.25rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; font-size: var(--fs-sm); }
.kv dt { color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.kv dd { text-align: right; }

.bar { display: flex; flex-direction: column; gap: 0.4rem; }
.bar-head { display: flex; justify-content: space-between; font-size: var(--fs-xs); }
.bar-head .k { color: var(--fg-2); }
.bar-head .v { font-family: var(--font-mono); color: var(--fg-3); }
.bar-track { height: 4px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--accent); transform-origin: left; transition: transform 0.9s var(--ease-out); }
.bar-fill.warn { background: var(--warning); }
.bar-fill.hot { background: var(--danger); }

/* Analyse-Balken: an die kapselartige UIverse-Range angelehnt, aber als reine
   Anzeige ohne Thumb, Punkte oder dekorative Innenlinie. Die Analysefarbe und
   die Molekülkartenfarbe sind bewusst vom frei waehlbaren Seitentheme getrennt. */
.an-report .bar-track,
.mk-gewebe .bar-track {
  height: 0.45rem; border: 0; border-radius: 99px;
  background: var(--bg-2); overflow: hidden; box-shadow: none;
}
/* Belastung je System: zwei Angaben nebeneinander, nie verrechnet. */
.an-systeme .an-system-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.an-system-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.an-system-stufe { font-size: 0.82rem; color: var(--fg-3); }
.an-system-stufe.warn { color: var(--warning); }
.an-system-stufe.hot { color: var(--danger); }
.an-system-stoffe { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--fg-3); }
.an-dim-rolle { display: block; font-style: normal; font-size: 0.74rem; color: var(--fg-3); }
.an-beleg { font-style: normal; font-size: 0.74rem; color: var(--fg-3); margin-left: 0.4rem; white-space: nowrap; }

.an-report .bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--score-accent-deep), var(--score-accent));
  transform-origin: left; transition: transform 0.9s var(--ease-out);
}
.mk-gewebe .bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--map-accent-deep), var(--map-accent));
  transform-origin: left; transition: transform 0.9s var(--ease-out);
}
.an-report .bar-fill.warn,
.mk-gewebe .bar-fill.warn {
  background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 72%, #000), var(--warning));
}
.an-report .bar-fill.hot,
.mk-gewebe .bar-fill.hot {
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 72%, #000), var(--danger));
}

.mol { display: grid; place-items: center; gap: 0.6rem; padding: 0.25rem 0; margin: 0; }
.mol img {
  width: 100%; max-width: 240px; height: auto;
  border-radius: var(--r-sm);
  /* PubChem liefert schwarze Linien auf hellem Grund; invertieren macht daraus
     helle Linien auf dunklem Grund, die Drehung holt die Atomfarben zurueck */
  filter: invert(1) hue-rotate(180deg);
  transition: transform 0.5s var(--ease);
}
.mol:hover img { transform: scale(1.04); }
.mol figcaption { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; }
.mol figcaption a { color: var(--fg-3); transition: color 0.2s; }
.mol figcaption a:hover { color: var(--accent); }
.mol-note { font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.5; }

/* Strukturformel vergroessern: bei vielen Atomen wird die Vorschau unlesbar */
.mol-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mol-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
.mol-zoom {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 4vmin;
  background: rgba(6, 7, 9, 0.9); backdrop-filter: blur(8px);
  cursor: zoom-out; animation: molIn 0.18s var(--ease-out);
}
.mol-zoom figure { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin: 0; max-width: min(1100px, 92vw); }
.mol-zoom img {
  max-width: 100%; max-height: 76dvh; width: auto; height: auto;
  filter: invert(1) hue-rotate(180deg);
}
.mol-zoom figcaption { font-size: var(--fs-sm); color: var(--fg-2); text-align: center; }
.mol-zoom .hint { display: block; margin-top: 0.4rem; font-size: var(--fs-xs); color: var(--fg-3); }
@keyframes molIn { from { opacity: 0; } to { opacity: 1; } }

/* --- 14. Prose ----------------------------------------------------------- */
.prose { max-width: 68ch; font-size: 1.125rem; line-height: 1.75; color: var(--prose-fg); }
.prose > * + * { margin-top: 1.35em; }
.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 2.6em; margin-bottom: -0.4em;
  letter-spacing: -0.035em;
}
.prose h3 { font-size: 1.3125rem; margin-top: 2.2em; margin-bottom: -0.5em; letter-spacing: -0.025em; color: var(--fg); }
.prose h2 + *, .prose h3 + * { margin-top: 1.1em; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.35em; display: flex; flex-direction: column; gap: 0.55em; }
.prose li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--fg-3); font-family: var(--font-mono); font-size: 0.85em; }
.prose code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 0.12em 0.42em; border-radius: 6px; color: var(--accent);
}
.prose pre {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1.1rem 1.25rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--fg-2); }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding: 0.2em 0 0.2em 1.35em;
  color: var(--fg-2); font-style: italic;
}
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-a40); transition: text-decoration-color 0.2s; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.5em; }
.prose img { border-radius: var(--r-sm); border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; }

.prose .auto-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--line-3);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.prose .auto-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Beleg im Fließtext ----------------------------------------------------
   Die Nummer steht im Attribut und wird per content eingeblendet. Dadurch gibt
   es keinen Textknoten, den die Übersetzung anfassen könnte, und das Markup
   bleibt in jeder Sprache identisch. */
.prose .cite {
  font-family: var(--font-mono); font-size: 0.68em; line-height: 0;
  color: var(--accent); cursor: pointer; white-space: nowrap;
  padding: 0 0.08em; transition: color 0.15s var(--ease-out);
}
.prose .cite::after { content: "[" attr(data-ref) "]"; }
.prose .cite:hover { color: var(--fg); }
.prose .cite:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.figure figcaption .cite { font-size: 0.85em; }

.refs { display: flex; flex-direction: column; gap: 0.7rem; font-size: var(--fs-sm); color: var(--fg-3); }
.refs .n { font-family: var(--font-mono); color: var(--accent); margin-right: 0.5rem; }
.refs .ref {
  scroll-margin-top: 100px;
  border-left: 2px solid transparent; padding-left: 1rem; margin-left: -1rem;
  transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.refs .ref.hit { border-left-color: var(--accent); color: var(--fg-2); }
.refs .ref a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out); }
.refs .ref a:hover { color: var(--fg); border-bottom-color: var(--line-2); }
.ref-badge {
  display: inline-block; margin-left: 0.55rem; padding: 0.05rem 0.42rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
  color: var(--accent); border: 1px solid var(--line-2); border-radius: 999px;
  white-space: nowrap; vertical-align: 1px;
}
.refs .ref a:hover .ref-badge { border-color: var(--accent); }

/* Evidenzmatrix am Artikelende. Die Farbe links traegt die Aussage, die Zahl
   daneben praezisiert sie. Sie ist bewusst leise: eine Tabelle, die lauter ist
   als der Artikel, wird zur Schauwand, und genau das soll sie nicht sein. */
.ev-matrix { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.ev-lead { margin: 0.6rem 0 0.4rem; color: var(--fg-3); font-size: var(--fs-sm);
           line-height: 1.55; max-width: 74ch; }
.ev-bilanz { margin: 0 0 1rem; color: var(--fg-4); font-size: var(--fs-xs);
             font-variant-numeric: tabular-nums; }
.ev-tabelle-huelle { overflow-x: auto; }
.ev-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ev-tabelle th {
  text-align: left; padding: 0.4rem 0.6rem 0.5rem; color: var(--fg-4);
  font-size: var(--fs-label); font-weight: 500; border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.ev-tabelle td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line);
                 vertical-align: top; }
.ev-score { width: 3.6rem; }
.ev-score button {
  width: 2.6rem; padding: 0.15rem 0; border: 1px solid var(--line-2);
  border-radius: 6px; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; color: var(--fg-2);
}
.ev-score button:hover { border-color: var(--accent); color: var(--fg-1); }
.ev-zeile.s-gut     .ev-score button { border-left: 3px solid var(--accent); }
.ev-zeile.s-ok      .ev-score button { border-left: 3px solid var(--k-wiki); }
.ev-zeile.s-mittel  .ev-score button { border-left: 3px solid var(--warning); }
.ev-zeile.s-schwach .ev-score button { border-left: 3px solid var(--warning); opacity: 0.8; }
.ev-zeile.s-kaum    .ev-score button { border-left: 3px solid var(--danger); }
.ev-studie { max-width: 22rem; color: var(--fg-3); }
.ev-studie a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
.ev-aussage { max-width: 30rem; color: var(--fg-1); }
.ev-merkmale { color: var(--fg-4); font-size: var(--fs-xs); line-height: 1.5;
               max-width: 22rem; }
.ev-richtung { margin-left: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 999px;
               font-size: var(--fs-label); border: 1px solid var(--line-2); }
.ev-richtung.r-widerspricht { color: var(--danger); border-color: var(--danger); }
.ev-herleitung td { background: var(--bg-2); }
.ev-herleitung ul { list-style: none; margin: 0; padding: 0; display: flex;
                    flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: var(--fs-xs);
                    color: var(--fg-3); }
.ev-herleitung li em { font-style: normal; font-family: var(--font-mono);
                       color: var(--fg-2); margin-right: 0.4rem;
                       font-variant-numeric: tabular-nums; }
.ev-zitat { margin: 0.6rem 0 0; color: var(--fg-3); font-size: var(--fs-xs);
            line-height: 1.55; border-left: 2px solid var(--line-2);
            padding-left: 0.7rem; }
.ev-limit { margin: 0.5rem 0 0; color: var(--fg-4); font-size: var(--fs-xs); }
@media (max-width: 760px) {
  .ev-tabelle { min-width: 46rem; }
}

/* Transparenzhinweis am Artikelende (EU 2024/1689, Art. 50). Bewusst leise:
   er soll auffindbar sein, aber nicht mit dem Artikel um Aufmerksamkeit
   ringen. Steht unter den Quellen, weil beides Angaben ueber den Text sind
   und nicht Teil davon. */
.ki-hinweis {
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--fg-4); line-height: 1.6; max-width: 62ch;
}
.ki-hinweis a { color: var(--fg-3); text-decoration: underline; text-underline-offset: 3px; }
.ki-hinweis a:hover { color: var(--fg-2); }

/* --- Diagramme im Artikel --------------------------------------------------
   Inline-SVG, kein Build-Step und kein Javascript. Die Marken tragen Farbe,
   jeder Text bleibt in den Textfarben. */
.figure { margin: 2.5rem 0; }
.figure svg { display: block; width: 100%; height: auto; overflow: visible; }
/* SVG faellt ohne fill auf Schwarz zurueck, und Schwarz auf --bg ist im dunklen
   Thema unsichtbar. Ein vergessenes class="viz-name" kostet damit die ganze
   Beschriftung, ohne dass im Hellen etwas auffaellt. Geerbt statt gesetzt: die
   Regel steht auf dem svg, nicht auf text, sonst schluege ihre Spezifitaet
   .viz-tick und .viz-value. */
.figure svg { fill: var(--fg-2); }
.figure figcaption {
  margin-top: 0.9rem; font-size: var(--fs-xs); color: var(--fg-3);
  line-height: 1.6; max-width: 62ch;
}
.figure .fig-title { font-size: var(--fs-sm); color: var(--fg); margin-bottom: 0.15rem; }
.figure .fig-sub { font-size: var(--fs-xs); color: var(--fg-3); margin-bottom: 1rem; }

/* --- Platzhalter für ein Bild, das noch fehlt -------------------------------
   Der Leser sieht ihn nie. Sichtbar wird er nur, wenn der Reader die Klasse
   show-todo setzt, und das tut er ausschließlich für Admins und Mods. */
.figure.fig-todo, .figure.fig-grafik-todo { display: none; }
.prose.show-todo .figure.fig-todo {
  display: block;
  border: 1px dashed var(--line-3); border-radius: var(--r-sm);
  background: var(--bg-1); padding: 1.15rem 1.3rem;
}
.figure.fig-todo .fig-title::before {
  content: "◫ Bild fehlt: ";
  font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.06em;
  color: var(--accent);
}
.figure.fig-todo .fig-brief {
  font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.65;
  margin: 0.6rem 0 0; max-width: 62ch;
}
.figure.fig-todo .fig-brief strong {
  color: var(--fg-3); font-family: var(--font-mono);
  font-size: 0.92em; letter-spacing: 0.04em; font-weight: 400;
}
.figure.fig-todo figcaption {
  margin-top: 0.85rem; padding-top: 0.65rem; border-top: 1px solid var(--line);
}

/* Bild mit Beschriftung darüber. Die Wörter stehen als Textknoten im Body und
   nicht im Bild, damit translate_html sie mitnimmt und damit sie in jeder
   Sprache lesbar bleiben. Die Lage steht in Prozent, sonst wandert sie beim
   Skalieren aus dem Motiv. */
.figure .fig-canvas { position: relative; line-height: 0; }
.figure .fig-canvas img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-sm); background: var(--bg-2);
}
.figure .fig-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-body); font-size: var(--fs-xs); line-height: 1.25;
  color: var(--fg); white-space: nowrap; pointer-events: none;
  padding: 0.1rem 0.35rem; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.figure .fig-label.frei { background: none; padding: 0; }
.figure.fig-bild .fig-meta {
  margin: 0.45rem 0 0; color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.55;
}
.figure.fig-bild .fig-meta summary {
  cursor: pointer; color: var(--fg-4); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
}
.figure.fig-bild .fig-meta .fig-brief { margin: 0.55rem 0 0; max-width: 70ch; }
@media (max-width: 640px) {
  .figure .fig-label { font-size: 0.68rem; padding: 0.05rem 0.22rem; }
}

/* Redaktion: Bildplatzhalter im Wissensartikel einsetzen. Die Vorschau nutzt
   dieselbe Prozentpositionierung wie die fertige Figur, damit die Labels vor
   dem Speichern kontrollierbar bleiben. */
.wiki-figure-editor { display: grid; gap: 1rem; }
.wiki-figure-card {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-1);
}
.wiki-figure-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.wiki-figure-card-head h3 { margin: 0.2rem 0 0; font-size: var(--fs-sm); }
.wiki-figure-info {
  color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.6;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0.55rem 0;
}
.wiki-figure-info summary { cursor: pointer; color: var(--fg-2); }
.wiki-figure-info p { margin: 0.55rem 0 0; max-width: 80ch; }
.wiki-figure-controls { display: grid; grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; }
.wiki-figure-side { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.wiki-figure-preview {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2);
}
.wiki-figure-preview .fig-canvas { position: relative; width: 100%; line-height: 0; }
.wiki-figure-preview .fig-canvas img {
  display: block; width: 100%; height: auto;
  border-radius: 0; border: 0; background: var(--bg-2);
}
.wiki-figure-preview .fig-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-body); font-size: var(--fs-xs); line-height: 1.25;
  color: var(--fg); white-space: nowrap; pointer-events: none;
  padding: 0.1rem 0.35rem; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.wiki-figure-preview .fig-label.frei { background: none; padding: 0; }
.wiki-figure-labels { display: flex; flex-direction: column; gap: 0.5rem; }
.wiki-figure-label-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 5rem 5rem auto;
  gap: 0.45rem; color: var(--fg-4); font-family: var(--font-mono);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em;
}
.wiki-figure-label-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 5rem 5rem auto;
  gap: 0.45rem; align-items: center;
}
@media (max-width: 760px) {
  .wiki-figure-controls { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wiki-figure-label-head,
  .wiki-figure-label-row { grid-template-columns: minmax(0, 1fr) 4.2rem 4.2rem auto; }
}

.viz-grid { stroke: var(--line); stroke-width: 1; }
.viz-axis { stroke: var(--line-2); stroke-width: 1; }
.viz-tick { fill: var(--fg-3); font-family: var(--font-mono); font-size: 12px; }
.viz-name { fill: var(--fg-2); font-family: var(--font-body); font-size: 13px; }
.viz-value { fill: var(--fg); font-family: var(--font-mono); font-size: 13px; }
.viz-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-dot { stroke: var(--bg); stroke-width: 2; }
.viz-rule { stroke: var(--line-3); stroke-width: 1; }
.viz-ci { stroke-width: 2; stroke-linecap: round; }
.viz-s1 { color: var(--viz-1); }
.viz-s2 { color: var(--viz-2); }
.viz-s3 { color: var(--viz-3); }
.viz-s4 { color: var(--viz-4); }

/* Schemazeichnungen: Membran, Zelle, Rezeptor, Stoffweg. Der Aufbau der Szene
   trägt Linienfarben, eine Datenfarbe bekommt nur das, worum es geht. */
.viz-shape { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1; }
.viz-edge { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.viz-flow { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-linecap: round; }
.viz-head { fill: var(--fg-3); stroke: none; }
.viz-mark { fill: currentColor; stroke: none; }

/* link preview on hover */
.peek {
  position: fixed; z-index: 90; width: 300px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 0.9rem 1rem; box-shadow: var(--shadow-3);
  pointer-events: none;
  animation: popIn 0.16s var(--ease-out);
}
.peek .t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: -0.02em; }
.peek .d { font-size: var(--fs-xs); color: var(--fg-3); margin-top: 0.3rem; line-height: 1.5; }

/* --- 15. Comments -------------------------------------------------------- */
.comments { display: flex; flex-direction: column; gap: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--line); }
.cmt { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; }
.cmt.reply { margin-left: clamp(1.5rem, 4vw, 3rem); padding-left: 1.25rem; border-left: 1px solid var(--line); }
.cmt-head { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-xs); color: var(--fg-3); margin-bottom: 0.35rem; }
.cmt-head strong { color: var(--fg); font-weight: 500; font-size: var(--fs-sm); }
.cmt-body { font-size: var(--fs-sm); line-height: 1.65; color: var(--prose-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-actions { display: flex; gap: 0.75rem; margin-top: 0.45rem; }
.cmt-actions button { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); transition: color 0.2s; }
.cmt-actions button:hover { color: var(--accent); }

/* --- 16. Forms ----------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field > label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.an-form-fields { align-items: flex-start; }
.row > .field { flex: 1 1 200px; min-width: 0; }
.field .hint { font-size: var(--fs-xs); color: var(--fg-3); }

.input, .textarea, select.input {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.8rem 1rem;
  font-size: var(--fs-body);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--accent-a40); background: var(--bg-2);
  box-shadow: 0 0 0 3px var(--accent-a12);
}
.textarea { resize: vertical; min-height: 160px; line-height: 1.65; font-family: var(--font-mono); font-size: var(--fs-sm); }
select.input { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
select.input option { background: var(--bg-2); }

.input.big {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.15;
  background: none; border: 0; border-radius: 0; padding: 0.25rem 0;
}
.input.big:focus { box-shadow: none; background: none; }

.err { color: var(--danger); font-size: var(--fs-sm); display: flex; align-items: center; gap: 0.5rem; }
.ok { color: var(--accent); font-size: var(--fs-sm); }

/* Upload */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 2rem 1rem; cursor: pointer;
  background: var(--bg-1);
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  transition: border-color 0.25s, background 0.25s, transform 0.3s var(--ease);
  text-align: center;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent-a40); background: var(--bg-2); }
.dropzone.over { transform: scale(1.01); }
.dropzone.busy { pointer-events: none; opacity: 0.7; }
.dz-mark { font-size: 1.5rem; color: var(--accent); line-height: 1; }
.dropzone.busy .dz-mark { animation: pulse 1.2s infinite; }
.dz-text { font-size: var(--fs-sm); color: var(--fg-2); }
.dz-hint { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }

.upload-preview { position: relative; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--bg-1); }
.upload-preview img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.upload-preview.compact img { max-height: 150px; }
.upload-actions {
  position: absolute; inset: auto 0 0 0; display: flex; gap: 0.5rem; padding: 0.6rem;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.9), transparent);
}

.seg {
  display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 99px;
}
.seg button {
  flex: 0 0 auto; padding: 0.42rem 0.95rem; border-radius: 99px; font-size: var(--fs-xs); font-family: var(--font-mono);
  letter-spacing: 0.06em; color: var(--fg-3); white-space: nowrap;
  transition: color 0.2s, background 0.25s var(--ease);
}
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--bg-3); color: var(--fg); }

@media (max-width: 560px) {
  .hdr-in { gap: 0.5rem; }
  .brand { min-width: 0; flex: 1 1 auto; gap: 0.55rem; }
  .brand-logo { width: 72px; height: 32px; border-radius: 8px; }
  .brand-logo img { width: 78px; left: -3px; top: -9px; }
  .brand-txt {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.94rem;
  }
  .brand-txt small { display: none; }
  .langswitch .btn { padding-inline: 0.55rem; }
  .seg { display: flex; width: 100%; border-radius: var(--r-sm); }
  .seg button { flex: 1 1 auto; }
}

.kind-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.kind-opt {
  display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
  padding: 1.1rem 1.15rem; border-radius: var(--r-sm);
  background: var(--bg-1); border: 1px solid var(--line); text-align: left;
  transition: border-color 0.25s, background 0.25s, transform 0.35s var(--spring);
}
.kind-opt:hover { border-color: var(--line-2); transform: translateY(-2px); }
.kind-opt.on { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 8%, var(--bg-1)); }
.kind-opt .t { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; }
.kind-opt .d { font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.45; }

/* Analyse-Auswahl: dieselbe Bildsprache wie die Kategorie-Kacheln auf der
   Landing-Page. Das Bild bleibt dekorativ, der Kontrast kommt vom Overlay. */
.analysis-subject-picker .kind-opt {
  position: relative;
  min-height: clamp(12rem, 18vw, 15rem);
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-2);
}
.analysis-subject-picker .kind-opt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--subject-image);
  background-position: center;
  background-size: cover;
  filter: grayscale(0.75) brightness(0.62) contrast(1.08);
  transform: scale(1.02);
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.analysis-subject-picker .kind-opt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.96) 0%, rgba(8, 9, 11, 0.58) 48%, rgba(8, 9, 11, 0.12) 100%);
  pointer-events: none;
}
.analysis-subject-picker .kind-opt .t,
.analysis-subject-picker .kind-opt .d,
.analysis-subject-picker .kind-opt .analysis-token-cost {
  position: relative;
  z-index: 2;
}
.analysis-subject-picker .kind-opt .t { color: var(--fg); }
.analysis-subject-picker .kind-opt .d {
  color: var(--fg-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.analysis-subject-picker .kind-opt:hover .d,
.analysis-subject-picker .kind-opt:focus-visible .d {
  opacity: 1;
  transform: none;
}
.analysis-subject-picker .kind-opt .analysis-token-cost {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  position: absolute; top: 0.9rem; right: 0.95rem;
  margin-top: 0; padding: 0.28rem 0.48rem;
  color: var(--accent); background: rgba(8, 9, 11, 0.58);
  border: 1px solid var(--accent-a40); border-radius: 99px;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.02em; text-transform: none;
}
.analysis-token-cost .mono { font-size: var(--fs-sm); font-weight: 600; }
.analysis-subject-picker .kind-opt:hover::before,
.analysis-subject-picker .kind-opt:focus-visible::before,
.analysis-subject-picker .kind-opt.on::before {
  filter: grayscale(0.2) brightness(0.72) contrast(1.05);
  transform: scale(1.08);
}
.analysis-subject-picker .kind-opt.on {
  border-color: var(--accent);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--accent-a40);
}

@media (max-width: 560px) {
  .analysis-subject-picker .kind-opt { min-height: 10.5rem; }
  .analysis-subject-picker .kind-opt .d { opacity: 1; transform: none; }
}

/* Analysis transition: forward into the form, reverse back to the chooser. */
.analysis-view {
  will-change: transform, opacity;
}
.analysis-view-forward {
  animation: analysis-forward-in 240ms var(--ease-out) both;
}
.analysis-view-back {
  animation: analysis-back-in 240ms var(--ease-out) both;
}
.analysis-image-upload {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.5rem; width: 100%;
}
/* Waehrend der Auftrag laeuft, steht unter dem Knopf, wie lange das normal
   dauert. Ohne den Satz sieht eine regulaere Wartezeit von drei Minuten wie
   ein Fehler aus, und der naechste Klick startet nur denselben Lauf neu. */
.analysis-image-hint {
  margin: 0; max-width: min(100%, 30rem); color: var(--fg-3);
}
.analysis-image-upload-button {
  width: min(100%, 24rem); min-height: 4.25rem;
  padding: 1rem 1.5rem; font-size: 1rem;
  white-space: normal; text-align: center;
  background: var(--bg-2); color: var(--fg);
  border-color: var(--accent-a40);
  box-shadow: 0 0 0 1px var(--accent-a08);
}
.analysis-image-upload-button:hover {
  color: var(--accent-ink); background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-a40), 0 12px 32px -12px var(--accent-a50);
}
.analysis-image-upload-button.is-busy,
.analysis-image-upload-button.is-busy:hover {
  cursor: wait; color: var(--fg-3); background: var(--bg-2);
  border-color: var(--line-2); box-shadow: none;
}
.analysis-image-upload-placeholder { cursor: default; }
.analysis-image-status {
  display: grid; gap: 0.35rem; width: min(100%, 44rem);
  padding: 0.9rem 1rem; border: 1px solid var(--line-2);
  border-left-width: 3px; border-radius: var(--r-sm); background: var(--bg-1);
  color: var(--fg-3); font-size: var(--fs-sm);
}
.analysis-image-status.ok { border-left-color: var(--accent); }
.analysis-image-status.fehler { border-left-color: var(--danger); }
.analysis-image-status strong { color: var(--fg); }
.analysis-image-status.fehler strong { color: var(--danger); }
.analysis-image-status p { margin: 0; }
.analysis-form-lock {
  min-width: 0; margin: 0; padding: 0; border: 0;
}
.analysis-form-lock[disabled] { opacity: 0.66; }
@keyframes analysis-forward-in {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: translateX(0); }
}

.analysis-loading {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--bg-1); box-shadow: var(--shadow-1);
}
.analysis-review-layer {
  position: fixed; inset: 0; z-index: 310;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(6, 7, 9, 0.42);
  backdrop-filter: blur(12px) saturate(75%);
  -webkit-backdrop-filter: blur(12px) saturate(75%);
  animation: analysis-review-in 180ms var(--ease-out) both;
}
.analysis-review-card {
  width: min(32rem, 100%);
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  max-height: calc(100dvh - 2rem); overflow: auto;
  border: 1px solid var(--line-2); border-radius: clamp(1.2rem, 3vw, 2rem);
  background: var(--bg-1); box-shadow: var(--shadow-3);
}
.analysis-review-card h2 { margin: 0; }
.analysis-loading-inline {
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.analysis-review-ready {
  display: flex; align-items: center; gap: 0.65rem;
  color: var(--score-accent); font-size: var(--fs-sm);
}
.analysis-review-ready-mark {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  border: 1px solid var(--score-accent);
  border-radius: 50%; font-size: 0.85rem; line-height: 1;
}
.analysis-review-disclaimer {
  margin: 0; color: var(--fg-3);
  font-size: var(--fs-xs); line-height: 1.6;
}
.analysis-review-confirmation {
  margin: 0; color: var(--fg-2);
  font-size: var(--fs-sm); line-height: 1.55;
}
.analysis-review-actions {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.analysis-review-card > .btn { align-self: flex-start; }
@keyframes analysis-review-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .analysis-review-layer { animation: none; }
}
.analysis-loading-head { display: flex; align-items: center; gap: 0.8rem; }
.analysis-loading-mark {
  flex: none; color: var(--accent); font-size: 1.35rem; line-height: 1;
  animation: pulse 1.4s var(--ease) infinite;
}
.analysis-loading-head strong { font-size: var(--fs-sm); }
.analysis-loading-track {
  height: 0.35rem; overflow: hidden; border-radius: 99px;
  background: var(--bg-3);
}
.analysis-loading-fill {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform: scaleX(0.03); transform-origin: left;
  animation: analysis-loading-progress var(--analysis-loading-duration) linear forwards;
}
@keyframes analysis-loading-progress {
  0% { transform: scaleX(0.03); }
  78% { transform: scaleX(0.72); }
  100% { transform: scaleX(0.9); }
}
@keyframes analysis-back-in {
  from { opacity: 0; transform: translateX(-1rem); }
  to { opacity: 1; transform: translateX(0); }
}
.analysis-back {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-decoration: none;
}
.analysis-back:hover {
  color: var(--fg);
}
.analysis-page-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* --- 17. Auth cards ------------------------------------------------------ */
.auth-wrap { min-height: calc(100dvh - 76px); display: grid; place-items: center; padding: 3rem var(--gut) 5rem; }
.auth-card {
  width: min(440px, 100%);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow: var(--shadow-2);
}
.auth-card h1 { font-size: 2rem; }

/* --- 18. Profile --------------------------------------------------------- */
.profile-head { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; flex-wrap: wrap; }
.profile-stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.profile-stats .n { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.04em; }
.profile-stats .l { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }

/* --- 19. Sidebar tree (knowledge base) ----------------------------------- */
.browse { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .browse { grid-template-columns: 1fr; } }

.tree { position: sticky; top: 96px; max-height: calc(100dvh - 140px); overflow-y: auto; padding-right: 0.5rem; display: flex; flex-direction: column; gap: 1px; }
.tree-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.42rem 0.6rem; border-radius: var(--r-xs); font-size: var(--fs-sm); color: var(--fg-3); text-align: left; transition: color 0.2s, background 0.2s; }
.tree-item:hover { color: var(--fg); background: var(--bg-1); }
.tree-item.on { color: var(--accent); background: var(--accent-a12); }
.tree-item .n { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); }
.tree-item .caret { width: 12px; flex: none; color: var(--fg-4); transition: transform 0.25s var(--ease); font-size: 9px; }
.tree-item .caret.open { transform: rotate(90deg); }
.tree-kids { margin-left: 0.75rem; padding-left: 0.5rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.tree-top { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--fg-2); letter-spacing: -0.01em; }

/* --- 20. Utility states -------------------------------------------------- */
.empty { padding: clamp(3rem, 8vw, 6rem) 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.empty .mark { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5rem); font-weight: 600; letter-spacing: -0.05em; color: var(--bg-3); }
.empty h3 { font-size: 1.375rem; }
.empty p { color: var(--fg-3); font-size: var(--fs-sm); max-width: 42ch; }

.skel { background: linear-gradient(90deg, var(--bg-1) 25%, var(--bg-2) 50%, var(--bg-1) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

.toast {
  position: fixed; bottom: 1.75rem; left: 50%; z-index: 100;
  transform: translate(-50%, 140%);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 99px;
  padding: 0.75rem 1.4rem; font-size: var(--fs-sm);
  box-shadow: var(--shadow-3);
  transition: transform 0.5s var(--spring), opacity 0.3s;
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 0.6rem;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); flex: none; }
.toast.bad .dot { background: var(--danger); }

/* --- 21. CTA band & footer ---------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: clamp(var(--r), 3vw, 32px);
  background: var(--bg-1);
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50% 20%; z-index: 0;
  background: radial-gradient(circle at 50% 100%, var(--accent-a20), transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-h2); max-width: 18ch; }

.footer { border-top: 1px solid var(--line); margin-top: var(--sec); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; margin-bottom: 1rem; }
.footer a { display: block; font-size: var(--fs-sm); color: var(--fg-2); padding: 0.28rem 0; transition: color 0.2s; }
.footer a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-4); }

.disclaimer { font-size: var(--fs-xs); color: var(--fg-4); line-height: 1.6; max-width: 52ch; }

/* --- 21a. FAQ und Rechtliches ------------------------------------------- */
.legal-page { min-height: 40rem; }
.legal-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 75% 10%, var(--accent-a12), transparent 30%),
    linear-gradient(180deg, var(--bg-1), var(--bg));
}
.legal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.legal-hero-in { position: relative; z-index: 1; }
.legal-hero h1 {
  max-width: 16ch;
  margin-top: 1rem;
  font-size: var(--fs-h1);
}
.legal-hero .lead { margin-top: 1.25rem; max-width: 58ch; }
.legal-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1.66fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.legal-aside {
  position: sticky;
  top: 96px;
  min-width: 0;
}
.legal-toc {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.85rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line-2);
}
.legal-toc a {
  padding: 0.35rem 0.55rem;
  color: var(--fg-3);
  font-size: var(--fs-sm);
  transition: color 0.2s, padding-left 0.25s var(--ease);
}
.legal-toc a:hover { color: var(--accent); padding-left: 0.8rem; }
.legal-aside-note {
  margin-top: 1.75rem;
  color: var(--fg-4);
  font-size: var(--fs-xs);
  line-height: 1.55;
  max-width: 24ch;
}
.legal-main { min-width: 0; max-width: 780px; }
.faq-group + .faq-group { margin-top: clamp(3.5rem, 7vw, 6rem); }
.faq-group > .eyebrow { margin-bottom: 1rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.65rem; }
.faq-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  transition: border-color 0.25s, background 0.25s;
}
.faq-item:hover, .faq-item[open] { border-color: var(--line-2); background: var(--bg-2); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.05rem 1.2rem;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s var(--spring), color 0.2s, border-color 0.2s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
  border-color: var(--accent-a40);
}
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-answer {
  padding: 0 1.2rem 1.2rem;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.legal-draft {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 3rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--accent-a40);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-a12);
}
.legal-draft-mark {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.legal-draft strong { display: block; font-family: var(--font-display); font-weight: 600; }
.legal-draft p { margin-top: 0.25rem; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55; }
.legal-prose section + section { margin-top: clamp(3rem, 6vw, 5rem); }
.legal-prose h2 { margin-bottom: 0.9rem; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.legal-prose h3 { margin: 2rem 0 0.65rem; font-size: 1.2rem; }
.legal-prose p, .legal-prose ul { max-width: 68ch; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.75; }
.legal-prose p + p { margin-top: 0.9rem; }
.legal-prose ul { margin-top: 1rem; padding-left: 1.2rem; }
.legal-prose li + li { margin-top: 0.45rem; }
.legal-address {
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--accent);
  background: var(--bg-1);
  color: var(--fg-2);
  font-style: normal;
  line-height: 1.8;
}
.legal-address strong { color: var(--fg); }
.legal-facts {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
  gap: 0.65rem 1.25rem;
  max-width: 680px;
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  font-size: var(--fs-sm);
}
.legal-facts dt { color: var(--fg-4); font-family: var(--font-mono); font-size: var(--fs-xs); }
.legal-facts dd { min-width: 0; margin: 0; color: var(--fg-2); overflow-wrap: anywhere; }
.legal-placeholder { color: var(--accent); }
@media (max-width: 820px) {
  .legal-layout { grid-template-columns: 1fr; gap: 2.25rem; }
  .legal-aside { position: static; }
  .legal-toc {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0 0 0.65rem;
    border-left: 0;
    border-bottom: 1px solid var(--line-2);
  }
  .legal-toc a { padding-inline: 0; }
  .legal-toc a:hover { padding-left: 0.2rem; }
  .legal-aside-note { max-width: 48ch; margin-top: 1rem; }
}
@media (max-width: 560px) {
  .legal-hero h1 { max-width: 12ch; }
  .legal-draft { margin-bottom: 2rem; }
  .legal-facts { grid-template-columns: 1fr; gap: 0.25rem; }
  .legal-facts dd { margin-bottom: 0.65rem; }
  .legal-facts dd:last-child { margin-bottom: 0; }
}

/* --- 21b. Redaktionsstand ------------------------------------------------ */
.reviewbox {
  padding: 1rem 1.15rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--bg-1);
  border-left: 3px solid var(--line-3);
}
.reviewbox.r-ok     { border-left-color: var(--accent); }
.reviewbox.r-revise { border-left-color: var(--danger); }
.revdot {
  width: 18px; height: 18px; flex: none; border-radius: 99px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 1;
}
.revdot.r-ok     { color: var(--accent-ink); background: var(--accent); }
.revdot.r-revise { color: var(--bg); background: var(--danger); }

.review-note {
  margin-top: 0.6rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2);
  white-space: pre-wrap;
}

/* Inhaltsübersicht in der Verwaltung */
.crow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem;
  align-items: flex-start; padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
  transition: background 0.2s;
}
.crow:hover { background: var(--bg-1); }
.crow.r-ok     { border-left-color: var(--accent); }
.crow.r-revise { border-left-color: var(--danger); }
.crow-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.crow-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.crow-title:hover { color: var(--accent); }
.crow-meta { font-size: var(--fs-xs); color: var(--fg-4); }
.crow-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.luna-handoff {
  display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.65rem;
  padding: 1rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg-2);
}
.luna-handoff-fields { display: grid; grid-template-columns: minmax(220px, 0.55fr) minmax(280px, 1fr); gap: 0.85rem; align-items: start; }
.luna-handoff .textarea { min-height: 88px; }
.luna-warning {
  padding: 0.7rem 0.8rem; border-left: 2px solid var(--danger);
  background: var(--bg-3); color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.5;
}
.pill.luna-state { border-color: var(--line-2); }
.pill.luna-state.s-running { border-color: var(--k-wiki); color: var(--k-wiki); }
.pill.luna-state.s-completed { border-color: var(--accent-a40); color: var(--accent); }
.pill.luna-state.s-failed { border-color: var(--danger); color: var(--danger); }

/* Serielle Artikelqueue in der Verwaltung */
.luna-queue { gap: 1.5rem; }
.luna-overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: 1rem; }
.luna-controls, .luna-worker { display: flex; flex-direction: column; gap: 1.15rem; }
.luna-panel-head { gap: 1rem; align-items: flex-start; }
.luna-panel-head h3, .luna-worker h3 { margin-top: 0.25rem; font-size: var(--fs-h3); }
.luna-worker-dot {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs);
}
.luna-worker-dot::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--fg-4); box-shadow: 0 0 0 4px var(--line);
}
.luna-worker-dot.online { color: var(--accent); }
.luna-worker-dot.online::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-a12); }
.luna-switch {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.85rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); text-align: left;
  background: var(--bg-2); transition: border-color 0.2s, background 0.2s;
}
.luna-switch:hover { border-color: var(--line-3); }
.luna-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.luna-switch > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.luna-switch strong { font-size: var(--fs-sm); }
.luna-switch small { color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.45; }
.luna-switch-track {
  position: relative; width: 2.7rem; height: 1.45rem; flex: none; padding: 0.15rem;
  border-radius: 99px; background: var(--bg-3); border: 1px solid var(--line-3);
}
.luna-switch-track span {
  display: block; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--fg-3); transition: transform 0.2s var(--ease), background 0.2s;
}
.luna-switch.on { border-color: var(--accent-a40); background: var(--accent-a08); }
.luna-switch.on .luna-switch-track { border-color: var(--accent-a40); }
.luna-switch.on .luna-switch-track span { transform: translateX(1.2rem); background: var(--accent); }
.luna-facts { display: flex; flex-direction: column; gap: 0; }
.luna-facts > div {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.52rem 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.luna-facts > div:last-child { border-bottom: 0; }
.luna-facts dt { color: var(--fg-3); }
.luna-facts dd { margin: 0; text-align: right; color: var(--fg-2); }
.luna-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; }
.luna-count {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1);
}
.luna-count strong { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; }
.luna-count span { color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; }
.luna-count.s-running strong { color: var(--k-wiki); }
.luna-count.s-completed strong { color: var(--accent); }
.luna-count.s-failed strong { color: var(--danger); }
.luna-jobs { display: flex; flex-direction: column; gap: 0.75rem; }
.luna-job {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem;
  border-left: 3px solid var(--line-3);
}
.luna-job.s-running { border-left-color: var(--k-wiki); }
.luna-job.s-completed { border-left-color: var(--accent); }
.luna-job.s-failed { border-left-color: var(--danger); }
.luna-job-main { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.luna-job-title { width: fit-content; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.luna-job-title:hover { color: var(--accent); }
.luna-job-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; min-width: 150px; }
.luna-instruction, .luna-detail, .luna-result { color: var(--fg-2); font-size: var(--fs-sm); white-space: pre-wrap; }
.luna-instruction { padding-left: 0.75rem; border-left: 2px solid var(--line-3); }
.luna-detail { color: var(--fg-3); }
.luna-result { color: var(--accent); }
.luna-progress { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.2rem; color: var(--fg-2); font-size: var(--fs-sm); }
.luna-progress-track { height: 5px; overflow: hidden; border-radius: 99px; background: var(--bg-3); }
.luna-progress-track span {
  display: block; width: 100%; height: 100%; transform-origin: left center;
  border-radius: inherit; background: var(--k-wiki); transition: transform 0.35s var(--ease);
}
.luna-error {
  max-height: 12rem; overflow: auto; padding: 0.75rem; border-radius: var(--r-xs);
  background: var(--bg-3); color: var(--danger); font-size: var(--fs-xs);
  line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Molekuelkarte aktualisieren. Erbt bewusst die Luna-Klassen, es ist
   dieselbe Sache: ein Auftrag, ein Host-Worker, ein Fortschritt. Nur die
   Schrittliste ist eigen. */
.karte-schritte, .karte-luecken { font-size: var(--fs-sm); color: var(--fg-3); }
.karte-schritte summary, .karte-luecken summary { cursor: pointer; color: var(--fg-2); }
.karte-schritt { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.4rem 0; }
.karte-schritt span { display: flex; flex-direction: column; gap: 0.1rem; }
.karte-schritt strong { color: var(--fg-1); font-weight: 600; }
.karte-schritt small { color: var(--fg-3); }
.karte-luecken p { margin: 0.5rem 0; overflow-wrap: anywhere; }
.karte-abdeckung { display: flex; flex-direction: column; gap: 0.55rem; }
.karte-abdeckung .luna-facts dd { font-variant-numeric: tabular-nums; }
.karte-abdeckung .luna-facts dd.karte-fehlt { color: var(--warning); }
.karte-abdeckung .luna-facts dt { cursor: help; }

/* Zusammenspiel: die Score-Form des bestehenden Scorers, mit Aufschluesselung. */
.zsp-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
.zsp-form .input:first-child { flex: 1 1 22rem; }
.zsp-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.4rem; align-items: center; }
.zsp-score { display: flex; align-items: center; gap: 0.7rem; }
.zsp-score-zahl { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.zsp-score-text small { color: var(--fg-3); }
.zsp-konfidenz small { color: var(--fg-3); font-size: var(--fs-sm); }
.zsp-hinweis { grid-column: 1 / -1; margin: 0; }
.zsp-faktor { border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.zsp-faktor:last-child { border-bottom: 0; }
.zsp-faktor > summary { cursor: pointer; list-style: none; }
.zsp-faktor > summary::-webkit-details-marker { display: none; }
.zsp-faktor-bar { pointer-events: none; }
.zsp-roh { margin-left: 0.5rem; color: var(--fg-3); font-style: normal; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.zsp-leer { color: var(--fg-3); font-size: var(--fs-sm); margin: 0.3rem 0 0.6rem 0.6rem; }
.zsp-mischung { margin: 0.35rem 0 0.6rem 0.6rem; }
.zsp-mischung small { color: var(--fg-3); font-size: var(--fs-sm); }
.zsp-mischung-balken { height: 0.35rem; border-radius: 2px; background: var(--warning); margin-bottom: 0.3rem; overflow: hidden; }
.zsp-mischung-gerechnet { height: 100%; background: var(--accent); }
/* Die Faktoren in der Auswertung: derselbe Balken wie eine Dimension, aber
   aufklappbar. Der Knopf ist der Balken selbst. */
.zsp-kopfzeile { margin: 0.5rem 0 0.8rem; }
.zsp-faktor-kopf { display: flex; align-items: flex-start; gap: 0.8rem; width: 100%; background: none; border: 0; padding: 0.25rem 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.zsp-faktor-kopf:disabled { cursor: default; opacity: 0.75; }
.zsp-faktor-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.zsp-faktor-kopf .bar { min-width: 0; }
.zsp-faktor-icon { margin-top: -0.05rem; }
.an-block .zsp-faktor { border-bottom: 1px solid var(--line); padding: 0.15rem 0; }
.an-block .zsp-faktor:last-of-type { border-bottom: 0; }
/* System- und Zieltabelle: zwei Balken je Zeile, nie miteinander verrechnet. */
.zsp-tabelle { margin-top: 1.1rem; }
.zsp-tabelle-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.zsp-zeile { border-bottom: 1px solid var(--line); }
.zsp-zeile:last-child { border-bottom: 0; }
.zsp-zeile-kopf { display: flex; align-items: center; gap: 0.9rem; width: 100%; background: none; border: 0; padding: 0.45rem 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.zsp-zeile-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.zsp-zeile-name { flex: 1 1 12rem; min-width: 0; }
.zsp-zeile-knoten { margin-left: 0.5rem; color: var(--fg-3); font-style: normal; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.zsp-zeile-balken { flex: 1 1 10rem; display: flex; flex-direction: column; gap: 0.2rem; }
/* Als <span> gebaut, weil ein <div> im <button> ungueltiges HTML waere. Dann
   muessen Spur **und** Fuellung ausdruecklich Bloecke sein: `height` und
   `transform: scaleX()` wirken auf Inline-Elemente nicht, und die Balken
   standen deshalb auf null Pixel. */
.zsp-zeile-balken .bar-track,
.zsp-zeile-balken .bar-fill { display: block; }
.zsp-konf .bar-fill { background: var(--accent); opacity: 0.65; }
.zsp-zeile-detail { padding: 0 0 0.6rem 0.6rem; }
.zsp-pfad-knopf { background: none; border: 0; padding: 0; margin-left: 0.6rem; color: var(--accent-text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }
@media (max-width: 640px) { .zsp-zeile-kopf { flex-direction: column; align-items: stretch; gap: 0.3rem; } }
/* Der gerechnete Gegenwert unter einer Dimension. Schmaler und blasser: er
   steht daneben, nicht darin. */
.an-dim-gerechnet { margin-top: 0.25rem; padding-left: 0.9rem; border-left: 2px solid var(--line-2); }
.an-dim-gerechnet .bar-track { height: 0.25rem; }
.an-dim-gerechnet .bar-fill { opacity: 0.55; }
.an-dim-gerechnet small { display: block; margin-top: 0.15rem; color: var(--fg-3); font-size: var(--fs-sm); }
.an-dim-gerechnet em { font-style: normal; color: var(--fg-4); cursor: help; }
.zsp-kategorie { margin: 0.5rem 0 0.7rem 0.6rem; }
.zsp-kategorie-kopf { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--fg-2); }
.zsp-kategorie-kopf span { font-variant-numeric: tabular-nums; }
.zsp-punkte { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.zsp-punkte > li { padding: 0.3rem 0; border-bottom: 1px dashed var(--line); }
.zsp-punkte > li:last-child { border-bottom: 0; }
.zsp-punkt-name { color: var(--fg-1); }
.zsp-punkt-wert { float: right; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.zsp-punkt-wert em { margin-left: 0.5rem; font-style: normal; }
.zsp-durch { clear: both; font-size: var(--fs-sm); color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.zsp-offen { font-style: italic; }
/* Risikominderungs-Abdeckung: ein schmaler Balken je Endpunkt, wie viel der
   Belastung abgefangen ist, und ein Hinweis, wo die Dosis knapp ist. */
.zsp-deckung { height: 0.25rem; margin: 0.3rem 0 0.2rem; clear: both; }
.zsp-durch em { font-style: normal; color: var(--fg-4); }
.zsp-knapp em { color: var(--warning); }
/* Die Waage: zwei Balken, die von der Mitte aus gegeneinander laufen. */
/* Was ausgelassen oder nur einmal gezaehlt wurde. Beides muss sichtbar
   bleiben: eine Luecke, die aussieht wie eine Entwarnung, ist schlimmer als
   gar keine Anzeige. */
.zsp-luecke { border-left: 3px solid var(--warning); padding-left: 0.7rem; }
.zsp-datenlage { margin-top: 1.1rem; }
.zsp-luecken { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: var(--fs-sm); }
.zsp-luecken > li { padding: 0.25rem 0; border-bottom: 1px dashed var(--line); }
.zsp-luecken > li:last-child { border-bottom: 0; }
.zsp-luecken em { color: var(--fg-3); font-style: normal; }
.zsp-doppelt { font-size: var(--fs-sm); color: var(--fg-3); }
.zsp-paar-doppelt { opacity: 0.72; }

.zsp-paar { margin: 0.6rem 0 0.9rem 0.6rem; }
.zsp-paar-kopf { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }

/* Paare am selben Endpunkt stehen unter einer Ueberschrift. Drei Androgene am
   Muskelabbau ergeben drei Paare, und mit vertauschten Treiberrollen sechs
   Zeilen: der Endpunktname stand sechsmal fett untereinander und die Tabelle
   las sich wie sechs Befunde, wo drei die ganze Auskunft sind. */
.zsp-paargruppe { margin: 0.7rem 0 0.2rem; }
.zsp-paargruppe-kopf {
  display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 0.3rem; padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
}
.zsp-paargruppe-kopf em {
  margin-left: auto; font-style: normal;
  font-size: var(--fs-sm); color: var(--fg-3);
}
.zsp-mehr {
  background: none; border: 0; padding: 0.2rem 0;
  font-size: var(--fs-sm); color: var(--fg-3);
  text-decoration: underline; cursor: pointer;
}
.zsp-mehr:hover { color: var(--fg-1); }
.zsp-paar-ziel { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-3); }
.zsp-versetzt { font-size: var(--fs-sm); color: var(--warning); }
/* Eine Spurzeile je Stoff, der Name an dem Ende, an dem sein Balken liegt.
   Beide Stoffe in einer Spur hiess: zwei gleichlaeufige Balken lagen
   uebereinander und sahen aus wie einer, und die Namen standen fest links und
   rechts, ohne dass die Seite etwas bedeutete. */
.zsp-waage { display: grid; gap: 0.25rem; margin: 0.4rem 0 0.15rem; }
.zsp-waage-zeile {
  display: grid; grid-template-columns: minmax(0, 13rem) 1fr minmax(0, 13rem);
  align-items: center; gap: 0.5rem;
}
.zsp-waage-marke {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem;
  min-width: 0;
}
.zsp-waage-zeile > .zsp-waage-marke:first-child { justify-content: flex-end; }
.zsp-waage-name {
  font-size: var(--fs-sm); color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Das Treiberprotein steht an seinem Stoff. Als gemeinsame Kopfzeile
   `AR / CYP19A1` war nach dem Seitenwechsel nicht mehr abzulesen, welches
   Protein zu welchem der beiden gehoert. */
.zsp-waage-treiber { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.zsp-waage-spur { position: relative; height: 0.9rem; background: var(--bg-2); border-radius: 3px; }
.zsp-waage-mitte { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.zsp-waage-balken { position: absolute; top: 0.15rem; height: 0.6rem; border-radius: 2px; }
.zsp-waage-balken.hoch { background: var(--accent); }
.zsp-waage-balken.runter { background: var(--warning); }
.zsp-paar-grund { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: var(--fg-3); }
.zsp-gruppe-grund { margin: 0 0 0.4rem; }
/* Die Aussage der Gruppe in einem Satz: Zielrichtung, Wirkrichtung, Beziehung.
   Sie steht ueber der technischen Begruendung, weil sie die Frage beantwortet,
   die davor kommt -- "warum ist das guenstig" statt "welche Kante war es". */
.zsp-paargruppe-aussage {
  margin: 0.15rem 0 0.55rem; color: var(--fg-2); font-size: var(--fs-sm);
  line-height: 1.5; max-width: 74ch;
}
@media (max-width: 560px) {
  .zsp-waage-zeile { grid-template-columns: minmax(0, 7rem) 1fr minmax(0, 7rem); }
}
@media (max-width: 720px) { .zsp-kopf { grid-template-columns: 1fr; } }
.karte-lauf { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.karte-lauf li {
  display: grid; grid-template-columns: 1fr auto; gap: 0.4rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line-3);
  font-size: var(--fs-sm); color: var(--fg-3);
}
.karte-lauf li:last-child { border-bottom: 0; }
.karte-lauf li.s-fertig > span:first-child { color: var(--fg-2); }
.karte-lauf li.s-laeuft > span:last-child { color: var(--accent); }
.karte-lauf li.s-fehler > span:last-child { color: var(--danger); }
.karte-lauf pre {
  grid-column: 1 / -1; max-height: 9rem; overflow: auto; margin: 0.25rem 0 0;
  padding: 0.5rem; border-radius: var(--r-xs); background: var(--bg-3);
  font-size: var(--fs-xs); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .crow { grid-template-columns: 1fr; }
  .crow-actions { justify-content: flex-start; }
  .luna-handoff-fields, .luna-overview, .luna-job { grid-template-columns: 1fr; }
  .luna-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luna-job-side { align-items: flex-start; min-width: 0; }
}

/* --- 21c. Rezepte -------------------------------------------------------- */
.macros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.5rem; }
.macros > div {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 0.7rem; border-radius: var(--r-sm); background: var(--bg-2);
}
.macros .v { font-size: 1.125rem; color: var(--fg); }
.macros .v small { font-size: var(--fs-xs); color: var(--fg-4); margin-left: 2px; }
.macros .k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); }

.ingredients { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.ingredients li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem;
  font-size: var(--fs-sm); align-items: baseline;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--line);
}
.ingredients li:last-child { border-bottom: 0; padding-bottom: 0; }
.ingredients .mono { font-size: var(--fs-xs); }

/* --- 22. Scroll reveal --------------------------------------------------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* --- 23. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .cat-body p { opacity: 1; transform: none; }
  .analysis-loading-mark { animation: none; opacity: 0.7; }
  .analysis-loading-fill { animation: none; transform: scaleX(0.62); }
}

/* ==========================================================================
   ANALYSE
   Eine Anzeige fuer alle vier Auswertungen. Der Score steht gross, die
   Begruendung klappt darunter auf: ohne sie ist eine Zahl wertlos.
   ========================================================================== */

.an-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 0; border: 0; background: none;
}
.an-score { display: flex; align-items: baseline; gap: 0.4rem; color: var(--score-accent); }
.an-score.warn { color: var(--warning); }
.an-score.hot { color: var(--danger); }
.an-score .n { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 4rem); font-weight: 700; line-height: 1; }
.an-score .u { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.an-head-meta { min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.65rem; }
.an-engine { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); }

.an-report { display: block; }
.an-report-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
}
.an-report-copy { min-width: 0; padding-top: 0.4rem; }
.an-scorebox {
  position: sticky; top: 96px; min-width: 0; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line-2); border-radius: clamp(1.8rem, 4vw, 3rem);
  background: var(--bg-1); box-shadow: var(--shadow-2);
}
.an-scorebox::-webkit-scrollbar { width: 0.55rem; }
.an-scorebox::-webkit-scrollbar-track { background: transparent; }
.an-scorebox::-webkit-scrollbar-thumb { background: var(--line-2); border: 0.15rem solid transparent; border-radius: 99px; background-clip: padding-box; }

.split-body-map {
  margin-top: 2.2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.split-body-map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
}

.split-body-map-head .label { color: var(--fg-3); }
.split-body-map-head > span {
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.split-body-views {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.55rem, 2vw, 1rem);
  padding: .25rem 0 .1rem;
}

.split-body-view {
  display: flex;
  min-width: 0;
  flex: 0 1 7.6rem;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: .59rem;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.split-body-icon {
  display: block;
  width: 7.6rem;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.split-body-silhouette > path {
  fill: var(--split-body-base);
  stroke: var(--split-body-outline);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.split-body-neutral > path {
  fill: var(--split-body-detail);
  stroke: var(--split-body-outline);
  stroke-width: .85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
  vector-effect: non-scaling-stroke;
}

.split-body-region { cursor: help; }
.split-body-region path {
  fill: currentColor;
  stroke: var(--split-body-outline);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .94;
  vector-effect: non-scaling-stroke;
  transition: filter 140ms var(--ease), opacity 140ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .split-body-region:hover path {
    filter: brightness(1.14) saturate(1.06);
    opacity: 1;
  }
}

.split-body-scale {
  height: .3rem;
  margin: .15rem .4rem 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--danger), var(--warning) 27%, var(--accent) 50%, var(--warning) 73%, var(--danger));
  overflow: hidden;
}

.split-body-scale-labels {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: .25rem;
  margin: .35rem .4rem 0;
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: .57rem;
  line-height: 1.1;
}
.split-body-scale-labels span:first-child { text-align: left; }
.split-body-scale-labels strong {
  color: var(--fg-3);
  font-weight: 600;
  text-align: center;
}
.split-body-scale-labels span:last-child { text-align: right; }

.an-dims { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.75rem; }
.an-dim { padding: 0; }
.an-dim:last-child { padding-bottom: 0; }
.an-dim-head {
  display: flex; align-items: flex-start; gap: 0.8rem; width: 100%;
  background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: default;
}
.an-dim-icon {
  display: grid; flex: 0 0 1.9rem; width: 1.9rem; height: 1.9rem;
  place-items: center; margin-top: -0.1rem; color: var(--fg-2);
}
.an-dim-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.an-dim-info {
  display: inline-grid; width: 1.08rem; height: 1.08rem; place-items: center;
  margin: 0 0 0 0.38rem; padding: 0; vertical-align: -0.08rem;
  border: 1px solid var(--line-3); border-radius: 50%;
  background: transparent; color: var(--fg-3); cursor: help;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; line-height: 1;
  transition: border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.an-dim-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-dim:focus-within .an-dim-info {
  border-color: var(--accent-a50); color: var(--accent-text);
  box-shadow: 0 0 0 0.18rem var(--accent-a08), 0 0 0.7rem var(--accent-a40);
}
.an-confidence-info { display: inline-flex; align-items: center; vertical-align: middle; }
.an-confidence-info:focus-within .an-dim-info {
  border-color: var(--accent-a50); color: var(--accent-text);
  box-shadow: 0 0 0 0.18rem var(--accent-a08), 0 0 0.7rem var(--accent-a40);
}
@media (hover: hover) and (pointer: fine) {
  .an-dim:hover .an-dim-info {
    border-color: var(--accent-a50); color: var(--accent-text);
    box-shadow: 0 0 0 0.18rem var(--accent-a08), 0 0 0.7rem var(--accent-a40);
  }
  .an-confidence-info:hover .an-dim-info {
    border-color: var(--accent-a50); color: var(--accent-text);
    box-shadow: 0 0 0 0.18rem var(--accent-a08), 0 0 0.7rem var(--accent-a40);
  }
}
.an-dim-tooltip {
  position: fixed; z-index: 520; display: flex; flex-direction: column; gap: 0.48rem;
  padding: 0.78rem 0.85rem; pointer-events: none;
  border: 1px solid var(--line-2); border-radius: 0.8rem;
  background: var(--bg-1); box-shadow: var(--shadow-2);
  color: var(--fg-2); font-size: 0.79rem; line-height: 1.48;
}
.an-dim-tooltip-score {
  padding-top: 0.45rem; border-top: 1px solid var(--line);
  color: var(--fg-3);
}
.an-dim-tooltip-score strong { color: var(--fg-2); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .an-dim-info { transition: none; }
}
.an-findings { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.an-finding { display: flex; gap: 0.7rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-2); }
.an-finding .mark { flex: none; font-size: 0.6rem; line-height: 1.9; color: var(--fg-4); }
.an-finding.lvl-achtung .mark { color: var(--danger); }
.an-finding.lvl-hinweis .mark { color: var(--warning); }
.an-finding p { margin: 0; }
.an-refs { margin-top: 0.35rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.an-refs a { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-3); }
.an-refs a:hover { color: var(--accent); }

.an-block { display: flex; flex-direction: column; gap: 0.25rem; }

/* **Ein neuer Block ist ein neues Thema und braucht den Abstand dafuer.**
   „Komplexitaet und Compliance" stand unmittelbar unter dem letzten Balken der
   Systemliste darueber und las sich wie dessen Beschriftung. Die Bloecke im
   Textteil haben deshalb einen gemeinsamen Rhythmus, statt dass jeder sein
   eigenes `margin-bottom` mitbringt und der erste gar keinen Abstand nach oben
   hat. */
.an-report-copy > * + * { margin-top: 2.5rem; }
.an-dimension-findings { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 0; }
/* Die Ueberschrift traegt eine Linie unter sich. Eine Versalienzeile allein
   sieht neben einem Balken wie eine Achsenbeschriftung aus; mit der Linie ist
   sie ein Kopf. */
.an-dimension-finding > .label, .an-block > .label {
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--line);
}
.an-block > .label + * { margin-top: 0.35rem; }
.meal-references { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 0; }
.meal-reference-section { min-width: 0; }
.meal-reference-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.45rem;
}
.meal-reference-list { display: grid; min-width: 0; }
.meal-reference-list-mikro {
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem;
}
.meal-reference-row { min-width: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.meal-reference-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; min-width: 0;
}
.meal-reference-row-head .k { min-width: 0; color: var(--fg-2); }
.meal-reference-row-head .k .auto-link {
  color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line-3);
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.meal-reference-row-head .k .auto-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.meal-reference-row-head .v {
  flex: none; color: var(--fg); font-family: var(--font-mono); font-size: var(--fs-xs);
}
.meal-reference-note { color: var(--fg-3); }
.meal-reference-track {
  position: relative; height: 0.45rem; margin-top: 0.4rem;
  border-radius: 99px; background: var(--bg-2); overflow: visible;
}
.meal-reference-band {
  position: absolute; top: 0; height: 100%; border-radius: 99px;
  background: color-mix(in srgb, var(--score-accent) 42%, transparent);
}
.meal-reference-marker {
  position: absolute; top: 50%; width: 0.72rem; height: 0.72rem;
  transform: translate(-50%, -50%); border: 2px solid var(--bg-1);
  border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 1px var(--fg-2);
}
.meal-reference-row.ausserhalb .meal-reference-marker {
  background: var(--warning); box-shadow: 0 0 0 1px var(--warning);
}
.meal-coverage-track {
  position: relative; height: 0.45rem; margin-top: 0.4rem;
  border-radius: 99px; background: var(--bg-2); overflow: hidden;
}
.meal-coverage-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--score-accent-deep), var(--score-accent));
  transform-origin: left; transition: width 0.7s var(--ease-out);
}
.meal-reference-scale {
  margin-top: 0.3rem; color: var(--fg-4);
  font-family: var(--font-mono); font-size: var(--fs-label);
}
.meal-reference-empty { color: var(--fg-3); font-size: var(--fs-sm); }
.meal-reference-help { margin-top: 0.75rem; }
.an-none { font-size: var(--fs-sm); color: var(--fg-3); }
.an-hint { font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.6; }
.analysis-token-balance {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.65rem;
  width: fit-content; max-width: 100%; margin: 0;
  padding: 0.42rem 0.7rem; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--bg-2);
  color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-sm);
}
.analysis-token-balance-label { color: var(--fg); letter-spacing: 0.04em; }
.analysis-token-balance-value { color: var(--accent); font-weight: 600; }
.analysis-token-balance-sep { color: var(--fg-4); }
.analysis-token-balance a { color: var(--fg-2); font-size: var(--fs-xs); }
.analysis-token-balance a:hover { color: var(--accent); }
.meal-live-summary { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; }
.meal-live-summary-item { white-space: nowrap; }
.meal-live-summary-item + .meal-live-summary-item::before {
  content: "·"; color: var(--fg-4); margin-right: 0.75rem;
}
.an-error { font-size: var(--fs-sm); color: var(--danger); }

/* Die Zahlen hinter einem Befund und das Gewicht einer Dimension. Beide standen
   bisher nur im JSON, obwohl der Deckel am Gewicht haengt und ANALYSE.md
   verlangt, dass jede Zahl rueckverfolgbar ist. */
.an-evidenz { margin-top: 0.35rem; font-size: var(--fs-xs); color: var(--fg-3); }
.an-evidenz summary { cursor: pointer; color: var(--fg-3); }
.an-evidenz summary:hover { color: var(--fg-2); }
.an-evidenz dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.75rem;
  margin: 0.4rem 0 0.2rem; padding-left: 0.1rem;
}
.an-evidenz dl > div { display: contents; }
.an-evidenz dt { color: var(--fg-3); }
.an-evidenz dd { margin: 0; color: var(--fg-2); }
.an-dim-gewicht {
  margin-right: 0.5rem; color: var(--fg-3); font-size: var(--fs-xs);
  font-style: normal; font-variant-numeric: tabular-nums;
}

.blut-values { margin-bottom: 2rem; }
.blut-values-list { margin-top: 0.55rem; }
.blut-value-row {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.blut-value-row:first-child { border-top: 1px solid var(--line); }
.blut-value-main {
  display: grid; grid-template-columns: minmax(10rem, 0.8fr) minmax(16rem, 1.8fr);
  gap: 1rem; align-items: center;
}
.blut-value-main.interaktiv {
  cursor: pointer; border-radius: var(--r-sm);
  transition: background-color 0.18s var(--ease), transform 0.16s var(--ease);
}
.blut-value-main.interaktiv:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.blut-value-main.interaktiv:active { transform: translateY(1px); }
.blut-value-main.interaktiv:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 0.35rem;
}
.blut-value-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.blut-value-meta strong { font-size: var(--fs-sm); }
.blut-value-name .auto-link {
  color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line-3);
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.blut-value-name .auto-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.blut-value-meta span { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-label); }
.blut-value-title { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.blut-note-hint {
  display: inline-grid; place-items: center; flex: none; width: 1.2rem; height: 1.2rem;
  padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: transparent; color: var(--accent); pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.blut-value-main.interaktiv:hover .blut-note-hint { color: var(--fg); border-color: var(--accent); }
.blut-note-hint.kritisch {
  width: 1rem; border: 0; border-radius: 0; color: var(--danger); font-size: 0.72rem;
}
.blut-value-main.interaktiv:hover .blut-note-hint.kritisch { color: var(--fg); }
.blut-value-chart { min-width: 0; }
.blut-value-head, .blut-value-scale {
  display: flex; justify-content: space-between; gap: 0.75rem;
  color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-label);
}
.blut-value-head { margin-bottom: 0.4rem; }
.blut-value-head span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blut-value-track {
  position: relative; height: 0.55rem; border-radius: 99px; overflow: visible;
  background: linear-gradient(90deg, var(--danger) 0%, var(--danger) 18%,
    var(--warning) 29%, var(--score-accent) 39%, var(--score-accent) 61%, var(--warning) 71%,
    var(--danger) 82%, var(--danger) 100%);
}
.blut-value-marker {
  position: absolute; top: 50%; width: 0.8rem; height: 0.8rem;
  transform: translate(-50%, -50%); border: 2px solid var(--bg-1);
  border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 1px var(--fg-2);
}
.blut-value-scale { margin-top: 0.35rem; }
.blut-value-findings { margin-top: 0.8rem; margin-bottom: 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }

.an-curve {
  margin-top: 2rem; padding: 1.15rem 1.2rem 1rem; border: 0;
  border-radius: var(--r); background: transparent; overflow: hidden;
}
.an-curve-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.an-curve-head p { max-width: 32rem; margin: 0.35rem 0 0; color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.55; }
.an-curve-svg { display: block; width: 100%; height: auto; margin-top: 1rem; overflow: visible; }
.an-curve-grid line { stroke: var(--line); stroke-width: 1; opacity: 0.62; }
.an-curve-axis { stroke: var(--line-2); stroke-width: 1; }
.an-curve-tick, .an-curve-x-label { fill: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }
.an-curve-x-label { fill: var(--fg-3); font-size: 12px; letter-spacing: 0.05em; }
.an-curve-line { fill: none; stroke: var(--score-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.an-curve-line.curve-1 { stroke: var(--fg-2); opacity: 0.9; stroke-dasharray: 8 5; }
.an-curve-line.curve-2 { stroke: var(--score-accent-deep); opacity: 0.85; stroke-dasharray: 2 5; }
.an-curve-line.curve-3 { stroke: var(--fg-3); opacity: 0.82; stroke-dasharray: 12 5 2 5; }
.an-curve-legend { display: grid; gap: 0.55rem; margin-top: 0.35rem; }
.an-curve-key { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; font-size: var(--fs-sm); }
.an-curve-swatch { flex: none; width: 1.25rem; height: 0.18rem; border-radius: 99px; background: var(--score-accent); }
.an-curve-swatch.curve-1 { background: var(--fg-2); }
.an-curve-swatch.curve-2 { background: var(--score-accent-deep); }
.an-curve-swatch.curve-3 { background: var(--fg-3); }
.an-curve-meta { color: var(--fg-4); font-size: var(--fs-label); }

/* --- Wirkketten aus der Molekülkarte -------------------------------------
   Der Block muss sich vom Rest der Auswertung absetzen, weil er als einziger
   nicht belegt, sondern gerechnet ist. Das trägt der gestrichelte Rahmen: er
   ist die einzige gestrichelte Kante in der Auswertung und sagt schon vor dem
   Lesen, dass hier etwas anderes steht. Farbwerte kommen keine dazu.
   -------------------------------------------------------------------------- */
.an-pfade {
  margin-top: 2rem; padding: 1.15rem 1.2rem 1.1rem;
  border: 1px dashed var(--line-3); border-radius: var(--r);
  background: var(--bg-1); gap: 0.85rem;
}
.an-pfade-warnung {
  margin: 0; color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.65;
  max-width: 44rem;
}
.an-pfade-warnung strong { color: var(--fg); }

.an-pfad {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.an-pfad-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.an-pfad-kopf strong { font-size: var(--fs-sm); }
.an-pfad-dosis, .an-pfad-zahlen {
  color: var(--fg-4); font-family: var(--font-mono); font-size: var(--fs-label);
}
.an-pfad-anker { margin: 0; color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.6; }

.an-pfad-ziele { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.an-pfad-ziel {
  padding: 0.6rem 0.75rem; border-radius: var(--r-xs);
  background: var(--bg-2); border-left: 2px solid var(--line-3);
}
.an-pfad-ziel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.an-pfad-anteil {
  color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-label);
}
.an-pfad-ziel-text { margin: 0.3rem 0 0.25rem; font-size: var(--fs-xs); line-height: 1.6; }
.an-pfad-zahlen { margin: 0; }

.an-pfad-kette { margin-top: 0.35rem; display: grid; gap: 0.5rem; }
.an-pfad-kette-kopf {
  margin: 0; color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.6;
}

/* Der Weg ist eine Kette und stand in einem schmalen hohen Kasten. Breit und
   flach ist die Form, die zu ihm passt: `breadthfirst` legt ihn von links nach
   rechts, und die Fläche gibt ihm den Platz dafür. */
.an-pfad-karte { margin: 0.5rem 0 0; width: 100%; }
.an-pfad-karte-knopf {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--r-sm);
}
.an-pfad-karte-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Feste Höhe, weil Cytoscape in einen Container ohne Maß nichts zeichnet. */
.an-pfad-karte-flaeche {
  height: 190px; width: 100%; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--line);
}

/* Vollbild wie in der Molekülkarte: Klick aufs Bild öffnet, Klick daneben und
   Escape schließen. */
.an-pfad-vollbild {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 2vmin;
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  backdrop-filter: blur(2px);
}
.an-pfad-vollbild-inhalt {
  width: min(96vw, 1400px); display: flex; flex-direction: column; gap: 0.6rem;
}
.an-pfad-vollbild .an-pfad-karte-flaeche { height: min(82vh, 900px); }
.an-pfad-vollbild-fuss {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; color: var(--fg-3); font-size: var(--fs-sm);
}
.an-pfad-karte figcaption {
  margin-top: 0.4rem; color: var(--fg-4); font-size: var(--fs-label);
}

.an-pfade-mehr {
  align-self: flex-start; margin-top: 0.35rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--fg-3); font-size: var(--fs-xs);
  text-decoration: underline; text-underline-offset: 3px;
}
.an-pfade-mehr:hover { color: var(--fg-2); }
.an-pfade-rechenweg { display: grid; gap: 0.6rem; }
.an-pfade-rechenweg p {
  margin: 0; max-width: 44rem; color: var(--fg-3);
  font-size: var(--fs-xs); line-height: 1.65;
}

/* Wo die Stoffe sich treffen. Erbt den gestrichelten Rahmen von .an-pfade,
   weil es dieselbe Sorte Aussage ist: gerechnet, nicht bewertet. */
.an-weg {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.7rem 0; border-top: 1px solid var(--line-3);
}
.an-weg:first-of-type { border-top: 0; }
.an-weg-kopf { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.an-weg-kopf strong { color: var(--fg-1); }
.an-weg-art {
  padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--bg-3);
  color: var(--fg-3); font-size: var(--fs-xs); white-space: nowrap;
}
.an-weg-art.warn { color: var(--warn); }
.an-weg-art.hot { color: var(--danger); }
.an-weg-satz { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.6; }
.an-weg-stoffe { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.an-weg-stoff {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem;
  font-size: var(--fs-sm); color: var(--fg-3);
}
.an-weg-name { color: var(--fg-2); }
.an-weg-rolle {
  margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 99px;
  background: var(--bg-3); color: var(--fg-3); font-size: var(--fs-xs);
}
.an-weg-richtung { text-align: right; }
.an-weg-timing { margin: 0; color: var(--fg-3); font-size: var(--fs-xs); }
@media (max-width: 560px) {
  .an-weg-stoff { grid-template-columns: 1fr; }
  .an-weg-richtung { text-align: left; }
}

@media (max-width: 900px) {
  .an-report-layout { grid-template-columns: 1fr; }
  .an-scorebox {
    position: static; order: -1; max-height: none; overflow: visible;
    overscroll-behavior: auto; scrollbar-gutter: auto;
  }
}

@media (max-width: 680px) {
  .blut-value-main { grid-template-columns: 1fr; gap: 0.65rem; }
  .meal-reference-list-mikro { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .an-curve-key { flex-wrap: wrap; }
  .an-curve-meta { flex-basis: 100%; margin-left: 1.75rem; }
}

.an-grid {
  display: grid; gap: 0.5rem; align-items: center;
  grid-template-columns: minmax(0, 2.2fr) 5rem 5rem 5.5rem 4.5rem auto;
}
.an-grid-head {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4);
}
.an-daynum { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); flex: none; }

.an-row {
  display: flex; align-items: center; gap: 0.9rem; font-size: var(--fs-sm);
  padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.an-row-score { font-family: var(--font-mono); color: var(--score-accent); flex: none; min-width: 2.2rem; }
.an-row-score.warn { color: var(--warning); }
.an-row-score.hot { color: var(--danger); }
.an-row-art {
  flex: none; min-width: 7.5rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3);
}

.an-confirm-backdrop {
  position: fixed; inset: 0; z-index: 220;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(6, 7, 9, 0.82); backdrop-filter: blur(8px);
  animation: molIn 0.18s var(--ease-out);
}
.an-confirm-dialog {
  position: relative; width: min(28rem, 100%);
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.35rem, 4vw, 2rem);
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  transform-origin: center;
}
.an-confirm-dialog:focus { outline: none; }
.an-confirm-dialog h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.an-confirm-dialog p { margin: 0; color: var(--fg-2); line-height: 1.55; }
.an-confirm-name { color: var(--fg); overflow-wrap: anywhere; }
.an-confirm-close {
  position: absolute; top: 0.8rem; right: 0.8rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 0; border-radius: 99px; background: none; color: var(--fg-3);
  font-size: 1.25rem; cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease-out;
}
.an-confirm-close:hover { background: var(--bg-3); color: var(--fg); }
.an-confirm-close:active { transform: scale(0.97); }
.an-confirm-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-confirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.45rem; }

@media (max-width: 720px) {
  .an-grid { grid-template-columns: 1fr 1fr 1fr auto; }
  .an-grid-head { display: none; }
}

/* --- Auswertung: Schaufenster und Angebot -------------------------------- */

.aw-punkte {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.aw-punkte h3 { font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.aw-punkte p { font-size: var(--fs-sm); color: var(--fg-3); line-height: 1.65; margin: 0; }

/* Eine Art, die es noch nicht gibt, bleibt sichtbar und ist nicht waehlbar.
   Weglassen waere unehrlich, ausgrauen erklaert sich selbst. */
.kind-opt.aw-bald { opacity: 0.5; cursor: default; }
.kind-opt.aw-bald:hover { transform: none; border-color: var(--line); }
.aw-marke {
  margin-left: 0.5rem; padding: 0.1rem 0.4rem; border-radius: 99px;
  border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4);
  vertical-align: middle;
}

/* --- Auswertung auf der Startseite --------------------------------------- */

.aw-teaser {
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg-1);
}
.aw-teaser h2 { margin-bottom: 0.75rem; }
.aw-teaser .lede { margin-bottom: 1.25rem; }
.aw-teaser-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.aw-teaser-liste li { display: flex; gap: 0.6rem; font-size: var(--fs-sm); color: var(--fg-2); }
.aw-teaser-liste .m { color: var(--accent); flex: none; }
.aw-teaser-bild { display: flex; flex-direction: column; gap: 0.9rem; }

/* Steht ueber den Angebotskarten, solange Stripe im Testbetrieb laeuft. Nutzt
   den vorhandenen Warnton, damit die Zeile nicht wie ein Hinweis aussieht,
   sondern wie eine Ansage. */
.zahlung-testmodus {
  padding: 0.7rem 0.9rem; border: 1px solid var(--warning);
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.6;
}

.landing-offer-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
  margin-top: 1.25rem;
}
.landing-offer-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line-2);
  border-radius: var(--r); background: var(--bg-1); box-shadow: var(--shadow-1);
  transition: transform 0.3s var(--spring), border-color 0.25s var(--ease),
    box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.landing-offer-card::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 1.5rem; right: 1.5rem;
  height: 1px; background: var(--line-3); opacity: 0.7;
}
.landing-offer-card:hover { transform: translateY(-3px); border-color: var(--line-3); box-shadow: var(--shadow-2); }
.landing-offer-card.premium {
  border-color: var(--accent-a40);
  background: radial-gradient(circle at 100% 0%, var(--accent-a16), transparent 43%), var(--bg-1);
  box-shadow: 0 0 0 1px var(--accent-a13),
    0 0 38px -16px var(--accent-a80), var(--shadow-2);
}
.landing-offer-card.premium::before { background: var(--accent); opacity: 0.9; }
.landing-offer-card.premium:hover {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-a40),
    0 0 48px -14px var(--accent-a90), var(--shadow-3);
}
.landing-offer-label { color: var(--fg-3); }
.landing-offer-card.premium .landing-offer-label { color: var(--accent); }
.landing-offer-card h3 { margin-top: 0.7rem; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.landing-offer-price {
  margin-top: 1.25rem; color: var(--fg);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 600;
  letter-spacing: -0.025em;
}
.landing-offer-card.premium .landing-offer-price { color: var(--accent); }
.landing-offer-copy {
  max-width: 40ch; margin-top: 0.55rem; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.6;
}
.landing-offer-benefits {
  width: 100%; list-style: none; display: flex; flex-direction: column; gap: 0.55rem;
  margin: 1.35rem 0 1.6rem; padding: 0; color: var(--fg-2); font-size: var(--fs-sm);
}
.landing-offer-benefits li { display: flex; align-items: baseline; gap: 0.6rem; }
.landing-offer-check { flex: none; color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs); }
.landing-offer-card .btn { margin-top: auto; }

@media (max-width: 860px) {
  .aw-teaser { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .landing-offer-grid { grid-template-columns: 1fr; }
}

/* --- Score als Ring ------------------------------------------------------- */

.an-ring { position: relative; width: 132px; height: 132px; flex: none; color: var(--score-accent); }
.an-ring.warn { color: var(--warning); }
.an-ring.hot { color: var(--danger); }
.an-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.an-ring-spur { fill: none; stroke: var(--bg-3); stroke-width: 7; }
.an-ring-linie {
  fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round;
}
.an-ring-wert {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem; pointer-events: none;
}
.an-ring-wert .n {
  font-family: var(--font-display); font-weight: 700; font-size: 2.35rem;
  line-height: 1; letter-spacing: -0.03em; color: currentColor;
}
.an-ring-wert .u { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-4); }

/* --- Auswertung: Tagesplan mit Ruhetagen --------------------------------- */

.aw-tag { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem 1.1rem;
          display: flex; flex-direction: column; gap: 0.75rem; background: var(--bg-1);
          transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease); }
.aw-tag.ruhe { border-style: dashed; }
.aw-tag.offen { border-color: var(--line-2); }
/* Der gezogene Tag bleibt sichtbar, aber zurueckgenommen: er ist gerade eine
   Absicht und noch keine Reihenfolge. */
.aw-tag.zieht { opacity: 0.5; border-style: dashed; border-color: var(--line-3); }
.aw-tag-kopf { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.aw-tag-nr {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3); flex: none; min-width: 3.5rem;
}
.aw-griff {
  flex: none; padding: 0 0.1rem; color: var(--fg-4); line-height: 1;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.aw-griff:active { cursor: grabbing; }
.aw-tag:hover .aw-griff { color: var(--fg-2); }
.aw-tag-knoepfe { display: flex; gap: 0.15rem; align-items: center; margin-left: auto; }
.aw-tag-knoepfe .btn:disabled { opacity: 0.28; cursor: default; transform: none; }
/* Der Tagesstatus ist ein vertikaler Switch: Training sitzt oben, Ruhe unten.
   So bleibt der Zustand auf kleinem Raum sofort lesbar und der Wechsel fühlt
   sich wie ein kurzer Auf-/Ab-Schub an. */
.aw-tag-switch {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
  min-height: 2rem; padding: 0.15rem 0.45rem 0.15rem 0.2rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--bg-2);
  color: var(--fg-3); font: inherit; font-size: var(--fs-label); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.aw-tag-switch:hover { border-color: var(--line-3); color: var(--fg-2); }
.aw-tag-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.aw-tag-switch-track {
  position: relative; display: block; width: 1.15rem; height: 1.85rem;
  padding: 0.14rem; overflow: hidden; border-radius: 99px; background: var(--bg-3);
}
.aw-tag-switch-thumb {
  display: block; width: 0.87rem; height: 0.87rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(0); transition: transform 0.28s var(--spring), background 0.2s var(--ease);
}
.aw-tag-switch.ruhe .aw-tag-switch-thumb { transform: translateY(0.7rem); background: var(--fg-3); }
.aw-tag-switch.training .aw-tag-switch-label { color: var(--accent); }
.aw-tag-switch.ruhe .aw-tag-switch-label { color: var(--fg-3); }
.aw-tag-switch-label { min-width: 4.6em; text-align: center; }
.aw-tag.ruhe .btn.aw-klapp:disabled { opacity: 0.55; }
/* Der Pfeil dreht sich beim Aufklappen. `.btn.quiet:hover` setzt `transform`
   zurueck, deshalb steht hier `.btn` mit davor: sonst springt der Pfeil
   zurueck, sobald der Mauszeiger darauf liegt. */
.btn.aw-klapp { transition: transform 0.2s var(--ease); }
.btn.aw-klapp[aria-expanded="true"] { transform: rotate(180deg); }
.aw-tag-eingabe {
  display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
  animation: aw-tag-eingabe-auf 260ms var(--ease-out) both;
}
@keyframes aw-tag-eingabe-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Zugeklappt steht da, was drinsteht: die Muskeln und die Summe der Saetze.
   Das ist die Zeile, an der man erkennt, ob man den Tag oeffnen muss. */
.aw-kurz {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  width: 100%; padding: 0; background: none; border: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.aw-kurz-leer { font-size: var(--fs-xs); color: var(--fg-4); }
.aw-kurz-summe {
  flex: none; margin-left: auto; font-family: var(--font-mono);
  font-size: var(--fs-label); color: var(--fg-3);
}
.aw-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.aw-chip {
  padding: 0.12rem 0.4rem; border-radius: 99px;
  background: var(--bg-3); color: var(--fg-2);
  font-size: var(--fs-label); line-height: 1.5;
}
.aw-chip.indirekt { background: none; border: 1px dashed var(--line-2); color: var(--fg-4); }
.aw-ruhe-text { font-size: var(--fs-sm); color: var(--fg-4); flex: 1; }
.aw-uebung { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.aw-uebung-auswahl {
  flex: 1 1 14rem; min-width: 10rem; align-self: center; min-height: 2.25rem;
  display: flex; align-items: center; color: var(--fg-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.aw-uebung-auswahl.leer { color: var(--fg-4); font-size: var(--fs-sm); }

/* Übungskatalog: bewusst ohne Bildcontainer mit externem Medienpfad. */
.aw-exercise-modal {
  position: fixed; inset: 0; z-index: 220; display: flex; align-items: flex-start;
  justify-content: center; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem; background: rgba(6, 7, 9, 0.84); backdrop-filter: blur(9px);
}
.aw-exercise-dialog {
  display: flex; flex-direction: column; width: min(78rem, 100%);
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  margin-block: auto; padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2);
  box-shadow: 0 28px 80px -24px rgba(0, 0, 0, 0.95); cursor: default;
}
.aw-exercise-inline {
  display: flex; flex-direction: column; min-width: 0; gap: 0;
}
.exercises-catalog-panel { padding: clamp(1rem, 2.5vw, 1.5rem); }
.aw-exercise-inline .aw-exercise-grid {
  max-height: none; overflow: visible; padding-right: 0.1rem;
}
.aw-exercise-inline .aw-exercise-source { margin-bottom: 0; }
.aw-exercise-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  flex: none;
}
.aw-exercise-head h3 { margin-top: 0.25rem; }
.aw-exercise-close { flex: none; font-size: 1.3rem; line-height: 1; }
.aw-exercise-filters {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr);
  gap: 0.5rem; margin-top: 1rem; flex: none;
}
.aw-exercise-summary {
  display: flex; justify-content: space-between; gap: 0.75rem; margin: 0.7rem 0;
  color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-label);
}
.aw-exercise-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem;
  min-height: 0; overflow-y: auto; padding: 0.1rem 0.2rem 0.35rem 0.1rem;
}
.aw-exercise-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.aw-exercise-card:hover, .aw-exercise-card.gewählt {
  border-color: var(--line-3); transform: translateY(-1px);
}
.aw-exercise-preview {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--bg-3), var(--bg-2));
  border-bottom: 1px solid var(--line); color: var(--fg-4);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em;
}
.aw-exercise-card-copy {
  display: flex; flex: 1; flex-direction: column; gap: 0.45rem; padding: 0.75rem;
  min-width: 0;
}
.aw-exercise-card-copy h4 { margin: 0; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.aw-exercise-card-copy p { margin: 0; color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.45; }
.aw-exercise-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.aw-exercise-tags span {
  padding: 0.12rem 0.35rem; border: 1px solid var(--line); border-radius: 99px;
  color: var(--fg-3); font-size: var(--fs-label); line-height: 1.35;
}
.aw-exercise-muscles { min-height: 2.6em; }
.aw-exercise-muscles.leer { color: var(--fg-4); font-style: italic; }
.aw-exercise-details { margin-top: 0.15rem; color: var(--fg-3); font-size: var(--fs-xs); }
.aw-exercise-details summary { cursor: pointer; color: var(--fg-2); }
.aw-exercise-details summary:hover { color: var(--fg); }
.aw-exercise-details ol { margin: 0.5rem 0 0; padding-left: 1.1rem; line-height: 1.45; }
.aw-exercise-details li + li { margin-top: 0.3rem; }
.aw-exercise-card-copy .btn { align-self: flex-start; margin-top: auto; }
.aw-exercise-empty { padding: 2rem 0; color: var(--fg-3); text-align: center; }
.aw-exercise-more { align-self: center; margin-top: 0.75rem; flex: none; }
.aw-exercise-source {
  margin: 0.85rem 0 0; color: var(--fg-4); font-size: var(--fs-xs); text-align: center; flex: none;
}
@media (max-width: 1050px) {
  .aw-exercise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .aw-exercise-filters { grid-template-columns: 1fr 1fr; }
  .aw-exercise-filters .input[type="search"] { grid-column: 1 / -1; }
  .aw-exercise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .aw-exercise-modal { padding: 0.5rem; }
  .aw-exercise-dialog { max-height: calc(100dvh - 1rem); padding: 0.85rem; }
  .aw-exercise-filters { grid-template-columns: 1fr; }
  .aw-exercise-filters .input[type="search"] { grid-column: auto; }
  .aw-exercise-grid { grid-template-columns: 1fr; }
}
.an-row-titel {
  background: none; border: 0; padding: 0; text-align: left; color: inherit;
  font: inherit; cursor: pointer;
}
.an-row-titel:hover { color: var(--accent); }
.an-row-titel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.aw-stoff {
  display: grid; gap: 0.5rem; align-items: center;
  grid-template-columns: minmax(13rem, 28rem) minmax(12rem, 1.2fr) minmax(11rem, 12rem) minmax(9rem, 1fr) 7rem minmax(9rem, 11rem) auto;
}
.aw-dosis { display: flex; gap: 0.4rem; align-items: center; }
.aw-dosis .input { min-width: 0; }
.aw-dosis span { color: var(--fg-4); white-space: nowrap; font-size: var(--fs-label); }
.aw-stoff .aw-dosis {
  display: grid; grid-template-columns: minmax(0, 1fr) 6rem;
  gap: 0.4rem; align-items: center;
}
.aw-stoff .aw-dosis span { min-width: 6rem; }
.aw-stoff-box { padding: 1rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-1); }
.aw-grid-head {
  font-size: var(--fs-xs); color: var(--fg-3);
  line-height: 1.35; white-space: nowrap;
}
.aw-stoff > * { min-width: 0; }
.aw-grid-head > span { min-width: 0; }
.aw-stoff-side { grid-template-columns: minmax(13rem, 28rem) minmax(12rem, 1.2fr) 7rem minmax(9rem, 11rem) auto; }
@media (max-width: 980px) {
  .aw-stoff { grid-template-columns: minmax(0, 1.3fr) minmax(10rem, 1.1fr) minmax(10rem, 1fr) minmax(8rem, 0.9fr) 6rem minmax(8rem, 0.95fr) auto; }
  .aw-stoff-side { grid-template-columns: minmax(0, 1.3fr) minmax(10rem, 1.1fr) 6rem minmax(8rem, 0.95fr) auto; }
}
@media (max-width: 560px) {
  .aw-stoff { grid-template-columns: minmax(0, 1fr) minmax(10rem, 1fr) auto; }
  .aw-stoff.aw-grid-head { display: none; }
}

/* --- Auswertung: Mahlzeit und Blutbild ----------------------------------- */

.aw-zutat {
  display: grid; gap: 0.5rem; align-items: center;
  grid-template-columns: minmax(0, 3fr) 8rem auto;
}
.aw-blut {
  display: grid; gap: 0.5rem; align-items: center;
  grid-template-columns: minmax(0, 2.4fr) 6rem 7rem 6rem 6rem auto;
}
.aw-blut-details {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1);
}
.aw-blut-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; cursor: pointer; list-style: none;
}
.aw-blut-summary::-webkit-details-marker { display: none; }
.aw-blut-summary:hover { background: var(--bg-2); }
.aw-blut-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm); }
.aw-blut-summary-copy { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.aw-blut-summary .label { color: var(--fg-2); }
.aw-blut-toggle { color: var(--fg-3); font-size: 1.15rem; line-height: 1; transition: transform 0.25s var(--ease); }
.aw-blut-details[open] .aw-blut-toggle { transform: rotate(90deg); }
.aw-blut-panel { padding: 0 1rem 1rem; }
@media (max-width: 900px) {
  .aw-blut { grid-template-columns: 1fr 1fr auto; }
  .aw-blut.aw-grid-head { display: none; }
}
@media (max-width: 620px) {
  .aw-zutat { grid-template-columns: 1fr auto; }
}

/* --- Suchfeld mit Vorschlagsliste ---------------------------------------- */

.ss { position: relative; min-width: 0; }
.ss.aus { opacity: 0.5; pointer-events: none; }
.ss > .input { width: 100%; }
.ss-weg {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--fg-4); cursor: pointer; padding: 0.2rem;
  font-size: 0.8rem; line-height: 1;
}
.ss-weg:hover { color: var(--fg-2); }
.ss-pop {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--shadow-2); padding: 0.3rem;
  display: flex; flex-direction: column; gap: 1px;
}
.ss-gruppe {
  padding: 0.5rem 0.55rem 0.25rem; font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-4);
}
.ss-opt {
  display: flex; gap: 0.6rem; align-items: baseline; width: 100%;
  padding: 0.45rem 0.55rem; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--fg); text-align: left; cursor: pointer;
  font-size: var(--fs-sm);
}
.ss-opt.on { background: var(--bg-3); }
.ss-zusatz { color: var(--fg-4); font-size: var(--fs-label); flex: none; }
.ss-leer { padding: 0.6rem; font-size: var(--fs-sm); color: var(--fg-3); }
.ss-remote {
  margin-top: 0.25rem; padding: 0.55rem; border: 1px dashed var(--line-2);
  border-radius: var(--r-sm); background: var(--bg-1); color: var(--accent);
  text-align: left; font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.ss-remote:hover { border-color: var(--accent-a40); background: var(--accent-a08); }
.ss-remote:disabled { opacity: 0.55; cursor: wait; }
.aw-scan {
  display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start;
  padding: 0.9rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg-1);
}
.aw-scan video {
  width: min(420px, 100%); border-radius: var(--r-sm); background: #000;
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* --- Analytics in der Verwaltung ----------------------------------------- */

.analytics-dashboard { display: flex; flex-direction: column; gap: 1.25rem; }
.analytics-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-bottom: 0.25rem;
}
.analytics-toolbar .mx-hinweis { margin: 0; max-width: 62rem; }
.analytics-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.analytics-period { background: var(--bg-1); padding: 1.25rem 1.35rem; min-width: 0; }
.analytics-period strong { display: block; margin-top: 0.65rem; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.3rem); line-height: 0.95; letter-spacing: -0.055em; }
.analytics-period-caption { display: block; margin-top: 0.45rem; color: var(--fg-3); font-size: var(--fs-sm); }
.analytics-period-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.15rem; padding-top: 0.85rem; border-top: 1px solid var(--line); color: var(--fg-3); font-size: var(--fs-xs); }
.analytics-period-meta b { color: var(--fg-2); font-family: var(--font-mono); font-weight: 400; margin-right: 0.25rem; }
.analytics-grid { display: grid; gap: 1.25rem; }
.analytics-grid-main { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.analytics-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analytics-panel { min-width: 0; gap: 1.1rem; }
.analytics-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.analytics-panel-head h3 { margin-top: 0.35rem; font-size: 1.35rem; }
.analytics-bars { display: flex; flex-direction: column; gap: 0.95rem; }
.analytics-bar { min-width: 0; }
.analytics-bar .bar-track { height: 5px; }
.analytics-bar .bar-fill { display: block; }
.analytics-chart { min-width: 0; margin-top: 0.25rem; }
.analytics-chart-legend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.35rem; font-size: var(--fs-xs); color: var(--fg-2); }
.analytics-chart-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.analytics-key { display: inline-block; width: 18px; height: 2px; border-radius: 99px; background: var(--accent); }
.analytics-key.sessions { background: var(--k-wiki); }
.analytics-chart svg { width: 100%; height: auto; overflow: visible; }
.analytics-gridline { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.analytics-line.pageviews { stroke: var(--accent); }
.analytics-line.sessions { stroke: var(--k-wiki); stroke-dasharray: 5 5; }
.analytics-chart-labels { display: flex; justify-content: space-between; padding-inline: 0.1rem; color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; }
.analytics-table-wrap { width: 100%; overflow-x: auto; }
.analytics-table { min-width: 100%; }
.analytics-table th, .analytics-table td { white-space: nowrap; }
.analytics-table td:first-child { white-space: normal; min-width: 0; }
.analytics-table strong { display: block; color: var(--fg); font-weight: 500; }
.analytics-subline { display: block; margin-top: 0.18rem; color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; overflow: hidden; text-overflow: ellipsis; max-width: 30rem; }
.analytics-path { color: var(--fg-3); font-size: 11px; overflow-wrap: anywhere; }
.analytics-quality { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.analytics-quality > div { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem; background: var(--bg-2); }
.analytics-quality strong { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; letter-spacing: -0.04em; }
.analytics-quality span { color: var(--fg-3); font-size: var(--fs-xs); }
.analytics-tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.75rem; }
@media (max-width: 1040px) {
  .analytics-grid-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-trend-panel { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .analytics-periods, .analytics-grid-main, .analytics-grid-2, .analytics-quality { grid-template-columns: 1fr; }
  .analytics-trend-panel { grid-column: auto; }
  .analytics-period { padding: 1rem; }
  .analytics-tech-grid { grid-template-columns: 1fr; }
}

/* --- Bewertungsmatrix in der Verwaltung ---------------------------------- */

.mx-hinweis { font-size: var(--fs-sm); color: var(--fg-3); line-height: 1.65; margin: 0.35rem 0 0.75rem; max-width: 60rem; }
.mx-block { margin-left: 0.25rem; }
.mx-kv { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.35rem 1rem; font-size: var(--fs-sm); align-items: baseline; }
.mx-kv dt { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.mx-kv dd { margin: 0; }
.mx-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mx-tab th, .mx-tab td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.mx-tab th { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); font-weight: 400; }
.mx-tab td:not(:first-child) { font-family: var(--font-mono); color: var(--fg-2); }
.mx-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.mx-liste li { display: flex; gap: 0.75rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-2); }
.mx-stufe { flex: none; padding: 0.1rem 0.45rem; border-radius: 99px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; color: var(--fg-4); height: fit-content; }
.mx-stufe.s-achtung, .mx-stufe.s-kritisch { color: var(--danger); border-color: var(--danger); }
.mx-stufe.s-synergie { color: var(--accent); border-color: var(--accent-a40); }
.mx-prompt { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.9rem; line-height: 1.6; }

/* --- Verwaltungsrahmen und Nutzerverwaltung ----------------------------- */

.admin-page { padding-top: 3rem; }
.admin-shell {
  display: grid; grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
.admin-sidebar {
  position: sticky; top: 6.5rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  min-width: 0; padding-right: 1.25rem; border-right: 1px solid var(--line);
}
.admin-sidebar-title { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-sidebar-title strong {
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.025em;
}
.admin-sidebar nav { display: flex; flex-direction: column; gap: 1.35rem; }
.admin-nav-group { display: flex; flex-direction: column; gap: 0.22rem; }
.admin-nav-label {
  margin-bottom: 0.3rem; color: var(--fg-4); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
}
.admin-nav-group a {
  position: relative; display: block; padding: 0.48rem 0.65rem;
  border-radius: var(--r-xs); color: var(--fg-3); font-size: var(--fs-sm);
  transition: color 0.16s, background 0.16s;
}
.admin-nav-group a:hover { color: var(--fg); background: var(--bg-2); }
.admin-nav-group a.on { color: var(--fg); background: var(--bg-3); font-weight: 600; }
.admin-nav-group a.on::before {
  content: ""; position: absolute; left: -1.31rem; top: 0.45rem; bottom: 0.45rem;
  width: 2px; border-radius: 99px; background: var(--accent);
}
.admin-nav-group a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-content { min-width: 0; }
.admin-category-editor { grid-template-columns: 300px minmax(0, 1fr); }
.admin-content-head { margin-bottom: 2rem; }
.admin-content-head h2 { margin-top: 0.45rem; font-size: var(--fs-h2); }
.admin-content-head p {
  max-width: 62ch; margin-top: 0.65rem; color: var(--fg-3);
  font-size: var(--fs-sm); line-height: 1.6;
}
.admin-mobile-head { display: none; }

.admin-users { gap: 1.25rem; }
.admin-users-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.admin-users-head .mx-hinweis { margin-bottom: 0; }
.admin-users-count { flex: none; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.admin-user-search { display: flex; flex-direction: column; gap: 0.5rem; width: min(100%, 34rem); }
.admin-user-list { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-user-row {
  display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.admin-user-row-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-user-ident { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.admin-user-name { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.admin-user-name strong, .admin-user-name .mono, .admin-user-name .dim {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-user-name strong { font-size: var(--fs-sm); }
.admin-user-name .mono { color: var(--fg-3); font-size: var(--fs-xs); }
.admin-user-name .dim { font-size: var(--fs-xs); }
.admin-user-current-role {
  flex: none; padding: 0.2rem 0.5rem; border: 1px solid var(--line-2); border-radius: 99px;
  color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase;
}
.admin-user-fields {
  display: grid; grid-template-columns: repeat(4, minmax(7rem, 1fr)) auto;
  gap: 0.75rem; align-items: end;
}
.admin-user-save { white-space: nowrap; }
.admin-user-error { margin: 0; }

/* Zugang und Konto. Abgesetzt durch eine Trennlinie, weil hier Passwoerter
   gesetzt und Konten geloescht werden und das nicht wie ein weiteres
   Tariffeld aussehen soll. */
.admin-user-konto-toggle { align-self: flex-start; font-size: var(--fs-xs); }
.admin-user-konto {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding-top: 0.9rem; border-top: 1px dashed var(--line-2);
}
.admin-user-konto-zeile { display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap; }
.admin-user-konto-zeile .input { flex: 1 1 14rem; min-width: 0; }
.admin-user-resetlink { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-user-resetlink .dim { margin: 0; font-size: var(--fs-xs); }
.admin-user-konto-gefahr { padding-top: 0.2rem; }
.admin-user-konto-gefahr .dim { margin: 0; font-size: var(--fs-xs); }
@media (max-width: 900px) {
  .admin-page { padding-top: 2rem; }
  .admin-shell { display: block; }
  .admin-sidebar { display: none; }
  .admin-category-editor { grid-template-columns: 1fr; }
  .admin-mobile-head { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2rem; }
  .admin-mobile-picker { display: flex; flex-direction: column; gap: 0.45rem; }
  .admin-mobile-picker .input { width: 100%; }
  .admin-content-head { margin-bottom: 1.5rem; }
  .admin-user-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-user-save { justify-self: start; }
}
@media (max-width: 560px) {
  .admin-users-head, .admin-user-row-head { align-items: flex-start; flex-direction: column; }
  .admin-user-fields { grid-template-columns: 1fr; }
  .admin-user-konto-zeile { flex-direction: column; align-items: stretch; }
}

/* --- Wochenansicht des Splits -------------------------------------------- */

/* Die sieben Wochentage stehen hell, die beiden Randtage schieben sich
   verkleinert und blass hinter ihren Nachbarn. Sie liegen absolut am Rand,
   damit die sieben Tage der eigentlichen Woche die ganze Breite bekommen. Der
   Glow ist bewusst weiss und nicht die Akzentfarbe: gruen bedeutet in dieser
   Oberflaeche eine Aussage ueber den Plan, ein Mauszeiger ueber einer Karte
   bedeutet keine. */
.wk, .wk-zoom {
  --wk-glow:      rgba(255, 255, 255, 0.38);
  --wk-glow-ring: rgba(255, 255, 255, 0.22);
  --wk-glow-haze: rgba(255, 255, 255, 0.14);
}
.wk {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.wk-kopf { display: flex; align-items: baseline; }
.wk-tage {
  position: relative; display: grid; align-items: stretch;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem; min-height: 18rem; padding: 2rem 0.5rem 1.5rem;
  overflow: visible; isolation: isolate;
}
.wk-tag {
  display: flex; min-width: 0; width: 100%; flex-direction: column;
  gap: 0.7rem; min-height: 15.5rem; padding: 1.15rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 62%), var(--bg-2);
  color: var(--fg); text-align: left; cursor: zoom-in;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px -20px rgba(0, 0, 0, 0.9);
  z-index: var(--wk-z); transform: translateY(0); filter: none;
  transition: transform 0.28s var(--spring), border-color 0.22s var(--ease),
    box-shadow 0.28s var(--ease), opacity 0.22s var(--ease), filter 0.22s var(--ease);
}
.wk-tage > .wk-tag:not(.rand) {
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.wk-tag:hover, .wk-tag:focus-visible {
  z-index: 30;
  transform: translateY(-0.35rem);
  border-color: var(--wk-glow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px var(--wk-glow-ring), 0 0 30px var(--wk-glow-haze),
    0 22px 34px -20px rgba(0, 0, 0, 0.95);
}
.wk-tag:active { transform: translateY(-0.1rem); }

/* Ein Randtag ist kein zusaetzliches Training, sondern derselbe durchlaufende
   Zyklus eine Woche versetzt. Deshalb gedimmt und angeschnitten statt
   weggelassen: man soll sehen, was vor Montag lag und was auf Sonntag folgt.

   Gedimmt wird ueber `filter`, nicht ueber `opacity`. Eine durchsichtige Karte
   laesst den Nachbarn durchscheinen, unter dem sie liegt, und zwei
   uebereinanderliegende Beschriftungen sehen nach Fehler aus. Der Verlauf
   greift nur die aeussere Kante an, dort liegt nichts dahinter. */
.wk-tag.rand {
  position: absolute; top: 2rem; bottom: 1.5rem;
  width: clamp(4.75rem, 7vw, 6.5rem); min-height: 0;
  padding-inline: 0.5rem;
  filter: blur(1.5px) brightness(0.6) saturate(0.55);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none; z-index: 0;
}
.wk-tag .wk-nr,
.wk-tag .wk-name,
.wk-tag .wk-chip {
  min-width: 0; overflow-wrap: anywhere;
}
.wk-tag.rand .wk-nr {
  font-size: 0.5rem; line-height: 1.25; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  overflow-wrap: normal;
}
.wk-tag.rand .wk-echo {
  display: block; max-width: 100%; margin-top: 0.2rem;
  white-space: nowrap; overflow-wrap: normal;
}
.wk-tag.rand.vor {
  left: clamp(-4.5rem, -4vw, -1.25rem);
  transform-origin: right center;
  transform: translateX(0.75rem) scale(0.92);
  margin: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26%);
  mask-image: linear-gradient(to right, transparent, #000 26%);
}
.wk-tag.rand.nach {
  right: clamp(-4.5rem, -4vw, -1.25rem);
  transform-origin: left center;
  transform: translateX(-0.75rem) scale(0.92);
  margin: 0;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 26%);
  mask-image: linear-gradient(to left, transparent, #000 26%);
}
.wk-tag.rand:hover, .wk-tag.rand:focus-visible {
  filter: none; z-index: 30;
  -webkit-mask-image: none; mask-image: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px var(--wk-glow-ring), 0 0 30px var(--wk-glow-haze),
    0 22px 34px -20px rgba(0, 0, 0, 0.95);
}
.wk-tag.rand.vor:hover, .wk-tag.rand.vor:focus-visible {
  transform: translateX(0.2rem) scale(0.97);
}
.wk-tag.rand.nach:hover, .wk-tag.rand.nach:focus-visible {
  transform: translateX(-0.2rem) scale(0.97);
}
/* Ein Ruhetag gehoert zur Woche und wird deshalb genauso hell gezeigt. Er
   traegt nur eine gestrichelte Kante, sonst waere die halbe Woche dunkel,
   sobald jemand vier Ruhetage eintraegt. */
.wk-tag.ruhe {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 62%), var(--bg-2);
  border-style: dashed;
}
.wk-tag.ruhe:hover, .wk-tag.ruhe:focus-visible { border-style: solid; }
.wk-tag .wk-nr, .wk-tag .wk-name, .wk-tag .wk-ruhe, .wk-tag .wk-leer, .wk-tag .wk-chips {
  pointer-events: none;
}
.wk-nr {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2);
}
.wk-echo { color: var(--fg-4); opacity: 0.8; }
.wk-name { font-size: 1.08rem; font-weight: 650; color: var(--fg); }
.wk-ruhe, .wk-leer { font-size: var(--fs-sm); color: var(--fg-2); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wk-chip {
  padding: 0.18rem 0.48rem; border-radius: 99px;
  background: var(--bg-3); color: var(--fg);
  font-size: var(--fs-xs); line-height: 1.55;
}
.wk-chip.indirekt { background: none; border: 1px dashed var(--line-2); color: var(--fg-2); }
.wk-zoom {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start;
  justify-content: center; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem; background: rgba(6, 7, 9, 0.82); backdrop-filter: blur(9px);
  cursor: zoom-out; animation: wkZoomIn 0.2s var(--ease-out);
}
.wk-zoom-panel {
  position: relative; width: min(32rem, 100%); max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem); overflow-y: auto; margin-block: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2);
  box-shadow: 0 28px 80px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: default;
}
.wk-zoom-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wk-zoom-head h3 { margin-top: 0.3rem; font-size: clamp(1.45rem, 4vw, 2rem); }
.wk-zoom-close {
  display: grid; flex: none; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--fg-3);
  font-size: 1.25rem; line-height: 1; transition: color 0.2s var(--ease),
    border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--spring);
}
.wk-zoom-close:focus-visible { outline: none; }
.wk-zoom-close:hover {
  color: var(--fg); border-color: var(--wk-glow);
  background: rgba(255, 255, 255, 0.1); transform: rotate(90deg);
}
.wk-zoom-card {
  display: flex; flex-direction: column; gap: 0.7rem; min-height: 15rem; margin-top: 1.5rem;
  padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 65%), var(--bg-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 32px rgba(255, 255, 255, 0.07);
}
.wk-zoom-card .wk-name { font-size: 1.4rem; }
.wk-zoom-card .wk-ruhe, .wk-zoom-card .wk-leer { font-size: var(--fs-sm); }
.wk-zoom-card .wk-chips { gap: 0.4rem; }
.wk-zoom-card .wk-chip { padding: 0.25rem 0.55rem; font-size: var(--fs-xs); }

/* Die geoeffnete Karte ist der Ort fuer die Zahlen. Im Kalender stehen nur die
   Muskelnamen, sonst liest man neun Karten nebeneinander nicht mehr. */
.wk-satzliste { display: flex; flex-direction: column; gap: 0.35rem; }
.wk-satz {
  display: grid; gap: 0.5rem; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) 4.75rem 3.5rem 2.75rem;
  font-size: var(--fs-sm); color: var(--fg-2);
}
.wk-satz > span + span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.wk-satz-kopf {
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4);
}
.wk-satz-kopf > span + span { font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--fg-4); }
.wk-satz-muskel { color: var(--fg); }
.wk-satz.indirekt .wk-satz-muskel { color: var(--fg-3); }
.wk-satz-ind { color: var(--fg-4); }
.wk-satz-fuss { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--fg-4); line-height: 1.5; }
.wk-zoom-hint { margin-top: 1rem; color: var(--fg-4); font-size: var(--fs-xs); text-align: center; }
@keyframes wkZoomIn { from { opacity: 0; } to { opacity: 1; } }

/* Auf schmalen Screens werden die Randtage ausgeblendet und die sieben
   eigentlichen Tage in zwei gut lesbare Spalten umgebrochen. */
@media (max-width: 860px) {
  .wk-tage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0; padding: 1rem 0.25rem 0.5rem;
  }
  .wk-tag { min-height: 12rem; padding: 1rem 0.85rem; }
  .wk-tag.rand { display: none; }
}

/* --- Trainingssplit: editierbare Woche und Live-Modell ------------------ */

/* Nur der Trainingssplit bricht aus dem normalen Lesemaß aus. Kopf und
   Metadaten bleiben ruhig, die eigentliche Woche darf den Viewport nutzen. */
.analysis-view-split {
  max-width: none;
  padding-inline: clamp(1rem, 2.5vw, 2.75rem);
}
.analysis-view-split > header { max-width: 68rem; }
.analysis-view-split > .analysis-result-wrap,
.analysis-view-split > .analysis-history-wrap {
  width: min(100%, var(--wrap)); margin-inline: auto;
}
.split-form { gap: clamp(1.25rem, 2.5vw, 2rem); }
.split-meta-fields {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; max-width: 68rem; align-items: start;
}
.split-workspace { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.split-week,
.split-insights {
  min-width: 0; padding: clamp(1rem, 2vw, 1.75rem);
  border: 1px solid var(--line); border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%), var(--bg-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.split-week { display: flex; flex-direction: column; gap: 1rem; overflow: visible; }
.split-week-head,
.split-insights-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
}
.split-week-head h2,
.split-insights-head h2 { margin-top: 0.35rem; font-size: clamp(1.45rem, 2vw, 2rem); }
.split-week-head > p,
.split-insights-head > div > p {
  max-width: 34rem; margin: 0; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.55;
}

.split-week-shell {
  position: relative; min-width: 0; padding-inline: clamp(4rem, 4.5vw, 5.5rem);
  isolation: isolate;
}
.split-week-scroll { min-width: 0; overflow: visible; scrollbar-gutter: stable; }
.split-week-grid {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.55rem;
}
.split-week-day {
  display: flex; flex-direction: column; min-width: 0; min-height: 18rem;
  padding: 0.9rem; overflow: hidden; filter: none;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: transform 220ms var(--ease-out), border-color 180ms var(--ease),
    background-color 180ms var(--ease), box-shadow 220ms var(--ease);
}
.split-week-day.ruhe { border-style: dashed; background: color-mix(in srgb, var(--bg-2) 72%, var(--bg) 28%); }
.split-week-day.aktiv {
  border-color: var(--accent-a50); border-style: solid;
  background: linear-gradient(150deg, var(--accent-a08), transparent 52%), var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--accent-a12);
}
.split-week-day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.35rem; }
.split-week-day-title {
  min-width: 0; padding: 0.1rem 0; color: var(--fg-2); text-align: left;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.split-week-day-title > span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; }
.split-pattern-badge {
  display: block; margin-top: 0.3rem; color: var(--fg-4); font-size: 0.56rem;
  font-weight: 500; letter-spacing: 0.06em; white-space: nowrap;
}
.split-week-day-name {
  width: 100%; margin-top: 1rem; padding: 0 0 0.45rem;
  overflow: hidden; text-overflow: ellipsis;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--fg); font-size: 1rem; font-weight: 600;
  transition: border-color 160ms var(--ease);
}
.split-week-day-name::placeholder { color: var(--fg-4); font-weight: 500; }
.split-week-day-name:focus { outline: none; border-color: var(--accent-a50); }
.split-week-day-muscles {
  display: flex; align-content: flex-start; flex-wrap: wrap; gap: 0.28rem;
  margin-top: 0.8rem; min-height: 4.8rem;
}
.split-week-day-muscles > span {
  max-width: 100%; height: fit-content; padding: 0.16rem 0.4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 99px; background: var(--bg-3); color: var(--fg-2);
  font-size: 0.66rem; line-height: 1.45;
}
.split-week-day-muscles > span.indirekt { border: 1px dashed var(--line-2); background: none; color: var(--fg-3); }
.split-week-day-muscles > span.leer { padding-inline: 0; background: none; color: var(--fg-4); }
.split-week-day-muscles > span.mehr { color: var(--fg-3); }
.split-week-day-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  margin-top: auto; padding-top: 0.65rem; border-top: 1px solid var(--line);
}
.split-week-day-foot > span { color: var(--fg-4); font-size: 0.61rem; line-height: 1.35; }
.split-week-add {
  flex: none; padding: 0.32rem 0.45rem; border-radius: 8px;
  color: var(--fg-3); font-size: 0.65rem; font-weight: 600;
  transition: color 150ms var(--ease), background-color 150ms var(--ease), transform 120ms var(--ease);
}
.split-week-add:active { transform: scale(0.97); }
.split-week-rest {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; color: var(--fg-4); font-size: var(--fs-xs); text-align: center;
}
.split-week-rest-mark { font-size: 2rem; color: var(--fg-4); line-height: 1; }
.split-week-rest .split-week-add { margin-top: 0.6rem; }

/* Nur diese beiden Anschlusstage werden unscharf. Die sieben editierbaren
   Karten setzen `filter: none` explizit und erben den Effekt nicht. */
.split-week-edge {
  position: absolute; top: 0.7rem; bottom: 0.7rem; z-index: 1;
  display: flex; width: 8rem; flex-direction: column; gap: 0.55rem;
  padding: 1rem 0.75rem; overflow: hidden; pointer-events: none;
  border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-3);
  color: var(--fg-2); filter: blur(0.75px) brightness(0.9) saturate(0.82);
  box-shadow: inset 0 1px 0 var(--line-2);
}
.split-week-edge.vor {
  left: 0; transform: scale(0.97); transform-origin: right center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%);
  mask-image: linear-gradient(to right, transparent, #000 8%);
}
.split-week-edge.nach {
  right: 0; transform: scale(0.97); transform-origin: left center;
  align-items: flex-end; text-align: right;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 8%);
  mask-image: linear-gradient(to left, transparent, #000 8%);
}
.split-week-edge.ruhe { border-style: dashed; }
.split-week-edge-day {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.split-week-edge strong { overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); white-space: nowrap; }
.split-week-edge > span:not(.split-week-edge-day) { font-size: 0.65rem; }

.split-day-switch {
  display: inline-flex; flex: none; align-items: center; gap: 0.45rem;
  min-height: 2rem; padding: 0.22rem 0.55rem 0.22rem 0.25rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--bg-1);
  color: var(--fg-3); font-size: var(--fs-xs); font-weight: 600;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.split-day-switch:active { transform: scale(0.97); }
.split-day-switch-track {
  position: relative; display: block; width: 1.05rem; height: 1.65rem;
  padding: 0.12rem; border-radius: 99px; background: var(--bg-3);
}
.split-day-switch-thumb {
  display: block; width: 0.81rem; height: 0.81rem; border-radius: 50%;
  background: var(--accent); transform: translateY(0);
  transition: transform 220ms var(--ease-out), background-color 160ms var(--ease);
}
.split-day-switch.ruhe .split-day-switch-thumb { transform: translateY(0.6rem); background: var(--fg-4); }
.split-day-switch.training { color: var(--accent-text); }
.split-day-switch.kompakt { gap: 0; padding: 0.15rem; min-height: 0; }
.split-day-switch.kompakt > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.split-day-switch.kompakt .split-day-switch-track { width: 0.95rem; height: 1.48rem; }
.split-day-switch.kompakt .split-day-switch-thumb { width: 0.71rem; height: 0.71rem; }
.split-day-switch.kompakt.ruhe .split-day-switch-thumb { transform: translateY(0.53rem); }

.split-pattern-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 0.15rem;
}
.split-repeat-option {
  display: flex; align-items: flex-start; gap: 0.7rem; min-width: 0; cursor: pointer;
}
.split-repeat-option input {
  display: grid; width: 1.05rem; height: 1.05rem; flex: none; place-items: center;
  margin-top: 0.12rem; appearance: none; border: 1px solid var(--line-3);
  border-radius: 4px; background: var(--bg); cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), transform 120ms var(--ease);
}
.split-repeat-option input::after {
  content: ""; width: 0.48rem; height: 0.25rem;
  border-bottom: 2px solid var(--accent-ink); border-left: 2px solid var(--accent-ink);
  opacity: 0; transform: translateY(-0.05rem) rotate(-45deg) scale(0.7);
  transition: opacity 120ms var(--ease), transform 140ms var(--ease-out);
}
.split-repeat-option input:checked { border-color: var(--accent); background: var(--accent); }
.split-repeat-option input:checked::after { opacity: 1; transform: translateY(-0.05rem) rotate(-45deg) scale(1); }
.split-repeat-option input:active { transform: scale(0.97); }
.split-repeat-option > span { display: flex; flex-direction: column; gap: 0.18rem; }
.split-repeat-option strong { color: var(--fg-2); font-size: var(--fs-sm); font-weight: 600; }
.split-repeat-option small { color: var(--fg-4); font-size: var(--fs-xs); line-height: 1.4; }

.split-day-editor {
  display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg);
}
.split-day-editor-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem;
}
.split-day-editor-head h3 { margin-top: 0.35rem; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.split-day-editor-head p { margin: 0.4rem 0 0; color: var(--fg-4); font-size: var(--fs-xs); }
.split-day-editor-actions { display: flex; align-items: center; gap: 0.18rem; }
.split-day-editor-actions .btn:disabled { opacity: 0.3; transform: none; }
.split-day-editor-rest {
  display: flex; align-items: center; gap: 1rem; min-height: 7rem;
  padding: 1rem; border: 1px dashed var(--line); border-radius: 16px; color: var(--fg-3);
}
.split-day-editor-rest > div:first-child { color: var(--fg-4); font-size: 2rem; }
.split-day-editor-rest > div:nth-child(2) { flex: 1; }
.split-day-editor-rest strong { color: var(--fg-2); }
.split-day-editor-rest p { margin: 0.25rem 0 0; font-size: var(--fs-sm); }
.split-day-editor-body { display: flex; flex-direction: column; gap: 1rem; }
.split-exercise-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.split-exercise-toolbar > div:first-child { flex: 1 1 24rem; max-width: 34rem; }
.split-exercise-toolbar .label { display: block; margin-bottom: 0.45rem; }
.split-exercise-add { display: flex; align-items: flex-end; gap: 0.5rem; }
.split-exercise-add label { width: 5rem; }
.split-muscle-table { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.split-muscle-row {
  display: grid; grid-template-columns: minmax(12rem, 2.3fr) 5rem 5rem 5.5rem 4.5rem auto;
  gap: 0.5rem; align-items: center;
}
.split-muscle-head {
  padding-inline: 0.15rem; color: var(--fg-4); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
}
.split-mobile-label { display: block; min-width: 0; }
.split-day-editor-foot { display: flex; align-items: center; gap: 1rem; }
.split-day-editor-foot p { margin: 0; color: var(--fg-4); font-size: var(--fs-xs); }

.split-insights { display: flex; flex-direction: column; gap: 1.25rem; scroll-margin-top: 5.5rem; }
.split-insights-report {
  margin-bottom: 2rem; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.split-muscle-picker { width: min(18rem, 100%); flex: none; }
.split-muscle-picker > span {
  display: block; margin-bottom: 0.45rem; color: var(--fg-3);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
}
.split-preview-error {
  margin: 0; padding: 0.7rem 0.85rem; border: 1px solid rgba(251, 113, 133, 0.22);
  border-radius: 12px; background: rgba(251, 113, 133, 0.07);
  color: var(--danger); font-size: var(--fs-xs);
}
.split-insights-empty {
  display: grid; min-height: 15rem; place-items: center; align-content: center;
  gap: 0.45rem; padding: 2rem; border: 1px dashed var(--line); border-radius: 18px;
  color: var(--fg-3); text-align: center;
}
.split-insights-empty > span { color: var(--fg-4); font-size: 2rem; }
.split-insights-empty p { max-width: 38rem; margin: 0; color: var(--fg-4); font-size: var(--fs-sm); line-height: 1.55; }
.split-insights-content {
  display: flex; min-width: 0; flex-direction: column;
  gap: 1rem; transition: opacity 160ms var(--ease);
}
.split-insights-content.aktualisiert { opacity: 0.68; }
.split-recovery,
.split-volume-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.split-recovery { min-width: 0; padding: 1rem; }
.split-chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 0.7rem; }
.split-chart-legend span {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--fg-3); font-size: var(--fs-xs);
}
.split-chart-legend span::before { content: ""; width: 1rem; height: 2px; border-radius: 2px; background: currentColor; }
.split-chart-legend .aufbau { color: var(--accent-text); }
.split-chart-legend .ermuedung { color: var(--warning); }
.split-chart-legend .abbau { color: var(--viz-2); }
.split-chart-legend .abbau::before { border-top: 2px dashed currentColor; background: none; }
.split-chart-legend .training { color: var(--fg-2); }
.split-chart-legend .training::before { border-top: 2px dashed currentColor; background: none; }
.split-model-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.55rem;
  margin-bottom: 0.4rem;
}
.split-model-meta > span {
  padding: 0.28rem 0.48rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); color: var(--fg-3); font-size: 0.64rem;
}
.split-model-meta strong { color: var(--fg-2); font-weight: 600; }
.split-chart-scroll { min-width: 0; overflow-x: auto; }
.split-recovery-chart { width: 100%; min-width: 42rem; }
.split-chart-grid line { stroke: var(--line); stroke-width: 1; }
.split-chart-grid line.basislinie { stroke: var(--line-3); stroke-width: 1.25; }
.split-chart-grid line.tag { stroke: var(--line); stroke-dasharray: 3 6; }
.split-chart-grid text { fill: var(--fg-3); font-family: var(--font-mono); font-size: 12px; }
.split-effect-areas path { stroke: none; }
.split-effect-areas .aufbau { fill: var(--accent-a13); }
.split-effect-areas .ermuedung { fill: rgba(251, 191, 36, 0.1); }
.split-effect-areas .abbau { fill: color-mix(in srgb, var(--viz-2) 7%, transparent); }
.split-effect-lines path {
  fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
}
.split-effect-lines .aufbau { stroke: var(--accent); }
.split-effect-lines .ermuedung { stroke: var(--warning); }
.split-effect-lines .abbau { stroke: var(--viz-2); stroke-width: 2.25; stroke-dasharray: 7 6; }
.split-training-markers line { stroke: var(--fg-2); stroke-width: 1.25; stroke-dasharray: 4 4; opacity: 0.72; }
.split-training-markers circle { fill: var(--fg); stroke: var(--bg); stroke-width: 2; }
.split-training-markers text { fill: var(--fg-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.split-recovery-events { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.split-recovery-events li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.7rem; border-radius: 12px; background: var(--bg-2);
}
.split-event-index {
  display: grid; width: 1.8rem; height: 1.8rem; place-items: center;
  border-radius: 50%; background: var(--bg-3); color: var(--fg-2);
  font-family: var(--font-mono); font-size: 0.62rem;
}
.split-recovery-events li > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 0.15rem; }
.split-recovery-events strong { overflow: hidden; color: var(--fg-2); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.split-recovery-events small { color: var(--fg-3); font-size: 0.69rem; }
.split-recovery-events em { color: var(--accent-text); font-size: var(--fs-xs); font-style: normal; white-space: nowrap; }
.split-recovery-events li.zu-frueh em { color: var(--danger); }

.split-volume-panel {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem); padding: clamp(1rem, 2vw, 1.35rem); text-align: left;
}
.split-volume-ring { position: relative; width: 7.25rem; height: 7.25rem; flex: none; color: var(--warning); }
.split-volume-panel.optimal .split-volume-ring { color: var(--accent); }
.split-volume-panel.ueber .split-volume-ring { color: var(--danger); }
.split-volume-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.split-volume-ring circle { fill: none; stroke-width: 8; }
.split-volume-ring .spur { stroke: var(--bg-3); }
.split-volume-ring .wert { stroke: currentColor; stroke-linecap: round; }
.split-volume-ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.12rem;
  padding: 0 0.35rem; color: var(--fg); text-align: center;
}
.split-volume-ring-label strong {
  display: block; max-width: 100%; font-family: var(--font-display); font-size: 1.4rem;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.split-volume-ring-label span {
  color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs);
  line-height: 1.1; white-space: nowrap;
}
.split-volume-copy { width: 100%; }
.split-volume-copy h3 { margin-top: 0.35rem; font-size: 1.35rem; }
.split-volume-copy p { min-height: 0; margin: 0.5rem 0 1rem; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.45; }
.split-volume-scale { position: relative; height: 0.55rem; border-radius: 99px; background: var(--bg-3); }
.split-volume-optimal {
  position: absolute; top: 0; bottom: 0; left: var(--opt-start); width: var(--opt-width);
  border-radius: 99px; background: var(--accent-a40);
}
.split-volume-marker {
  position: absolute; top: -0.28rem; left: var(--marker); width: 2px; height: 1.1rem;
  border-radius: 2px; background: currentColor; transform: translateX(-1px);
}
.split-volume-panel.unter .split-volume-marker { background: var(--warning); }
.split-volume-panel.optimal .split-volume-marker { background: var(--accent); }
.split-volume-panel.ueber .split-volume-marker { background: var(--danger); }
.split-volume-scale-labels { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.55rem; color: var(--fg-3); font-size: 0.67rem; }
.split-model-note {
  margin: 0; color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.55;
}
.split-submit-row { display: flex; align-items: center; gap: 1rem; }
.split-submit-row p { margin: 0; color: var(--fg-4); font-size: var(--fs-xs); }
.split-form-note { margin-top: -0.75rem; }

@media (hover: hover) and (pointer: fine) {
  .split-week-day:hover {
    z-index: 10; transform: translateY(-0.35rem) scale(1.035);
    border-color: var(--accent-a50);
    box-shadow: inset 0 0 0 1px var(--accent-a12), 0 0 0 1px var(--accent-a20),
      0 18px 34px -20px var(--accent-a45);
  }
  .split-week-day.aktiv:hover { border-color: var(--accent); }
  .split-week-add:hover { background: var(--bg-3); color: var(--fg); }
  .split-day-switch:hover { border-color: var(--line-3); color: var(--fg-2); }
  .split-day-switch.training:hover { color: var(--accent-text); }
}

@media (max-width: 1220px) {
  .split-week-shell { padding-inline: 0; }
  .split-week-scroll { overflow-x: auto; padding-bottom: 0.55rem; overscroll-behavior-inline: contain; }
  .split-week-grid { min-width: 68rem; scroll-snap-type: x proximity; }
  .split-week-day { scroll-snap-align: start; }
  .split-week-edge { display: none; }
}
@media (max-width: 980px) {
  .split-insights-content { grid-template-columns: 1fr; }
  .split-volume-panel { flex-direction: row; text-align: left; }
  .split-volume-ring { flex: none; }
  .split-volume-copy p { min-height: 0; }
}
@media (max-width: 760px) {
  .split-meta-fields { grid-template-columns: 1fr; }
  .split-week-head,
  .split-insights-head,
  .split-day-editor-head,
  .split-exercise-toolbar { align-items: stretch; flex-direction: column; }
  .split-muscle-picker { width: 100%; }
  .split-day-editor-actions { flex-wrap: wrap; }
  .split-muscle-head { display: none; }
  .split-muscle-row:not(.split-muscle-head) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.8rem; border: 1px solid var(--line); border-radius: 14px;
  }
  .split-muscle-row:not(.split-muscle-head) > label:first-child { grid-column: 1 / -1; }
  .split-mobile-label::before {
    content: attr(data-label); display: block; margin: 0 0 0.3rem;
    color: var(--fg-4); font-family: var(--font-mono); font-size: 0.58rem;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .split-muscle-row:not(.split-muscle-head) > .btn { justify-self: end; }
  .split-day-editor-foot { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .analysis-view-split { padding-inline: 0.75rem; }
  .split-week,
  .split-insights { border-radius: 20px; }
  .split-pattern-controls,
  .split-day-editor-rest,
  .split-submit-row { align-items: flex-start; flex-direction: column; }
  .split-repeat-option { width: 100%; }
  .split-exercise-add { width: 100%; flex-wrap: wrap; }
  .split-exercise-add .btn { flex: 1; }
  .split-recovery-events li { grid-template-columns: auto minmax(0, 1fr); }
  .split-recovery-events em { grid-column: 2; }
  .split-volume-panel { flex-direction: column; text-align: center; }
  .split-submit-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .split-week-day,
  .split-week-day-name,
  .split-week-add,
  .split-day-switch,
  .split-day-switch-thumb,
  .split-repeat-option input,
  .split-repeat-option input::after,
  .split-insights-content { transition: none; }
  .split-week-day,
  .split-week-day:hover { transform: none; }
  .split-week-add:active,
  .split-day-switch:active,
  .split-repeat-option input:active { transform: none; }
}

/* --- Molekuelkarte -------------------------------------------------------- */

.mk-seite { gap: 1.25rem; }

.mk-suche {
  width: 100%; max-width: 26rem;
  padding: 0.7rem 1rem;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 99px;
  font-family: var(--font-body); font-size: var(--fs-sm);
}
.mk-suche:focus { outline: none; border-color: var(--map-accent-a40); }
/* Das Kreuz sitzt im Feld, nicht daneben: eine Schaltflaeche daneben schoebe
   die Vorschlagsliste gegen das Feld aus der Flucht. */
.mk-suche-zu {
  position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--fg-3); font-size: 1.15rem; line-height: 1;
}
.mk-suche-zu:hover { color: var(--fg); }

.mk-suchfeld { position: relative; width: 100%; max-width: 26rem; }

.mk-vorschlaege {
  position: absolute; z-index: 20; top: calc(100% + 0.35rem); left: 0; right: 0;
  max-height: 19rem; overflow-y: auto;
  margin: 0; padding: 0.3rem; list-style: none;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-2);
}
.mk-vorschlaege li { margin: 0; }
.mk-vorschlag {
  --punkt: var(--fg-3);
  /* Vier Spalten, nicht drei: der Punkt aus ::before ist selbst ein
     Rasterfeld. Mit drei Spalten faellt die Art in die zweite Zeile. */
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: 0.5rem; width: 100%;
  padding: 0.45rem 0.55rem;
  background: none; border: 0; border-radius: var(--r-xs);
  cursor: pointer; text-align: left; font-size: var(--fs-sm); color: var(--fg);
}
/* Derselbe Punkt wie auf den Filter-Chips und in derselben Farbe wie die Node
   im Graphen: die Art des Treffers steht damit schon vor dem Lesen fest. */
.mk-vorschlag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--punkt);
}
.mk-vorschlag.on, .mk-vorschlag:hover { background: var(--bg-3); }
.mk-vorschlag-name { font-family: var(--font-mono); }
.mk-vorschlag-lang {
  color: var(--fg-3); font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-vorschlag-typ {
  color: var(--fg-4); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.mk-vorschlag-leer { padding: 0.5rem 0.6rem; color: var(--fg-3); font-size: var(--fs-sm); }

.mk-kopf { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.mk-fokus { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mk-fokus-text { font-size: var(--fs-sm); color: var(--fg-2); }
.mk-fokus-text strong { color: var(--fg); font-family: var(--font-mono); }

/* Die Filterleiste. Sechs Bedienelemente in einer Zeile, jedes in der Form
   seiner Frage: Auswahlfeld, Aufklappmenue, Schieberegler. Vorher standen hier
   21 gleich aussehende Pillen. */
.mk-filter {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.9rem 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.mk-feld { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.mk-feld-titel {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: var(--fs-label); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mk-wert {
  color: var(--map-accent); font-family: var(--font-mono);
  text-transform: none; letter-spacing: 0;
}

/* Ein Feld, ob Auswahl, Suche oder Aufklappknopf: dieselbe Hoehe, derselbe
   Rand, damit die Leiste eine Linie hat und keine Treppe. */
.mk-select {
  width: 100%; min-height: 2.3rem;
  padding: 0.42rem 0.7rem;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  font-family: var(--font-body); font-size: var(--fs-xs);
  cursor: pointer;
}
.mk-select:hover { border-color: var(--line-3); }
.mk-select:focus-visible {
  outline: none; border-color: var(--map-accent-a40);
  box-shadow: 0 0 0 2px var(--map-accent-a20, transparent);
}
select.mk-select { min-width: 11.5rem; }

/* Dieselbe Hoehe wie ein Auswahlfeld, damit die Leiste eine Linie behaelt und
   der Regler nicht eine halbe Zeile hoeher haengt als seine Nachbarn. */
.mk-schieber { width: 11rem; height: 2.3rem; margin: 0; accent-color: var(--map-accent); }

/* Aufklappmenue: der Knopf sieht aus wie ein Auswahlfeld, weil er dieselbe
   Sorte Frage beantwortet, nur mit mehr als einer Antwort. */
.mk-aufklapp { position: relative; }
.mk-aufklapp-knopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; min-width: 12rem; text-align: left;
}
.mk-aufklapp-pfeil { color: var(--fg-3); font-size: 0.7rem; }
.mk-aufklapp-inhalt {
  position: absolute; z-index: 30; top: calc(100% + 0.35rem); left: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 17rem; max-width: 22rem;
  padding: 0.75rem;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-2);
}
.mk-aufklapp-fuss { display: flex; gap: 0.4rem; }
.mk-aufklapp-hinweis {
  margin: 0; color: var(--fg-4); font-size: var(--fs-label); line-height: 1.5;
}

.mk-schalterliste { display: flex; flex-direction: column; gap: 0.1rem; }
/* Ein Schalter, kein Knopf: die Knotenarten sind sieben unabhaengige
   Ja/Nein-Fragen. Der Punkt links traegt die Farbe der Node im Graphen. */
.mk-schalter {
  --punkt: var(--fg-3);
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0.2rem; cursor: pointer;
  font-size: var(--fs-xs); color: var(--fg-2);
}
.mk-schalter:hover { color: var(--fg); }
.mk-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.mk-schalter-spur {
  flex: none; position: relative; width: 1.9rem; height: 1.05rem;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 99px;
  transition: background 0.15s, border-color 0.15s;
}
.mk-schalter-spur::after {
  content: ""; position: absolute; top: 50%; left: 0.13rem;
  width: 0.72rem; height: 0.72rem; border-radius: 50%;
  background: var(--fg-4); transform: translateY(-50%);
  transition: transform 0.15s, background 0.15s;
}
.mk-schalter input:checked + .mk-schalter-spur {
  background: var(--map-accent-a20, var(--bg-3)); border-color: var(--map-accent-a40);
}
.mk-schalter input:checked + .mk-schalter-spur::after {
  background: var(--punkt); transform: translateY(-50%) translateX(0.85rem);
}
.mk-schalter input:focus-visible + .mk-schalter-spur {
  outline: 2px solid var(--map-accent); outline-offset: 2px;
}
.mk-schalter-text { min-width: 0; }

/* Stoffauswahl: suchen, anklicken, steht als Chip da. */
.mk-stoffsuche { display: flex; flex-direction: column; gap: 0.45rem; }
.mk-stoffsuche-feld { cursor: text; }
.mk-stoffsuche-liste {
  max-height: 13rem; overflow-y: auto;
  margin: 0; padding: 0.2rem; list-style: none;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.mk-stoffsuche-liste li { margin: 0; }
.mk-stoffsuche-treffer {
  display: flex; align-items: baseline; gap: 0.5rem; width: 100%;
  padding: 0.35rem 0.45rem;
  background: none; border: 0; border-radius: var(--r-xs);
  cursor: pointer; text-align: left; font-size: var(--fs-xs); color: var(--fg);
}
.mk-stoffsuche-treffer:hover { background: var(--bg-3); }
.mk-stoffliste { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mk-stoffchip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.3rem 0.25rem 0.6rem;
  background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 99px;
  font-family: var(--font-mono); font-size: var(--fs-label);
}
.mk-stoffchip button {
  background: none; border: 0; cursor: pointer;
  padding: 0 0.25rem; color: var(--fg-3); font-size: 0.95rem; line-height: 1;
}
.mk-stoffchip button:hover { color: var(--danger); }

.mk-zurueck { align-self: flex-end; }

.mk-typ-substance   { --punkt: var(--map-accent); }
.mk-typ-metabolite  { --punkt: var(--k-tierlist); }
.mk-typ-receptor    { --punkt: var(--viz-1); }
.mk-typ-enzyme      { --punkt: var(--viz-2); }
.mk-typ-transporter { --punkt: var(--viz-3); }
.mk-typ-regulator   { --punkt: var(--viz-4); }
.mk-typ-endpoint    { --punkt: var(--k-wiki); }

.mk-buehne { position: relative; display: flex; gap: 1rem; align-items: flex-start; }
.mk-host { position: relative; flex: 1 1 auto; min-width: 0; }
.mk-graph {
  width: 100%; height: 68vh; min-height: 26rem;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.mk-vollbild {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 7;
  background: var(--bg-2); box-shadow: var(--shadow-1);
}
.mk-vollbild-icon { font-size: 1.05rem; line-height: 1; }
.mk-host-fullscreen {
  position: fixed; inset: 0; z-index: 240;
  display: flex; flex-direction: column;
  width: 100vw; height: 100vh; min-height: 100vh; height: 100dvh; min-height: 100dvh; padding: 1rem;
  background: var(--bg);
}
/* **Was ein Vollbild braucht: keinen transformierten Vorfahren.**

   Ein `position: fixed`-Element bezieht sich auf den Bildschirm -- ausser ein
   Vorfahr traegt `transform`, `will-change: transform`, `filter` oder
   `perspective`. Dann wird dieser Vorfahr zum Rahmen, und aus „ueber dem
   Bildschirm" wird „ueber diesem Kasten": wer ein Stueck gescrollt hat, sieht
   vom Vollbild nichts als den unscharfen Hintergrund darueber.

   Zwei Stellen erzeugen das, und beide unbeabsichtigt. `PageTransition`
   animiert `<main>` mit `translateY` und laesst die Transformation als
   Inline-Stil stehen. Die Auswertung blendet ihre Ansicht mit
   `analysis-forward-in` ein, `animation-fill-mode: both` haelt den letzten
   Keyframe fest, und `will-change: transform` allein genuegt Chromium schon.
   Beide Endzustaende sind neutral (`translateX(0)`, `opacity: 1`), das
   Abschalten kostet also nichts ausser der Ueberblendung, die zu diesem
   Zeitpunkt laengst gelaufen ist. */
.bb-vollbild-aktiv main,
.bb-vollbild-aktiv .analysis-view {
  transform: none !important;
  will-change: auto !important;
  animation: none !important;
}
.mk-host-fullscreen .mk-graph {
  flex: 1 1 auto; height: auto; min-height: 0;
}

/* Die Lage kommt aus dem Stil-Attribut: left/top ist der Mauszeiger, das
   transform dort schiebt das Kaestchen daneben und klappt es am Rand der
   Karte auf die andere Seite. */
.mk-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); color: var(--fg); white-space: nowrap;
}
.mk-tooltip-sub { color: var(--fg-3); font-family: var(--font-mono); font-size: 0.7rem; }

.mk-detail {
  position: relative; flex: 0 0 16rem;
  padding: 1rem; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mk-detail h3 { margin: 0.35rem 0 0.85rem; font-size: var(--fs-h3); }
.mk-detail-typ {
  font-size: var(--fs-xs); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mk-detail-zu {
  position: absolute; top: 0.5rem; right: 0.6rem;
  background: none; border: 0; cursor: pointer;
  color: var(--fg-3); font-size: 1.25rem; line-height: 1;
}
.mk-detail-zu:hover { color: var(--fg); }
.mk-detail-titel {
  font-size: var(--fs-xs); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mk-detail-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.mk-detail-knoepfe .btn { font-size: var(--fs-xs); padding: 0.4rem 0.7rem; }

.mk-gewebe {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.mk-gewebe-balken { display: flex; flex-direction: column; gap: 0.5rem; }
/* Der staerkste Einzelwert unter dem Gruppennamen. „Blut und Gefaesse 46.6"
   allein waere fuer eine Gruppe aus sechs Geweben eine halbe Auskunft. Eigene
   Zeile statt derselben: nebeneinander schiebt ein langer Gewebename die Zahl
   aus der Flucht, und dann steht der Balken schief unter seinem Kopf. */
.mk-gewebe .bar-head { display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; }
.mk-gewebe-spitze {
  grid-column: 1; color: var(--fg-4); font-size: 0.72rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-gewebe-leer, .mk-gewebe-fuss { font-size: var(--fs-xs); line-height: 1.5; }
/* Eigene Zeile: die Quellenangabe direkt hinter dem Satzpunkt liest sich wie
   ein weiterer Halbsatz statt wie eine Nennung. */
.mk-gewebe-quelle { display: block; margin-top: 0.3rem; }
.mk-mehr {
  align-self: flex-start; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--fg-2); font-size: var(--fs-xs); text-decoration: underline;
}
.mk-mehr:hover { color: var(--fg); }

/* Vorkommensangaben. Bewusst Plaketten und keine Balken: die Quelle nennt kein
   Wieviel, und ein Balken saehe aus wie eine Messung. */
.mk-orte { display: flex; flex-direction: column; gap: 0.7rem; }
.mk-orte-teil { display: flex; flex-direction: column; gap: 0.35rem; }
.mk-orte-titel { font-size: var(--fs-xs); color: var(--fg-3); }
.mk-orte-liste { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mk-ort {
  padding: 0.2rem 0.5rem;
  background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--line-2); border-radius: 99px;
  font-size: var(--fs-xs); line-height: 1.35;
}
.mk-ort-fluid { color: var(--fg-3); border-style: dashed; }

.mk-fuss { display: flex; flex-direction: column; gap: 0.35rem; }
.mk-legende {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-xs); color: var(--fg-2);
}
.mk-le { width: 1.5rem; height: 0; border-top: 2px solid var(--fg-2); }
.mk-le-strich { border-top-style: dashed; opacity: 0.65; }
.mk-legende .dim { margin-left: 0.75rem; }

/* Die aufklappbare Legende unter der Karte. Sie erklaert die sechs
   Knotenfarben, die Pfeilfarben und die Zahl am Pfeil. Zugeklappt kostet sie
   eine Zeile, denn wer die Karte kennt, braucht sie nicht. */
.mk-legende-block { margin: 0.4rem 0 0.6rem; }
.mk-legende-knopf { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }
.mk-legende-inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.6rem; margin-top: 0.7rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.mk-legende-teil strong { display: block; margin-bottom: 0.4rem; }
.mk-legende-teil ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.mk-legende-teil li { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.12rem 0; }
.mk-legende-teil small { display: block; margin-top: 0.5rem; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.45; }
.mk-legende-text li { display: block; }
.mk-legende-text code { margin-right: 0.35rem; }
/* Die Verbindungen eines Knotens als Liste. Eine Pfeildicke laesst sich
   vergleichen, aber nicht ablesen; hier steht die Zahl. */
.mk-verbindungen { margin-top: 1.1rem; }
.mk-verbindungen h4 { margin: 0 0 0.4rem; font-size: var(--fs-sm); }
.mk-verbindungen h4 em { color: var(--fg-3); font-style: normal; font-weight: 400; }
.mk-verbindungen ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.mk-verbindungen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--line); }
.mk-verbindungen li:last-child { border-bottom: 0; }
.mk-verbindungen li.vorhergesagt { opacity: 0.72; }
.mk-verb-partner { font-family: var(--font-mono); min-width: 0; overflow-wrap: anywhere; }
.mk-verb-mech { grid-column: 1; color: var(--fg-3); }
.mk-verb-staerke { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-verb-fuss { margin: 0.5rem 0 0; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.45; }

.mk-le-punkt { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.mk-le-strichfarbe { display: inline-block; width: 1.1rem; height: 0.18rem; border-radius: 1px; flex: none; align-self: center; }
/* Kurzlebige Rueckmeldung auf einen Klick, der nichts gebracht hat. Bewusst
   nicht als Fehlerfarbe: es ist kein Fehler, sondern eine Auskunft. */
.mk-hinweis {
  font-size: var(--fs-sm); color: var(--fg-2);
  animation: mk-hinweis-auf 0.25s var(--ease-out);
}
@keyframes mk-hinweis-auf { from { opacity: 0; } to { opacity: 1; } }
.mk-quellen { font-size: var(--fs-xs); }
.mk-lizenz { color: var(--fg-3); }

/* Touchgeraete bekommen Farb- und Fokusfeedback, aber keine klebenden
   transformierenden Hover-Zustaende. Die vorhandenen Timings bleiben gleich. */
@media (hover: none), (pointer: coarse) {
  .btn:hover, a.pill:hover, button.pill:hover, .brand:hover .brand-logo,
  .brand:hover .brand-mark, .account-trigger:hover, .pcard:hover,
  .pcard:hover .pcard-cover img, .tier-item:hover, .mol:hover img,
  .kind-opt:hover, .landing-offer-card:hover { transform: none; }
}

@media (max-width: 800px) {
  .mk-suchfeld { max-width: 100%; }
  .mk-kopf { align-items: stretch; flex-direction: column; }
  .mk-buehne { flex-direction: column; }
  /* `align-items: flex-start` auf .mk-buehne nimmt den Kindern das Strecken.
     In der schmalen Ansicht liegen sie untereinander, und ohne die Breite
     faellt die Leinwand auf die Breite ihres Inhalts zusammen, also auf den
     Rahmen: zwei Pixel. Die Detailspalte hatte das schon, die Leinwand nicht. */
  .mk-host { width: 100%; }
  .mk-detail { flex: 1 1 auto; width: 100%; }
  .mk-graph { height: 55vh; }
  /* Untereinander statt nebeneinander: sechs Bedienelemente in einer Reihe
     brauchen mehr als 800 Pixel, und ein halb abgeschnittenes Auswahlfeld ist
     schlimmer als eine Zeile mehr. */
  .mk-filter { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .mk-filter .mk-schieber, .mk-filter select.mk-select,
  .mk-filter .mk-aufklapp-knopf { width: 100%; min-width: 0; }
  .mk-aufklapp-inhalt { left: 0; right: 0; min-width: 0; max-width: none; }
  .mk-zurueck { align-self: flex-start; }
}
@media (max-width: 560px) {
  .mk-vollbild span:last-child { display: none; }
  .mk-vollbild { padding-inline: 0.65rem; }
  .mk-host-fullscreen { padding: 0.5rem; }
}
.mk-gebunden {
  display: inline-block; margin-left: 0.15rem;
  color: var(--k-recipe); font-weight: 600; cursor: help;
}

/* Die Stellschrauben der Interaktionsmatrix. Jede Zeile traegt ihre
   Begruendung, weil eine Zahl in einem Formular ohne den Satz daneben
   entweder nie oder aus dem Bauch heraus angefasst wird. */
.zsp-schrauben { display: grid; gap: 0.9rem; }
.zsp-schraube { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: 0.4rem 1rem; align-items: start; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.zsp-schraube:last-child { border-bottom: 0; }
.zsp-schraube-kopf { font-weight: 600; }
.zsp-schraube-kopf code { font-size: var(--fs-sm); color: var(--fg-3); font-weight: 400; margin-left: 0.4rem; }
.zsp-schraube p { margin: 0.15rem 0 0; font-size: var(--fs-sm); color: var(--fg-2); }
.zsp-schraube p.zsp-folge { color: var(--fg-3); }
.zsp-schraube .input { width: 100%; }
.zsp-schraube-wert { display: flex; flex-direction: column; gap: 0.25rem; align-items: stretch; }
.zsp-schraube-wert small { color: var(--fg-3); font-size: var(--fs-sm); }
.zsp-abweichend { border-left: 3px solid var(--accent); padding-left: 0.7rem; }
.zsp-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.zsp-matrix th, .zsp-matrix td { padding: 0.3rem 0.4rem; text-align: right; border-bottom: 1px solid var(--line); }
.zsp-matrix th:first-child, .zsp-matrix td:first-child { text-align: left; }
.zsp-matrix input { width: 4.4rem; text-align: right; }
.zsp-matrix td.zsp-summe { font-variant-numeric: tabular-nums; color: var(--fg-3); }
.zsp-matrix td.zsp-summe.hot { color: var(--danger); }
.zsp-einstellungen-fuss { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.9rem; }
.zsp-einstellungen-fuss small { color: var(--fg-3); }

/* ==========================================================================
   NEUE STARTSEITE
   Marketing darf erklaeren und einen Moment laenger atmen. Bedienelemente
   bleiben dagegen kurz, unterbrechbar und auf transform/opacity beschraenkt.
   ========================================================================== */

/* Auf der Startseite liegt die Navigation wie bei einem Editorial-Cover im
   Motiv. Sobald gescrollt wird, wird daraus wieder der bekannte Glaskopf. */
.hdr.home { position: fixed; inset: 0 0 auto; }
.home-is-loading .hdr.home { opacity: 0; }
.hdr.home + main { padding-top: 0; }
.hdr.home:not(.stuck) { color: #f7f8f4; }
.hdr.home:not(.stuck) .brand-txt small,
.hdr.home:not(.stuck) .nav a { color: rgba(255, 255, 255, 0.66); }
.hdr.home:not(.stuck) .nav a:hover,
.hdr.home:not(.stuck) .nav a.on { color: #fff; background: rgba(8, 9, 11, 0.38); }
.hdr.home:not(.stuck) .hdr-search input {
  color: #fff; background: rgba(8, 9, 11, 0.38); border-color: rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hdr.home:not(.stuck) .hdr-search input::placeholder { color: rgba(255, 255, 255, 0.52); }
.hdr.home:not(.stuck) .appearance-menu > .btn,
.hdr.home:not(.stuck) .account-trigger { background: rgba(8, 9, 11, 0.32); border-color: rgba(255, 255, 255, 0.16); }

.home-page { overflow: clip; background: var(--bg); }
.home-page-content { opacity: 0; visibility: hidden; }
.home-page.is-ready .home-page-content {
  opacity: 1; visibility: visible;
  transition: opacity 400ms var(--ease-out);
}
.home-loader {
  position: fixed; z-index: 500; inset: 0 0 auto; width: 100%; height: 100dvh;
  display: grid; place-content: center; gap: 1rem;
  background: #080a08; opacity: 1;
  transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
}
.home-loader.out { opacity: 0; visibility: hidden; pointer-events: none; }
.home-loader-logo { width: 88px; height: 35px; justify-self: center; }
.home-loader-line {
  display: block; width: 72px; height: 1px; justify-self: center;
  background: rgba(198, 249, 79, 0.18); overflow: hidden;
}
.home-loader-line i {
  display: block; width: 100%; height: 100%; background: var(--accent);
  transform: translate3d(-100%, 0, 0); animation: home-loader-progress 900ms linear infinite;
}
@keyframes home-loader-progress { to { transform: translate3d(100%, 0, 0); } }

/* --- Editorial hero ----------------------------------------------------- */
.home-hero {
  position: relative; min-height: max(760px, 100svh); padding: 0.65rem;
  overflow: hidden; color: #f7f8f4; isolation: isolate;
}
.home-hero-media,
.home-hero-shade { position: absolute; inset: 0.65rem; border-radius: 26px; }
.home-hero-media {
  z-index: -4;
  background: #171811 url("/static/assets/landing-gym.jpg?v=hero4k1") 66% center / cover no-repeat;
}
.home-hero-shade {
  z-index: -3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 7, 6, 0.74) 0%, rgba(5, 7, 6, 0.16) 54%, rgba(5, 7, 6, 0.44) 100%),
    linear-gradient(0deg, rgba(5, 7, 6, 0.92) 0%, rgba(5, 7, 6, 0.12) 62%, rgba(5, 7, 6, 0.38) 100%);
}
.home-hero-inner {
  position: relative; z-index: 1; min-height: calc(max(760px, 100svh) - 1.3rem);
  padding-top: clamp(8rem, 15vh, 11rem); padding-bottom: clamp(4rem, 8vh, 6.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem); align-items: end;
}
.home-hero-copy { grid-column: 1; justify-self: start; width: min(100%, 790px); }
.home-hero-title {
  max-width: 8.2ch; color: #fff;
  font-size: clamp(4.2rem, 8.6vw, 8.8rem); font-weight: 500;
  line-height: 0.82; letter-spacing: -0.06em;
}
.home-hero-title em {
  display: block; margin-top: 0.08em;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.025em; color: #fff;
}
.home-hero-copy > p {
  max-width: 54ch; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  color: rgba(255, 255, 255, 0.74); font-size: var(--fs-lead); line-height: 1.55;
}
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn.home-glass {
  --btn-bg: rgba(8, 9, 11, 0.34); --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.home-proof {
  display: flex; align-items: stretch; gap: 0; margin-top: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 1.1rem;
}
.home-proof > span { min-width: 0; padding: 0 1.4rem; border-left: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.58); font-size: var(--fs-xs); }
.home-proof > span:first-child { padding-left: 0; border-left: 0; }
.home-proof strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }

.home-trace {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--accent); font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.home-trace i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px rgba(198, 249, 79, 0.1);
  animation: home-live-pulse 1.8s linear infinite;
}
@keyframes home-live-pulse { 50% { opacity: 0.45; transform: scale(0.78); } }

/* --- Analyse-Diashow ---------------------------------------------------- */
.home-analysis { padding-top: clamp(7rem, 12vw, 11rem); scroll-margin-top: 76px; }
.home-section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr); gap: 1.5rem 5rem; align-items: end; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.home-section-intro .eyebrow { grid-column: 1 / -1; }
.home-section-intro h2,
.home-map-head h2,
.home-closing-card h2 { font-size: clamp(2.8rem, 5.8vw, 5.7rem); line-height: 0.94; letter-spacing: -0.055em; }
.home-section-intro h2 em,
.home-map-head h2 em,
.home-closing-card h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.home-section-intro .lead { justify-self: end; }

.home-analysis-shell {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  grid-template-areas: "tabs stage" "controls stage";
  gap: 1rem 1.5rem; align-items: stretch;
}
.home-analysis-tabs { grid-area: tabs; display: flex; flex-direction: column; gap: 0.35rem; align-self: start; }
.home-analysis-tabs button {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center;
  width: 100%; padding: 1rem; border: 1px solid transparent; border-radius: 16px 16px 16px 6px;
  color: var(--fg-3); text-align: left;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.home-analysis-tabs button > span { font-family: var(--font-mono); font-size: 0.65rem; }
.home-analysis-tabs button strong { color: inherit; font-size: var(--fs-sm); font-weight: 500; }
.home-analysis-tabs button > i { opacity: 0; font-style: normal; transform: translate3d(-6px, 0, 0); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.home-analysis-tabs button[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.home-analysis-tabs button[aria-selected="true"] > i { opacity: 1; transform: translate3d(0, 0, 0); }
.home-analysis-tabs button:active { transform: scale(0.97); }

.home-analysis-stage {
  grid-area: stage; min-height: 610px; padding: clamp(1.5rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: minmax(15rem, 0.75fr) minmax(23rem, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  border: 1px solid var(--line); border-radius: 32px 32px 32px 10px;
  background:
    radial-gradient(circle at 83% 12%, var(--accent-a12), transparent 32%),
    var(--bg-1);
  box-shadow: var(--shadow-2); overflow: hidden;
}
.home-analysis-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.home-analysis-copy h3 { max-width: 10ch; font-size: clamp(2rem, 3.8vw, 4rem); line-height: 0.98; letter-spacing: -0.05em; }
.home-analysis-copy > p { color: var(--fg-2); max-width: 42ch; }
.home-analysis-copy ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; color: var(--fg-2); font-size: var(--fs-sm); }
.home-analysis-copy li { display: flex; align-items: baseline; gap: 0.55rem; }
.home-analysis-copy li span { color: var(--accent); font-family: var(--font-mono); font-size: 0.7rem; }
.home-text-link { margin-top: 0.4rem; color: var(--accent-text); font-weight: 600; transition: color 160ms ease, transform 160ms var(--ease-out); }
.home-text-link:active { transform: scale(0.97); transform-origin: left; }

.home-analysis-preview {
  width: 100%; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 8px 26px 26px 26px;
  color: #f4f6f1; background: rgba(7, 9, 7, 0.96); border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38);
}
.home-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home-preview-head .label { color: rgba(255, 255, 255, 0.44); }
.home-preview-main { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 1.5rem; margin-top: clamp(1.8rem, 4vw, 3rem); }
.home-preview-score { display: flex; flex-direction: column; }
.home-preview-score > span { color: rgba(255, 255, 255, 0.45); font-size: var(--fs-xs); }
.home-preview-score > strong { font-family: var(--font-display); font-size: clamp(4rem, 7vw, 6.3rem); line-height: 0.85; letter-spacing: -0.07em; color: var(--accent); }
.home-preview-score > small { margin-top: 0.75rem; max-width: 12rem; color: rgba(255, 255, 255, 0.67); }
.home-preview-chart { width: 100%; height: auto; overflow: visible; }
.home-chart-grid { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.home-chart-area { fill: rgba(198, 249, 79, 0.08); stroke: none; }
.home-chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.home-preview-chart circle { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(198, 249, 79, 0.7)); }
.home-preview-metrics { display: grid; gap: 0.95rem; margin-top: clamp(2rem, 4vw, 3rem); }
.home-preview-metrics > div > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: rgba(255, 255, 255, 0.54); font-size: var(--fs-xs); }
.home-preview-metrics strong { color: #fff; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; }
.home-preview-metrics i { display: block; height: 3px; margin-top: 0.45rem; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.home-preview-metrics b { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; }
.home-preview-note { display: flex; gap: 0.6rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.58); font-size: var(--fs-xs); }
.home-preview-note span { color: var(--accent); }

.home-analysis-controls { grid-area: controls; display: flex; align-items: center; justify-content: space-between; gap: 1rem; align-self: end; }
.home-analysis-controls > span { display: flex; align-items: center; gap: 0.55rem; color: var(--fg-3); font-size: var(--fs-xs); }
.home-analysis-controls > span i { width: 26px; height: 1px; background: var(--line-3); }
.home-analysis-controls > div { display: flex; gap: 0.4rem; }
.home-analysis-controls button {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--fg-2);
  transition: color 160ms ease, background 160ms ease, transform 160ms var(--ease-out);
}
.home-analysis-controls button:active { transform: scale(0.95); }

/* --- Echte Molekuelkarten-Demo ----------------------------------------- */
.home-map { padding-top: clamp(7rem, 12vw, 11rem); background: var(--bg-1); }
.home-map-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.55fr); gap: 2rem 5rem; align-items: end; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.home-map-head > div { display: flex; flex-direction: column; gap: 1.4rem; }
.home-map-head h2 em { display: block; }
.home-map-head > p { justify-self: end; }
.home-map-frame {
  display: grid; grid-template-columns: minmax(0, 1fr) 21rem; min-height: 640px;
  border: 1px solid var(--line); border-radius: 34px; background: var(--bg);
  overflow: hidden; box-shadow: var(--shadow-2);
}
.home-map-canvas { min-width: 0; padding: 1.3rem; }
.home-map-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.25rem 1rem; }
.home-map-caption > span:last-child { display: flex; align-items: center; gap: 0.5rem; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.home-map-caption > span:last-child i { width: 6px; height: 6px; border-radius: 50%; background: var(--map-accent); box-shadow: 0 0 0 5px rgba(198, 249, 79, 0.1); }
.home-map-canvas .mk-graph { height: 570px; min-height: 570px; border: 0; border-radius: 24px 24px 24px 8px; background: var(--bg-1); }
.home-map-canvas .mk-host.mk-host-fullscreen .mk-graph { flex: 1 1 auto; height: auto; min-height: 0; }
.home-map-canvas .mk-vollbild { top: 0.7rem; }
.home-map-detail {
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0.75rem; padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: 8px 26px 26px 26px; background: var(--map-accent); color: var(--map-accent-ink);
}
.home-node-type { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0.7rem; border: 1px solid rgba(11, 13, 8, 0.2); border-radius: 99px; font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.home-node-type i,
.home-map-legend i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--punkt, var(--map-accent-ink)); }
.home-map-detail > .label { margin-top: auto; color: rgba(11, 13, 8, 0.55); }
.home-map-detail h3 { margin-top: 0.75rem; font-size: clamp(2rem, 2.8vw, 2.8rem); line-height: 0.95; overflow-wrap: break-word; hyphens: auto; }
.home-map-detail > p { margin-top: 1rem; color: rgba(11, 13, 8, 0.68); font-size: var(--fs-sm); }
.home-map-detail dl { width: 100%; margin-top: 1.5rem; border-top: 1px solid rgba(11, 13, 8, 0.16); }
.home-map-detail dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(11, 13, 8, 0.16); font-size: var(--fs-xs); }
.home-map-detail dd { font-family: var(--font-mono); }
.home-map-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; margin-top: 1.5rem; font-size: 0.68rem; }
.home-map-legend span { display: flex; align-items: center; gap: 0.35rem; }
.home-map-node-picker { width: 100%; margin-top: 1.35rem; }
.home-map-node-picker > .label { color: rgba(11, 13, 8, 0.52); }
.home-map-node-picker > div { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.home-map-node-picker button {
  padding: 0.3rem 0.58rem; border: 1px solid rgba(11, 13, 8, 0.18); border-radius: 99px;
  color: rgba(11, 13, 8, 0.66); font-family: var(--font-mono); font-size: 0.62rem;
  transition: color 160ms ease, background 160ms ease, transform 160ms var(--ease-out);
}
.home-map-node-picker button[aria-pressed="true"] { color: #fff; background: var(--map-accent-ink); border-color: transparent; }
.home-map-node-picker button:active { transform: scale(0.97); }
.home-map-detail .btn.primary { --btn-bg: var(--map-accent-ink); --btn-fg: #fff; margin-top: 1.7rem; border-color: transparent; }

/* --- Abschluss ---------------------------------------------------------- */
.home-closing { padding-block: clamp(7rem, 12vw, 11rem); }
.home-closing-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(3.5rem, 9vw, 8rem) var(--gut); border: 1px solid var(--line);
  border-radius: 42px 42px 42px 12px;
  background: radial-gradient(circle at 50% 105%, var(--accent-a20), transparent 48%), var(--bg-1);
}
.home-closing-card::before {
  content: ""; position: absolute; z-index: -1; top: -30%; right: -5%;
  width: min(28rem, 50vw); aspect-ratio: 1; border-radius: 54% 46% 38% 62% / 43% 55% 45% 57%;
  border: 1px solid var(--accent-a20); background: var(--accent-a08); transform: rotate(-16deg);
}
.home-closing-card h2 { max-width: 12ch; margin-top: 1.4rem; }
.home-closing-card h2 em { display: block; }
.home-closing-card .lead { margin-top: 1.5rem; text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .home-analysis-tabs button:not([aria-selected="true"]):hover { color: var(--fg); border-color: var(--line); background: var(--bg-1); transform: translate3d(3px, 0, 0); }
  .home-analysis-controls button:hover { color: var(--accent-ink); background: var(--accent); }
  .home-text-link:hover { color: var(--accent); transform: translate3d(3px, 0, 0); }
  .btn.home-glass:hover { background: rgba(8, 9, 11, 0.58); border-color: rgba(255, 255, 255, 0.35); }
  .home-map-node-picker button:not([aria-pressed="true"]):hover { color: var(--map-accent-ink); background: rgba(11, 13, 8, 0.08); }
}

@media (max-width: 1100px) {
  .home-analysis-shell { grid-template-columns: 1fr; grid-template-areas: "tabs" "stage" "controls"; }
  .home-analysis-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
  .home-analysis-tabs button { grid-template-columns: auto 1fr; }
  .home-analysis-tabs button > i { display: none; }
  .home-analysis-stage { min-height: 570px; }
  .home-analysis-controls { justify-content: flex-end; }
  .home-analysis-controls > span { margin-right: auto; }
  .home-map-frame { grid-template-columns: minmax(0, 1fr) 18rem; }
}

@media (max-width: 820px) {
  .home-hero { min-height: max(760px, 100svh); }
  .home-hero-inner { min-height: calc(max(760px, 100svh) - 1.3rem); grid-template-columns: 1fr; align-content: end; }
  .home-hero-copy { grid-column: 1; justify-self: start; }
  .home-hero-title { font-size: clamp(4rem, 14vw, 7rem); }
  .home-section-intro,
  .home-map-head { grid-template-columns: 1fr; }
  .home-section-intro .lead,
  .home-map-head > p { justify-self: start; }
  .home-analysis-stage { grid-template-columns: 1fr; min-height: 0; }
  .home-analysis-copy h3 { max-width: 13ch; }
  .home-map-frame { grid-template-columns: 1fr; }
  .home-map-detail { min-height: 420px; }
  .home-map-detail > .label { margin-top: 3rem; }
}

@media (max-width: 600px) {
  .home-hero { min-height: max(700px, 100svh); padding: 0; }
  .home-hero-media, .home-hero-shade { inset: 0; border-radius: 0 0 24px 24px; }
  .home-hero-media { background-position: 64% center; }
  .home-hero-inner { min-height: max(700px, 100svh); padding-top: 8rem; padding-bottom: 3.2rem; }
  .home-hero-title { font-size: clamp(3.55rem, 17vw, 5.5rem); line-height: 0.86; }
  .home-hero-copy > p { font-size: 1rem; }
  .home-hero-actions { align-items: stretch; }
  .home-hero-actions .btn { flex: 1 1 100%; }
  .home-proof > span { padding-inline: 0.65rem; font-size: 0.62rem; }
  .home-proof strong { font-size: 0.9rem; }
  .home-section-intro h2,
  .home-map-head h2,
  .home-closing-card h2 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .home-analysis-tabs { grid-template-columns: repeat(2, 1fr); }
  .home-analysis-tabs button { padding: 0.8rem; }
  .home-analysis-stage { padding: 1.15rem; border-radius: 24px 24px 24px 8px; }
  .home-analysis-copy { padding: 1rem 0.25rem 0.4rem; }
  .home-analysis-preview { padding: 1.15rem; }
  .home-preview-main { grid-template-columns: 1fr; align-items: start; }
  .home-preview-chart { margin-top: 0.4rem; }
  .home-map { padding-inline: 0; }
  .home-map-frame { margin-inline: calc(var(--gut) * -0.45); border-radius: 26px; }
  .home-map-canvas { padding: 0.8rem; }
  .home-map-caption { align-items: flex-start; }
  .home-map-caption > span:last-child { max-width: 8rem; text-align: right; }
  .home-map-canvas .mk-graph { height: 470px; min-height: 470px; }
  .home-map-detail { margin: 0.5rem; min-height: 390px; }
  .home-closing-card { border-radius: 30px 30px 30px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-loader-line i, .home-trace i { animation: none; }
  .home-loader-line i { transform: scaleX(0.6); transform-origin: left; }
  .home-analysis-stage { filter: none !important; }
}

/* --- Datenbank ----------------------------------------------------------- */
.database-page { gap: clamp(1.5rem, 3vw, 2.5rem); }
.database-page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.database-page-header h1 { margin-top: 0.8rem; font-size: var(--fs-h1); }
.database-page-header .lede { margin-top: 1rem; }
.database-total {
  flex: none; padding: 0.7rem 0.9rem; border: 1px solid var(--accent-a40);
  border-radius: 99px; color: var(--accent); font-size: var(--fs-xs);
}
.database-nav {
  display: flex; gap: 0.45rem; overflow-x: auto; padding: 0.35rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1);
  scrollbar-width: thin;
}
.database-nav-item {
  display: flex; align-items: center; gap: 0.6rem; min-width: max-content;
  padding: 0.85rem 1rem; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--fg-3); transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.database-nav-item:hover { color: var(--fg); background: var(--bg-2); }
.database-nav-item.on { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.database-nav-icon { font-family: var(--font-mono); font-size: 1.1rem; }
.database-nav-label { font-family: var(--font-display); font-weight: 600; }
.database-nav-count { font-size: var(--fs-label); opacity: 0.7; }
.database-nav-item.on .database-nav-count { color: var(--accent-ink); }
.database-section-stack { display: flex; flex-direction: column; gap: 1.15rem; }
.database-section-intro {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
}
.database-section-intro h2 { margin-top: 0.55rem; font-size: var(--fs-h2); }
.database-section-intro p { max-width: 58ch; margin-top: 0.7rem; color: var(--fg-2); }
.database-readonly {
  flex: none; padding: 0.35rem 0.65rem; border: 1px solid var(--line-2);
  border-radius: 99px; color: var(--fg-3); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
}
.database-catalog-panel { padding: clamp(1rem, 2.5vw, 1.5rem); }
.database-list-panel { padding: clamp(1rem, 2.5vw, 1.5rem); }
.database-toolbar {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); gap: 0.6rem;
}
.database-toolbar.single { grid-template-columns: minmax(0, 1fr); }
.database-list-summary {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-label);
}
.database-load-more { align-self: center; margin-top: 0.25rem; }
.database-error { align-items: flex-start; border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); }
.database-error strong { color: var(--danger); }
.database-error p { color: var(--fg-3); font-size: var(--fs-sm); }
.database-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.database-card-head h3 { min-width: 0; overflow-wrap: anywhere; }
.database-food-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
}
.database-food-card, .database-molecule-card, .database-evidence-card {
  min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2); transition: border-color 0.2s, transform 0.2s var(--ease);
}
.database-food-card:hover, .database-molecule-card:hover, .database-evidence-card:hover {
  border-color: var(--line-3); transform: translateY(-1px);
}
.database-food-card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.database-food-card h3 { font-size: 1.05rem; line-height: 1.25; }
.database-food-card .pill { flex: none; padding: 0.2rem 0.5rem; font-size: var(--fs-label); }
.database-food-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
.database-food-values div { display: flex; flex-direction: column; gap: 0.1rem; }
.database-food-values span { color: var(--fg-4); font-size: var(--fs-label); }
.database-food-values strong { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; }
.database-card-foot { margin-top: auto; color: var(--fg-4); font-size: var(--fs-label); line-height: 1.4; }
.database-evidence-list { display: flex; flex-direction: column; gap: 0.7rem; }
.database-evidence-card { padding: 1rem 1.1rem; }
.database-evidence-meta, .database-evidence-links {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
}
.database-evidence-meta { color: var(--fg-3); font-size: var(--fs-xs); }
.database-evidence-meta .pill { padding: 0.2rem 0.55rem; font-size: var(--fs-label); }
.database-ref-id { color: var(--accent); font-size: var(--fs-label); }
.database-evidence-text { margin-top: 0.75rem; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55; }
.database-evidence-links { margin-top: 0.8rem; font-size: var(--fs-xs); }
.database-evidence-links a { color: var(--accent); }
.database-evidence-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.database-molecule-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem;
}
.database-molecule-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem; }
.database-molecule-card h3 { font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.database-molecule-type { padding: 0.2rem 0.55rem; font-size: var(--fs-label); }
.database-seed { color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-label); }
.database-molecule-name { color: var(--fg-3); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.database-molecule-meta { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; margin-top: auto; }
.database-molecule-meta div { display: flex; flex-direction: column; }
.database-molecule-meta dt { color: var(--fg-4); font-family: var(--font-mono); font-size: var(--fs-label); }
.database-molecule-meta dd { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-xs); }
.database-card-link { margin-top: 0.25rem; color: var(--accent); font-size: var(--fs-xs); }
.database-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Die Landingpage bleibt bewusst eigenstaendig: Inhalt und Premium-Angebot
   lassen sich spaeter ausbauen, ohne den geschuetzten Katalog umzubauen. */
.database-landing { gap: clamp(3rem, 7vw, 6.5rem); }
.database-landing-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); align-items: center;
  gap: clamp(2rem, 7vw, 7rem); min-height: min(42rem, 70vh);
  padding: clamp(1.5rem, 5vw, 4.5rem); border: 1px solid var(--line);
  border-radius: 2rem; background: radial-gradient(circle at 90% 12%, var(--accent-a16), transparent 35%), var(--bg-1);
}
.database-landing-hero::before {
  content: ""; position: absolute; z-index: -1; width: 34rem; aspect-ratio: 1;
  right: -12rem; bottom: -17rem; border: 1px solid var(--accent-a20);
  border-radius: 50%; box-shadow: 0 0 0 3rem var(--accent-a08), 0 0 0 7rem rgba(198, 249, 79, 0.025);
}
.database-landing-copy { max-width: 42rem; }
.database-landing-copy h1 { margin-top: 1rem; max-width: 9ch; font-size: var(--fs-hero); }
.database-landing-copy .lede { margin-top: 1.4rem; }
.database-landing-note { max-width: 52ch; margin-top: 1rem; color: var(--fg-3); font-size: var(--fs-sm); }
.database-landing-actions { gap: 0.7rem; flex-wrap: wrap; margin-top: 1.7rem; }
.database-landing-orbit { position: relative; width: min(100%, 25rem); aspect-ratio: 1; justify-self: center; }
.database-landing-orbit::before, .database-landing-orbit::after {
  content: ""; position: absolute; inset: 12%; border: 1px solid var(--accent-a20); border-radius: 50%;
}
.database-landing-orbit::after { inset: 27%; border-color: var(--line-2); }
.database-orbit-core {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: 5rem; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; box-shadow: 0 0 0 1rem var(--accent-a08), 0 0 3rem var(--accent-a20);
}
.database-orbit-node {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center;
  gap: 0.2rem; min-width: 4.7rem; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-label);
}
.database-orbit-node span { display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg-2); color: var(--accent); font-size: 1.1rem; }
.database-orbit-node small { font-size: var(--fs-label); }
.database-orbit-node.n-0 { top: 4%; left: 50%; transform: translateX(-50%); }
.database-orbit-node.n-1 { top: 50%; right: 0; transform: translateY(-50%); }
.database-orbit-node.n-2 { bottom: 4%; left: 50%; transform: translateX(-50%); }
.database-orbit-node.n-3 { top: 50%; left: 0; transform: translateY(-50%); }
.database-landing-catalog { max-width: 76rem; width: 100%; margin-inline: auto; }
.database-landing-catalog h2 { margin-top: 0.9rem; font-size: var(--fs-h2); }
.database-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.7rem; }
.database-preview-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); }
.database-preview-icon { color: var(--accent); font-family: var(--font-mono); font-size: 1.25rem; }
.database-preview-card h3 { margin-top: 1.4rem; font-size: 1.15rem; }
.database-preview-card p { margin-top: 0.5rem; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.5; }
.database-offer { max-width: 76rem; width: 100%; margin-inline: auto; }

@media (max-width: 900px) {
  .database-landing-hero { grid-template-columns: 1fr; min-height: 0; }
  .database-landing-orbit { max-width: 23rem; }
  .database-food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .database-molecule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .database-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .database-page-header, .database-section-intro { display: block; }
  .database-total, .database-readonly { display: inline-flex; margin-top: 1rem; }
  .database-toolbar { grid-template-columns: 1fr; }
  .database-food-grid, .database-molecule-grid, .database-preview-grid { grid-template-columns: 1fr; }
  .database-landing-hero { padding: 1.25rem; border-radius: var(--r); }
  .database-landing-copy h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .database-orbit-node { min-width: 4rem; }
}


/* Zwei Beispielbalken statt zweier Farbkaestchen: die Legende zeigt die Form,
   die sie erklaert. */
.zsp-legende-block { margin: 0.6rem 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.zsp-legende-zeile { display: flex; align-items: center; gap: 1rem; padding: 0.25rem 0; }
.zsp-legende-text { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; }
.zsp-legende-text em { color: var(--fg-3); font-style: normal; font-size: var(--fs-sm); }
.zsp-legende-balken { flex: 1 1 10rem; }
.zsp-legende-balken .bar-track, .zsp-legende-balken .bar-fill { display: block; }
.zsp-legende-block .an-hint { margin: 0.5rem 0 0; }

/* Ob ein Paarbefund dem Stack nuetzt oder schadet. Ohne diesen Satz sieht eine
   Waage aus zwei Balken bei Synergie genauso aus wie bei Aufhebung. */
/* Der Zeitfenster-Hinweis. Er traegt eine Quelle und aendert keine Zahl. */
.zsp-fenster { margin: 0.3rem 0 0; font-size: var(--fs-sm); color: var(--fg-2); border-left: 2px solid var(--accent); padding-left: 0.6rem; }
.zsp-fenster em { display: block; color: var(--fg-3); font-style: normal; margin-top: 0.15rem; }

.zsp-vorzeichen { font-size: var(--fs-sm); font-weight: 600; }
.zsp-vorzeichen.gut { color: var(--accent-text); }
.zsp-vorzeichen.schlecht { color: var(--warning); }
.zsp-bedeutung { margin: 0.2rem 0 0.6rem 0.6rem; }

/* --- Altersbestaetigung und Einwilligung --------------------------------- */

/* Die Altersabfrage liegt ueber der Seite und die Einwilligung darunter:
   erst die eine Frage, dann die naechste, und beide nie gleichzeitig.
   z-index 240 haelt sie ueber dem Bestaetigungsdialog der Auswertung (220). */
.gate-backdrop {
  position: fixed; inset: 0; z-index: 240;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(6, 7, 9, 0.9); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: molIn 0.18s var(--ease-out);
}
.gate-card {
  width: min(30rem, 100%); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-3);
}
.gate-mark {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--accent);
  padding: 0.35rem 0.8rem; border-radius: 99px;
  border: 1px solid var(--accent-a40); background: var(--accent-a08);
}
.gate-card h2 { margin: 0; font-size: var(--fs-h3); }
.gate-card p { margin: 0; color: var(--fg-2); line-height: 1.6; }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.3rem; }
.gate-note { font-size: var(--fs-xs); color: var(--fg-3); }

.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 230;
  padding: 1rem var(--gut) calc(1rem + env(safe-area-inset-bottom));
  background: var(--bg-glass); border-top: 1px solid var(--line-2);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-2);
}
.consent-in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1.5rem;
  align-items: center;
}
.consent-text { min-width: 0; }
.consent-text strong { display: block; font-family: var(--font-display); margin-bottom: 0.2rem; }
.consent-text p { margin: 0; font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; }
.consent-details {
  margin: 0.6rem 0 0; padding-left: 1.1rem;
  font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55;
}
.consent-details li + li { margin-top: 0.35rem; }
.consent-details strong { display: inline; color: var(--fg); }
.consent-more {
  margin-top: 0.4rem; padding: 0; border: 0; background: none;
  font-size: var(--fs-xs); color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent-legal {
  grid-column: 1 / -1; margin: 0;
  font-size: var(--fs-xs); color: var(--fg-3);
}
.consent-legal a { color: var(--fg-3); text-decoration: underline; text-underline-offset: 3px; }
.consent-legal a:hover { color: var(--fg); }

@media (max-width: 760px) {
  .consent-in { grid-template-columns: 1fr; }
  .consent-actions button { flex: 1 1 10rem; }
}

.consent-setting h3 { margin: 0 0 0.3rem; font-size: var(--fs-h3); }
.consent-choice { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.consent-stamp { margin-top: 0.7rem; font-size: var(--fs-xs); }

/* Zustimmung bei der Registrierung */
.auth-terms {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.5;
  cursor: pointer;
}
.auth-terms input { margin-top: 0.2rem; flex: none; accent-color: var(--accent); }
.auth-terms a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Redaktion: Modelle je Workflow und die Standards */
.redaktion-hinweis { margin-top: 0.25rem; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.55; max-width: 72ch; }
.redaktion-workflow h3 { margin: 0.25rem 0 1rem; font-size: var(--fs-h3); }
.redaktion-rollen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.redaktion-rolle {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2);
}
.redaktion-rolle > strong { font-size: var(--fs-sm); }
.redaktion-standards { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.redaktion-dateien { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; }
.redaktion-dateien button {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem; text-align: left;
  border-radius: var(--r-sm); border: 1px solid transparent; color: var(--fg-2);
}
.redaktion-dateien button:hover { background: var(--bg-2); color: var(--fg); }
.redaktion-dateien button.on { background: var(--bg-3); border-color: var(--line-2); color: var(--fg); }
.redaktion-dateien button strong { font-size: var(--fs-sm); }
.redaktion-dateien button span { font-size: var(--fs-xs); color: var(--fg-3); }
.redaktion-editor { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.redaktion-editor h3 { margin: 0.2rem 0; font-size: var(--fs-h3); }
.redaktion-text { width: 100%; min-height: 65vh; resize: vertical; font-size: var(--fs-xs); line-height: 1.6; tab-size: 2; }
.redaktion-vorschau { max-width: none; max-height: 70vh; overflow: auto; padding-right: 0.5rem; }
.redaktion-versionen summary { cursor: pointer; color: var(--fg-3); font-size: var(--fs-sm); }
.redaktion-versionen ul { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
.redaktion-versionen li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-xs); color: var(--fg-3); }
@media (max-width: 760px) {
  .redaktion-standards { grid-template-columns: 1fr; }
  .redaktion-text { min-height: 50vh; }
}

/* --- Auswertung: eine Hierarchie (2026-09-28) ----------------------------
   Vorher waren die Abschnittsköpfe eine winzige Versalienzeile in Mono
   („INTERAKTIONSMATRIX"), die Unterköpfe darin dagegen normaler Fettdruck in
   voller Größe („Welche Systeme der Stack anrührt", „Oberer Balken: Stärke").
   Die Kinder waren lauter als die Eltern, und die Matrix stand als einziger
   Block in einem gestrichelten Kasten.

   Drei Ebenen, jede an ihrer Linie erkennbar:
   1. Abschnitt: großer Kopf, kräftige Linie darüber.
   2. Unterabschnitt: mittlerer Kopf, feine Linie darüber.
   3. Legende und Beiwerk: klein und leise. */
/* Der Depotverlauf trägt seine Linie am ganzen Block: sein Kopf ist nur so
   breit wie der Text darin, und die Linie wäre sonst kürzer als alle anderen. */
.an-report-copy .an-curve { border-top: 2px solid var(--line-3); padding-top: 1.1rem; }
.an-report-copy .an-curve-head .label { border-top: 0 !important; padding-top: 0 !important; }
.an-report-copy .an-block > .label,
.an-report-copy .an-curve-head .label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  padding: 1.1rem 0 0;
  border-top: 2px solid var(--line-3);
  border-bottom: 0;
  margin-bottom: 0.35rem;
}
.an-report-copy > * + * { margin-top: 3rem; }

/* Ebene 2: die Dimensionen unter „Befunde je Dimension" und die Tabellen der
   Matrix. */
.an-report-copy .an-unterteilt { gap: 1.6rem; margin-top: 0.6rem; }
.an-report-copy .an-unterteilt .an-dimension-finding > .label,
.an-report-copy .zsp-tabelle-kopf strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
.an-report-copy .an-unterteilt .an-dimension-finding > .label {
  padding: 0.8rem 0 0; border-top: 1px solid var(--line-2); border-bottom: 0;
}
.an-report-copy .zsp .zsp-tabelle,
.an-report-copy .zsp .zsp-datenlage {
  margin-top: 1.8rem; padding-top: 0.9rem; border-top: 1px solid var(--line-2);
}

/* Ebene 3: die Legende erklärt, sie überschreibt nicht. */
.an-report-copy .zsp-legende-text strong {
  font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2);
}
.an-report-copy .zsp-legende-block { margin: 1.4rem 0 0; }

/* Der Name im Satz ist der Link, kein zweiter Slug darunter. */
.an-befund-link { color: inherit; text-decoration: underline;
  text-decoration-color: var(--line-3); text-underline-offset: 0.18em; }
.an-befund-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.an-refs span { font-size: var(--fs-label); color: var(--fg-4); }

/* Ein Befund, der für den Stack spricht (getrennt eingenommen, abgesichert). */
.an-finding.lvl-gut .mark { color: var(--score-accent, var(--accent)); }

.an-karte-knopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.1rem; border-top: 2px solid var(--line-3); }
.an-karte-knopf .an-hint { margin: 0; }

/* Ein Endpunkt, der in der Risikominderung weniger wiegt. Leise, aber lesbar:
   die Zahl daneben soll nicht wie ein verschwiegener Abschlag wirken. */
.zsp-gering { font-style: normal; font-size: var(--fs-label); color: var(--fg-4); cursor: help; }

/* Angepinnt: die Marke steht vor dem Titel, nicht als Zeile darueber. Ein
   Faden, der oben steht, muss auch sagen, warum er oben steht. */
.pcard-pin { margin-right: 0.4rem; font-size: 0.9em; }
/* Fruehzugang: eine Marke, kein Schloss. Wer ihn nicht hat, soll sehen, dass
   es den Artikel gibt, und ab wann er offen ist. */
.pcard-early { margin-right: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 99px;
  background: var(--accent); color: var(--bg); font-size: var(--fs-label);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  vertical-align: middle; }

/* Boltz-Laeufe in der Verwaltung. Die Kontrollen stehen oben und abgesetzt:
   ohne sie ist keine Zahl darunter lesbar. */
.boltz-lauf { margin-top: 1.5rem; }
.boltz-fenster { max-width: 52rem; line-height: 1.6; }
.boltz-tabelle { width: 100%; border-collapse: collapse; margin-top: 0.8rem; font-size: var(--fs-sm); }
.boltz-tabelle th { text-align: left; font-weight: 500; color: var(--fg-3);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--line-2); }
.boltz-tabelle td { padding: 0.35rem 0.6rem 0.35rem 0; border-bottom: 1px solid var(--line); }
.boltz-kontrolle td { background: var(--bg-2); }
.boltz-rolle { display: block; font-style: normal; font-size: var(--fs-label); color: var(--fg-4); }
.boltz-marke { font-size: var(--fs-label); padding: 0.1rem 0.5rem; border-radius: 99px;
  border: 1px solid var(--line-2); color: var(--fg-3); white-space: nowrap; }
.boltz-marke.gut { border-color: var(--accent); color: var(--accent); }
.boltz-marke.warn { border-color: var(--warning); color: var(--warning); }
.boltz-marke.aus { color: var(--fg-4); }

/* --- Bestand (Verwaltung) ------------------------------------------------ */
.bestand-stufe { font-size: var(--fs-label); padding: 0.1rem 0.5rem; border-radius: 99px;
  border: 1px solid var(--line-2); color: var(--fg-3); white-space: nowrap; font-family: var(--font-mono); }
.bestand-stufe.s-fehler { border-color: var(--danger); color: var(--danger); }
.bestand-stufe.s-warnung { border-color: var(--warning); color: var(--warning); }
.bestand-fehlt { color: var(--warning); }
.bestand-gruppe { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1.1rem; }
.bestand-gruppe.s-fehler { border-color: var(--danger); }
.bestand-gruppe > summary { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; cursor: pointer; }
.bestand-erklaerung { font-size: var(--fs-sm); margin: 0.75rem 0 0.25rem; }
.bestand-liste { list-style: none; margin: 0; padding: 0; }
.bestand-liste > li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.bestand-liste > li:last-child { border-bottom: 0; }
.bestand-liste > li > div:first-child { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 320px; }
.bestand-liste > li.bewusst { opacity: 0.6; }
.bestand-text { color: var(--fg-2); overflow-wrap: anywhere; }
.bestand-vermerk { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.bestand-vermerk-form { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 320px; }
.bestand-notiz { display: block; font-size: var(--fs-xs); color: var(--accent); white-space: normal; max-width: 42ch; }
.bestand-marken { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.bestand-tabelle td { vertical-align: top; }
.bestand-tabelle td:last-child { white-space: normal; min-width: 14rem; }
.bestand-notizzeile td { background: var(--bg-2); }
@media (max-width: 640px) {
  .bestand-vermerk { align-items: flex-start; }
}