@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   küchenform — „Das Blatt"
   Blaupausenblau als Zeichnungsfeld, Beton-Papier als Dokumentfeld.
   Eine Schrift über die Breitenachse, rechte Winkel, Rot nur als Marke.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften (lokal, kein externer Request) ───────────────────────────── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-wdth-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-wdth-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;
}
/* Eine Schrift für das ganze Blatt. Ein Zeichnungsstandard beschriftet
   Titel, Maße und Text mit demselben Alphabet — hier trennt allein die
   Breitenachse die Beschriftung vom Fließtext. */

/* ── Marken ────────────────────────────────────────────────────────────── */
:root {
  --plan-deep: #071B29;
  --plan: #0E2E45;
  --plan-raised: #143953;
  --plan-line: #4E7691;
  --steel: #8FA3B0;
  --chalk: #DCE7EE;

  --paper: #DEDCD6;
  --paper-raised: #E8E6E1;
  --paper-line: #B9B6AE;      /* Haarlinie, rein flächig */
  --paper-rule: #8B877D;      /* tragende Linie: 3,05:1 — Tabellen, Feldunterkanten */
  --graphite: #1C1E1F;
  --graphite-soft: #5C5F61;

  --signal: #C51718;          /* Flächen und Displaygrößen auf Papier */
  --signal-deep: #A81214;
  /* dasselbe Rot für kleine Schrift auf Papier: #C51718 erreicht dort nur
     4,36:1, #A81214 dagegen 5,55:1. */
  --signal-text: #A81214;
  /* dasselbe Rot, für das blaue Feld aufgehellt: 4,6:1 auf --plan,
     5,7:1 auf --plan-deep — reicht auch für 10-px-Maßzahlen. */
  --signal-bright: #F2665E;

  --fd: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fb: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --hair: 4px;  --xs: 8px;   --sm: 12px;  --md: 20px;
  --lg: 32px;   --xl: 56px;  --sheet: clamp(72px, 11vh, 132px);
  --marg: clamp(20px, 4.2vw, 64px);
  --rail: 26px;
  --max: 1560px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-draw: cubic-bezier(.16, 1, .3, 1);

  /* Feldabhängige Rollen — je Sektion überschrieben */
  --fg: var(--chalk);
  --fg-2: var(--steel);
  --line: var(--plan-line);
  --bg: var(--plan);
  --mark: var(--signal-bright);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; }

body {
  background: var(--plan);
  color: var(--chalk);
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::selection { background: var(--signal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.sheet--plan :focus-visible, .plan :focus-visible,
.foot :focus-visible, .top :focus-visible, .menu :focus-visible {
  outline-color: var(--signal-bright);
}

.skip {
  position: fixed; z-index: 300; top: var(--sm); left: var(--sm);
  background: var(--signal); color: #fff;
  padding: 14px 20px;
  font-family: var(--fd); font-size: 11px; font-weight: 600;
  font-stretch: 78%; letter-spacing: .16em; text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* ══ Typografische Bausteine ══════════════════════════════════════════════ */
.d1 {
  font-family: var(--fd);
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(2.75rem, 7.4vw, 6rem);
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #fff;
}
.d2 {
  font-family: var(--fd);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--fg);
}
/* Rot markiert, was entschieden oder gemessen wird — sonst trägt die
   Hervorhebung die Feldfarbe. Höchstens zwei rote Displayworte je Seite. */
.d2 em { font-style: normal; color: var(--mark); }
.d2 em.q { color: var(--fg-2); }

.tag {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fd); font-size: 11px; font-weight: 600;
  font-stretch: 78%; letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.tag b {
  font-weight: 600; color: var(--mark);
  padding-right: 10px; border-right: 1px solid var(--line);
}
.tag--sub { color: var(--fg-2); }

.prose p { max-width: 64ch; text-wrap: pretty; }
.prose p + p { margin-top: var(--md); }

.link {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--fd); font-size: 12px; font-weight: 600;
  font-stretch: 84%; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link i { font-style: normal; transition: transform .3s var(--ease); }
.link:hover { color: var(--mark); border-bottom-color: var(--mark); }
.link:hover i { transform: translateX(4px); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--signal); color: #fff;
  padding: 20px 30px;
  font-family: var(--fd); font-size: 12px; font-weight: 600;
  font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase;
  border: 0;
  transition: background-color .22s var(--ease);
}
.btn .dot {
  width: 6px; height: 6px; background: #fff; flex: none;
  transition: transform .3s var(--ease);
}
.btn:hover { background: var(--signal-deep); }
.btn:hover .dot { transform: translateX(3px) scale(1.25); }
.btn:active { background: #8E0F11; }
.btn[disabled] { background: var(--paper-line); color: var(--graphite-soft); cursor: not-allowed; }

.tel {
  font-family: var(--fd); font-size: 15px; font-weight: 550;
  font-stretch: 88%; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
.tel:hover { border-bottom-color: var(--mark); }

/* ══ Blattkopf ════════════════════════════════════════════════════════════ */
.kopf {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.kopf > div {
  padding: 10px 16px;
  border-right: 1px solid var(--line);
  min-width: 108px;
}
.kopf > div:last-child { border-right: 0; }
.kopf dt {
  font-family: var(--fd); font-size: 9.5px; font-weight: 600;
  font-stretch: 76%; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 3px;
}
.kopf dd {
  font-family: var(--fd); font-size: 14px; font-weight: 600;
  font-stretch: 92%; letter-spacing: .01em; line-height: 1.35;
  color: var(--fg);
}
.kopf dd span { color: var(--fg-2); font-weight: 500; }
.kopf dd a { border-bottom: 1px solid var(--line); }
.kopf dd a:hover { border-bottom-color: var(--mark); color: var(--mark); }

/* ══ Maßkette ═════════════════════════════════════════════════════════════ */
.dim { position: absolute; pointer-events: none; }
.dim::before, .dim::after {
  content: ""; position: absolute;
  background: var(--signal-bright);
}
.dim__v {
  position: absolute;
  font-family: var(--fd); font-size: 10px; font-weight: 550;
  font-stretch: 72%; letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
  background: var(--plan);
  padding: 2px 7px;
  white-space: nowrap;
}

/* Maßhilfslinien: laufen von den Endpunkten auf das gemessene Bauteil zu. */
.dim__e { position: absolute; background: var(--plan-line); opacity: .8; }

.dim--h { height: 1px; background: var(--plan-line); transform-origin: 50% 50%; }
.dim--h::before, .dim--h::after {
  width: 1px; height: 14px; top: -6.5px;
  transform: rotate(45deg);
}
.dim--h::before { left: 0; }
.dim--h::after { right: 0; }
.dim--h > .dim__v { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dim--h > .dim__e { width: 1px; height: 38px; top: 4px; }
.dim--h > .dim__e:nth-of-type(1) { left: 0; }
.dim--h > .dim__e:nth-of-type(2) { right: 0; }

.dim--v { width: 1px; background: var(--plan-line); transform-origin: 50% 50%; }
.dim--v::before, .dim--v::after {
  height: 1px; width: 14px; left: -6.5px;
  transform: rotate(45deg);
}
.dim--v::before { top: 0; }
.dim--v::after { bottom: 0; }
.dim--v > .dim__v {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.dim--v > .dim__e { height: 1px; width: 38px; right: 4px; }
.dim--v > .dim__e:nth-of-type(1) { top: 0; }
.dim--v > .dim__e:nth-of-type(2) { bottom: 0; }

/* Zeichnen beim Eintritt */
[data-draw] { --draw: 1; }
.js .dim--h[data-draw] { transform: scaleX(var(--draw)); }
.js .dim--v[data-draw] { transform: scaleY(var(--draw)); }
.js [data-draw] { --draw: 0; transition: transform .9s var(--ease-draw); }
.js [data-draw] > .dim__v { opacity: 0; transition: opacity .4s .55s ease-out; }
.js [data-draw].is-in { --draw: 1; }
.js [data-draw].is-in > .dim__v { opacity: 1; }

/* ══ Positionsmarke ═══════════════════════════════════════════════════════ */
.poss { position: absolute; inset: 0; pointer-events: none; }
.pos {
  position: absolute; display: flex; align-items: center;
  opacity: 1;
}
.pos i {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--signal-bright);
  display: grid; place-items: center;
  font-family: var(--fd); font-style: normal; font-size: 10px; font-weight: 600;
  font-stretch: 72%; letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-bright);
  background: rgba(7, 27, 41, .55);
  backdrop-filter: blur(2px);
}
.pos__lead {
  height: 1px; width: 72px; background: var(--plan-line); flex: none;
  transform-origin: left center;
}
.pos__t {
  font-family: var(--fd); font-size: 10px; font-weight: 550;
  font-stretch: 74%; letter-spacing: .11em; text-transform: uppercase;
  color: var(--chalk);
  background: rgba(7, 27, 41, .7);
  padding: 5px 9px;
  white-space: nowrap;
}
.pos--rev { flex-direction: row-reverse; }
.pos--rev .pos__lead { transform-origin: right center; }

.js .pos[data-draw] .pos__lead { transform: scaleX(0); transition: transform .7s .15s var(--ease-draw); }
.js .pos[data-draw] i, .js .pos[data-draw] .pos__t { opacity: 0; transition: opacity .5s var(--ease); }
.js .pos[data-draw] .pos__t { transition-delay: .6s; }
.js .pos[data-draw].is-in .pos__lead { transform: scaleX(1); }
.js .pos[data-draw].is-in i, .js .pos[data-draw].is-in .pos__t { opacity: 1; }

/* ══ Bildrahmen ═══════════════════════════════════════════════════════════ */
.frame {
  border: 1px solid var(--paper-line);
  outline: 1px solid var(--paper-line);
  outline-offset: 11px;
  overflow: hidden;
}
.frame img { width: 100%; }
.frame--plan { border-color: var(--plan-line); outline-color: rgba(78, 118, 145, .5); }

/* ══ Maßstab-Schiene ══════════════════════════════════════════════════════ */
.rail {
  position: fixed; z-index: 60; left: 0; top: 0; bottom: 0;
  width: var(--rail);
  border-right: 1px solid rgba(78, 118, 145, .38);
  background: rgba(7, 27, 41, .5);
  backdrop-filter: blur(6px);
  pointer-events: none;
  display: grid; grid-template-rows: 1fr auto auto;
  align-items: end; justify-items: center;
  padding-bottom: 14px;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.rail__ticks {
  grid-row: 1; width: 100%; height: 100%;
  background-image:
    repeating-linear-gradient(to bottom, rgba(220, 231, 238, .5) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to bottom, rgba(220, 231, 238, .75) 0 1px, transparent 1px 50px);
  background-size: 8px 100%, 15px 100%;
  background-position: left top, left top;
  background-repeat: repeat-y;
}
.rail__read, .rail__unit {
  font-family: var(--fd); font-size: 10px; font-weight: 600;
  font-stretch: 72%; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-bright);
  writing-mode: vertical-rl;
}
.rail__unit { color: var(--steel); margin-top: 6px; letter-spacing: .16em; }
body.on-paper .rail {
  background: rgba(222, 220, 214, .62);
  border-right-color: var(--paper-line);
}
body.on-paper .rail__ticks {
  background-image:
    repeating-linear-gradient(to bottom, rgba(28, 30, 31, .35) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to bottom, rgba(28, 30, 31, .55) 0 1px, transparent 1px 50px);
}
body.on-paper .rail__read { color: var(--signal); }
body.on-paper .rail__unit { color: var(--graphite-soft); }

/* ══ Kopfleiste ═══════════════════════════════════════════════════════════ */
.top {
  position: fixed; z-index: 90; top: 0; left: var(--rail); right: 0;
  display: flex; align-items: center; gap: var(--lg);
  padding: 0 var(--marg) 0 clamp(16px, 2.4vw, 34px);
  height: 70px;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.top.is-stuck {
  background: rgba(7, 27, 41, .93);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--plan-line);
}
body.on-paper .top.is-stuck {
  background: rgba(222, 220, 214, .94);
  border-bottom-color: var(--paper-line);
}

.mark {
  font-family: var(--fd); font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 800; font-stretch: 96%; letter-spacing: -.025em;
  line-height: 1; color: var(--chalk);
  transition: color .35s var(--ease);
}
.mark b { color: var(--signal-bright); font-weight: 800; }
body.on-paper .mark { color: var(--graphite); }
body.on-paper .mark b { color: var(--signal); }

.top__nav { display: flex; gap: clamp(14px, 1.8vw, 30px); margin-left: auto; }
.top__nav a {
  font-family: var(--fd); font-size: 11px; font-weight: 600;
  font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.top__nav a:hover, .top__nav a.is-here { color: var(--chalk); border-bottom-color: var(--signal-bright); }
body.on-paper .top__nav a { color: var(--graphite-soft); }
body.on-paper .top__nav a:hover, body.on-paper .top__nav a.is-here { color: var(--graphite); border-bottom-color: var(--signal); }

.top__cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--signal); color: #fff;
  padding: 13px 20px;
  font-family: var(--fd); font-size: 11px; font-weight: 600;
  font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .22s var(--ease);
}
.top__cta .dot { width: 5px; height: 5px; background: #fff; transition: transform .3s var(--ease); }
.top__cta:hover { background: var(--signal-deep); }
.top__cta:hover .dot { transform: translateX(3px) scale(1.3); }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; gap: 5px; align-items: flex-end;
}
.burger span {
  display: block; width: 24px; height: 1.5px; background: var(--chalk);
  transform-origin: right center;
  transition: transform .3s var(--ease), opacity .2s, background-color .35s var(--ease);
}
.burger span:nth-child(2) { transform: scaleX(.75); }
body.on-paper .burger span { background: var(--graphite); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.75); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobilmenü ── */
.menu {
  position: fixed; z-index: 85; inset: 0 0 0 var(--rail);
  background: var(--plan-deep);
  padding: 96px var(--marg) var(--xl);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(78, 118, 145, .38);
  font-family: var(--fd); font-size: clamp(24px, 6.6vw, 34px);
  font-weight: 700; font-stretch: 104%; letter-spacing: -.02em;
  color: var(--chalk);
}
.menu nav a em {
  font-style: normal; font-size: 11px; font-weight: 600;
  font-stretch: 72%; letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-bright);
}
.menu__foot {
  margin-top: var(--xl);
  font-family: var(--fd); font-size: 12px; font-weight: 550;
  font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase;
  line-height: 2; color: var(--steel);
}
.menu__foot a { border-bottom: 1px solid var(--plan-line); }

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 01 · Vollbild-Plan
   ══════════════════════════════════════════════════════════════════════════ */
.plan {
  position: relative;
  isolation: isolate;
  min-height: 660px;
  height: 100svh;
  max-height: 1080px;
  overflow: hidden;
  background: var(--plan-deep);
  padding-left: var(--rail);
}
.plan__photo { position: absolute; inset: 0; z-index: -3; }
.plan__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 50%;
  filter: saturate(.95) contrast(1.02) brightness(1.2);
}
/* Blaupausen-Grade: nur die Farbe kippen, die Helligkeit bleibt beim Licht
   der Küche selbst — sie ist die Lichtquelle des Bildes. */
.plan__grade {
  position: absolute; inset: 0; z-index: -2;
  background: var(--plan);
  mix-blend-mode: color;
  opacity: .3;
}
/* Der Schriftraum wird abgedunkelt, nicht das ganze Bild. */
.plan__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(7, 27, 41, .95) 0%, rgba(7, 27, 41, .88) 28%, rgba(7, 27, 41, .3) 58%, rgba(7, 27, 41, .1) 78%, rgba(7, 27, 41, .42) 100%),
    linear-gradient(to top, var(--plan-deep) 1%, rgba(7, 27, 41, .82) 17%, rgba(7, 27, 41, .05) 48%, rgba(7, 27, 41, .38) 100%);
}

/* Ein Maßstab für beide Achsen: 84 vw tragen 3.240 mm, also 23,333 vw
   für 900 mm. Die Senkrechte steht auf der Bodenlinie und endet an der
   Oberkante der Arbeitsplatte. */
.plan__dims { position: absolute; inset: 0; }
.plan__dim-w { top: 104px; left: 8%; right: 8%; }
.plan__dim-h { bottom: 16%; height: 23.333vw; right: max(3.4vw, 42px); }

.pos--a { top: 47.5%; left: 58%; }
.pos--b { top: 68%; right: 8%; }

.plan__body {
  position: absolute; left: var(--marg); bottom: clamp(128px, 17vh, 190px);
  max-width: min(760px, 82vw);
}
/* Wie eine Beschriftung in der Zeichnung: sitzt auf eigenem Grund, damit sie
   auch dort lesbar bleibt, wo das Bild hell wird. */
.plan__body .tag {
  display: inline-flex; width: fit-content;
  margin-bottom: clamp(16px, 2.6vh, 26px);
  color: var(--chalk);
  background: rgba(7, 27, 41, .72);
  padding: 7px 11px;
}
.plan__lead {
  margin-top: clamp(18px, 2.8vh, 30px);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--chalk);
  max-width: 46ch;
}
.plan__act {
  margin-top: clamp(22px, 3.4vh, 38px);
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap;
}

.plan__kopf {
  position: absolute; right: var(--marg); bottom: clamp(46px, 6vh, 66px);
  border-color: rgba(220, 231, 238, .34);
  background: rgba(7, 27, 41, .5);
  backdrop-filter: blur(4px);
}
.plan__kopf > div { border-right-color: rgba(220, 231, 238, .34); }

.plan__down {
  position: absolute; left: var(--marg); bottom: clamp(38px, 5vh, 54px);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--fd); font-size: 10px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .2em; text-transform: uppercase;
  color: var(--steel);
}
.plan__down i {
  display: block; width: 46px; height: 1px; background: var(--plan-line);
  position: relative;
}
.plan__down i::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid var(--signal-bright);
  border-bottom: 1px solid var(--signal-bright);
  transform: rotate(-45deg);
}
.plan__down:hover { color: var(--chalk); }

/* ══ Maßband ══════════════════════════════════════════════════════════════ */
.band {
  position: relative;
  background: var(--plan-deep);
  border-top: 1px solid var(--plan-line);
  border-bottom: 1px solid var(--plan-line);
  padding-left: var(--rail);
  overflow: hidden;
}
.band__tape {
  height: 22px;
  background-image:
    repeating-linear-gradient(to right, rgba(220, 231, 238, .42) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(to right, rgba(220, 231, 238, .8) 0 1px, transparent 1px 60px);
  background-size: 100% 8px, 100% 15px;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x;
  border-bottom: 1px solid rgba(78, 118, 145, .45);
}
.band__list {
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.band__list li {
  display: flex; align-items: baseline; gap: 9px;
  padding: 17px var(--marg) 17px clamp(14px, 2vw, 28px);
  border-right: 1px solid rgba(78, 118, 145, .38);
  font-family: var(--fd); font-size: 12px; font-weight: 600;
  font-stretch: 82%; letter-spacing: .13em; text-transform: uppercase;
  color: var(--chalk);
  white-space: nowrap;
}
.band__list li:last-child { border-right: 0; }
.band__list em {
  font-style: normal; font-size: 10px; font-weight: 600;
  font-stretch: 72%; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-bright);
}

/* ══ Blatt-Grundgerüst ════════════════════════════════════════════════════ */
.sheet {
  position: relative;
  padding: var(--sheet) var(--marg) var(--sheet) max(var(--marg), calc(var(--rail) + 18px));
}
.sheet--plan {
  background: var(--plan);
  --fg: var(--chalk); --fg-2: var(--steel);
  --line: var(--plan-line); --bg: var(--plan); --mark: var(--signal-bright);
  color: var(--chalk);
}
.sheet--paper {
  background: var(--paper);
  --fg: var(--graphite); --fg-2: var(--graphite-soft);
  --line: var(--paper-line); --bg: var(--paper); --mark: var(--signal-text);
  color: var(--graphite);
}
.sheet--tight { padding-top: calc(var(--sheet) * .72); padding-bottom: calc(var(--sheet) * .72); }
.sheet > * { max-width: var(--max); margin-inline: auto; }

.sheet__head { margin-bottom: clamp(38px, 6vh, 70px); }
.sheet__head .tag { margin-bottom: var(--lg); }
.sheet__lead {
  margin-top: var(--lg);
  max-width: 58ch;
  color: var(--fg-2);
  text-wrap: pretty;
}
.sheet__head--row {
  display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
  gap: var(--lg); align-items: start;
}
.sheet__head--row .tag { margin-bottom: 0; padding-top: 12px; }
.sheet__note {
  margin-top: var(--xl);
  padding-top: var(--md);
  border-top: 1px solid var(--line);
  font-family: var(--fd); font-size: 11px; font-weight: 550;
  font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 02 · Aufmaß
   ══════════════════════════════════════════════════════════════════════════ */
#aufmass > .tag { margin-bottom: clamp(30px, 5vh, 54px); }
.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(34px, 5vw, 82px);
  align-items: start;
}
.two__lead .prose { margin-top: var(--lg); color: var(--graphite-soft); }
.two__lead .prose p { max-width: 46ch; }

.proto {
  margin-top: clamp(34px, 5vh, 52px);
  border-top: 1px solid var(--paper-rule);
}
.proto > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--md);
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-rule);
}
.proto dt {
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  font-stretch: 92%; letter-spacing: .01em;
  color: var(--graphite);
}
.proto dd {
  font-family: var(--fd); font-size: 10.5px; font-weight: 550;
  font-stretch: 74%; letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--signal-text);
  white-space: nowrap;
}

.two__fig { position: relative; }
.two__frame { position: relative; }
/* Sitzt auf dem Anriss, der im Foto tatsächlich an der Wand steht. */
.pos--riss { position: absolute; top: 45%; left: 6%; }
.pos--riss i {
  border-color: var(--signal-bright);
  color: var(--signal-bright);
  background: rgba(7, 27, 41, .82);
  backdrop-filter: none;
}
.pos--riss .pos__lead { background: rgba(7, 27, 41, .55); width: 54px; }
.pos--riss .pos__t {
  background: rgba(7, 27, 41, .82);
  color: var(--chalk);
}
.two__fig figcaption {
  margin-top: 26px;
  font-family: var(--fd); font-size: 11px; font-weight: 550;
  font-stretch: 78%; letter-spacing: .13em; text-transform: uppercase;
  color: var(--graphite-soft);
}

/* ── Werkzeichnung ── */
.riss {
  margin-top: clamp(56px, 9vh, 104px);
  max-width: 1140px; margin-inline: auto;
  border: 1px solid var(--paper-line);
  background: var(--paper-raised);
}
.riss__cap {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--paper-line);
  font-family: var(--fd); font-size: 10.5px; font-weight: 550;
  font-stretch: 76%; letter-spacing: .15em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--graphite-soft);
}
.riss__cap b { color: var(--signal-text); font-weight: 600; }
.riss__wrap { padding: clamp(16px, 3vw, 40px); overflow-x: auto; }
.riss__svg {
  width: 100%; min-width: 540px; height: auto;
  max-height: min(74vh, 620px);
  margin-inline: auto;
}

.riss__svg .ln { fill: none; stroke: var(--graphite); stroke-width: 1; vector-effect: non-scaling-stroke; }
.riss__svg .ln--2 { stroke-width: 1.6; }
.riss__svg .ln--thin { stroke: var(--graphite-soft); stroke-width: .8; }
.riss__svg .cut { fill: url(#schraffur2); color: var(--paper-rule); stroke: none; }
.riss__svg .mk__l, .riss__svg .mk__t, .riss__svg .mk__a, .riss__svg .mk__x {
  fill: none; stroke: var(--signal); stroke-width: 1; vector-effect: non-scaling-stroke;
}
.riss__svg .mk__t { stroke: var(--paper-rule); }
.riss__svg .mk__l { stroke: var(--graphite-soft); }
.riss__svg .mk__v {
  fill: var(--graphite);
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  font-stretch: 72%; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.riss__svg .rp circle { fill: var(--paper-raised); stroke: var(--signal-text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.riss__svg .rp text {
  fill: var(--signal-text);
  font-family: var(--fd); font-size: 13px; font-weight: 600; font-stretch: 74%;
}
.riss__svg .rp path { fill: none; stroke: var(--signal); stroke-width: .9; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

.js .riss__svg .ln,
.js .riss__svg .mk__l, .js .riss__svg .mk__t, .js .riss__svg .mk__a {
  stroke-dasharray: 2000; stroke-dashoffset: 2000;
}
.js .riss__svg .cut { opacity: 0; transition: opacity .6s .8s ease-out; }
.js .riss.is-in .riss__svg .cut { opacity: 1; }
.js .riss.is-in .riss__svg .ln { animation: draw 1.5s var(--ease-draw) forwards; }
.js .riss.is-in .riss__svg .mk__l,
.js .riss.is-in .riss__svg .mk__t,
.js .riss.is-in .riss__svg .mk__a { animation: draw 1s .5s var(--ease-draw) forwards; }
.js .riss__svg .mk__v, .js .riss__svg .rp { opacity: 0; }
.js .riss.is-in .riss__svg .mk__v, .js .riss.is-in .riss__svg .rp {
  animation: fadein .6s 1s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* Maßstabsleiste: die Behauptung „1:20" wird damit nachmessbar. */
.riss__svg .sb__box { fill: none; stroke: var(--graphite); stroke-width: 1; vector-effect: non-scaling-stroke; }
.riss__svg .sb__fill { fill: var(--graphite); stroke: none; }
.riss__svg .sb__fill--alt { fill: var(--paper-raised); }

.riss__cue {
  display: none;
  padding: 9px 18px 0;
  font-family: var(--fd); font-size: 10px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal-text);
}
.riss__note {
  padding: 16px 18px;
  border-top: 1px solid var(--paper-rule);
  font-size: 14.5px; line-height: 1.55;
  color: var(--graphite-soft);
}
.riss__note b { color: var(--graphite); font-weight: 650; }
.riss__note a { color: var(--signal-text); border-bottom: 1px solid var(--paper-rule); }
.riss__note a:hover { border-bottom-color: var(--signal-text); }

.riss__leg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--md) var(--lg);
  padding: 18px;
  border-top: 1px solid var(--paper-line);
}
.riss__leg li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.5;
  color: var(--graphite-soft);
}
.riss__leg i {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--signal-text);
  display: grid; place-items: center;
  font-family: var(--fd); font-style: normal; font-size: 10px; font-weight: 600;
  font-stretch: 72%; color: var(--signal-text);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 03 · Ausstellung
   ══════════════════════════════════════════════════════════════════════════ */
/* Die Platten sitzen versetzt, wie Blätter, die übereinandergelegt wurden. */
.plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(38px, 5vw, 72px) clamp(28px, 3.4vw, 54px);
  align-items: start;
}
.plate:nth-child(2n) { margin-top: clamp(30px, 7vw, 104px); }

.plate__media { position: relative; }
/* Die Kette trägt die Zeilenlänge, also ist sie so lang wie die Zeile:
   4.200 mm füllt die Plattenbreite, alles andere anteilig. */
.plate__dim {
  left: 50%; bottom: -30px;
  width: calc(var(--mm) / 4200 * 100%);
  transform: translateX(-50%);
}
.js .dim--h.plate__dim[data-draw] { transform: translateX(-50%) scaleX(var(--draw)); }
.plate__dim .dim__v { background: var(--plan); }
.plate__dim > .dim__e { height: 26px; top: -26px; }

.plate__info {
  margin-top: clamp(38px, 4vh, 50px);
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--md);
  align-items: baseline;
}
.plate__no {
  font-family: var(--fd); font-size: 10.5px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--signal-bright);
  grid-row: span 2;
  padding-top: 5px;
}
.plate__name {
  font-family: var(--fd); font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  font-weight: 700; font-stretch: 102%; letter-spacing: -.015em;
  color: var(--chalk);
}
.plate__tags {
  font-family: var(--fd); font-size: 11px; font-weight: 550;
  font-stretch: 78%; letter-spacing: .13em; text-transform: uppercase;
  color: var(--steel);
}
.plate .frame--plan { transition: outline-offset .4s var(--ease); }
.plate:hover .frame--plan { outline-offset: 15px; }
.plate img { transition: transform .7s var(--ease); }
.plate:hover img { transform: scale(1.018); }

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 04 · Ablauf
   ══════════════════════════════════════════════════════════════════════════ */
.planbar { border-top: 1px solid var(--paper-rule); }
.planbar__head {
  display: grid;
  grid-template-columns: 66px minmax(0, 260px) minmax(0, 1fr);
  gap: var(--md) clamp(18px, 2.4vw, 40px);
  padding: 11px 0;
  border-bottom: 1px solid var(--paper-rule);
}
.planbar__head span {
  grid-column: 2;
  display: none;
}
.planbar__head {
  grid-template-areas: "no track txt";
}
.planbar__head span:nth-child(1),
.planbar__head span:nth-child(2),
.planbar__head span:nth-child(3) {
  display: block; grid-area: track;
  font-family: var(--fd); font-size: 9.5px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .18em; text-transform: uppercase;
  color: var(--graphite-soft);
}
.planbar__head span:nth-child(1) { justify-self: start; }
.planbar__head span:nth-child(2) { justify-self: center; }
.planbar__head span:nth-child(3) { justify-self: end; }

.step {
  display: grid;
  grid-template-columns: 66px minmax(0, 260px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0 clamp(18px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(22px, 3vh, 34px) 0;
  border-bottom: 1px solid var(--paper-rule);
  transition: background-color .3s var(--ease);
}
.step:hover { background: var(--paper-raised); }
.step__n {
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-text);
  padding-top: 4px;
}
/* Der Bahnname steht am Schritt, damit die Balken auch dann lesbar bleiben,
   wenn die Spaltenköpfe längst weggescrollt sind. */
.step__lane {
  grid-column: 2;
  align-self: end;
  font-family: var(--fd); font-size: 9.5px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .18em; text-transform: uppercase;
  color: var(--graphite-soft);
  margin-top: -4px;
}
.step__track {
  position: relative;
  height: 22px; margin-top: 3px;
  background-image: repeating-linear-gradient(to right, var(--paper-line) 0 1px, transparent 1px 33.333%);
  background-size: 100% 1px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  border-left: 1px solid var(--paper-line);
  border-right: 1px solid var(--paper-line);
}
.step__track::before {
  content: ""; position: absolute; left: 33.2%; top: 0; bottom: 0;
  width: 1px; background: var(--paper-line);
}
.step__track::after {
  content: ""; position: absolute; left: 66.5%; top: 0; bottom: 0;
  width: 1px; background: var(--paper-line);
}
.step__bar {
  position: absolute; top: 6px; height: 10px;
  background: var(--graphite);
  transition: transform .8s var(--ease-draw);
  transform-origin: left center;
}
.step[data-lane="1"] .step__bar { left: 2px; width: calc(33.333% - 4px); }
.step[data-lane="2"] .step__bar { left: 33.333%; width: 33.333%; background: var(--signal); }
.step[data-lane="3"] .step__bar { left: 66.666%; width: calc(33.333% - 2px); }
.js .step .step__bar { transform: scaleX(0); }
.js .step.is-in .step__bar { transform: scaleX(1); }

.step__txt { grid-column: 3; grid-row: 1 / 3; }
.step__n { grid-column: 1; grid-row: 1; }
.step__track { grid-column: 2; grid-row: 1; }
.step__txt h3 {
  font-family: var(--fd); font-size: 1.22rem; font-weight: 650;
  font-stretch: 100%; letter-spacing: -.012em;
  color: var(--graphite);
  margin-bottom: 8px;
}
.step__txt p { color: var(--graphite-soft); max-width: 62ch; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 05 · Arbeitshöhe
   ══════════════════════════════════════════════════════════════════════════ */
.ergo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 4.5vw, 76px);
  align-items: start;
}
.ergo__draw {
  border: 1px solid var(--plan-line);
  background: var(--plan-deep);
  padding: clamp(14px, 2.4vw, 30px);
}
.ergo__draw svg {
  width: 100%; height: auto;
  max-height: min(66vh, 540px);
  margin-inline: auto;
  overflow: visible;
}
.ergo__cap {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(78, 118, 145, .5);
  font-family: var(--fd); font-size: 10px; font-weight: 550;
  font-stretch: 74%; letter-spacing: .15em; text-transform: uppercase;
  color: var(--steel);
}

/* Geschnittene Flächen tragen 45°-Schraffur — die Marke der Werkzeichnung. */
#ergoSvg .cut {
  fill: url(#schraffur);
  color: #6B93AE;
  stroke: none;
}
#ergoSvg .ln { fill: none; stroke: var(--plan-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
#ergoSvg .ln--2 { stroke: var(--chalk); stroke-width: 1.6; }
#ergoSvg .ln--thin { stroke: rgba(78, 118, 145, .75); stroke-width: .9; }
#ergoSvg .fig { fill: none; stroke: var(--steel); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#ergoSvg #figHead { fill: rgba(143, 163, 176, .16); }
#ergoSvg .mk__l { fill: none; stroke: var(--steel); stroke-width: 1; vector-effect: non-scaling-stroke; }
#ergoSvg .mk__t { fill: none; stroke: var(--steel); stroke-width: 1; vector-effect: non-scaling-stroke; }
#ergoSvg .mk__a { fill: none; stroke: var(--signal-bright); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
#ergoSvg .mk__x { fill: none; stroke: var(--plan-line); stroke-width: .8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
#ergoSvg .mk__l--sig { stroke: var(--signal-bright); }
#ergoSvg .mk__t--sig { stroke: var(--signal-bright); }
#ergoSvg #ergoWorktop { fill: rgba(220, 231, 238, .22); stroke: var(--chalk); }
#ergoSvg .mk__x--sig { stroke: var(--signal-bright); opacity: .7; }
#ergoSvg .mkv {
  fill: var(--steel);
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
#ergoSvg .mkv--sig { fill: var(--signal-bright); }

.ergo__panel { padding-top: 4px; }
.ergo__label {
  display: block;
  font-family: var(--fd); font-size: 11px; font-weight: 600;
  font-stretch: 76%; letter-spacing: .17em; text-transform: uppercase;
  color: var(--steel);
}
.ergo__big {
  display: flex; align-items: baseline; gap: 8px;
  margin: 6px 0 var(--md);
  font-family: var(--fd); font-weight: 800; font-stretch: 108%;
  font-size: clamp(3.2rem, 6.6vw, 5rem); line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ergo__big span {
  font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 600; font-stretch: 80%;
  letter-spacing: .06em; color: var(--steel);
}

.ergo__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; background: transparent; cursor: ew-resize;
  display: block;
}
.ergo__range::-webkit-slider-runnable-track {
  height: 2px; background: #5A87A4;
}
.ergo__range::-moz-range-track { height: 2px; background: #5A87A4; }
.ergo__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 34px; margin-top: -16.5px;
  background: var(--signal); border: 0; border-radius: 1px;
  transition: background-color .2s var(--ease);
}
.ergo__range::-moz-range-thumb {
  width: 14px; height: 34px;
  background: var(--signal); border: 0; border-radius: 1px;
}
.ergo__range:hover::-webkit-slider-thumb { background: var(--signal-bright); }
.ergo__range:hover::-moz-range-thumb { background: var(--signal-bright); }
.ergo__range:focus-visible { outline-offset: 6px; }

.ergo__scale {
  display: flex; justify-content: space-between;
  margin-top: -2px;
  font-family: var(--fd); font-size: 10px; font-weight: 550;
  font-stretch: 72%; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--steel);
}

.ergo__out {
  margin-top: clamp(26px, 4vh, 40px);
  border-top: 1px solid var(--plan-line);
}
.ergo__out > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--md);
  padding: 13px 0;
  border-bottom: 1px solid var(--plan-line);
}
.ergo__out dt {
  font-family: var(--fd); font-size: 12px; font-weight: 550;
  font-stretch: 80%; letter-spacing: .13em; text-transform: uppercase;
  color: var(--steel);
}
.ergo__out dd {
  font-family: var(--fd); font-size: 17px; font-weight: 650;
  font-stretch: 88%; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
}
.ergo__out .is-key { border-bottom-color: var(--signal-bright); }
.ergo__out .is-key dt { color: var(--chalk); }
.ergo__out .is-key dd { color: var(--signal-bright); font-size: 21px; font-weight: 700; }
.ergo__out .is-build dd { font-size: 13px; font-stretch: 78%; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.ergo__out .is-build dd.is-warn { color: var(--signal-bright); }

.ergo__hint {
  margin: var(--md) 0 var(--lg);
  font-size: 14px; line-height: 1.6;
  color: var(--steel);
  max-width: 52ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 06 · Leistungsverzeichnis
   ══════════════════════════════════════════════════════════════════════════ */
.lv { border-top: 1px solid var(--paper-rule); }
.lv__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 210px) minmax(0, 1fr) 96px;
  gap: 6px clamp(16px, 2.2vw, 34px);
  align-items: baseline;
  padding: clamp(18px, 2.4vh, 26px) 0;
  border-bottom: 1px solid var(--paper-rule);
  transition: background-color .25s var(--ease);
}
.lv__body > .lv__row:hover { background: var(--paper-raised); }
.lv__row--head {
  padding: 10px 0;
}
.lv__row--head span {
  font-family: var(--fd); font-size: 9.5px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .18em; text-transform: uppercase;
  color: var(--graphite-soft);
}
.lv__no {
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-text);
}
.lv dt {
  font-family: var(--fd); font-size: 1.05rem; font-weight: 650;
  font-stretch: 98%; letter-spacing: -.01em;
  color: var(--graphite);
}
.lv dd { color: var(--graphite-soft); font-size: 15.5px; line-height: 1.55; max-width: 62ch; }
.lv__by {
  font-family: var(--fd); font-size: 10px; font-weight: 600;
  font-stretch: 72%; letter-spacing: .14em; text-transform: uppercase;
  color: var(--graphite);
  border: 1px solid var(--paper-rule);
  padding: 4px 8px;
  justify-self: end;
  white-space: nowrap;
}

.marken { margin-top: clamp(50px, 8vh, 96px); }
.marken .tag { margin-bottom: var(--lg); }
.marken__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  border-top: 1px solid var(--paper-rule);
  border-left: 1px solid var(--paper-rule);
}
.marken__list li {
  padding: var(--md) var(--md) calc(var(--md) + 4px);
  border-right: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
}
.marken__list h3 {
  font-family: var(--fd); font-size: 1.06rem; font-weight: 650;
  font-stretch: 96%; letter-spacing: -.008em;
  color: var(--graphite);
  margin-bottom: 6px;
}
.marken__list p { font-size: 14.5px; line-height: 1.5; color: var(--graphite-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 07 · Anmerkungen
   ══════════════════════════════════════════════════════════════════════════ */
.notes { border-top: 1px solid var(--plan-line); }
.note { border-bottom: 1px solid var(--plan-line); }
.note summary {
  display: grid;
  grid-template-columns: 46px 1fr 30px;
  gap: var(--md);
  align-items: center;
  padding: clamp(20px, 2.6vh, 28px) 0;
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--ease);
}
.note summary::-webkit-details-marker { display: none; }
.note summary i {
  font-family: var(--fd); font-style: normal; font-size: 11px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-bright);
}
.note summary span {
  font-family: var(--fd); font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight: 600; font-stretch: 100%; letter-spacing: -.012em;
  color: var(--chalk);
  text-wrap: balance;
}
.note summary b {
  position: relative; width: 15px; height: 15px; justify-self: end;
}
.note summary b::before, .note summary b::after {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 15px; height: 1px; background: var(--steel);
  transition: transform .35s var(--ease), background-color .25s var(--ease);
}
.note summary b::after { transform: rotate(90deg); }
.note[open] summary b::after { transform: rotate(0deg); }
.note[open] summary b::before, .note[open] summary b::after { background: var(--signal-bright); }
.note summary:hover span { color: #fff; }
.note__a {
  padding: 0 30px clamp(22px, 3vh, 30px) 66px;
}
.note__a p { color: var(--steel); max-width: 68ch; text-wrap: pretty; }
.note__a a { color: var(--chalk); border-bottom: 1px solid var(--plan-line); }
.note__a a:hover { color: var(--signal-bright); border-bottom-color: var(--signal-bright); }

/* ══════════════════════════════════════════════════════════════════════════
   BLATT 08 · Anfrage
   ══════════════════════════════════════════════════════════════════════════ */
.anfrage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
  gap: clamp(34px, 5vw, 84px);
  align-items: start;
}
.anfrage__form .tag { margin-bottom: var(--lg); }
.anfrage__form .d2 { margin-bottom: var(--md); }
.anfrage__lead { color: var(--graphite-soft); max-width: 50ch; margin-bottom: clamp(30px, 4.5vh, 48px); }

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lg) clamp(20px, 2.6vw, 40px);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--wide { margin-top: var(--lg); }
.field label {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--fd); font-size: 10.5px; font-weight: 600;
  font-stretch: 76%; letter-spacing: .17em; text-transform: uppercase;
  color: var(--graphite-soft);
}
.field label b { color: var(--signal-text); font-weight: 600; }
.field__unit {
  font-weight: 550; letter-spacing: .1em; color: var(--graphite-soft);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--paper-rule);
  border-radius: 0;
  padding: 11px 0;
  font-size: 16.5px; color: var(--graphite);
  transition: border-color .22s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.field select { appearance: none; cursor: pointer; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: right 8px top 22px, right 3px top 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: #5F5C55; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--graphite-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 10px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 4px;
}
.field__err {
  font-family: var(--fd); font-size: 11px; font-weight: 550;
  font-stretch: 82%; letter-spacing: .04em;
  color: var(--signal-text);
  min-height: 0;
}
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-bottom-color: var(--signal); }

.form__foot {
  margin-top: clamp(34px, 5vh, 50px);
  display: flex; align-items: center; gap: var(--lg); flex-wrap: wrap;
}
.btn--dark { background: var(--graphite); }
.btn--dark:hover { background: #000; }
.form__note {
  font-size: 13px; line-height: 1.5; color: var(--graphite-soft);
  max-width: 44ch;
}
.form__status {
  margin-top: var(--md);
  font-family: var(--fd); font-size: 12px; font-weight: 600;
  font-stretch: 82%; letter-spacing: .1em;
  color: var(--signal-text);
  min-height: 1.2em;
}
.form__status.is-ok { color: #1C6B3C; }

.anfrage__side { display: flex; flex-direction: column; gap: var(--lg); align-items: flex-start; }
.kopf--paper {
  flex-direction: column; width: 100%;
  border-color: var(--paper-line);
}
.kopf--paper > div {
  border-right: 0; border-bottom: 1px solid var(--paper-line);
  padding: 13px 16px; width: 100%;
}
.kopf--paper > div:last-child { border-bottom: 0; }
.clock { font-variant-numeric: tabular-nums; }
.openflag {
  display: inline-block; margin-top: 4px;
  font-family: var(--fd); font-size: 10px; font-weight: 600;
  font-stretch: 74%; letter-spacing: .14em; text-transform: uppercase;
}
.openflag.is-open { color: #1C6B3C; }
.openflag.is-shut { color: var(--graphite-soft); }

/* ══ Abschluss eines Blattes mit Handlung ═════════════════════════════════ */
.sheet__close {
  margin-top: var(--xl);
  padding-top: var(--lg);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--md) var(--xl);
  align-items: center;
}
.sheet__close-t {
  font-family: var(--fd); font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500; font-stretch: 100%; line-height: 1.35;
  color: var(--fg-2);
}
.sheet__close-t b { color: var(--fg); font-weight: 700; }
.sheet__close-a { display: flex; align-items: center; gap: var(--lg); flex-wrap: wrap; }
.sheet__close .sheet__note {
  grid-column: 1 / -1;
  margin-top: 0; padding-top: var(--sm); border-top: 0;
}

/* ══ Mitlaufende Handlungsleiste ══════════════════════════════════════════ */
.dock {
  position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
  grid-template-columns: auto 1fr;
  background: rgba(7, 27, 41, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--plan-line);
  display: none;
  transform: translateY(100%);
  transition: transform .35s var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.dock[hidden] { display: none; }
.dock.is-up { transform: none; }
.dock__tel {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; min-height: 56px;
  border-right: 1px solid var(--plan-line);
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  font-stretch: 84%; letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
}
.dock__tel span { color: var(--signal-bright); font-size: 15px; }
.dock__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px;
  background: var(--signal); color: #fff;
  font-family: var(--fd); font-size: 12px; font-weight: 600;
  font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase;
}
.dock__cta .dot { width: 6px; height: 6px; background: #fff; }
.dock__cta:active { background: var(--signal-deep); }

/* ══════════════════════════════════════════════════════════════════════════
   Fußzeile · Blatt 09
   ══════════════════════════════════════════════════════════════════════════ */
.foot {
  background: var(--plan-deep);
  color: var(--chalk);
  --fg: var(--chalk); --fg-2: var(--steel); --line: var(--plan-line); --mark: var(--signal-bright);
  padding: var(--sheet) var(--marg) var(--lg) max(var(--marg), calc(var(--rail) + 18px));
  border-top: 1px solid var(--plan-line);
}
.foot > * { max-width: var(--max); margin-inline: auto; }
.foot__big {
  font-family: var(--fd); font-weight: 800; font-stretch: 112%;
  font-size: clamp(3rem, 13vw, 11rem); line-height: .84;
  letter-spacing: -.035em;
  color: #fff;
}
.foot__big b { color: var(--signal-bright); font-weight: 800; }
.foot__claim {
  margin-top: var(--md);
  font-family: var(--fd); font-size: 11px; font-weight: 600;
  font-stretch: 78%; letter-spacing: .18em; text-transform: uppercase;
  color: var(--steel);
}
.kopf--foot {
  margin-top: clamp(44px, 7vh, 80px);
  border-color: rgba(78, 118, 145, .7);
}
.kopf--foot > div { border-right-color: rgba(78, 118, 145, .7); flex: 1 1 130px; }

.foot__legal {
  margin-top: var(--xl);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 var(--lg);
  border-top: 1px solid var(--plan-line);
}
.legal { border-bottom: 1px solid var(--plan-line); }
.legal summary {
  list-style: none; cursor: pointer;
  padding: 15px 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sm);
  font-family: var(--fd); font-size: 11px; font-weight: 600;
  font-stretch: 78%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel);
  transition: color .22s var(--ease);
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after {
  content: "+"; font-family: var(--fd); font-size: 15px; font-weight: 500;
  color: var(--plan-line);
}
.legal[open] summary::after { content: "−"; }
.legal summary:hover { color: var(--chalk); }
.legal__c { padding-bottom: var(--md); }
.legal__c p { font-size: 13.5px; line-height: 1.6; color: var(--steel); max-width: 58ch; }
.legal__c p + p { margin-top: 10px; }
.legal__c b { color: var(--chalk); font-weight: 600; }

.foot__base {
  margin-top: var(--xl);
  padding-top: var(--md);
  border-top: 1px solid var(--plan-line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--md);
  flex-wrap: wrap;
}
.foot__base p {
  font-family: var(--fd); font-size: 10.5px; font-weight: 550;
  font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--steel);
}

/* ══════════════════════════════════════════════════════════════════════════
   Umbrüche
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .two { grid-template-columns: 1fr; gap: var(--xl); }
  .two__fig { order: -1; }
  .ergo { grid-template-columns: 1fr; gap: var(--xl); }
  .anfrage { grid-template-columns: 1fr; }
  .anfrage__side { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--md); }
  .kopf--paper { max-width: 420px; }
  .lv__row { grid-template-columns: 46px minmax(0, 190px) minmax(0, 1fr); }
  .lv__by { grid-column: 3; justify-self: start; margin-top: 8px; }
  .lv__row--head span:nth-child(4) { display: none; }
  .sheet__close { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .top__nav { display: none; }
  .top__cta { display: none; }
  .burger { display: flex; }
  .plates { grid-template-columns: 1fr; }
  .plate--tall { grid-row: auto; }
  .sheet__head--row { grid-template-columns: 1fr; align-items: start; }
  .sheet__head--row .tag { margin-bottom: var(--md); }
  .dock { display: grid; }
  body { padding-bottom: 0; }
}

@media (max-width: 900px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .top { left: 0; padding-left: var(--marg); }
  .menu { inset: 0; }
  .plan, .band { padding-left: 0; }
  .sheet, .foot { padding-left: var(--marg); }
  .plan__body { bottom: clamp(150px, 22vh, 210px); right: var(--marg); max-width: none; }
  .plan__kopf { left: var(--marg); right: auto; bottom: clamp(58px, 8vh, 80px); }
  .plan__down { display: none; }
  .plan__dim-w { top: 92px; left: var(--marg); right: var(--marg); }
  .plan__dim-h { right: var(--marg); bottom: 30%; height: 30vw; }
  .pos--a { display: none; }
  .pos--b { top: 34%; right: var(--marg); }
  .pos--b .pos__lead { width: 40px; }
  .riss__cue { display: block; }
  .band__list { grid-template-columns: repeat(3, 1fr); }
  .band__list li:nth-child(3) { border-right: 0; }
  .band__list li:nth-child(-n+3) { border-bottom: 1px solid rgba(78, 118, 145, .38); }
  .step { grid-template-columns: 46px minmax(0, 1fr); }
  .planbar__head { display: none; }
  .step { grid-template-rows: auto auto auto; }
  .step__n { grid-column: 1; grid-row: 1; }
  .step__lane { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .step__track { grid-column: 2; grid-row: 1; max-width: 260px; }
  .step__txt { grid-column: 1 / -1; grid-row: 3; margin-top: var(--md); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* Hochkant sieht man nur einen senkrechten Streifen des Bildes. Deshalb:
     oben das Licht der Küche, unten ein ruhiges dunkles Feld für die Schrift. */
  .plan { height: 100svh; max-height: none; }
  .plan__photo img { object-position: 57% 50%; }
  .plan__scrim {
    background:
      linear-gradient(to top, var(--plan-deep) 0%, rgba(7, 27, 41, .97) 45%, rgba(7, 27, 41, .66) 53%, rgba(7, 27, 41, .08) 70%, rgba(7, 27, 41, .55) 100%);
  }
  .plan__body { top: 44%; bottom: auto; }
  .plan__body .tag { font-size: 10px; letter-spacing: .13em; padding: 6px 9px; }
  .plan__lead { font-size: 15px; }
  .plan__lead br { display: none; }
  .plan__act { gap: 16px 18px; }
  .plan__kopf { bottom: 24px; }
  .plan__kopf > div { min-width: 0; padding: 8px 13px; }
  .plan__kopf > div:first-child { display: none; }
  .band__list { grid-template-columns: repeat(2, 1fr); }
  .band__list li { border-bottom: 1px solid rgba(78, 118, 145, .38); }
  .band__list li:nth-child(2n) { border-right: 0; }
  .band__list li:nth-child(n+5) { border-bottom: 0; }
  .form__grid { grid-template-columns: 1fr; }
  .proto > div { flex-direction: column; align-items: flex-start; gap: 3px; }
  .lv__row { grid-template-columns: 40px minmax(0, 1fr); }
  .lv dd { grid-column: 2; }
  .lv__by { grid-column: 2; }
  .lv__row--head { display: none; }
  .marken__list { grid-template-columns: 1fr; }
  .riss__leg { padding: 14px; }
  .sheet__close-a { flex-direction: column; align-items: stretch; }
  .sheet__close-a .btn { justify-content: center; }
  .sheet__close-a .tel { text-align: center; }
  .note summary { grid-template-columns: 34px 1fr 22px; gap: var(--sm); }
  .note__a { padding-left: 46px; padding-right: 0; }
  .foot__base { flex-direction: column; align-items: flex-start; }
  .kopf--foot > div { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid rgba(78, 118, 145, .7); }
  .kopf--foot > div:last-child { border-bottom: 0; }
}

/* ══ Bewegung reduzieren ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-draw], .js .step .step__bar { --draw: 1; opacity: 1; transform: none; }
  .js [data-draw] > .dim__v, .js .pos[data-draw] i, .js .pos[data-draw] .pos__t { opacity: 1; }
  .js .pos[data-draw] .pos__lead { transform: scaleX(1); }
  .js .riss__svg .ln, .js .riss__svg .mk__l, .js .riss__svg .mk__t, .js .riss__svg .mk__a { stroke-dashoffset: 0; }
  .js .riss__svg .mk__v, .js .riss__svg .rp { opacity: 1; }
  .js .step .step__bar { transform: scaleX(1); }
}

/* ══ Druck ════════════════════════════════════════════════════════════════ */
@media print {
  .skip, .rail, .top, .menu, .dock, .plan__down, .band__tape,
  .plan__photo, .plan__grade, .plan__scrim, .plan__dims, .poss,
  .form__foot, .riss__cue { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }

  /* Der Hero ist im Druck ein normaler Block, sonst fehlt die H1 auf Blatt 1. */
  .plan { position: static; height: auto; min-height: 0; max-height: none;
          overflow: visible; padding: 0 !important; background: #fff !important; }
  .plan__body, .plan__kopf { position: static; max-width: none; inset: auto;
                             background: none !important; backdrop-filter: none !important; }
  .plan__kopf { margin-top: 6mm; }

  .sheet, .foot, .band { background: #fff !important; color: #000 !important;
                         padding: 8mm 0 !important; border-color: #999 !important; }
  .sheet--plan, .sheet--paper, .foot {
    --fg: #000; --fg-2: #333; --line: #999; --mark: #A81214;
  }
  .d1, .d2, .foot__big, .mark, .plate__name, .step__txt h3, .lv dt,
  .note summary span, .ergo__big, .kopf dd { color: #000 !important; }
  .foot__big b, .mark b { color: #A81214 !important; }
  .note__a p, .legal__c p, .sheet__lead, .prose p, .lv dd, .step__txt p,
  .plan__lead, .ergo__hint, .marken__list p { color: #333 !important; }
  .tag, .kopf dt, .plate__tags, .sheet__note, .foot__base p { color: #444 !important; }

  /* Gezeichnetes muss auf Papier fertig gezeichnet sein. */
  .js [data-draw], .js .step .step__bar, .js .pos[data-draw] .pos__lead {
    transform: none !important; opacity: 1 !important;
  }
  .js [data-draw] > .dim__v,
  .js .pos[data-draw] i, .js .pos[data-draw] .pos__t { opacity: 1 !important; }
  .js .riss__svg .ln, .js .riss__svg .mk__l, .js .riss__svg .mk__t,
  .js .riss__svg .mk__a { stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
                          animation: none !important; }
  .js .riss__svg .mk__v, .js .riss__svg .rp, .js .riss__svg .cut {
    opacity: 1 !important; animation: none !important;
  }
  .riss__svg .ln, .riss__svg .mk__l { stroke: #000 !important; }
  .riss__svg .mk__v { fill: #000 !important; }
  #ergoSvg .ln, #ergoSvg .fig, #ergoSvg .mk__l, #ergoSvg .mk__t { stroke: #333 !important; }
  #ergoSvg .mkv { fill: #333 !important; }
  #ergoSvg .cut { color: #666 !important; }

  /* Akkordeons drucken offen. */
  details > .note__a, details > .legal__c { display: block !important; }
  details::details-content { content-visibility: visible !important;
                             block-size: auto !important; opacity: 1 !important; }
  .note summary b, .legal summary::after { display: none !important; }

  .frame { outline: none !important; }
  .sheet { break-inside: auto; }
  .riss, .ergo__draw, .plate, .step { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7.5pt; color: #555; }
}