/* ==========================================================================
   HVIS.de – Design-System „Das Aufmaßblatt“
   Tokens, Grundlagen, Komponenten. Dokumentiert in design.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farbe */
  --c-brand: #cf3832;               /* Markenrot: Stempel, Knöpfe, Raster, Durchschlag */
  --c-brand-deep: #a8291f;          /* Hover, gedrückt, Fehlertext */
  --c-brand-ink: #7d1d17;           /* Text auf rotem Wash */
  --c-brand-tint: #fbe9e7;          /* roter Wash (Hausverwaltung, Hover-Zeile) */
  --c-brand-grid: rgba(207, 56, 50, 0.05);        /* Millimeterlinie, nur dezent */
  --c-brand-grid-strong: rgba(207, 56, 50, 0.11); /* Zentimeterlinie */
  --c-paper: #ffffff;               /* das Blatt */
  --c-paper-2: #f4f3f1;             /* Feldhintergrund deaktiviert */
  --c-ink: #1e1c1a;                 /* Tinte */
  --c-ink-2: #55514b;               /* Bleistift: Nebentext, Maßzahlen */
  --c-ink-3: #6f6a63;               /* Beschriftung, Platzhalter-Text */
  --c-line: #1e1c1a;
  --c-line-soft: rgba(30, 28, 26, 0.22);
  --c-on-brand: #ffffff;
  --c-on-brand-2: #f9d6d3;          /* nur für Flächen/Linien auf Rot, nie für Text unter 24 px (3,7:1) */
  --c-ok: #2c6e45;
  --c-ok-tint: #e5f2ea;
  --c-err: var(--c-brand-deep);
  --c-err-tint: var(--c-brand-tint);

  /* Schrift */
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-hand: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive;

  --t-xs: 0.8125rem;   /* 13 */
  --t-sm: 0.9375rem;   /* 15 */
  --t-base: 1.0625rem; /* 17 */
  --t-md: 1.25rem;     /* 20 */
  --t-lg: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --t-xl: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  --t-2xl: clamp(2.875rem, 1.6rem + 4.6vw, 5.25rem);
  --t-hand: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);

  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --track-display: -0.02em;
  --track-label: 0.08em;

  /* Abstand */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 4rem;          /* Blatt-Abstand, wächst mit dem Fenster (siehe Umbruchpunkte) */
  --s-10: 5rem;

  /* Raster */
  --mm: 16px;           /* eine Millimeterzelle */
  --cm: 80px;           /* fünf Zellen, stärkere Linie */
  --w-max: 1320px;
  --w-text: 66ch;
  --gutter: 1rem;       /* Seitenrand, wächst mit dem Fenster */

  /* Form */
  --r-0: 0;
  --r-1: 2px;
  --line: 1px;
  --line-2: 2px;
  --shadow-lift: 0 10px 28px -10px rgba(30, 28, 26, 0.35), 0 2px 6px -2px rgba(30, 28, 26, 0.18);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 360ms;
  --dur-3: 900ms;
}

@media (min-width: 600px)  { :root { --gutter: 1.5rem; --s-9: 5rem; --s-10: 6.5rem; } }
@media (min-width: 900px)  { :root { --gutter: 2.25rem; --s-9: 6rem; --s-10: 8rem; } }
@media (min-width: 1200px) { :root { --gutter: 3rem; --s-9: 7rem; --s-10: 10rem; } }

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--c-brand) var(--c-paper);
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-paper);
  background-image:
    linear-gradient(var(--c-brand-grid-strong) var(--line), transparent var(--line)),
    linear-gradient(90deg, var(--c-brand-grid-strong) var(--line), transparent var(--line)),
    linear-gradient(var(--c-brand-grid) var(--line), transparent var(--line)),
    linear-gradient(90deg, var(--c-brand-grid) var(--line), transparent var(--line));
  background-size: var(--cm) var(--cm), var(--cm) var(--cm), var(--mm) var(--mm), var(--mm) var(--mm);
  background-position: -1px -1px;
  caret-color: var(--c-brand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Browserflächen tragen das Design mit */
::selection { background: var(--c-brand); color: var(--c-on-brand); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-paper); border-left: var(--line) solid var(--c-line-soft); }
::-webkit-scrollbar-thumb { background: var(--c-brand); border: 3px solid var(--c-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--c-brand-deep); }
:focus-visible { outline: var(--line-2) solid var(--c-brand); outline-offset: 3px; }
::placeholder { color: var(--c-ink-3); opacity: 1; }

img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
figure { margin: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }

a {
  color: inherit;
  text-decoration-thickness: var(--line);
  text-underline-offset: 0.18em;
  text-decoration-color: var(--c-brand);
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--c-brand-deep); }

strong, b { font-weight: 600; }
small { font-size: var(--t-sm); }
hr { border: 0; border-top: var(--line) solid var(--c-line); margin: 0; }

.num, .mass, .kopf__meta dd, td.num, .feld__wert--num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprungmarke */
.skip {
  position: absolute; left: var(--s-4); top: -100%;
  background: var(--c-ink); color: var(--c-on-brand); padding: var(--s-2) var(--s-4);
  font: 600 var(--t-sm) var(--f-display); line-height: 1.3; text-transform: uppercase; letter-spacing: var(--track-label);
  z-index: 100; text-decoration: none;
}
.skip:focus { top: var(--s-2); }
.skip:hover { color: var(--c-on-brand); }

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
.titel, .titel-xl, .titel-lg, .titel-md {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--c-ink);
}
.titel     { font-size: var(--t-2xl); max-width: 18ch; }
.titel-xl  { font-size: var(--t-xl); }
.titel-lg  { font-size: var(--t-lg); line-height: var(--lh-snug); }
.titel-md  { font-size: var(--t-md); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -0.01em; }
.titel span { display: block; color: var(--c-brand); }

.lead { font-size: var(--t-md); line-height: 1.45; max-width: 44ch; color: var(--c-ink); text-wrap: pretty; }
.text { max-width: var(--w-text); text-wrap: pretty; }
.text p + p { margin-top: var(--s-4); }
.klein { font-size: var(--t-sm); color: var(--c-ink-2); }
.hinweis { font-size: var(--t-sm); color: var(--c-ink-2); }

/* Beschriftung wie ein Formularfeld-Titel */
.label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
  line-height: 1.3;
}

/* Handschrift: Anmerkung auf dem Blatt */
.hand {
  font-family: var(--f-hand);
  font-size: var(--t-hand);
  line-height: 1.3;
  color: var(--c-brand);
  transform: rotate(-1.5deg);
  transform-origin: left center;
  display: inline-block;
  text-wrap: balance;
  max-width: 28ch;
}
.hand--ink { color: var(--c-ink-2); }
.hand .hand__zeile { display: block; }
.hand .sig { display: block; font-size: 0.8em; margin-top: 0.15em; }

/* --------------------------------------------------------------------------
   4. Layout: Blatt, Container, Raster
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--w-max)); margin-inline: auto; }
.container--text { width: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto; }

.blatt { padding: var(--s-9) var(--gutter); position: relative; }
.blatt > .container, .kopf .container, .fuss > .container { width: min(100%, var(--w-max)); }
.blatt--eng { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.blatt + .blatt { border-top: var(--line) solid var(--c-line); }
.blatt--weiss { background: var(--c-paper); }
.blatt--wash { background: var(--c-brand-tint); }
.blatt--rot { background: var(--c-brand); color: var(--c-on-brand); }
.blatt--rot .titel, .blatt--rot .titel-xl, .blatt--rot .titel-lg, .blatt--rot .titel-md,
.blatt--rot .label, .blatt--rot .klein, .blatt--rot .hinweis { color: inherit; }
.blatt--rot .hand { color: var(--c-on-brand); }
.blatt--rot p, .blatt--rot li, .blatt--rot dd, .blatt--rot .lead, .blatt--rot .text { color: inherit; }
.blatt--rot a { text-decoration-color: currentColor; }
.blatt--rot a:hover { color: var(--c-on-brand); text-decoration-thickness: var(--line-2); }
.blatt--rot .btn--weiss:hover { color: var(--c-brand-deep); }
.blatt--rot .btn--rahmen-weiss:hover { color: var(--c-on-brand); }
.blatt--rot hr { border-color: rgba(255, 255, 255, 0.45); }

.blatt__kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: var(--line-2) solid currentColor;
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}
.blatt__kopf .titel-xl { max-width: 20ch; }
.blatt__notiz { font-size: var(--t-sm); color: var(--c-ink-2); text-align: right; max-width: 34ch; }
.blatt--rot .blatt__notiz { color: inherit; font-size: var(--t-base); }

.raster { display: grid; gap: var(--s-6) var(--s-7); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--falz { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.raster--falz-rechts { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }

.stapel > * + * { margin-top: var(--s-4); }
.stapel--eng > * + * { margin-top: var(--s-2); }
.stapel--weit > * + * { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   5. Formularkopf + Registerreiter (Header/Navigation)
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50; padding: 0 var(--gutter);
  background: var(--c-paper);
  border-bottom: var(--line) solid var(--c-line);
}
.kopf__zeile {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--s-5);
  min-height: 4.5rem;
  padding-block: var(--s-3);
}
.kopf__logo { display: block; line-height: 0; }
.kopf__logo img { height: 2.75rem; width: auto; }
.kopf__meta {
  display: flex; gap: var(--s-6); margin: 0;
  padding-left: var(--s-6); border-left: var(--line) solid var(--c-line);
}
.kopf__meta div { display: grid; gap: 2px; }
.kopf__meta dt { font: 600 var(--t-xs) var(--f-display); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink-2); }
.kopf__meta dd { font: 500 var(--t-sm) var(--f-display); line-height: 1.3; letter-spacing: 0.01em; white-space: nowrap; }
.kopf__tel { white-space: nowrap; }
.kopf__menu { display: none; }

.reiter { border-bottom: var(--line) solid var(--c-line); background: var(--c-paper); }
.reiter ul { display: flex; list-style: none; }
.reiter li { flex: 1 1 auto; }
.reiter li + li { border-left: var(--line) solid var(--c-line); }
.reiter a {
  display: block; text-align: center; text-decoration: none;
  font: 600 var(--t-sm) var(--f-display); line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--s-3) var(--s-3);
  position: relative; color: var(--c-ink);
  white-space: nowrap;
}
.reiter a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--c-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.reiter a:hover { color: var(--c-brand-deep); }
.reiter a:hover::after { transform: scaleX(1); }
.reiter a[aria-current="page"] { background: var(--c-brand); color: var(--c-on-brand); }
.reiter a[aria-current="page"]::after { display: none; }
.reiter a[data-folgt] { color: var(--c-ink-2); }
.reiter a[data-folgt]:hover { color: var(--c-brand-deep); }

/* --------------------------------------------------------------------------
   6. Knöpfe
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: 600 var(--t-sm) var(--f-display); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.8rem 1.25rem; min-height: 2.75rem;
  border: var(--line) solid var(--c-ink); border-radius: var(--r-1);
  background: var(--c-paper); color: var(--c-ink);
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  white-space: nowrap;
}
.btn .ico { width: 1.1em; height: 1.1em; flex: none; }
.btn:hover { background: var(--c-brand-tint); border-color: var(--c-brand-deep); color: var(--c-brand-deep); }
.btn:active { transform: translateY(1px); }
.btn--brand { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.btn--brand:hover { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: var(--c-on-brand); }
.btn--ghost { background: transparent; }
.btn--weiss { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-brand-deep); }
.btn--weiss:hover { background: var(--c-brand-tint); border-color: var(--c-brand-tint); color: var(--c-brand-deep); }
.btn--rahmen-weiss { background: transparent; border-color: var(--c-on-brand); color: var(--c-on-brand); }
.btn--rahmen-weiss:hover { background: rgba(255,255,255,0.14); border-color: var(--c-on-brand); color: var(--c-on-brand); }
.btn--gross { font-size: var(--t-base); padding: 1rem 1.6rem; min-height: 3.25rem; }
.btn--klein { font-size: var(--t-xs); padding: 0.55rem 0.85rem; min-height: 2.1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn.ist-laden { pointer-events: none; cursor: progress; }
.btn.ist-laden::before {
  content: ""; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: dreh 0.8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Textlink mit Pfeil */
.link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: 600 var(--t-sm) var(--f-display); line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--c-ink);
}
.link .ico { width: 1.1em; height: 1.1em; transition: transform var(--dur-2) var(--ease-out); }
.link:hover { color: var(--c-brand-deep); }
.link:hover .ico { transform: translateX(4px); }
.link--text { text-transform: none; letter-spacing: -0.01em; font-size: var(--t-md); line-height: 1.3; }

/* --------------------------------------------------------------------------
   7. Maßlinien
   -------------------------------------------------------------------------- */
.mass {
  --mass-farbe: var(--c-ink-2);
  position: relative; display: block;
  font: 500 var(--t-sm) var(--f-display); line-height: 1.3; letter-spacing: 0.04em; color: var(--mass-farbe);
}
.mass--h { height: var(--line); width: 100%; }
.mass--v { width: var(--line); height: 100%; }
.mass i { position: absolute; inset: 0; display: block; background: var(--mass-farbe); }
.mass i::before, .mass i::after {
  content: ""; position: absolute; width: 12px; height: var(--line); background: var(--mass-farbe);
  transform: rotate(-45deg);
}
.mass--h i::before { left: -5px; top: 0; }
.mass--h i::after  { right: -5px; top: 0; }
.mass--v i::before { top: -0.5px; left: -5.5px; }
.mass--v i::after  { bottom: -0.5px; left: -5.5px; }
.mass b {
  font-weight: inherit; position: absolute; white-space: nowrap;
  background: var(--c-paper); padding: 0 var(--s-1);
}
.mass--h b { left: 50%; top: 0; transform: translate(-50%, calc(-100% - 2px)); }
.mass--v b { top: 50%; left: 0; transform: translate(calc(-50% + 0.5px), -50%) rotate(-90deg); transform-origin: center; }
.mass--v.mass--aussen b { transform: translate(calc(-50% + 0.5px), -50%) rotate(90deg); }
.blatt--rot .mass, .blatt--rot .mass b { --mass-farbe: var(--c-on-brand); }
.blatt--rot .mass b { background: var(--c-brand); }

/* Rahmen, der Maßlinien um ein Bild legt */
.mass-rahmen { position: relative; display: grid; grid-template-columns: 1fr 2.25rem; grid-template-rows: 2.25rem 1fr; }
.mass-rahmen > .mass--h { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 0.9rem; }
.mass-rahmen > .mass--v { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 1.1rem; }
.mass-rahmen > .mass-rahmen__bild { grid-column: 1; grid-row: 2; position: relative; }

/* --------------------------------------------------------------------------
   8. Stempel
   -------------------------------------------------------------------------- */
.stempel {
  display: inline-grid; gap: 2px; text-align: center;
  padding: 0.55rem 0.9rem;
  border: var(--line-2) solid var(--c-brand); border-radius: 3px;
  color: var(--c-brand);
  font: 700 var(--t-sm) var(--f-display); line-height: 1.3; letter-spacing: 0.04em;
  transform: rotate(-3deg);
  background: var(--c-paper);
  box-shadow: inset 0 0 0 2px var(--c-paper), inset 0 0 0 3px var(--c-brand);
  filter: url(#stempel-rau);   /* Gummistempel-Kante: Rauschen verschiebt Rand und Buchstaben, Farbe bleibt fleckig (Filter im Icon-Sprite jeder Seite) */
}
.stempel b { display: block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.stempel small { display: block; font-weight: 600; font-size: 0.82em; letter-spacing: 0.03em; }
.stempel--gross { font-size: var(--t-md); padding: 0.8rem 1.25rem; }
.stempel--gerade { transform: none; }
.stempel--ink { border-color: var(--c-ink); color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-paper), inset 0 0 0 3px var(--c-ink); }
.stempel--weiss { border-color: var(--c-on-brand); color: var(--c-on-brand); background: transparent; box-shadow: inset 0 0 0 2px var(--c-brand), inset 0 0 0 3px var(--c-on-brand); }

.stempel-reihe { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); align-items: center; }
.stempel-reihe .stempel:nth-child(2n) { transform: rotate(2deg); }
.stempel-reihe .stempel:nth-child(3n) { transform: rotate(-1.5deg); }

/* --------------------------------------------------------------------------
   9. Felder (Beschriftung + Wert) und Zeilen
   -------------------------------------------------------------------------- */
.felder { display: grid; gap: 0; border-top: var(--line) solid currentColor; }
.felder--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.felder--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.felder--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feld { padding: var(--s-3) 0 var(--s-4); border-bottom: var(--line) solid currentColor; display: grid; gap: var(--s-1); align-content: start; }
.felder--2 .feld:nth-child(2n), .felder--3 .feld:not(:nth-child(3n+1)), .felder--4 .feld:not(:nth-child(4n+1)) { padding-left: var(--s-5); border-left: var(--line) solid currentColor; }
.felder--2 .feld:nth-child(2n+1), .felder--3 .feld:nth-child(3n+1), .felder--4 .feld:nth-child(4n+1) { padding-right: var(--s-5); }
.felder--3 .feld:not(:nth-child(3n+1)), .felder--4 .feld:not(:nth-child(4n+1)) { padding-right: var(--s-5); }
.feld dt, .feld__label { font: 600 var(--t-xs) var(--f-display); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink-2); }
.feld dd, .feld__wert { font-size: var(--t-base); }
.feld__wert--gross { font: 600 var(--t-lg) var(--f-display); letter-spacing: var(--track-display); line-height: 1.05; }
.blatt--rot .feld dt, .blatt--rot .feld__label { color: inherit; font-size: var(--t-sm); }
.feld a { text-decoration: none; }
.feld a:hover { text-decoration: underline; }

/* Positionszeilen (Leistungen) */
.zeilen { list-style: none; border-top: var(--line) solid var(--c-line); }
.zeile {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 9rem; gap: var(--s-5) var(--s-7); align-items: baseline;
  padding: var(--s-5) 0; border-bottom: var(--line) solid var(--c-line);
  position: relative;
  transition: background var(--dur-1) var(--ease-out);
}
.zeile::before { content: ""; position: absolute; inset: 0 -1rem; background: var(--c-brand-tint); opacity: 0; z-index: -1; transition: opacity var(--dur-1) var(--ease-out); }
.zeile:hover::before { opacity: 1; }
.zeile__titel { font: 600 var(--t-lg) var(--f-display); letter-spacing: var(--track-display); line-height: 1.05; }
.zeile__titel small { display: block; font: 500 var(--t-sm) var(--f-body); line-height: 1.4; letter-spacing: 0; color: var(--c-ink-2); margin-top: var(--s-1); }
.zeile__text { color: var(--c-ink); text-wrap: pretty; }
.zeile__fakt { font: 500 var(--t-sm) var(--f-display); line-height: 1.4; letter-spacing: 0.04em; color: var(--c-ink-2); text-align: right; white-space: nowrap; }

/* --------------------------------------------------------------------------
   10. Bildplatzhalter
   -------------------------------------------------------------------------- */
.platzhalter {
  position: relative; overflow: hidden;
  background-color: #edebe7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14L14 0M-1 1L1 -1M13 15L15 13' stroke='%231e1c1a' stroke-opacity='.11' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  border: var(--line) solid var(--c-ink);
  min-height: 8rem;
}
.platzhalter::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(30,28,26,0.28) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(30,28,26,0.28) 50%, transparent calc(50% + 0.5px));
}
.platzhalter::after {
  content: "Platzhalter: " attr(data-label);
  position: absolute; left: var(--s-3); bottom: var(--s-3); max-width: calc(100% - 2 * var(--s-3));
  padding: 0.35rem 0.55rem; background: var(--c-paper); border: var(--line) solid var(--c-ink);
  font: 500 var(--t-sm) var(--f-display); letter-spacing: 0.02em; color: var(--c-ink-2);
  line-height: 1.3;
}
.platzhalter--quer { aspect-ratio: 4 / 3; }
.platzhalter--breit { aspect-ratio: 16 / 9; }
.platzhalter--hoch { aspect-ratio: 3 / 4; }
.platzhalter--quadrat { aspect-ratio: 1; }
.platzhalter--karte { aspect-ratio: 5 / 3; }
.platzhalter--dokument { aspect-ratio: 1 / 1.414; }

/* Bildunterschrift */
.bildtext { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-ink-2); }
.bildtext .num { font-family: var(--f-display); line-height: 1.4; letter-spacing: 0.04em; white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. Phasen-Vokabular
   -------------------------------------------------------------------------- */
.phase {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 600 var(--t-xs) var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem; border: var(--line) solid currentColor; border-radius: var(--r-1);
  color: var(--c-ink-2); background: var(--c-paper); line-height: 1.3; white-space: nowrap;
}
.phase::before { content: ""; width: 0.55rem; height: 0.55rem; border: var(--line) solid currentColor; border-radius: 1px; }
.phase--aufmass::before { background: linear-gradient(135deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
.phase--vorbereitung::before { background: linear-gradient(currentColor, currentColor) left / 50% 100% no-repeat; }
.phase--ausfuehrung { color: var(--c-brand-deep); border-color: var(--c-brand); }
.phase--ausfuehrung::before { background: var(--c-brand); border-color: var(--c-brand); }
.phase--abnahme { color: var(--c-ok); }
.phase--abnahme::before { background: var(--c-ok); border-color: var(--c-ok); }
.blatt--rot .phase { background: transparent; color: var(--c-on-brand); border-color: var(--c-on-brand); }

.phasen { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }

/* Ablauf: vier Phasen als Leiste */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--line) solid var(--c-ink); }
.ablauf__schritt { padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-1); position: relative; }
.ablauf__schritt + .ablauf__schritt { border-left: var(--line) solid var(--c-ink); }
.ablauf__schritt .label { color: var(--c-ink-2); }
.ablauf__schritt strong { font: 600 var(--t-md) var(--f-display); line-height: 1.3; letter-spacing: -0.01em; }
.ablauf__schritt.ist-aktiv { background: var(--c-brand); color: var(--c-on-brand); }
.ablauf__schritt.ist-aktiv .label, .ablauf__schritt.ist-aktiv .klein { color: inherit; }
.ablauf__schritt.ist-fertig { background: var(--c-brand-tint); }

/* --------------------------------------------------------------------------
   12. Bautagebuch-Eintrag (Projekt)
   -------------------------------------------------------------------------- */
.eintrag {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) var(--s-7);
  padding: var(--s-6) 0; border-bottom: var(--line) solid var(--c-line);
  position: relative;
}
.eintrag:first-child { border-top: var(--line) solid var(--c-line); }
.eintrag__bild { position: relative; }
.eintrag__inhalt { display: grid; gap: var(--s-3); align-content: start; }
.eintrag__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; font: 500 var(--t-sm) var(--f-display); line-height: 1.4; letter-spacing: 0.04em; color: var(--c-ink-2); }
.eintrag__meta .datum { color: var(--c-ink); }
.eintrag__titel { font: 600 var(--t-lg) var(--f-display); letter-spacing: var(--track-display); line-height: 1.05; }
.eintrag__titel a { text-decoration: none; }
.eintrag__titel a::after { content: ""; position: absolute; inset: 0; }
.eintrag__titel a:hover { color: var(--c-brand-deep); }
.eintrag__text { max-width: 60ch; text-wrap: pretty; }
.eintrag__fuss { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; margin-top: var(--s-2); }
.eintrag:hover .eintrag__titel a { color: var(--c-brand-deep); }
.eintrag .link { position: relative; z-index: 1; }

.muster {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  font: 600 var(--t-xs) var(--f-display); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase;
  background: var(--c-ink); color: var(--c-paper); padding: 0.3rem 0.5rem;
}

/* Schritt im Projektblatt */
.schritt {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-5) var(--s-7);
  padding: var(--s-7) 0; border-top: var(--line) solid var(--c-line);
}
.schritt__nr { font: 600 var(--t-xl) var(--f-display); letter-spacing: var(--track-display); line-height: 1; color: var(--c-brand); }
.schritt__inhalt { display: grid; gap: var(--s-3); align-content: start; }
.schritt__inhalt .titel-lg { max-width: 22ch; }
.schritt__inhalt .hand { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   13. Formular
   -------------------------------------------------------------------------- */
.formular { display: grid; gap: var(--s-5); }
.formular fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-3); }
.formular legend { padding: 0; margin-bottom: var(--s-2); }
.formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }

.eingabe { display: grid; gap: var(--s-2); }
.eingabe__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.eingabe .pflicht { color: var(--c-brand); font-weight: 700; }
.eingabe .optional { font: 400 var(--t-xs) var(--f-body); line-height: 1.4; color: var(--c-ink-3); }
.eingabe input:not([type="checkbox"]):not([type="radio"]), .eingabe textarea, .eingabe select {
  width: 100%; font: inherit; color: var(--c-ink);
  padding: 0.7rem 0.85rem; min-height: 3rem;
  border: var(--line) solid var(--c-ink); border-radius: var(--r-1); background: var(--c-paper);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.eingabe textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-body); }
.eingabe input:hover, .eingabe textarea:hover, .eingabe select:hover { border-color: var(--c-brand-deep); }
.eingabe input:focus, .eingabe textarea:focus, .eingabe select:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-tint); }
.eingabe input:focus-visible, .eingabe textarea:focus-visible { outline: none; }
.eingabe input:disabled, .eingabe textarea:disabled, .eingabe select:disabled { background: var(--c-paper-2); color: var(--c-ink-3); border-color: var(--c-line-soft); cursor: not-allowed; }
.eingabe.ist-fehler input, .eingabe.ist-fehler textarea, .eingabe.ist-fehler select { border-color: var(--c-err); border-width: var(--line-2); }
.eingabe__fehler { display: none; font-size: var(--t-sm); color: var(--c-err); font-weight: 500; }
.eingabe.ist-fehler .eingabe__fehler { display: flex; gap: var(--s-2); align-items: flex-start; }
.eingabe__fehler .ico { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.2em; }
.eingabe__hilfe { font-size: var(--t-sm); color: var(--c-ink-2); }

/* Auswahl: Radio als Registerzellen */
.wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--line) solid var(--c-ink); border-radius: var(--r-1); overflow: hidden; }
.wahl label { position: relative; display: block; text-align: center; padding: 0.8rem 0.5rem; cursor: pointer; font: 600 var(--t-sm) var(--f-display); line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.wahl label + label { border-left: var(--line) solid var(--c-ink); }
.wahl input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wahl label:hover { background: var(--c-brand-tint); }
.wahl label:has(input:checked) { background: var(--c-brand); color: var(--c-on-brand); }
.wahl label:has(input:focus-visible) { outline: var(--line-2) solid var(--c-brand); outline-offset: -3px; }
.eingabe.ist-fehler .wahl { border-color: var(--c-err); box-shadow: inset 0 0 0 1px var(--c-err); }

/* Haken */
.haken { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; cursor: pointer; font-size: var(--t-sm); }
.haken input { appearance: none; width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; border: var(--line) solid var(--c-ink); border-radius: var(--r-1); background: var(--c-paper); display: grid; place-content: center; cursor: pointer; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.haken input::before { content: ""; width: 0.55rem; height: 0.9rem; border: solid var(--c-on-brand); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -2px) scale(0); transition: transform var(--dur-2) var(--ease-out); }
.haken input:checked { background: var(--c-brand); border-color: var(--c-brand); }
.haken input:checked::before { transform: rotate(45deg) translate(-1px, -2px) scale(1); }
.haken input:hover { border-color: var(--c-brand-deep); }
.eingabe.ist-fehler .haken input { border-color: var(--c-err); border-width: var(--line-2); }

.formular__fuss { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; padding-top: var(--s-4); border-top: var(--line) solid var(--c-line); }

/* --------------------------------------------------------------------------
   14. Meldungen
   -------------------------------------------------------------------------- */
.meldung {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start;
  padding: var(--s-4) var(--s-5); border: var(--line) solid var(--c-ink); border-radius: var(--r-1); background: var(--c-paper);
}
.meldung .ico { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; }
.meldung strong { display: block; font: 600 var(--t-md) var(--f-display); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: var(--s-1); }
.meldung p { font-size: var(--t-sm); }
.meldung--ok { border-color: var(--c-ok); background: var(--c-ok-tint); color: #1d4a2f; }
.meldung--ok .ico { color: var(--c-ok); }
.meldung--fehler { border-color: var(--c-err); background: var(--c-err-tint); color: var(--c-brand-ink); }
.meldung--fehler .ico { color: var(--c-err); }
.meldung--hinweis { border-style: dashed; }
.meldung--hinweis .ico { color: var(--c-ink-2); }

/* Kurzmeldung unten rechts (Seite folgt) */
.toast {
  position: fixed; left: 50%; bottom: var(--s-5); transform: translate(-50%, 1rem); z-index: 90;
  background: var(--c-ink); color: var(--c-paper); padding: var(--s-3) var(--s-5);
  font: 500 var(--t-sm) var(--f-body); border-radius: var(--r-1);
  box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  max-width: min(90vw, 36rem); text-align: center;
}
.toast.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   15. Ansprechpartner-Vermerk
   -------------------------------------------------------------------------- */
.vermerk { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; }
.vermerk__foto { width: 7rem; }
.vermerk__foto .platzhalter { min-height: 0; }
.vermerk__foto .platzhalter::after { content: "Foto"; left: 50%; bottom: 50%; transform: translate(-50%, 50%); }
.vermerk__name { font: 600 var(--t-lg) var(--f-display); line-height: 1.1; letter-spacing: var(--track-display); }
.vermerk__rolle { color: var(--c-ink-2); font-size: var(--t-sm); }
.vermerk__kontakt { list-style: none; display: grid; gap: var(--s-1); margin-top: var(--s-3); font-size: var(--t-base); }
.vermerk__kontakt li { display: flex; gap: var(--s-2); align-items: center; }
.vermerk__kontakt .ico { width: 1.1em; height: 1.1em; color: var(--c-brand); flex: none; }
.vermerk__kontakt a { text-decoration: none; }
.vermerk__kontakt a:hover { text-decoration: underline; }
.blatt--rot .vermerk__kontakt .ico { color: var(--c-on-brand); }
.blatt--rot .vermerk__rolle { color: inherit; font-size: var(--t-base); }

/* --------------------------------------------------------------------------
   16. Fußrand (Footer)
   -------------------------------------------------------------------------- */
.fuss { background: var(--c-brand); color: var(--c-on-brand); border-top: var(--line) solid var(--c-paper); padding: 0 var(--gutter); }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: var(--c-on-brand); }
.fuss__zellen { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-inline: var(--line) solid rgba(255,255,255,0.5); }
.fuss__zelle { padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.fuss__zelle + .fuss__zelle { border-left: var(--line) solid rgba(255,255,255,0.5); }
.fuss__zelle .label { color: inherit; font-size: var(--t-sm); }
.fuss .klein { color: inherit; }
.fuss__zelle p, .fuss__zelle li { font-size: var(--t-base); line-height: 1.45; }
.fuss__zelle ul { list-style: none; display: grid; gap: var(--s-1); }
.fuss__zelle .fuss__marke { font: 700 2.5rem var(--f-display); letter-spacing: -0.02em; line-height: 1; }
.fuss__zelle .fuss__marke small { display: block; font: 400 var(--t-hand) var(--f-hand); line-height: 1.3; letter-spacing: 0; margin-top: var(--s-1); }
.fuss__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-5); padding: var(--s-4) 0; border-top: var(--line) solid rgba(255,255,255,0.5); font-size: var(--t-sm); }
.fuss__leiste ul { list-style: none; display: flex; gap: var(--s-5); }

/* --------------------------------------------------------------------------
   17. Seiten-spezifisch
   -------------------------------------------------------------------------- */
/* Startseite: das erste Blatt */
.blatt--hero { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8); align-items: start; padding-top: var(--s-6); padding-bottom: var(--s-6); }
.hero__text { display: grid; gap: var(--s-5); align-content: start; padding-top: var(--s-4); }
.hero__text .hand { margin-top: var(--s-2); }
.hero__bild { position: relative; }
.hero__stempel { position: absolute; right: 3.25rem; bottom: -1.1rem; z-index: 2; }

/* Projektübersicht: Filter als Register */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.filter__gruppe { display: inline-flex; border: var(--line) solid var(--c-ink); border-radius: var(--r-1); overflow: hidden; }
.filter__gruppe button { font: 600 var(--t-xs) var(--f-display); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; padding: 0.55rem 0.9rem; background: var(--c-paper); border: 0; color: var(--c-ink); cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.filter__gruppe button + button { border-left: var(--line) solid var(--c-ink); }
.filter__gruppe button:hover { background: var(--c-brand-tint); color: var(--c-brand-deep); }
.filter__gruppe button[aria-pressed="true"] { background: var(--c-brand); color: var(--c-on-brand); }
.filter__zahl { font: 500 var(--t-sm) var(--f-display); line-height: 1.4; letter-spacing: 0.04em; color: var(--c-ink-2); margin-left: auto; }
.eintrag[hidden] { display: none; }

/* Projektblatt: Kopfdaten */
.projekt-kopf { display: grid; gap: var(--s-6); }
.projekt-kopf .titel-xl { max-width: 24ch; }

/* Leer-Zustand */
.leer { padding: var(--s-8) var(--s-5); text-align: center; border: var(--line) dashed var(--c-ink); display: grid; gap: var(--s-3); justify-items: center; }
.leer .ico { width: 2rem; height: 2rem; color: var(--c-ink-2); }

/* Design-System-Seite */
.ds { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.ds > * { min-width: 0; }
.ds__scroll { overflow-x: auto; max-width: 100%; }
.ds__nav { position: sticky; top: 6rem; display: grid; gap: var(--s-1); list-style: none; border-left: var(--line) solid var(--c-line); }
.ds__nav a { display: block; padding: 0.35rem var(--s-4); text-decoration: none; font: 500 var(--t-sm) var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-2); margin-left: -1px; border-left: 3px solid transparent; }
.ds__nav a:hover, .ds__nav a.ist-aktiv { color: var(--c-brand-deep); border-left-color: var(--c-brand); }
.ds__abschnitt { padding-block: var(--s-8); border-top: var(--line) solid var(--c-line); scroll-margin-top: 7rem; }
.ds__abschnitt:first-child { border-top: 0; padding-top: 0; }
.ds__abschnitt > .titel-xl { margin-bottom: var(--s-3); }
.ds__abschnitt > .text { margin-bottom: var(--s-6); }
.ds > nav { min-width: 0; }
.ds__probe { padding: var(--s-6); border: var(--line) solid var(--c-line); background: var(--c-paper); position: relative; }
.ds__probe + .ds__probe { margin-top: var(--s-5); }
.ds__probe--rot { background: var(--c-brand); color: var(--c-on-brand); }
.ds__probe--wash { background: var(--c-brand-tint); }
.ds__probe--knapp { padding: 0; }
.ds__probe--raster { background-color: var(--c-paper); background-image: inherit; }
.ds__probe-titel { position: absolute; top: 0; left: 0; transform: translateY(-100%); line-height: 1.3; font: 600 var(--t-xs) var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase; background: var(--c-ink); color: var(--c-paper); padding: 0.25rem 0.5rem; }
.ds__code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--t-xs); color: var(--c-ink-2); background: var(--c-paper-2); padding: 0.1rem 0.35rem; border-radius: var(--r-1); overflow-wrap: anywhere; }
.ds__tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ds__tabelle th, .ds__tabelle td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--line) solid var(--c-line-soft); vertical-align: top; }
.ds__tabelle th { font: 600 var(--t-xs) var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink-2); border-bottom-color: var(--c-line); }
.ds__tabelle td.num { text-align: right; }

.farbe { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: var(--line) solid var(--c-line-soft); }
.farbe__muster { height: 3rem; border: var(--line) solid var(--c-line-soft); border-radius: var(--r-1); }
.farbe__muster--raster { background-color: var(--c-paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M8 0v40M16 0v40M24 0v40M32 0v40M0 8h40M0 16h40M0 24h40M0 32h40' stroke='%23cf3832' stroke-opacity='.05' stroke-width='1'/%3E%3Cpath d='M0 .5h40M.5 0v40' stroke='%23cf3832' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E"); background-size: 40px 40px; }
.farbe strong { font: 600 var(--t-sm) var(--f-display); letter-spacing: 0.02em; }
.farbe small { display: block; color: var(--c-ink-2); }
.farben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); }

.typo-probe { display: grid; gap: var(--s-4); }
.typo-probe > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-4); align-items: baseline; padding-bottom: var(--s-3); border-bottom: var(--line) solid var(--c-line-soft); }
.typo-probe .label { padding-top: 0.2em; }

.abstand-probe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-7) var(--s-4); }
.abstand-probe div { background: var(--c-brand); width: 2rem; position: relative; }
.abstand-probe div::after { content: attr(data-t); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.3rem; font: 500 var(--t-xs) var(--f-display); letter-spacing: 0.04em; color: var(--c-ink-2); }

/* --------------------------------------------------------------------------
   18. Bewegung: eine Geste, orchestriert
   Maßlinien zeichnen sich, dann setzt der Stempel auf. Ohne JS ist alles sichtbar.
   -------------------------------------------------------------------------- */
.js .zeichnen .mass--h i { transform: scaleX(0); transform-origin: left; }
.js .zeichnen .mass--v i { transform: scaleY(0); transform-origin: top; }
.js .zeichnen .mass b, .js .zeichnen .mass i::before, .js .zeichnen .mass i::after { opacity: 0; }
.js .zeichnen .stempel { opacity: 0; transform: scale(1.35) rotate(-9deg); }
.js .zeichnen .hand { opacity: 0; clip-path: inset(0 100% 0 0); }
.js .zeichnen .hand--zeilen { opacity: 1; clip-path: none; }
.js .zeichnen .hand--zeilen > span { opacity: 0; clip-path: inset(0 100% 0 0); }

.js .zeichnen.ist-sichtbar .mass--h i, .js .zeichnen.ist-sichtbar .mass--v i { transform: none; transition: transform var(--dur-3) var(--ease-out); }
.js .zeichnen.ist-sichtbar .mass--v i { transition-delay: 250ms; }
.js .zeichnen.ist-sichtbar .mass b, .js .zeichnen.ist-sichtbar .mass i::before, .js .zeichnen.ist-sichtbar .mass i::after { opacity: 1; transition: opacity var(--dur-2) var(--ease-out) 550ms; }
.js .zeichnen.ist-sichtbar .stempel { opacity: 1; transform: rotate(-3deg); transition: opacity 200ms var(--ease-out) 850ms, transform 520ms var(--ease-out) 850ms; }
.js .zeichnen.ist-sichtbar .hand { opacity: 1; clip-path: inset(0 -5% 0 0); transition: opacity 100ms linear 400ms, clip-path 1100ms var(--ease-out) 400ms; }
.js .zeichnen.ist-sichtbar .hand--zeilen > span { opacity: 1; clip-path: inset(0 -5% 0 0); transition: opacity 100ms linear var(--d), clip-path 900ms var(--ease-out) var(--d); }
.js .zeichnen.ist-sichtbar .hand--zeilen > span:nth-child(1) { --d: 400ms; }
.js .zeichnen.ist-sichtbar .hand--zeilen > span:nth-child(2) { --d: 1150ms; }
.js .zeichnen.ist-sichtbar .hand--zeilen > span:nth-child(3) { --d: 1900ms; }
/* Stempelreihe ohne Maßlinien: die Stempel setzen nacheinander auf */
.js .stempel-reihe.zeichnen .stempel:nth-child(2n) { transform: scale(1.35) rotate(9deg); }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel { transition-delay: var(--d); }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(2n) { transform: rotate(2deg); }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(3n) { transform: rotate(-1.5deg); }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(1) { --d: 120ms; }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(2) { --d: 300ms; }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(3) { --d: 480ms; }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(4) { --d: 660ms; }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(5) { --d: 840ms; }
.js .stempel-reihe.zeichnen.ist-sichtbar .stempel:nth-child(6) { --d: 1020ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js .zeichnen .mass--h i, .js .zeichnen .mass--v i { transform: none; }
  .js .zeichnen .mass b, .js .zeichnen .mass i::before, .js .zeichnen .mass i::after, .js .zeichnen .stempel, .js .zeichnen .hand, .js .zeichnen .hand--zeilen > span { opacity: 1; clip-path: none; }
  .js .stempel-reihe.zeichnen .stempel:nth-child(2n) { transform: rotate(2deg); }
  .js .zeichnen .stempel { transform: rotate(-3deg); }
}

/* --------------------------------------------------------------------------
   19. Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .kopf__meta { gap: var(--s-4); }
  .reiter a { padding-inline: var(--s-2); letter-spacing: 0.04em; }
  .kopf__meta div:nth-child(2) { display: none; }
  .fuss__zellen { grid-template-columns: 1fr 1fr; }
  .fuss__zelle:nth-child(2n+1) { border-left: 0; }
  .fuss__zelle:nth-child(n+3) { border-top: var(--line) solid rgba(255,255,255,0.5); }
  .ds { grid-template-columns: 1fr; }
  .ds__nav { position: static; display: flex; flex-wrap: wrap; gap: 0; border-left: 0; border-bottom: var(--line) solid var(--c-line); }
  .ds__nav a { border-left: 0; border-bottom: 3px solid transparent; margin: 0 0 -1px; }
  .ds__nav a:hover, .ds__nav a.ist-aktiv { border-bottom-color: var(--c-brand); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-7); padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .hero__text { padding-top: 0; }
  .raster--2, .raster--3, .raster--falz, .raster--falz-rechts { grid-template-columns: 1fr; }
  .zeile { grid-template-columns: 1fr; gap: var(--s-2); }
  .zeile__fakt { text-align: left; white-space: normal; }
  .eintrag { grid-template-columns: 1fr; gap: var(--s-4); }
  .schritt { grid-template-columns: 1fr; gap: var(--s-4); }
  .felder--3, .felder--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder--3 .feld, .felder--4 .feld { padding-left: 0; padding-right: 0; border-left: 0; }
  .felder--3 .feld:nth-child(2n), .felder--4 .feld:nth-child(2n) { padding-left: var(--s-5); border-left: var(--line) solid currentColor; }
  .felder--3 .feld:nth-child(2n+1), .felder--4 .feld:nth-child(2n+1) { padding-right: var(--s-5); }
  .ablauf { grid-template-columns: repeat(2, 1fr); }
  .ablauf__schritt:nth-child(3) { border-left: 0; }
  .ablauf__schritt:nth-child(n+3) { border-top: var(--line) solid var(--c-ink); }
  .formular__reihe { grid-template-columns: 1fr; }
  .farben { grid-template-columns: 1fr; }
  .blatt__kopf { align-items: flex-start; flex-direction: column; gap: var(--s-2); }
  .blatt__notiz { text-align: left; }
}

@media (max-width: 980px) {
  .kopf__zeile { grid-template-columns: auto 1fr auto auto; }
  .kopf__menu {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font: 600 var(--t-xs) var(--f-display); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase;
    padding: 0.6rem 0.75rem; min-height: 2.75rem; border: var(--line) solid var(--c-ink); border-radius: var(--r-1); background: var(--c-paper); color: var(--c-ink); cursor: pointer;
  }
  .kopf__menu .ico { width: 1.2rem; height: 1.2rem; }
  .kopf__menu .ico--zu { display: none; }
  .kopf__menu[aria-expanded="true"] .ico--auf { display: none; }
  .kopf__menu[aria-expanded="true"] .ico--zu { display: block; }
  .reiter { display: none; position: absolute; left: 0; right: 0; top: 100%; box-shadow: var(--shadow-lift); }
  .reiter.ist-offen { display: block; }
  .reiter ul { flex-direction: column; }
  .reiter li + li { border-left: 0; border-top: var(--line) solid var(--c-line); }
  .reiter a { text-align: left; padding: var(--s-4) var(--gutter); font-size: var(--t-base); }
  .reiter a::after { top: 0; bottom: 0; right: auto; width: 4px; height: auto; transform: scaleY(0); transform-origin: top; }
  .reiter a:hover::after { transform: scaleY(1); }
}

@media (max-width: 760px) {
  :root { --t-hand: 1.375rem; }
  .kopf__zeile { grid-template-columns: auto 1fr auto; gap: var(--s-3); min-height: 4rem; }
  .kopf__logo img { height: 2.25rem; }
  .kopf__meta { display: none; }
  .kopf__tel { padding-inline: 0.8rem; }
  .kopf__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .titel { max-width: none; }
  .mass-rahmen { grid-template-columns: 1fr 1.75rem; grid-template-rows: 1.75rem 1fr; }
  .mass-rahmen > .mass--h { margin-bottom: 0.7rem; }
  .mass-rahmen > .mass--v { margin-left: 0.8rem; }
  .hero__stempel { right: 2.25rem; bottom: auto; top: 2.6rem; }
  .felder--2, .felder--3, .felder--4 { grid-template-columns: 1fr; }
  .felder .feld { padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf__schritt + .ablauf__schritt { border-left: 0; border-top: var(--line) solid var(--c-ink); }
  .fuss__zellen { grid-template-columns: 1fr; border-inline: 0; }
  .fuss__zelle { padding-inline: 0; }
  .fuss__zelle + .fuss__zelle { border-left: 0; border-top: var(--line) solid rgba(255,255,255,0.5); }
  .fuss__leiste ul { gap: var(--s-4); }
  .wahl { grid-template-columns: 1fr; }
  .wahl label + label { border-left: 0; border-top: var(--line) solid var(--c-ink); }
  .vermerk { grid-template-columns: 1fr; }
  .vermerk__foto { width: 5.5rem; }
  .stempel-reihe { gap: var(--s-4); }
  .typo-probe > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .farbe { grid-template-columns: 3.5rem 1fr; }
}

@media print {
  body { background: #fff; }
  .kopf { position: static; }
  .kopf__menu, .toast { display: none; }
  .blatt { padding-block: var(--s-6); break-inside: avoid; }
}