/* Hallmark · shape: photographic · genre: editorial · theme: Ink (deal 2/3, seed village-joinery-homeowners-furniture-4296·4fbc8588·2026-10-31·r0) · redesign: full · job: hire
 * hero: ledge · nav: edge-aligned · footer: statement · imagery: photographs, library stand-ins in the muted treatment · signature: a finished room built to measure, edge to edge across the first screen, the headline on the floor below the shelves · ink: paper ground, ink type, teal only for focus and hover
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · hero-review: ship · 3 findings · 1 resolved 2 unresolved · finish-review: subagent · 7 findings · 5 resolved 2 kept (motion by Ale's design-ablauf, photo corners 0 by design-system.md) · 01.11.2026 after Ale's review: workshop stations, services that open, second button E-Mail kopieren · gauntlet r7: craft pass, system fail on station line length, fixed · gauntlet r8: craft pass, system fail on press duration 120 ms, fixed to 220 · gauntlet r9: system fail on plus 14.5 px low at 1024, fixed, piece 4 accepted by Ale without r10 · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S3 R5 V4 · weakest: S, library photos from abroad could be any joinery; the hero sentence names Musterdorf and every caption says only what its photo shows */
/* Hallmark · waive 22 · ink and greys at zero chroma · the wood in the photographs carries the colour */
/* Hallmark · waive 77 · six rows at 39px, the name on columns 1 to 6 and one line about it on 7 to 12, a rule over each row and under the last across the full text width, as on the reference (Hays: the service rows span the page under the title, a rule under each) · the names stay short, the second column and the rules carry the width; each row opens to what to send along */
/* Hallmark · waive 59 · 0px between hero and Werkstatt, the reference runs its two-column photo straight on from the hero photo (Hays 1440: hero ends where the photo starts) · a paper band there was the largest craft gap of round 1, the other gaps keep 120 and 64 where the paper changes */
/* Hallmark · waive 78 · nur impressum.html, drei Teiltitel in --text-2xl (31 px) unter dem h1 (61 px) · eine Rechtsseite, der Text führt und nicht die Titel; die Startseite hält 39 und 49 px */
/* Hallmark · waive 71 · Titel der Werkstatt 24 px unter dem Hero-Foto, 64 px über der ersten Station (1440); der zweite Fund, Arbeiten 10 px unter einem A, misst den unsichtbaren Inhalt der geschlossenen letzten Leistung · die Hero-Höhe rechnet den Titel ein, damit er im ersten Bildschirm steht (design-system.md, Teile, Hero); sichtbar liegen über dem Titel der Arbeiten 120 px */
/* Hallmark · waive 39b · E-Mail kopieren 56 px hoch wie Anfrage schreiben daneben · design-system.md, Knöpfe: mindestens 56 px, klar als Knopf erkennbar, auch für Ältere */
/* Hallmark · waive 26b · der einzige button, E-Mail kopieren, wird nie gesperrt · ohne Zwischenablage fehlt er ganz (hidden), statt gesperrt dazustehen */
/* Hallmark · dismissed 25 · .station p 40ch ist ein Satz pro Station in zwei Zeilen, kein Lauftext · design-system.md verlangt höchstens 45 Zeichen je Zeile, gemessen höchstens 44 (1440 und 768) */
/* Hallmark · dismissed 23 · .knopf::before liegt mit inset 0 im Knopf (264 x 56 px), keine Fläche über das Fenster */
/* Hallmark · dismissed F20 · each work sits 120px lower than the one before on purpose, the stepped portraits of the reference (Hays steps about 128px) */

/* Probeseite Schreinerei. Werte aus tokens.css (Theme Ink) und design-system.md; eigene Werte nur hier
   im Token-Block. base.css bleibt unverändert, was davon abweicht, überschreibt diese Datei. */

@font-face {
  font-family: "Epilogue";
  src: url("fonts/epilogue.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --radius-button: 14px;
  --dur-reveal: 700ms;
  --stagger: 80ms;
  --reveal-shift: 24px;
  /* Runde 4: alle Titel in einem leichten Schnitt wie beim Vorbild (Archivo 350); Epilogue beginnt bei
     400, und -0.04em setzt Ink nur zu 700. Linien in der Helligkeit des Vorbilds (#CBCBCB), #dbdbd8
     war kaum zu sehen. */
  --display-weight: 400;
  --tracking-display: -0.02em;
  --color-rule: oklch(84% 0.004 100);
  /* Seitenrand und Abstand zwischen Teilen: base.css senkt --gutter und --section-gap-s mit anderen
     Umbrüchen, darum eigene Namen. 120px ist --section-gap-s aus tokens.css. Schmal 12 px wie beim
     Vorbild, damit Text und Arbeiten-Fotos auf einer Kante stehen (Runde 4). */
  --rand: var(--space-sm);
  --abstand-teil: var(--space-3xl);
  --nav-hoehe: var(--space-2xl);
  --hero-fuss: var(--space-xl);
  --schleier: color-mix(in oklch, var(--color-ink) 62%, transparent);
  --schleier-oben: color-mix(in oklch, var(--color-ink) 60%, transparent);
  /* Schleier ab Unterkante gemessen, nicht in Prozent: der Textblock hängt an der Breite, nicht an der
     Höhe. Er reicht samt Rand bei 390 und 768 bis rund 390 px, ab 1024 bis rund 250 px. */
  --schleier-voll: 400px;
  --schleier-ab: 600px;
  /* Stufung 1.25 ab 16 px weitergeführt (Runde 2, 31.10.2026): Titel kommen nicht mehr aus clamp(),
     sonst entstehen Zwischengrössen wie 20.5 oder 24.8 px. */
  --text-4xl: 3.052rem;
  --text-5xl: 3.815rem;
}
@media (min-width: 48rem) {
  :root { --rand: var(--space-xl); --abstand-teil: 120px; --nav-hoehe: 80px; }
}
@media (min-width: 64rem) {
  /* Runde 5: der Titel der Werkstatt ist ab 1024 zweizeilig (gemessen 103 px bei 1024, 1280 und 1440) */
  :root { --hero-fuss: var(--space-2xl); --schleier-voll: 280px; --schleier-ab: 400px; --werkstatt-titel: calc(2 * 1.05 * var(--text-4xl)); }
}
@media (min-width: 80rem) {
  :root { --rand: var(--gutter); }
}

/* Grundlagen, abweichend von base.css */
/* Schrift nur aus der Stufung: Lauftext 20, Projekttitel 25, Abschnittstitel 39 und ab 48rem 48.8,
   Haupttitel 48.8 und ab 48rem 61 (Runde 4: schmal 2.4-mal der Lauftext wie beim Vorbild). Schmal
   bricht der Haupttitel nur dank der weichen Trennung in "Innen-ausbau" in vier statt fünf Zeilen;
   breit trennt er nie. */
body { font-size: var(--text-lg); }
p { color: var(--color-ink-2); }
h1 { max-width: none; font-size: var(--text-4xl); line-height: 1; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); line-height: 1.05; }
@media (min-width: 48rem) {
  h1 { font-size: var(--text-5xl); hyphens: none; }
  h2 { font-size: var(--text-4xl); }
}

.innen { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--rand); }
@media (min-width: 64rem) {
  .raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
}

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-md); font-weight: 600; }
.skip:focus-visible { top: var(--space-md); outline-color: var(--color-paper); }

/* Knopf: die eine Handlung, Mail-Link. Beim Darüberfahren läuft eine Fläche von links über ihn und der
   Umschlag hebt sich (01.11.2026, Ale: "Buttons vielleicht ein bisschen anders"); bewegt wird nur
   transform, die Fläche liegt unter der Schrift. */
.knopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 56px; padding: 0 var(--space-lg);
  border-radius: var(--radius-button);
  background: var(--color-ink); color: var(--color-paper);
  font: 600 var(--text-lg)/1 var(--font-body);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out);
}
/* die Fläche in Teal, der Farbe fürs Darüberfahren (in Tinte 2 war sie im Render kaum zu sehen) */
.knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.knopf svg { flex: none; width: 20px; height: 20px; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) {
  .knopf:hover::before { transform: scaleX(1); }
  .knopf:hover svg { transform: translateY(-2px); }
}
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.knopf-hell { background: var(--color-paper); color: var(--color-ink); }
.knopf-hell::before { background: var(--color-paper-3); }
.knopf-hell:focus-visible { outline-color: var(--color-paper); }
/* Zweiter Knopf, nur in der Anfrage: kopiert die Adresse für alle, die ohne Mailprogramm im Browser
   mailen. Umriss statt Fläche, damit es bei einem Hauptknopf bleibt (F15). */
.knopf-zweit {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 56px; padding: 0 var(--space-lg);
  border: 1px solid var(--color-ink); border-radius: var(--radius-button);
  background: transparent; color: var(--color-ink);
  font: 600 var(--text-lg)/1 var(--font-body);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.knopf-zweit svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) { .knopf-zweit:hover { background: var(--color-paper-2); } }
.knopf-zweit:active { transform: translateY(1px); }
.knopf-zweit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* die drei Beschriftungen liegen übereinander, der Knopf ist so breit wie die längste und springt nicht;
   linksbündig, sonst rückt die kürzere Beschriftung vom Symbol weg (button zentriert von Haus aus) */
.knopf-texte { display: grid; text-align: start; }
.knopf-texte > span { grid-area: 1 / 1; }
.text-kopiert, .text-fehler,
.knopf-zweit[data-zustand] .text-kopieren { visibility: hidden; }
.knopf-zweit[data-zustand="kopiert"] .text-kopiert,
.knopf-zweit[data-zustand="fehler"] .text-fehler { visibility: visible; }
.zeichen-fertig, .knopf-zweit[data-zustand="kopiert"] .zeichen-kopieren { display: none; }
.knopf-zweit[data-zustand="kopiert"] .zeichen-fertig { display: block; animation: haken var(--dur-short) var(--ease-out) both; }
@keyframes haken { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* Navigation: eine Zeile auf dem Hero-Foto */
.kopf { position: absolute; inset: 0 0 auto; z-index: var(--z-raised); color: var(--color-paper); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: var(--nav-hoehe); }
.name, .nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-underline-offset: 0.3em; }
.name { font-size: var(--text-lg); font-weight: 700; white-space: nowrap; }
.nav { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav a { font-size: var(--text-md); font-weight: 600; }
.name:hover, .nav a:hover { text-decoration-line: underline; }
.kopf :focus-visible { outline-color: var(--color-paper); outline-offset: 3px; }
.nav-breit { display: none; }
@media (min-width: 48rem) { .nav-breit { display: list-item; } }

/* Hero: Foto randlos, Titel unten auf dem Schleier. Bei 390 deckt das Foto den ganzen ersten Schirm,
   von 768 bis 1023 88svh, ab 1024 so hoch, dass der Titel der Werkstatt noch in den ersten Schirm passt. */
.hero { position: relative; isolation: isolate; height: 100svh; min-height: 560px; overflow: clip; background: var(--color-ink); color: var(--color-paper); }
.hero-foto { position: absolute; inset: 0; margin: 0; background: var(--color-ink); color: var(--color-paper); }
/* Satz B (01.11.2026): quer zählt nur die Höhe, darum 70 % (Tisch und Regale, der Leuchter halb);
   hoch zählt nur die Breite, darum 78 % (rechte Regalwand statt Leuchter und Pflanze in der Mitte) */
.hero-foto > img { object-position: 78% 70%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--schleier-oben) calc(var(--nav-hoehe) * 0.75), transparent calc(var(--nav-hoehe) * 1.75)),
    linear-gradient(to top, var(--schleier) var(--schleier-voll), transparent var(--schleier-ab));
}
.hero-inhalt { position: absolute; inset: auto 0 var(--hero-fuss); z-index: 3; }
.hero-raster { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.hero-seite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.hero-satz { max-width: 36ch; color: inherit; font-size: var(--text-lg); line-height: 1.35; }
@media (min-width: 48rem) {
  .hero { height: 88svh; }
  .hero-satz { font-size: var(--text-xl); }
}
@media (min-width: 64rem) {
  /* Runde 5: unter dem Hero bleibt im ersten Bildschirm Platz für den ganzen Titel der Werkstatt, 24 px
     darüber und 12 darunter; bei 900 Höhe endet der Hero so bei 761.5 (bar.md: 760 bis 900), bei 800
     bei 661.5. Mit 88svh lag rechts unten ein Streifen Papier ohne Titel im ersten Bild (System Stück 1). */
  .hero { height: calc(100svh - var(--space-lg) - var(--werkstatt-titel) - var(--space-sm)); }
  /* Spaltenabstand ausdrücklich: das gap von .hero-raster oben schlug sonst den von .raster (Runde 2:
     Satz und Knopf standen auf 949 statt 960) */
  .hero-raster { display: grid; align-items: end; column-gap: var(--gap-columns); }
  .hero h1 { grid-column: 1 / 8; }
  .hero-seite { grid-column: 9 / 13; }
  .hero-satz { max-width: none; }
}

/* Werkstatt: schliesst bündig an den Hero an, Foto an Foto wie beim Vorbild; das weisse Band von 64 px
   davor war in Runde 1 die grösste Lücke im Handwerk. Breit läuft das Foto vom Fensterrand bis Spalte 7,
   rechts steht der Titel oben, darunter bis zum Rand die drei Stationen, die er nennt (01.11.2026 nach
   Ales Urteil "keine Designs drin": vorher ein Satz unten und dazwischen nur Papier); die Breite
   rechnet mit cqw, weil 100vw die Bildlaufleiste mitzählt. */
.werkstatt { container-type: inline-size; }
.werkstatt-foto { margin: 0; aspect-ratio: 4 / 5; }
/* rechts bündig: links fällt höchstens der Ellbogen weg, Gesicht, Klüpfel und Beitel bleiben; 30 % hält
   bei 3:2 (768 bis 1023) Gesicht und Hände zusammen im Rahmen */
.werkstatt-foto > img { object-position: 100% 30%; }
.werkstatt-inhalt { padding-top: var(--space-lg); }
.werkstatt h2 { margin-bottom: var(--space-lg); }
/* links eine senkrechte Linie wie die Linien der Leistungen, auf der Höhe jedes Namens ein Strich in
   Tinte; ohne Nummern, die Reihenfolge trägt die Liste */
.stationen { position: relative; display: flex; flex-direction: column; gap: var(--space-xl); margin: 0; padding: 0 0 0 var(--space-lg); list-style: none; }
.stationen::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1px; background: var(--color-rule); transform-origin: top; }
.station { position: relative; }
.station::before { content: ""; position: absolute; left: calc(-1 * var(--space-lg)); top: calc(var(--text-xl) * 0.525); width: var(--space-sm); height: 1px; background: var(--color-ink); }
.station p { max-width: 40ch; margin-top: var(--space-xs); }
@media (min-width: 48rem) {
  .werkstatt-foto { aspect-ratio: 3 / 2; }
  .werkstatt-inhalt { padding-top: var(--space-xl); }
  .werkstatt h2 { margin-bottom: var(--space-xl); }
  .stationen { padding-left: var(--space-xl); }
  .station::before { left: calc(-1 * var(--space-xl)); width: var(--space-md); }
}
@media (min-width: 64rem) {
  .werkstatt { position: relative; display: grid; min-height: min(100svh, 900px); }
  .werkstatt-foto {
    --spalte: calc((min(100cqw, var(--container)) - 2 * var(--rand) - 11 * var(--gap-columns)) / 12);
    position: absolute; inset: 0 auto 0 0; aspect-ratio: auto;
    width: calc((100cqw - min(100cqw, var(--container))) / 2 + var(--rand) + 7 * var(--spalte) + 6 * var(--gap-columns));
  }
  /* oben 24: der Titel steht ganz im ersten Bild, neben dem Foto (Runde 5; mit 144 lag dort nur Papier,
     mit 96 ragte er in Runde 3 halb hinein) */
  .werkstatt-inhalt { grid-template-rows: auto 1fr; padding-block: var(--space-lg) var(--space-3xl); }
  .werkstatt h2 { grid-column: 8 / 13; grid-row: 1; margin-bottom: 0; }
  /* die Stationen füllen den Rest bis zum unteren Rand, die letzte endet auf ihm; 64 unter dem Titel
     statt 40, näher an den rund 160 zwischen den Stationen */
  .stationen { grid-column: 8 / 13; grid-row: 2; justify-content: space-between; margin-top: var(--space-2xl); }
}

/* Leistungen: sechs grosse Zeilen, links der Name, breit rechts eine Zeile dazu, Linien zwischen den
   Zeilen und unter der letzten (Runde 3: die Namen standen allein im linken Viertel, unter
   "Reparaturen" fehlte die Linie). Neben dem Titel ein Satz wie die Einleitung beim Vorbild. */
.leistungen { margin-top: var(--abstand-teil); }
.leistungen h2, .leistungen-satz { margin-bottom: var(--space-lg); }
.liste { margin: 0; padding: 0; list-style: none; }
.liste > li { position: relative; }
/* über jeder Zeile eine Linie und unter der letzten (Runde 6: auch über der ersten, Handwerk Stück 2 in
   Runde 5); die Linie unter einer offenen Zeile gehört so zur nächsten und gleitet mit ihr */
.liste > li::before, .liste > li:last-child::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--color-rule); transform-origin: left; }
.liste > li:last-child::after { inset: auto 0 0; }
/* Jede Zeile klappt auf (01.11.2026, Ale: "aufklappen", "mehr Animation"); die ganze Zeile ist das
   Ziel, der Fokusring liegt innen, damit ihn die Nachbarzeilen nicht verdecken */
.liste summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); padding-block: var(--space-sm); cursor: pointer; list-style: none; }
.liste summary::-webkit-details-marker { display: none; }
.liste summary:focus-visible { outline-offset: -2px; }
.leistung { grid-column: 1; display: block; color: var(--color-ink); font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--tracking-display); }
.leistung-zeile { grid-column: 1; display: block; margin-top: var(--space-2xs); color: var(--color-ink-2); }
/* Plus aus zwei Strichen; offen dreht sich der senkrechte in die Waagrechte, das Plus wird zum Minus */
.plus { position: relative; grid-column: 2; grid-row: 1; align-self: center; width: 20px; height: 20px; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.plus::before, .plus::after { content: ""; position: absolute; inset: calc(50% - 1px) 0 auto; height: 2px; background: currentColor; }
.plus::after { transform: rotate(90deg); transition: transform var(--dur-short) var(--ease-out); }
details[open] .plus::after { transform: rotate(0deg); }
@media (hover: hover) { .liste summary:hover .plus { color: var(--color-accent); } }
.leistung-mehr { display: grid; justify-items: start; gap: var(--space-2xs); padding-bottom: var(--space-sm); }
.leistung-mehr a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 48rem) {
  .leistungen h2, .leistungen-satz { margin-bottom: var(--space-xl); }
  .liste summary { padding-block: var(--space-lg); }
  .leistung { font-size: var(--text-3xl); }
  .plus { width: 24px; height: 24px; }
  .leistung-mehr { padding-bottom: var(--space-lg); }
}
@media (min-width: 64rem) {
  /* Titel und Satz in einer Reihe, die Liste darunter über die volle Textbreite wie beim Vorbild
     (Runde 2: über acht Spalten liefen die Linien nur 864 statt 1312 px); jede Zeile hat dasselbe
     Raster wie der Teil, damit Satz und Zeilen auf Spalte 7 fluchten */
  /* beide auf der letzten Grundlinie, sonst steht ein zweizeiliger Satz (1024) 12 px unter dem Titel */
  .leistungen h2 { grid-column: 1 / 7; align-self: last baseline; margin-bottom: 0; }
  .leistungen-satz { grid-column: 7 / 13; align-self: last baseline; margin-bottom: 0; }
  .liste { grid-column: 1 / -1; margin-top: var(--space-xl); }
  .liste summary, .leistung-mehr { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .liste summary { align-items: baseline; }
  .leistung { grid-column: 1 / 7; grid-row: 1; }
  .leistung-zeile { grid-column: 7 / 12; grid-row: 1; margin-top: 0; }
  /* das Plus mittig auf der Zeile des Namens, nicht auf der ganzen Reihe: bei 1024 bricht die Zeile
     dazu zweizeilig und das Plus hing 14.5 px unter dem Namen (System Runde 9) */
  .plus { grid-column: 12 / 13; justify-self: end; align-self: start; height: calc(var(--text-3xl) * 1.1); }
  /* der offene Teil steht unter der Zeile dazu, auf Spalte 7 */
  .leistung-mehr > * { grid-column: 7 / 12; }
}

/* Arbeiten: Titel oben links, darunter drei Hochformate aus einer Serie und einem Licht, jedes tiefer als
   das vorige wie beim Vorbild (Hays y 1804, 1932, 2061; Satz B, Ales Wahl 01.11.2026). Ab 1024 auf
   Spalte 1 bis 4, 5 bis 8 und 9 bis 12 mit dem Spaltenabstand als Fuge, je 416 x 624 bei 1440: links
   auf der Kante von Titel und Liste, rechts auf der Linienkante der Leistungen. Versatz 120 px
   (--section-gap-s, die Skala hat kein 128). Die Fotos sind schon 2:3 zugeschnitten. Titel und Zeile
   unter dem Foto. Schmal stehen die Fotos untereinander auf der Textkante 12 px vom Rand, mit Umriss. */
.arbeiten { margin-top: var(--abstand-teil); }
.arbeiten h2 { margin-bottom: var(--space-lg); }
.arbeit + .arbeit { margin-top: var(--space-xl); }
.arbeit-foto { margin: 0; aspect-ratio: 2 / 3; }
.arbeit-foto::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--color-rule); pointer-events: none; }
.arbeit h3 { margin-top: var(--space-md); line-height: 1.05; }
.arbeit p { margin-top: var(--space-2xs); }
@media (min-width: 48rem) {
  .arbeiten { --versatz: var(--space-2xl); }
  .arbeiten-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-sm); align-items: start; }
  .arbeiten h2 { grid-column: 1 / -1; margin-bottom: var(--space-xl); }
  .arbeit + .arbeit-2 { margin-top: var(--versatz); }
  .arbeit + .arbeit-3 { margin-top: calc(2 * var(--versatz)); }
}
@media (min-width: 64rem) {
  .arbeiten { --versatz: var(--section-gap-s); }
  .arbeiten-raster { column-gap: var(--gap-columns); }
}

/* Anfrage: eigener Teil auf Papier nach den Arbeiten (Runde 2: als Kopf im grauen Fuss hatte sie
   dasselbe Gewicht wie die Adresse), der Titel in der Grösse des Haupttitels. Linksbündig wie jeder
   Teil; ab 1024 gebaut wie der Kopf der Leistungen, der Titel auf Spalte 1 bis 6, Zeile und Knopf auf
   Spalte 7 bis 12, die Kästen oben bündig (Runde 5: auf der Mittelachse sah Handwerk einen
   Vorlagenblock ohne Bezug zum Raster; in Runde 3 lag der Knopf als Zweispalter 375 px vom Titel). */
.anfrage { margin-top: var(--abstand-teil); }
.anfrage h2 { max-width: none; font-size: var(--text-4xl); }
.anfrage-seite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); margin-top: var(--space-lg); }
/* schmal untereinander über die volle Breite, ab 768 nebeneinander */
.anfrage-knoepfe { display: flex; flex-direction: column; align-self: stretch; gap: var(--space-sm); }
.anfrage-knoepfe > * { justify-content: center; }
@media (min-width: 48rem) {
  .anfrage h2 { font-size: var(--text-5xl); }
  .anfrage-seite { margin-top: var(--space-xl); }
  .anfrage-knoepfe { flex-direction: row; flex-wrap: wrap; align-self: flex-start; }
  /* gleich breit, damit sie bei 1024 untereinander nicht um 8 px versetzt enden */
  .anfrage-knoepfe > * { min-width: 16.5rem; }
}
@media (min-width: 64rem) {
  .anfrage h2 { grid-column: 1 / 7; align-self: start; }
  .anfrage-seite { grid-column: 7 / 13; align-self: start; margin-top: 0; }
}

/* Fuss: die eine Fläche Papier 2. Davor 64 px, weil dort das Papier wechselt (Gate 59). Oben der Name
   gross als Abschluss wie beim Vorbild (Runde 3: er stand so klein wie die Strasse), darunter Adresse,
   Zeiten und Mail ohne sichtbare Spaltentitel, zuunterst eine Zeile mit drei Links. Die Spaltentitel
   bleiben für Vorleser. Ab 768 zwei Kanten: links Adresse und darunter die Mail, rechts die Zeiten über
   beide Zeilen; ab 1024 liegt die rechte Kante auf Spalte 7, der Kante der Leistungen, der zweiten
   Arbeit und der Anfrage (Runde 5: drei Spalten bei x 512 und 960 fluchteten mit nichts darüber).
   Nachweise und Probehinweis stehen auf impressum.html (Ale 01.11.2026: im Fuss überladen sie die Seite). */
.fuss { margin-top: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); background: var(--color-paper-2); }
.fuss-name { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.05; letter-spacing: var(--tracking-display); }
/* zwischen den Angaben 16 px, die Regel "zwischen Absätzen" (Runde 5: 24, System Stück 3) */
.fuss-angaben { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.fuss-angaben p { color: var(--color-ink); font-size: var(--text-xl); line-height: 1.35; }
/* Textlinks: Tinte, 400 mit Unterstrich wie die Mail; 600 tragen nur Navigation und Knopf (Runde 5) */
.fuss-angaben a, .fuss-links a, .recht a, .leistung-mehr a { color: var(--color-ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.fuss-angaben a:hover, .fuss-links a:hover, .recht a:hover, .leistung-mehr a:hover { text-decoration-color: var(--color-accent); }
/* die Links stehen ohne Trenner nebeneinander, der Abstand trennt (Floor 10); 44 px hoch als Ziel */
.fuss-links { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }
.klein { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
@media (min-width: 48rem) {
  .fuss { padding-top: var(--space-2xl); }
  .fuss-name { font-size: var(--text-4xl); }
  /* zwei gleiche Spalten auf 1312 px: die rechte beginnt bei 736, auf Spalte 7 des Rasters */
  .fuss-angaben { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-xl); }
  .fuss-zeiten { grid-column: 2; grid-row: 1 / 3; }
}

/* Rechtsseite (impressum.html): Kopf auf Papier statt auf dem Foto, darunter drei Teile, jeder mit einer
   Linie darüber; ab 1024 der Titel auf Spalte 1 bis 6 und der Text auf 7 bis 12 wie die Leistungen. */
.kopf-papier { position: static; color: var(--color-ink); }
.kopf-papier :focus-visible, .seite-papier .skip:focus-visible { outline-color: var(--color-focus); }
.recht { padding-top: var(--space-xl); }
.recht h1 { margin-bottom: var(--space-xl); }
.recht-teil { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.recht-teil h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.recht-teil p, .recht-teil li { max-width: 60ch; color: var(--color-ink); }
.recht-teil p + p, .recht-teil ul + p { margin-top: var(--space-md); }
.recht-teil ul { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
/* bei 390 brach "E-Mail" und "CC BY-SA 4.0" am Bindestrich um */
.recht-teil a, .ganz { white-space: nowrap; }
@media (min-width: 48rem) {
  .recht { padding-top: var(--space-2xl); }
  .recht-teil { padding-block: var(--space-xl); }
}
@media (min-width: 64rem) {
  .recht-teil { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .recht-teil h2 { grid-column: 1 / 7; margin-bottom: 0; }
  .recht-teil > div { grid-column: 7 / 13; }
}

/* Bewegung: nur mit html.js-bewegt (Inline-Skript im head, ohne reduce), nur am Bildschirm. Fällt
   seite.js aus, nimmt das Inline-Skript js-bewegt nach 2.5 s zurück, dann steht alles da. */
@media screen {
  html.js-bewegt [data-zeigen] { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--stufe, 0) * var(--stagger)); }
  html.js-bewegt [data-zeigen]:not(.da) { opacity: 0; transform: translateY(var(--reveal-shift)); }
}
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    html.js-bewegt .hero { view-timeline: --hero block; view-timeline-inset: 0; }
    html.js-bewegt .hero-foto > img { will-change: transform; animation: hero-sinken linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    /* Linien der Leistungen wachsen von links, während ihre Zeile von 100 % auf 80 % der Fensterhöhe
       steigt; mit 95 bis 65 % stand die Linie unter "Türen" bei 390 im Render erst bei 6 % (Runde 5) */
    html.js-bewegt .liste > li { view-timeline: --zeile block; view-timeline-inset: 0; }
    html.js-bewegt .liste > li::before, html.js-bewegt .liste > li:last-child::after { animation: linie-wachsen linear both; animation-timeline: --zeile; animation-range: cover 0vh cover 20vh; }
    /* die Linie der Stationen wächst von oben, während die Liste hereinkommt, bis ihre Mitte auf der
       Mitte des Fensters steht */
    html.js-bewegt .stationen { view-timeline: --stationen block; view-timeline-inset: 0; }
    html.js-bewegt .stationen::before { animation: linie-senkrecht linear both; animation-timeline: --stationen; animation-range: entry 10% cover 50%; }
  }
}
@keyframes hero-sinken { from { transform: translateY(0); } to { transform: translateY(12%); } }
@keyframes linie-wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes linie-senkrecht { from { transform: scaleY(0); } to { transform: scaleY(1); } }