/* ==========================================================================
   Biebinger — Die Werkschau
   Editorial single page. Chrome is monochrome; the work provides the color.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/anton-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/anton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-roman-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-roman-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-italic-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-italic-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/space-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/space-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --papier: #fafafa;
  --weiss: #ffffff;
  --schwarz: #000000;
  --druck: #141414;
  --grau: #666666;
  --hairline: #e0e0e0;
  --kino: #111111;
  --kino-text: #fafafa;
  --kino-muted: #a3a3a3;
  --kino-hairline: #5a5a5a;
  --scrim: rgb(0 0 0 / 0.8);

  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --s-xs: 8px;
  --s-sm: 16px;
  --s-md: 32px;
  --s-lg: 64px;
  --s-2xl: 192px;

  --container: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 68ch;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--druck);
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--schwarz);
  outline-offset: 2px;
}

.cinema :focus-visible {
  outline-color: var(--kino-text);
}

/* The skip target itself needs no ring; the scroll position shows the jump */
#main:focus-visible {
  outline: none;
}

::selection {
  background: var(--schwarz);
  color: var(--papier);
}

.cinema ::selection {
  background: var(--kino-text);
  color: var(--kino);
}

.skip-link {
  position: absolute;
  left: -9999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skip-link:focus {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  background: var(--schwarz);
  color: var(--papier);
  padding: 12px 20px;
  text-decoration: none;
}

/* Nur für Vorleser: visuell versteckt, im Zugriffsbaum vorhanden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---------- Type roles ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--schwarz);
}

.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

.label--strong {
  font-weight: 700;
  color: var(--schwarz);
}

.prose {
  max-width: var(--measure);
  hyphens: auto;
}

.prose p + p {
  margin-top: 1.25em;
}

.prose strong {
  font-weight: 500;
}

/* ---------- Masthead ---------- */

.masthead {
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
}

.masthead-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-block: 22px;
  border-bottom: 1px solid var(--hairline);
}

.masthead-bar .label:last-child {
  white-space: nowrap;
}

/* The lockup: ink tile with the white mark, then the wordmark */

.masthead-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3.4vw, 56px);
}

.mark-tile {
  display: block;
  flex-shrink: 0;
  height: clamp(4.25rem, 13.5vw, 12rem);
  aspect-ratio: 128 / 200;
  background: var(--schwarz);
}

.mark-tile svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--papier);
}

.masthead-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s-lg);
}

.wordmark {
  font-size: clamp(4.25rem, 13.5vw, 12rem);
}

.kicker {
  display: block;
  margin-bottom: var(--s-md);
}

.curator {
  margin-top: var(--s-md);
  max-width: 44ch;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.5;
}

.curator-sign {
  display: block;
  margin-top: var(--s-sm);
}

/* Catalog index */

.index {
  border-top: 2px solid var(--schwarz);
  margin-bottom: var(--s-md);
}

.index ol {
  list-style: none;
}

.index li {
  border-bottom: 1px solid var(--hairline);
}

.index a {
  display: grid;
  grid-template-columns: 3ch 1fr auto;
  gap: var(--s-md);
  align-items: baseline;
  padding-block: 14px;
  text-decoration: none;
}

.index a:hover .index-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.index-no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--schwarz);
}

.index-title {
  font-size: 1.0625rem;
  font-weight: 500;
}

.index-type {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--grau);
  margin-left: 0.5em;
}

.index-year {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--grau);
}

/* ---------- Exhibits ---------- */

.exhibit {
  padding-top: clamp(72px, 10vw, var(--s-2xl));
}

.wall-label {
  border-top: 2px solid var(--schwarz);
  padding-top: var(--s-sm);
}

.wall-label-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-sm);
  margin-bottom: clamp(28px, 4vw, 56px);
}

.exhibit-title {
  font-size: clamp(2.75rem, 7vw, 6.25rem);
  margin-left: -0.03em;
  max-width: 14ch;
}

.standfirst {
  margin-top: clamp(20px, 2.5vw, 32px);
  max-width: 30ch;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 500;
  line-height: 1.3;
}

.meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap: var(--s-sm) var(--s-md);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--s-sm);
  margin-top: clamp(28px, 4vw, 56px);
}

.meta div {
  min-width: 0;
}

.meta dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 6px;
}

.meta dd {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--schwarz);
  line-height: 1.7;
}

.meta--five {
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(40px, 5vw, 72px);
}

.meta--nine {
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(16px, 3vw, 32px);
}

/* Tag cloud (9 ideas) */

.tag-cloud {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud li {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schwarz);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
}

/* Pitch shortlist */

.funnel-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.funnel-list dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schwarz);
  margin-bottom: 2px;
}

.funnel-list dd {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grau);
}

.funnel-item--winner {
  border-left: 2px solid var(--schwarz);
  padding-left: 10px;
}

.funnel-item--winner dt {
  color: var(--schwarz);
}

/* Side-labeled rows */

.row {
  display: grid;
  grid-template-columns: 190px minmax(0, var(--measure));
  gap: var(--s-md) 56px;
  margin-top: clamp(40px, 5vw, 72px);
}

.row h3 {
  padding-top: 0.4em;
}

/* Plates (framed work) */

.plate {
  margin-top: clamp(40px, 5vw, 72px);
}

.plate-frame {
  border: 1px solid var(--hairline);
  background: var(--weiss);
  padding: clamp(8px, 1.2vw, 14px);
}

.plate figcaption,
.funnel-figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

.plate-row {
  display: grid;
  gap: var(--s-md);
  margin-top: clamp(40px, 5vw, 72px);
}

.plate-row .plate {
  margin-top: 0;
}

.plate-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plate-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plate-row--phones {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.img-crop-hero {
  aspect-ratio: 2.2 / 1;
  object-fit: cover;
  object-position: top;
}

/* Pull quotes */

.pull-quote {
  margin: clamp(56px, 8vw, 104px) auto 0;
  max-width: 26ch;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(32px, 4vw, 48px);
  text-align: center;
  font-style: italic;
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  line-height: 1.3;
  color: var(--schwarz);
}

/* Metrics */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--s-md);
  align-items: start;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-md);
  margin-top: clamp(56px, 8vw, 104px);
}

/* dt holds the label, dd the value; the reversed column puts the value on top.
   Cells stay start-aligned so wrapping labels don't shove neighbouring numbers
   down to a different baseline. */
.metrics > div,
.big-number > div {
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.metrics--tight {
  margin-top: var(--s-md);
  border-top: 0;
  padding-top: 0;
}

.metric-value {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--schwarz);
}

.metric-label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Academy big-number spread */

.big-number {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-md);
}

.big-number .metric-value {
  font-size: clamp(4.5rem, 11vw, 9rem);
  letter-spacing: -0.01em;
}

/* Result line */

.result-line {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-md);
  justify-content: space-between;
}

/* YouTube facade (click-to-load embed) */

.yt-facade {
  position: relative;
  display: block;
  text-decoration: none;
}

.yt-facade img {
  width: 100%;
}

.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--weiss);
  background: var(--scrim);
  padding: 14px 26px;
  white-space: nowrap;
}

.yt-play svg {
  display: block;
}

.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play {
  background: var(--schwarz);
}

.yt-embed {
  aspect-ratio: 16 / 9;
  background: var(--schwarz);
}

.yt-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Cinema (Mannheim) ---------- */

.cinema {
  background: var(--kino);
  color: var(--kino-text);
  padding-block: clamp(64px, 8vw, 112px);
  margin-top: clamp(56px, 8vw, 104px);
}

.cinema-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}

.cinema-head-right {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}

.cinema-nav {
  display: flex;
  gap: var(--s-xs);
}

.strip-btn {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--kino-text);
  background: none;
  border: 1px solid var(--kino-hairline);
  padding: 16px 20px;
  cursor: pointer;
}

.strip-btn svg {
  display: block;
}

.strip-btn:hover:not([aria-disabled="true"]) {
  border-color: var(--kino-text);
}

.strip-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.strip-btn--pause {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-inline: 16px;
}

.cinema-head .label {
  color: var(--kino-muted);
}

.cinema-head .label--strong {
  color: var(--kino-text);
}

.filmstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 640px);
  gap: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
  padding-bottom: var(--s-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--kino-hairline) transparent;
  list-style: none;
}

.scene {
  scroll-snap-align: start;
}

.scene video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--schwarz);
}

.scene-meta {
  padding-top: var(--s-sm);
}

.scene-no {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kino-muted);
}

.scene-frage {
  margin-top: 10px;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--kino-text);
}

.scene-vision {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--kino-muted);
  max-width: 52ch;
}

.cinema-disclaimer {
  /* No max-width: padding-inline already aligns with the filmstrip, and under
     border-box a 68ch max plus both-side gutters collapses the content box on
     wide viewports into a one-character column. */
  margin-top: var(--s-sm);
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
  color: var(--kino-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ---------- Mosaic (Six brands) ---------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
  margin-top: clamp(40px, 5vw, 72px);
}

.mosaic .plate {
  margin-top: 0;
}

/* ---------- Index strip (six homepages, small) ---------- */

/* An index, not a gallery: no white frame, no per-plate caption. One number
   for the whole row, one domain under each thumbnail. */
.strip-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-sm);
  list-style: none;
  margin-top: clamp(40px, 5vw, 72px);
}

.strip-row img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  background: var(--weiss);
}

.strip-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--grau);
}

/* The strip is one figure, so its caption keeps the normal plate spacing */
.strip > figcaption {
  margin-top: var(--s-sm);
}

/* ---------- Fenster (Gruppe — sechs Marken, sechs Hebel) ---------- */

/* Der Bilderstreifen ist die Steuerung. Ein Vorschaubild zeigt, was hinter
   dem Klick steht; ein Textknopf muesste es behaupten. Im Ruhezustand ist
   der Block genau die Abbildung, die er vorher war — und genau das steht
   spaeter auch auf dem Papier. */
.fenster {
  --spread: min(calc(100vw - 2 * var(--gutter)), 1280px);
  width: var(--spread);
  margin-inline-start: calc(50% - var(--spread) / 2);
  margin-top: var(--s-md);
}

.fenster .strip-row {
  margin-top: 0;
}

/* Der Schalter traegt nichts Eigenes: Bild und Domain sollen aussehen wie
   vorher im Streifen. Er macht sie nur anfassbar. */
.strip-schalter {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.strip-schalter:hover img {
  border-color: var(--grau);
}

.strip-schalter:hover .strip-label {
  color: var(--schwarz);
}

.strip-schalter:focus-visible {
  outline: 2px solid var(--schwarz);
  outline-offset: 3px;
}

/* Die offene Marke bekommt ihre Familienfarbe unter das Bild gelegt. Das
   ist dieselbe Auszeichnung wie im Register davor, nur an einem Bild. */
.strip-schalter .strip-label {
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}

/* Ein Rahmen aus outline statt aus border: er wird 2 px stark, ohne dass
   sich das Bild um einen Pixel verschiebt. Auf dunklen Vorschaubildern ist
   eine einzelne Haarlinie in Markenfarbe sonst kaum zu sehen. */
.strip-schalter[aria-expanded="true"] img {
  border-color: var(--marke, var(--schwarz));
  outline: 2px solid var(--marke, var(--schwarz));
  outline-offset: -2px;
}

.strip-schalter[aria-expanded="true"] .strip-label {
  color: var(--schwarz);
  border-bottom-color: var(--marke, var(--schwarz));
}

/* Eine Zeile ueber dem Fenster: welche Marke offen ist, welchen Stand sie
   hat, und dass sie nichts absendet. */
.fenster-titel {
  display: block;
  margin-top: var(--s-md);
  color: var(--grau);
}

.fenster-titel[hidden] {
  display: none;
}

/* Der leere Rahmen traegt das Fenster. Er hat kein Bild mehr darunter, also
   braucht er sein Seitenverhaeltnis selbst — dasselbe 1280 x 800, in dem die
   Vorschaubilder aufgenommen wurden. */
.fenster-rahmen {
  position: relative;
  display: none;
  aspect-ratio: 1280 / 800;
  margin-top: var(--s-sm);
  border: 1px solid var(--hairline);
  background: var(--weiss);
  padding: clamp(8px, 1.2vw, 14px);
}

.fenster-rahmen.is-active {
  display: block;
}

/* Das Fenster ist logisch 1280 x 800 gross und wird auf die Rahmenbreite
   verkleinert, statt die Seite in ihre Mobilfassung zu draengen. */
.fenster-live {
  position: absolute;
  top: clamp(8px, 1.2vw, 14px);
  left: clamp(8px, 1.2vw, 14px);
  width: 1280px;
  height: 800px;
  border: 0;
  background: var(--weiss);
  transform: scale(var(--k, 1));
  transform-origin: top left;
}

/* ---------- Schemata (Gruppe — gezeichnet statt gesetzt) ---------- */

/* Zwei Zeichnungen tragen hier die Aussage: das Rad dreht sich wirklich im
   Kreis, und die Kette verjuengt sich wirklich. Die Schrift im Bild steht
   bei 19 bis 32 Einheiten auf 1000 Einheiten Breite — bei 600 px Darstellung
   sind das noch 11 px, im Druck rund 13 px. Darunter uebernimmt der
   gestapelte Textaufbau. */
.schema {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s-md);
  overflow: visible;
}

.schema text {
  fill: var(--druck);
}

/* Der Titel eines Bandes und die Zeile im Fuss */
.schema-nr {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--grau);
}

.schema-klein {
  font-family: var(--font-serif);
  font-size: 17px;
  fill: var(--druck);
}

/* Dieselbe starke Oberlinie, die auch die Stationen im Text tragen */
.schema-oben {
  stroke: var(--schwarz);
  stroke-width: 2;
}

.schema-spitze {
  fill: var(--schwarz);
}

/* ---- Das Rad */

/* ---- Die Kette */


.schema-blatt {
  fill: var(--weiss);
  stroke: var(--schwarz);
  stroke-width: 2;
}

.schema-blatt-ohr {
  fill: var(--hairline);
  stroke: var(--schwarz);
  stroke-width: 2;
}

.schema-blatt-zeile {
  stroke: var(--grau);
  stroke-width: 1.5;
}

/* Der Knoten, an dem die Speiche den Ring trifft */
.schema-punkt {
  fill: var(--marke, var(--schwarz));
}

/* Der Haltepunkt folgt der kleinsten Schrift im Bild. Die Figur ist so breit
   wie das Fenster minus zweimal der Bundsteg, bei 768 px Fensterbreite also
   691 px. Dort misst die kleinste Zeile noch 11,1 px. Darunter uebernimmt der
   gestapelte Textaufbau. Der Druck holt sich die Zeichnung eigens zurueck. */
@media (max-width: 767px) {
  .schema {
    display: none;
  }
}

@media (min-width: 768px) {
  .schema-ersatz {
    display: none;
  }
}

/* ---- Das Schaltbild
   Der Fluss laeuft von oben nach unten: der Fall, das Regelwerk, das Angebot.
   In der Mitte steht die Achse mit sechs Spuren, links und rechts stehen die
   Bloecke der vier Marken.
   Die Schriftgroessen stehen hier und in schaltbild.py gleich. 16 Einheiten
   ist der Boden: bei 691 px Tafelbreite — dem Haltepunkt 768 px — sind das
   noch 11,1 px. */

.schema-feldname {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--grau);
}

.schema-wert {
  font-family: var(--font-serif);
  font-size: 18px;
  fill: var(--druck);
}

/* Der Name der Marke traegt ihre Familienfarbe */
.schema-gruppe {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--marke, var(--schwarz));
}

/* Wie viele Bloecke dieser Marke sich gemeldet haben */
.schema-zaehlung {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  fill: var(--grau);
}

.schema-blockname {
  font-family: var(--font-serif);
  font-size: 17px;
  fill: var(--schwarz);
}

.schema-blockname--weg {
  font-family: var(--font-serif);
  font-size: 17px;
  fill: var(--grau);
}

.schema-mass {
  font-family: var(--font-mono);
  font-size: 16px;
  fill: var(--grau);
}

/* Warum ein Block schweigt — heller als eine Menge */
.schema-mass--weg {
  font-family: var(--font-mono);
  font-size: 16px;
  fill: #999999;
}

/* Ein Block, der sich meldet: voll in der Farbe seiner Markenfamilie */
.schema-baustein {
  fill: var(--marke, var(--druck));
}

/* Ein Block, der nicht zutrifft: nur der Umriss */
.schema-baustein--weg {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1.5;
}

/* Eine Zelle, die ihre Generation deckt, aber entworfen ist. Gestrichelt
   heisst in beiden Zeichnungen dasselbe: geplant, nicht gebaut. */
.schema-baustein--plan {
  fill: var(--papier);
  stroke: #a0a0a0;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.schema-leitung {
  fill: none;
  stroke: var(--grau);
  stroke-width: 1.5;
}

.schema-knoten {
  fill: var(--grau);
}

/* Diese Antwort bemisst einen Block, sie schaltet ihn nicht ein */
.schema-ring {
  fill: none;
  stroke: var(--grau);
  stroke-width: 1.5;
}

/* Dieser Block erzeugt ein Zertifikat */
.schema-siegel {
  fill: var(--schwarz);
}

/* Er koennte eins erzeugen, meldet sich aber nicht */
.schema-siegel--weg {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1.5;
}

/* Die Beschriftung des zweiten Durchgangs, so leise wie seine Leitung */
.schema-klein--frei {
  font-family: var(--font-serif);
  font-size: 17px;
  fill: var(--grau);
}

/* Der zweite Durchgang: ein Block schaltet einen zweiten frei */
.schema-frei {
  fill: none;
  stroke: var(--schwarz);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.schema-fein {
  stroke: var(--hairline);
  stroke-width: 1;
}

/* Der Sprung an einer Kreuzung. Schmal, damit die Senkrechte lesbar bleibt. */
.schema-hopp {
  stroke: var(--papier);
  stroke-width: 6;
}

/* ---- Der Weg von der Ausschreibung zur Abgabe
   Zwei Reihen zu drei Stationen. Die Kette hat eine Naht in der Mitte: 01-03
   arbeiten an der Ausschreibung, 04-06 bauen die Bewerbung, und dazwischen
   entscheidet ein Mensch. In zwei Reihen ist diese Naht der Umbruch, und das
   Tor steht in der Mitte der Tafel. Eine Spalte misst 306 von 1000 Einheiten,
   also doppelt so viel wie in einer Reihe — jede Unterzeile steht dadurch
   zweizeilig statt vierzeilig.
   Gleiche Schriftmasse wie beim Schaltbild: 16 Einheiten sind bei 691 px
   Bildbreite noch 11,1 px, bei 820 px Tafel 13,1 px. */

.schema-stufe {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.08em;
  fill: var(--schwarz);
}

.schema-stufe-nr {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  fill: var(--grau);
}

.schema-zeile {
  font-family: var(--font-serif);
  font-size: 17px;
  fill: var(--druck);
}

/* Das Tor: hier entscheidet ein Mensch */
.schema-tor {
  fill: var(--weiss);
  stroke: var(--schwarz);
  stroke-width: 2;
}

.schema-tor-t {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  fill: var(--schwarz);
}

/* Die Naht: heute waehlt der Mensch von Hand, was in das Deck kommt */
.schema-naht {
  fill: var(--papier);
  stroke: var(--schwarz);
  stroke-width: 1.5;
}

.schema-naht-t {
  font-family: var(--font-mono);
  font-size: 16px;
  fill: var(--grau);
}

/* Gestrichelt heisst: entworfen, nicht gebaut */
.schema-blatt--plan {
  fill: var(--papier);
  stroke: #a0a0a0;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.schema-blatt--wahl {
  fill: var(--weiss);
  stroke: var(--grau);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.schema-plan-zeile {
  stroke: #a0a0a0;
  stroke-width: 1.5;
}

.schema-plan-punkt {
  fill: var(--grau);
}

.marke--dach {
  --marke: #2e2e39;
}

.marke--service {
  --marke: #167378;
}

.marke--digital {
  --marke: #1657e8;
}

.marke--handwerk {
  --marke: #006a75;
}
/* ---------- Flywheel (Gruppe — der Verteiler und der Kreis) ---------- */

/* Beide Schemata treten aus --measure heraus, aber nur ein Stueck weit, und
   sie stehen auf der linken Kante des Textes wie alles andere im Block.
   Die Schrift in einer Zeichnung waechst mit der Tafel: 16 Einheiten auf 1000
   Einheiten Breite sind bei 1280 px Tafel schon 20,5 px und damit lauter als
   der Fliesstext. Bei 820 px sind es 13,1 px. Die Tafel hoert deshalb hier
   auf zu wachsen. Das Hebel-Register (.fenster) bleibt auf 1280 px — es
   traegt Fotos, keine Schrift, und darf die ganze Breite nehmen. */
.flywheel,
.kette-figure {
  width: min(100%, 820px);
  margin-top: var(--s-md);
}

/* Der Ersatz steht nur unter 768 px, also immer gestapelt. Die Nummern
   01–04 tragen dort die Reihenfolge. */
.verteiler {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}

.station {
  position: relative;
  border-top: 2px solid var(--schwarz);
  padding-top: var(--s-sm);
}

/* Der Pfeil steht in der Spaltenlücke, auf Höhe der Oberlinie. */
.station-name {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schwarz);
}

.station-no {
  margin-right: 10px;
  color: var(--grau);
}

.station p {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.station p.station-lead {
  font-size: 1rem;
  font-weight: 500;
  color: var(--schwarz);
  line-height: 1.4;
}

.ausgaenge {
  list-style: none;
  margin-top: 10px;
}

.ausgang {
  border-left: 3px solid var(--marke, var(--hairline));
  padding-left: 12px;
}

.ausgang + .ausgang {
  margin-top: 14px;
}

.ausgang-marke {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schwarz);
}

.ausgang-zahl {
  color: var(--grau);
}

.ausgang-liste {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--druck);
}

/* Die Ergebniszeile läuft unter allen drei Stationen durch. */
.verteiler-ergebnis {
  display: block;
  margin-top: var(--s-md);
  padding-top: var(--s-xs);
  border-top: 1px solid var(--hairline);
}

.flywheel > figcaption,
.kette-figure > figcaption {
  display: block;
  margin-top: var(--s-md);
}

/* ---------- Kette (Gruppe — vom Fund zum Angebot) ---------- */

/* Das gestrichelte Band steht über der Kette, nicht darin: der Agent ist
   entworfen, die vier Stufen darunter sind gebaut. */
/* Der Kasten steht jetzt unter der Kette, nicht mehr darueber. Ohne den
   Abstand stiesse seine Kante an die letzte Textzeile der Station. */
.kette-agent {
  position: relative;
  margin-top: var(--s-md);
  border: 1px dashed var(--grau);
  padding: var(--s-sm);
}

.kette-agent-label {
  position: relative;
  display: block;
  width: fit-content;
  top: -22px;
  margin-left: 6px;
  margin-bottom: -11px;
  padding-inline: 8px;
  background: var(--papier);
  line-height: 1;
  color: var(--schwarz);
}

.kette-agent p {
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: var(--measure);
}

/* Die Kette steht nur im Textersatz, also unter 768 px. Zwei Spalten sind
   dort das Breiteste, was auftreten kann. */
.kette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
  list-style: none;
}

.kette-station {
  border-top: 2px solid var(--schwarz);
  padding-top: var(--s-sm);
}

.kette-status {
  display: block;
  margin-top: 8px;
  color: var(--schwarz);
}

.kette-zahlen {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--schwarz);
  line-height: 1.4;
}

.kette-station p + p {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--druck);
}

.kette-schluss {
  margin-top: var(--s-md);
  padding-top: var(--s-xs);
  border-top: 1px solid var(--hairline);
}

.kette-schluss span {
  display: block;
  max-width: var(--measure);
  font-size: 0.9375rem;
  line-height: 1.5;
}


/* Brand Book chapters (EP) */

.chapters {
  list-style: none;
  column-count: 2;
  column-gap: var(--s-md);
}

.chapters li {
  break-inside: avoid;
  border-top: 1px solid var(--hairline);
  padding-block: 8px;
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: 12px;
  font-size: 0.9375rem;
}

.chapter-no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--grau);
  padding-top: 0.2em;
}

/* Brand Book viewer (details/summary, no JS) */

.bb-details {
  margin-top: var(--s-md);
}

.bb-details summary {
  cursor: pointer;
  list-style: none;
}

.bb-details summary::-webkit-details-marker {
  display: none;
}

.bb-details[open] summary {
  background: var(--schwarz);
  color: var(--papier);
}

.bb-viewer {
  margin-top: var(--s-sm);
  border: 1px solid var(--hairline);
  background: var(--weiss);
  padding: clamp(8px, 1.2vw, 14px);
}

.bb-viewer iframe {
  display: block;
  width: 100%;
  height: min(70vh, 640px);
  height: min(70dvh, 640px);
  border: 0;
}

.bb-open-link {
  margin-top: 10px;
}

/* Spec table (Gruppe — Markentypen) */

.spec-block {
  margin-top: clamp(40px, 5vw, 72px);
}

/* The gradient pair paints scroll shadows only while content is cut off */
.spec-scroll {
  overflow-x: auto;
  margin-top: var(--s-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
  background:
    linear-gradient(to right, var(--papier), var(--papier)) left / 32px 100%,
    linear-gradient(to right, var(--papier), var(--papier)) right / 32px 100%,
    linear-gradient(to right, rgb(0 0 0 / 0.1), transparent) left / 18px 100%,
    linear-gradient(to left, rgb(0 0 0 / 0.1), transparent) right / 18px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.spec-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.spec-table th {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  padding: 10px 24px 10px 0;
}

.spec-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 12px 24px 12px 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  vertical-align: top;
}

.spec-table td:first-child {
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
}

/* Funnel list (Academy) */

.funnels {
  max-width: var(--measure);
}

.funnels ul {
  list-style: none;
}

.funnels li {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 4px var(--s-sm);
  align-items: baseline;
  border-top: 1px solid var(--hairline);
  padding-block: 10px;
}

.funnels ul:last-of-type li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.funnel-group {
  padding: 14px 0 8px;
}

.funnels .funnel-group:first-child {
  padding-top: 0;
}

.funnel-name {
  font-weight: 500;
  font-size: 1rem;
}

.funnel-q {
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--grau);
}

/* Neun Funnels als Register. Die Mechanik ist die des Kinos (.filmstrip),
   nur hell und klein: 240 Einheiten je Karte, vier im Blick, fünf hinter
   dem Rand. Bei 1024 px Satzspiegel ergeben vier Karten 1032 px — die
   vierte wird angeschnitten und zeigt damit selbst, dass es weitergeht. */
.funnel-figure {
  margin-top: clamp(40px, 5vw, 72px);
}

.funnel-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-md);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-sm);
  margin-bottom: var(--s-sm);
}

.funnel-nav {
  display: flex;
  gap: var(--s-xs);
}

/* .strip-btn trägt die Kinofarben. Auf Papierweiss braucht es die Druckfarbe. */
.strip-btn--hell {
  color: var(--druck);
  border-color: var(--hairline);
  padding: 10px 14px;
}

.strip-btn--hell:hover:not([aria-disabled="true"]) {
  border-color: var(--druck);
}

.funnelstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: var(--s-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--s-xs);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
  list-style: none;
}

.funnel-karte {
  scroll-snap-align: start;
}

.funnel-karte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--hairline);
  background: var(--weiss);
}

.funnel-titel {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Zugabe — der eingeklappte Anhang. Kein Skript: Bilder in einem
   geschlossenen <details> werden nicht dargestellt, also laedt lazy sie nicht. */

.zugabe {
  margin-top: clamp(72px, 10vw, 140px);
}

.zugabe-details summary {
  cursor: pointer;
  list-style: none;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--s-sm);
}

.zugabe-details summary::-webkit-details-marker {
  display: none;
}

/* Traegt Wort und Nebenzeile in einer Reihe. Ein <h2> im <summary> ist
   erlaubt — genau ein Ueberschriftenelement. So bleibt die Gliederung heil. */
.zugabe-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-xs) var(--s-md);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schwarz);
}

.zugabe-teaser {
  margin-left: auto;
  font-weight: 400;
  color: var(--grau);
}

.zugabe-teaser::after {
  content: " \25BE";
}

.zugabe-details[open] .zugabe-teaser::after {
  content: " \25B4";
}

.zugabe-inhalt {
  margin-top: var(--s-md);
}

/* Die Vorlagen laufen von 1,41 bis 1,51. Contain schneidet keins an.
   Vorbild: .img-crop-hero */
.img-plakat {
  aspect-ratio: 1 / 1.43;
  object-fit: contain;
  background: var(--weiss);
}

/* Persona dossiers (EP) */

.personas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
  margin-top: clamp(40px, 5vw, 72px);
  max-width: 880px;
}

.persona-card {
  border: 1px solid var(--hairline);
  background: var(--weiss);
  padding: var(--s-md);
}

.persona-card h4 {
  font-size: 1.25rem;
  font-weight: 500;
}

.persona-sub {
  display: block;
  margin-top: 6px;
}

.persona-card ul {
  list-style: none;
  margin-top: var(--s-sm);
}

.persona-card li {
  border-top: 1px solid var(--hairline);
  padding-block: 9px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Messaging specimen (EP) — the sheet that quotes the product's own voice */

/* A plate that holds type instead of an image needs real margins */
.plate-frame--sheet {
  padding: clamp(24px, 4vw, 56px);
}

.specimen-claim {
  margin-top: 0;
  max-width: 24ch;
}

.specimen-claim em {
  font-style: italic;
}

.specimen-sub {
  margin-top: var(--s-sm);
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.6;
}

.specimen-sub strong {
  font-weight: 500;
}

/* ---- Zeitbudget pro Bericht ----
   Two rows drawn to true scale, so the ratio is visible before the numbers
   are read. Column 1 holds the track, column 2 the value. */

.timecut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  column-gap: var(--s-sm);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(24px, 3vw, 36px);
}

.timecut-key {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  color: var(--schwarz);
}

.timecut-key:not(:first-child) {
  margin-top: clamp(24px, 3vw, 34px);
}

.timecut-track {
  position: relative;
  height: 16px;
}

.timecut-bar {
  height: 100%;
}

/* The old way: hatched, because this time is disposable. */
.timecut-bar--was {
  width: 100%;
  border: 1px solid rgb(20 20 20 / 0.42);
  background: repeating-linear-gradient(45deg,
      rgb(20 20 20 / 0.34) 0 1px,
      transparent 1px 3.5px);
}

/* 15 of 90 minutes. The rest of the track stays paper — that void is the saving. */
.timecut-bar--is {
  width: 16.667%;
  background: var(--druck);
}

.timecut-val {
  justify-self: end;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1;
  color: var(--schwarz);
  white-space: nowrap;
}

/* The space before "Min." lives in the markup so screen readers say "90 Min." */
.timecut-unit {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Starts exactly where the solid bar ends */
.timecut-gain {
  grid-column: 1 / 2;
  padding-left: 16.667%;
  margin-top: 14px;
  /* padding-left equals the solid bar, so the content box IS the measured void */
  text-align: center;
}

/* Dimension line: hairline span, darker ticks at both ends */
.timecut-rule {
  position: relative;
  height: 9px;
  background: linear-gradient(var(--hairline), var(--hairline)) left 4px / 100% 1px no-repeat;
}

.timecut-rule::before,
.timecut-rule::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 9px;
  background: var(--grau);
}

.timecut-rule::before {
  left: 0;
}

.timecut-rule::after {
  right: 0;
}

.timecut-pct {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--schwarz);
}

.timecut-gain-key {
  display: block;
  margin-top: 10px;
}

/* ---- Sprechen. Fotografieren. Fertig. ---- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-md);
  margin-top: clamp(40px, 5vw, 64px);
}

.steps li {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}

.step-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--grau);
}

.step-name {
  display: block;
  margin-top: 10px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--schwarz);
}

.step-desc {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--grau);
}

/* ---- Deine Vorteile — two columns, like the Brand Book chapters ---- */

.specimen-sub-head {
  margin-top: clamp(40px, 5vw, 64px);
  font-size: 1.25rem;
  font-weight: 500;
}

.benefits {
  list-style: none;
  column-count: 2;
  column-gap: var(--s-lg);
  margin-top: var(--s-sm);
}

.benefits li {
  break-inside: avoid;
  border-top: 1px solid var(--hairline);
  padding-block: 12px;
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: 12px;
}

.benefit-no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--grau);
  padding-top: 0.45em;
}

.benefit-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--schwarz);
}

.benefits p {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--grau);
}

.specimen-close {
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-sm);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--schwarz);
}

/* ---- Einsparungsrechner — das Blatt rechnet mit ----
   Regler im Timecut-Duktus: die Bahn ist eine Hairline, der gefahrene Teil
   Druckfarbe, der Griff ein Druck-Quadrat. --pos hält den gefahrenen Anteil;
   der Startwert steht im Markup, das Skript zieht ihn nach. */

.regler {
  margin-top: var(--s-sm);
}

.regler-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  column-gap: var(--s-sm);
  align-items: center;
}

.regler-zeile+.regler-zeile {
  margin-top: clamp(20px, 2.5vw, 28px);
}

.regler-key {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  color: var(--schwarz);
}

/* Start-Fuellstaende der Regler: (value − min) / (max − min). Sie stehen im
   Stylesheet, weil die CSP (style-src 'self') Inline-style-Attribute verwirft;
   ab der ersten Eingabe setzt js/main.js --pos per CSSOM. */
#r-satz { --pos: 33.333%; }
#r-man  { --pos: 40%; }
#r-ep   { --pos: 40%; }
#r-ber  { --pos: 23.077%; }
#r-liz  { --pos: 19.192%; }

.rechner input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.rechner input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(var(--druck), var(--druck)) 0 / var(--pos, 0%) 100% no-repeat, var(--hairline);
}

.rechner input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: 0;
  border-radius: 0;
  background: var(--druck);
}

.rechner input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--hairline);
}

.rechner input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--druck);
}

.rechner input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--druck);
}

.rechner input[type="range"]:focus-visible {
  outline: 2px solid var(--schwarz);
  outline-offset: 6px;
}

.regler-val {
  justify-self: end;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1;
  color: var(--schwarz);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.regler-unit,
.rw-unit {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Rechenkette: jede Zeile nennt ihren Rechenweg, die Jahreszahl schließt groß. */

.rechenweg {
  margin-top: var(--s-sm);
}

.rw-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-sm);
  border-top: 1px solid var(--hairline);
  padding-block: 14px;
}

.rw-key {
  grid-column: 1;
  color: var(--schwarz);
}

.rw-formel {
  grid-column: 1;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--grau);
}

.rw-val {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1;
  color: var(--schwarz);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rw-zeile--jahr {
  padding-block: 20px;
}

.rw-val--jahr {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  letter-spacing: -0.01em;
}

/* Werkzeug-Register (Gruppe) — Name links, Stand rechts, Zeile darunter */

.tools {
  list-style: none;
  max-width: var(--measure);
}

.tools li {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px var(--s-sm);
  align-items: baseline;
}

.tools li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.tools h4 {
  font-size: 1.0625rem;
  font-weight: 500;
}

.tools p {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
}

.tool-status {
  justify-self: end;
  text-align: right;
}

/* Kurzfazit — Rolle, Werkverzeichnis, Gelernt */

.verdict {
  max-width: var(--measure);
}

/* Three labels, one per part. The first aligns with the "Kurzfazit" label
   in the row gutter, which carries the same 0.4em from .row h3. */
.verdict-head {
  display: block;
  margin-top: clamp(28px, 3vw, 40px);
}

.verdict > .verdict-head:first-child {
  margin-top: 0;
  padding-top: 0.4em;
}

.verdict-role,
.verdict-learned {
  margin-top: var(--s-xs);
}

/* The register at the back of the catalog: what was made, not what it did.
   Set tighter than the tool register so the two never read as the same list. */
.werk {
  list-style: none;
  margin-top: var(--s-xs);
}

.werk li {
  border-top: 1px solid var(--hairline);
  padding-block: 12px;
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: 12px;
}

.werk li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.werk-no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--grau);
  padding-top: 0.35em;
}

.werk-name {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--schwarz);
}

.werk li p {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--druck);
}

/* ---------- Colophon ---------- */

.colophon {
  margin-top: clamp(72px, 10vw, var(--s-2xl));
  border-top: 2px solid var(--schwarz);
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.colophon-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s-md) 56px;
  align-items: start;
  margin-top: clamp(28px, 4vw, 40px);
}

.portrait {
  border: 1px solid var(--hairline);
  background: var(--weiss);
  padding: 8px;
}

.portrait img {
  filter: grayscale(1);
}

.colophon-text {
  max-width: 52ch;
  font-size: 1.125rem;
}

.colophon-text p + p {
  margin-top: 1em;
}

.colophon-likes {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-md);
  row-gap: 0.55em;
  margin-top: 1.25em;
  align-items: baseline;
}

.colophon-likes > div {
  display: contents;
}

.colophon-likes dt,
.colophon-likes dd {
  margin: 0;
}

.stationen {
  margin-top: var(--s-md);
  line-height: 1.9;
}

.kontakt {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm) var(--s-md);
}

.kontakt-mail {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 500;
}

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schwarz);
  border: 1px solid var(--schwarz);
  padding: 14px 26px;
  text-decoration: none;
}

.btn:hover {
  background: var(--schwarz);
  color: var(--papier);
}

/* The signet closes the catalog */

.signet {
  margin-top: clamp(64px, 9vw, 112px);
  display: flex;
  justify-content: center;
}

.signet svg {
  height: 60px;
  aspect-ratio: 128 / 200;
  color: var(--druck);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-md);
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-md);
}

.site-footer a {
  text-underline-offset: 4px;
}

/* Standalone label links need a ≥24px hit area (WCAG 2.5.8) */
.site-footer a,
.topbar a,
.bb-open-link a,
.kontakt a.label,
.prose p > a.label {
  display: inline-block;
  padding-block: 5px;
}

.site-footer nav {
  display: flex;
  gap: var(--s-md);
}

/* ---------- Legal pages ---------- */

.topbar {
  border-bottom: 1px solid var(--hairline);
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-block: 20px;
}

.topbar a {
  text-decoration: none;
}

.topbar a:hover {
  text-decoration: underline;
}

.legal {
  padding-block: clamp(56px, 8vw, 104px);
}

.legal h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.legal-stand {
  display: block;
  margin-top: var(--s-sm);
}

.legal-body {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.7;
  hyphens: auto;
}

.legal-body h2 {
  font-size: 1.1875rem;
  font-weight: 500;
  margin-top: 2.25em;
  hyphens: manual;
}

.legal-body p {
  margin-top: 0.75em;
}

.legal-body address {
  font-style: normal;
  margin-top: 0.75em;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: smooth;
  }
}

/* ---------- Breakpoints ---------- */

@media (max-width: 900px) {
  .strip-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .row {
    grid-template-columns: 1fr;
    gap: var(--s-sm);
  }

  .row h3 {
    padding-top: 0;
  }

  .meta {
    grid-template-columns: 1fr 1fr;
  }

  .meta--five {
    grid-template-columns: repeat(3, 1fr);
  }

  .meta--nine {
    grid-template-columns: repeat(2, 1fr);
  }

  .colophon-grid {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  /* Unter 900 px ergibt eine auf 0,6 verkleinerte Schreibtischfassung keinen
     Sinn mehr. Das Fenster laeuft dann in seiner echten Breite und zeigt die
     Mobilfassung — das ist die ehrlichere Auskunft. */
  /* Unter 900 px ergibt eine auf 0,6 verkleinerte Schreibtischfassung keinen
     Sinn mehr. Das Fenster laeuft dann in seiner echten Breite und zeigt die
     Mobilfassung — das ist die ehrlichere Auskunft. Der weisse Rand faellt
     dabei weg: auf einem Telefon zaehlt jeder Pixel Breite. */
  .fenster-rahmen {
    aspect-ratio: auto;
    height: 70vh;
    padding: 0;
  }

  /* Breite und Hoehe muessen gesetzt werden. Ein iframe ist ein ersetztes
     Element: bei width:auto nimmt es seine Eigengroesse von 300 x 150 und
     ignoriert die gegenueberliegende Kante. Gemessen, nicht vermutet. */
  .fenster-live {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1.125rem;
  }

  .kette {
    grid-template-columns: 1fr;
  }

  .tools li {
    grid-template-columns: 1fr;
  }

  .tool-status {
    justify-self: start;
    text-align: left;
  }


  .strip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mosaic,
  .plate-row--2,
  .personas {
    grid-template-columns: 1fr;
  }

  .plate-row--phones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .index a {
    grid-template-columns: 3ch 1fr;
    row-gap: 2px;
  }

  .index-year {
    grid-column: 2;
  }

  .plate-row--3 {
    grid-template-columns: 1fr;
  }

  /* Neun Plakate untereinander sind zu lang, zwei Spalten unter 400 px zu
     klein. auto-fit schaltet selbst: zwei Spalten bis rund 420 px, dann eine. */
  .zugabe .plate-row--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }

  .chapters {
    column-count: 1;
  }

  .funnels li {
    grid-template-columns: 1fr;
  }

  /* The bars still carry the ratio; the dimension line needs the room */
  .benefits {
    column-count: 1;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--s-sm);
  }

  .timecut {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .timecut-gain {
    padding-left: 0;
    text-align: left;
  }

  .timecut-rule {
    display: none;
  }

  .colophon-grid {
    grid-template-columns: 1fr;
  }

  .portrait {
    max-width: 180px;
  }
}

/* ---------- Print ---------- */

@media print {
  /* A4 statt US-Letter — das PDF geht an deutsche Empfänger. */
  @page {
    size: A4;
    margin: 12mm;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }

  .cinema {
    background: none;
    color: var(--druck);
  }

  .cinema-head .label,
  .scene-no,
  .scene-vision {
    color: var(--grau);
  }

  .scene-frage {
    color: var(--druck);
  }

  .skip-link,
  .cinema-nav,
  .yt-play,
  video {
    display: none;
  }

  /* Ein Easter Egg findet man, man bekommt es nicht geliefert. */
  .zugabe {
    display: none;
  }

  /* Auf Papier wird nicht geblättert. Die neun stehen im Raster,
     sonst stünden im PDF nur die ersten vier. */
  .funnelstrip {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }

  .funnel-karte {
    break-inside: avoid;
  }

  /* Dasselbe für den Hauptfilm: sieben Szenen im Raster statt im
     Laufband. Die Filme fallen weg, die Texte bleiben vollständig. */
  .filmstrip {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    padding-inline: var(--gutter);
  }

  .scene {
    break-inside: avoid;
  }

  /* Die Architektur-Tabelle wird auf Papier nicht gescrollt,
     sie wird schmaler gesetzt. */
  .spec-scroll {
    overflow: visible;
  }

  .spec-table {
    min-width: 0;
  }

  .spec-table td {
    font-size: 0.8125rem;
    padding-right: 14px;
  }

  .spec-table td:first-child {
    font-size: 0.875rem;
  }

  .funnel-nav {
    display: none;
  }

  .plate,
  .persona-card,
  .scene {
    break-inside: avoid;
  }

  /* The specimen sheet is taller than a page, so it must split — but never
     through a bar, a step or a benefit row. */
  .plate-frame--sheet {
    break-inside: auto;
  }

  /* Der Rechner druckt als festes Rechenbeispiel: die Regler verschwinden,
     die Startwerte (90 → 15 Min.) stehen als Text. */
  .rechner input[type="range"] {
    display: none;
  }

  .regler-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .regler-key {
    grid-column: 1;
    margin-bottom: 0;
  }

  .regler-zeile+.regler-zeile {
    margin-top: 10px;
  }

  .regler-zeile,
  .rw-zeile,
  .timecut,
  .steps li,
  .benefits li,
  .strip-row li,
  .werk li,
  .station,
  .ausgang,
  .kette-station,
  .metrics > div,
  .big-number > div {
    break-inside: avoid;
  }

  /* Chrome hält break-inside auf Grid-Kindern nicht zuverlässig. Das
     Schaltbild und die ganze Kette passen je auf eine Seite. */
  .kette-agent,
  .kette-figure {
    break-inside: avoid;
  }

  /* Überschrift, Vorspann und Schema der Kette zusammen sind höher als
     eine A4-Seite. Ein unteilbarer Block dieser Höhe bringt Chromium dazu,
     das Dokumentende wegzuschneiden — dann fehlt das Kolophon im PDF.
     Deshalb darf der Block brechen; die Kette selbst bleibt ungeteilt. */
  .spec-block--keep {
    break-inside: auto;
  }

  .schema,
  .flywheel,
  .kette-figure {
    break-inside: avoid;
  }

  /* Der Druckbereich liegt unter dem Haltepunkt. Auf Papier soll trotzdem die
     Zeichnung stehen, nicht der Textaufbau. Gemessen: die Tafel druckt 487 pt
     breit, die kleinste Zeile misst dort 7,8 pt — im Druck lesbar. */
  .schema {
    display: block !important;
  }

  .schema-ersatz {
    display: none !important;
  }

  /* Auf Papier gibt es kein Fenster. Es steht der Streifen da: sechs
     Startseiten, sechs Domains, eine Unterschrift — Abb. 14, vollstaendig. */
  .fenster-titel,
  .fenster-stage {
    display: none !important;
  }

  .strip-schalter .strip-label {
    border-bottom: 0;
    padding-bottom: 0;
  }
}