/* Web-Anbau – Webdesign
   Modern und präzise: kühles Hellgrau, Graphit für Schrift und große Flächen, Ultramarin nur als Akzent,
   ein feiner Stempel. Fotos bleiben in echten Farben. Eine Schrift (Archivo), lokal, keine fremden Server.
   Feinheiten der Schrift und der Etiketten stehen in praezise.css, das danach geladen wird. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-standard-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  --papier: #e8e9ec;    /* kühles Hellgrau als Grund */
  --raster: #dcdee2;    /* eine Stufe dunkler: zweite Fläche, Platzhalter hinter Bildern */
  --graphit: #121419;   /* große dunkle Flächen */
  --tinte: #2337d6;     /* Ultramarin, nur als Akzent: Knöpfe, Preis, Fokus */
  --tinte-tief: #1a28a6;
  --text: #121419;
  --text-2: #4b505a;
  --auf-tinte: #f2f3f5; /* Schrift auf dunklen und blauen Flächen */
  --auf-tinte-2: #a9aeb8;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step-small: clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem);
  --step-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem);
  --step-sub: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --step-head: clamp(2.25rem, 1.25rem + 3vw, 4rem);
  --step-display: clamp(3.25rem, 1rem + 6.2vw, 7.25rem);

  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7rem, 13vw, 12rem);

  /* Kurven nach Emil Kowalski: kräftiges ease-out für Antworten, ease-in-out für Bewegung auf dem Schirm,
     eine leichte Feder nur für Spielerisches (Etikett, Stempel) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-feder: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Ab Full HD wächst die ganze Seite mit: 1440p rund 20 px, 4K rund 28 px Grundgröße. Alle Abstände und Schriften hängen an rem.
   Die Fensterhöhe begrenzt das, damit breite, niedrige Monitore die Bühne nicht sprengen. Darunter bleibt die Einstellung des Browsers. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--tinte) var(--raster); font-size: max(100%, min(100% + (100vw - 1920px) / 160, 1.65svh)); }
/* Nichts darf die Seite seitlich verbreitern, auch nicht kurz vor dem Laden der Schrift */
body { overflow-x: clip; }
body { margin: 0; background: var(--papier); color: var(--text); font-family: var(--font); font-size: var(--step-body); font-weight: 400; line-height: 1.52; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; caret-color: var(--tinte); }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--tinte); color: var(--auf-tinte); }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }
:target { scroll-margin-top: 2rem; }

h1, h2 { color: var(--tinte); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; hyphens: none; }
h3 { color: var(--tinte); font-weight: 650; letter-spacing: -0.015em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; hyphens: auto; }
strong { font-weight: 650; }
.nums { font-variant-numeric: tabular-nums lining-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sprung { position: absolute; left: var(--margin); top: 0.75rem; z-index: 10; padding: 0.6rem 1rem; background: var(--tinte); color: var(--auf-tinte); text-decoration: none; transform: translateY(-160%); }
.sprung:focus-visible { transform: none; }

/* ---------- Bedienelemente ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem; background: var(--tinte); color: var(--auf-tinte); font-weight: 650; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.knopf:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.24em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--t-hover) ease; }
.link-sichtbar { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background-color: var(--tinte-tief); }
  .link:hover { text-decoration-color: currentColor; }
  .link-sichtbar:hover { text-decoration-thickness: 0.14em; }
}

/* ---------- Kopf ---------- */
.kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.4rem var(--margin); color: var(--tinte); }
.marke { font-weight: 750; font-size: var(--step-lead); letter-spacing: -0.03em; text-decoration: none; }
.kopf-nav { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); font-weight: 500; }
@media (max-width: 47.99em) { .kopf-nav a:not([href$="#kontakt"]) { display: none; } }

/* ---------- Held: Stempel, Überschrift, ein hohes Foto in echten Farben ---------- */
.held { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto; column-gap: var(--gutter); min-height: calc(100svh - 5rem); padding: 0 var(--margin) var(--margin); }
.held-text { grid-column: 1; grid-row: 1; align-self: center; padding: 2rem 0 3rem; }
.stempel { display: block; width: clamp(7.5rem, 11vw, 10.5rem); aspect-ratio: 1; margin: 0 0 clamp(1.25rem, 2.5vw, 2.25rem) -0.4rem; color: var(--tinte); rotate: -8deg; position: relative; -webkit-tap-highlight-color: transparent; }
.stempel svg { width: 100%; height: 100%; overflow: visible; }
.stempel text { fill: currentColor; font-family: var(--font); }
.stempel-rund { font-size: 16px; font-weight: 700; }
.stempel-mitte { font-size: 66px; font-weight: 800; }
.stempel:focus-visible { outline-offset: 6px; border-radius: 50%; }
.stempel-abdruck { position: absolute; inset: 0; pointer-events: none; color: var(--tinte); }
.stempel-abdruck svg { width: 100%; height: 100%; overflow: visible; }
/* „fürs Handwerk.“ ist 6,24 em breit und muss in die sieben Spalten passen */
.held-titel { font-size: min(8.4vw, 8.25rem); line-height: 0.88; letter-spacing: -0.045em; }
.held-titel .titel-zeile { display: block; white-space: nowrap; }
.held-satz { max-width: 38ch; margin-top: clamp(1.5rem, 2.4vw, 2.25rem); font-size: var(--step-lead); line-height: 1.38; hyphens: manual; }
.held-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; color: var(--tinte); }
.held-bild { grid-column: 2; grid-row: 1 / span 2; position: relative; overflow: hidden; min-height: 26rem; background: var(--raster); }
.held-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.held-fakten { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; color: var(--text-2); font-size: var(--step-small); }
.held-fakten strong { color: var(--tinte); }

@media (max-width: 63.99em) {
  .held-titel { font-size: min(13.6vw, 7.5rem); }
  .held { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .held-text, .held-bild, .held-fakten { grid-column: 1; grid-row: auto; }
  .held-text { padding: 1.5rem 0 2.5rem; }
  .held-bild { aspect-ratio: 4 / 5; max-height: 78svh; min-height: 0; }
  .held-fakten { flex-direction: column; margin-top: 1.5rem; }
}
@media (max-width: 47.99em) {
  .held-satz { font-size: var(--step-lead); }
}

/* ---------- Ansatz: Überschrift kreuzt auf das Foto ---------- */
.ansatz { --pw: 50vw; position: relative; overflow: clip; padding: var(--section) 0; }
.ansatz-buehne { position: relative; font-size: var(--step-head); --oben: 0.96em; }
.ansatz-foto { position: absolute; top: var(--oben); right: var(--margin); width: calc(var(--pw) - var(--margin)); aspect-ratio: 4 / 5; overflow: hidden; background: var(--raster); }
.ansatz-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Oben ein Band in voller Druckfarbe: dort steht die Überschrift weiß ausgespart, wie im Einfarbdruck */
.ansatz-foto::before { content: ''; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 1.1em; background: var(--tinte); }
.ansatz-titel { position: relative; z-index: 1; margin-left: var(--margin); font-size: 1em; line-height: 0.96; text-wrap: nowrap; }
.ansatz-tinte, .ansatz-papier { display: block; }
/* Tinte, wo Papier ist; weiß, wo das Foto liegt. Beide Kopien an derselben Kante geschnitten. */
.ansatz-tinte { clip-path: polygon(0 0, 100% 0, 100% var(--oben), calc(100% - var(--pw)) var(--oben), calc(100% - var(--pw)) 100%, 0 100%); }
.ansatz-papier { position: absolute; inset: 0; color: var(--auf-tinte); clip-path: inset(var(--oben) 0 0 calc(100% - var(--pw))); }
.ansatz-text { position: relative; margin: clamp(2rem, 3.5vw, 3.25rem) 0 0 var(--margin); max-width: min(26ch, calc(100vw - var(--pw) - var(--margin) * 3)); font-size: var(--step-lead); line-height: 1.38; hyphens: manual; }
.ansatz-klein { position: relative; margin: clamp(4rem, 9vw, 8rem) 0 0 var(--margin); width: min(380px, calc(100vw - var(--pw) - var(--margin) * 3)); }
.ansatz-klein img { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; object-position: 52% 50%; }
.ansatz-klein figcaption { margin-top: 0.75rem; font-size: var(--step-small); line-height: 1.4; color: var(--text-2); }
@media (min-width: 48em) {
  .ansatz { min-height: calc(var(--section) + var(--step-head) + (50vw - var(--margin)) * 1.25 + var(--section) * 0.5); }
}
@media (max-width: 47.99em) {
  .ansatz { --pw: 78vw; }
  .ansatz-buehne { font-size: 7.8vw; --oben: 1em; padding-bottom: calc((78vw - var(--margin)) * 1.25 - 1em); }
  .ansatz-text { max-width: none; margin-right: var(--margin); margin-top: 2.5rem; font-size: var(--step-body); }
  .ansatz-klein { width: 60vw; margin-top: 2.5rem; }
}

/* ---------- Für wen: Gewerke als ein Absatz, Holzschnitte in der Druckfarbe ---------- */
.fuer { padding: 0 var(--margin); }   /* der folgende Abschnitt bringt seinen Abstand selbst mit */
.fuer-absatz { font-size: var(--step-sub); line-height: 1.6; font-weight: 450; letter-spacing: -0.012em; hyphens: manual; }
.fuer-titel, .fuer-text { display: inline; }
.fuer-titel { font-size: 1em; font-weight: 750; letter-spacing: -0.02em; line-height: inherit; }
.rahmchen { position: relative; display: inline-block; vertical-align: -0.32em; width: 2.1em; height: 1.3em; margin-left: 0.12em; background: var(--raster); transform-origin: 0 100%; transition: transform 240ms var(--ease-out); }
.rahmchen img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .rahmchen:hover { z-index: 2; transform: scale(2.4) rotate(-2deg); }
}
.fuer-notiz { margin-top: 1.5rem; font-size: var(--step-small); color: var(--text-2); }
@media (max-width: 47.99em) { .fuer-absatz { font-size: 1.5rem; line-height: 1.7; } }

/* ---------- Schau: ein Rahmen, drei Breiten, auf voller Druckfarbe ---------- */
.schau { position: relative; height: 300svh; overflow-x: clip; background: var(--tinte); color: var(--auf-tinte); }
.schau-buehne { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 1.8svh, 1.25rem); padding: clamp(1.25rem, 4svh, 2.75rem) var(--margin) clamp(1rem, 3svh, 2rem); }
.schau-satz { color: var(--auf-tinte); font-size: var(--step-head); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; text-align: center; }
/* Auf großen Schirmen wächst der Rahmen mit der Höhe, sonst bleibt die Studie darin leer */
.rahmen { position: relative; flex: 1 1 auto; min-height: 12rem; width: 100%; max-width: max(64rem, (100svh - 14rem) * 1.6); display: flex; justify-content: center; }
.rahmen-fenster { position: relative; height: 100%; width: 100%; overflow: hidden; background: var(--papier); }
.vp { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; container-type: inline-size; container-name: vp; overflow: hidden; }
.rahmen-griff { position: absolute; top: 50%; left: 50%; width: 0.55rem; height: 4rem; margin-top: -2rem; background: var(--auf-tinte); cursor: ew-resize; touch-action: none; display: none; transition: transform 160ms var(--ease-out), background-color var(--t-hover) ease; }
.rahmen-griff::before { content: ''; position: absolute; inset: -1.25rem -1.1rem; }
.js .rahmen-griff { display: block; }
.rahmen-griff.ist-gezogen { background: var(--auf-tinte-2); }
.schau-steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 2.5rem; font-size: var(--step-small); font-weight: 500; }
.studien { display: flex; gap: 0.25rem; }
.studie-wahl { min-height: 2.75rem; padding: 0 1rem; color: var(--auf-tinte); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.studie-wahl:active { transform: scale(0.97); }
.studie-wahl[aria-pressed="true"] { background: var(--auf-tinte); color: var(--tinte); }
.schau :focus-visible { outline-color: var(--auf-tinte); }
@media (hover: hover) and (pointer: fine) {
  .studie-wahl[aria-pressed="false"]:hover { background: rgb(255 255 255 / 0.14); }
}
.breite { display: none; align-items: center; gap: 0.9rem; }
.js .breite { display: flex; }
.breite input { width: clamp(9rem, 18vw, 14rem); min-height: 2.75rem; accent-color: var(--auf-tinte); cursor: pointer; }
.breite-wert { min-width: 5.5ch; font-variant-numeric: tabular-nums lining-nums; }
.schau-notiz { max-width: 50ch; text-align: center; font-size: var(--step-small); line-height: 1.45; color: var(--auf-tinte-2); }
.schau-marken { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(3, 1fr); pointer-events: none; }
@media (max-width: 47.99em) {
  .schau-steuerung { gap: 0.5rem 1.25rem; }
  .studie-wahl { padding: 0 0.65rem; }
  .schau-notiz { font-size: 0.875rem; }
}
@media (max-height: 44em) { .schau-notiz { display: none; } }

/* ---------- Die drei Studien (Oberflächen eigener Art, data-ui) ---------- */
.studie { min-height: 100%; font-family: var(--font); font-size: 16px; line-height: 1.45; }
.studie p { hyphens: manual; }
.s-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; }
.s-nav { display: none; gap: 28px; }
.s-menu { font-size: 15px; }
.s-held { display: grid; gap: 18px; padding: 4px 20px 28px; }
.s-bild { order: -1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.s-titel { font-size: 42px; line-height: 0.95; }
.s-absatz { margin-top: 12px; font-size: 17px; max-width: 36ch; }
.s-knopf { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 18px; padding: 0 22px; font-weight: 600; }
.s-liste { padding: 0 20px; }
.s-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; }
.s-info { padding: 20px; font-size: 15px; }
@container vp (min-width: 600px) {
  .s-nav { display: flex; }
  .s-menu { display: none; }
  .s-kopf { padding: 22px 32px; }
  .s-held { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 32px; padding: 16px 32px 36px; }
  .s-bild { order: 0; aspect-ratio: 4 / 5; }
  .s-titel { font-size: 56px; }
  .s-knopf { display: inline-flex; }
  .s-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 32px; }
  .s-liste li { flex-direction: column; gap: 2px; }
  .s-info { padding: 28px 32px; }
}
@container vp (min-width: 1000px) {
  .s-kopf { padding: 28px 56px; }
  .s-held { gap: 56px; padding: 24px 56px 56px; }
  .s-bild { aspect-ratio: 5 / 4; }
  .s-titel { font-size: 92px; }
  .s-absatz { font-size: 20px; }
  .s-liste { padding: 0 56px; }
  .s-info { padding: 32px 56px; }
}
/* Backstube: Mehlweiß, schwarze Tafel, rotes Schild */
.studie-back { background: #f4f4f1; color: #1b1714; }
.studie-back .s-marke { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase; }
.studie-back .s-titel { font-weight: 800; letter-spacing: -0.04em; }
.studie-back .s-knopf { background: #b3261e; color: #fff; }
.studie-back .s-liste li { background: #e6e5e0; padding: 12px 14px; margin-bottom: 6px; }
.studie-back .s-info { color: #5d544b; }
/* Schreinerei: Nussbaum und Eiche */
.studie-holz { background: #241c17; color: #e9dcc9; }
.studie-holz .s-marke { font-weight: 600; font-size: 19px; }
.studie-holz .s-titel { font-weight: 300; letter-spacing: -0.04em; }
.studie-holz .s-held { grid-template-areas: "bild" "titel" "text"; }
.studie-holz .s-titel { grid-area: titel; }
.studie-holz .s-bild { grid-area: bild; }
.studie-holz .s-text { grid-area: text; }
.studie-holz .s-knopf { background: #d9a86c; color: #241c17; }
.studie-holz .s-liste li { background: #30261f; padding: 12px 14px; margin-bottom: 6px; }
.studie-holz .s-info { color: #b9a78f; }
@container vp (min-width: 600px) {
  .studie-holz .s-held { grid-template-areas: "titel titel" "bild text"; align-items: end; }
  .studie-holz .s-titel { font-size: 64px; }
}
@container vp (min-width: 1000px) {
  .studie-holz .s-titel { font-size: 112px; }
  .studie-holz .s-bild { aspect-ratio: 16 / 10; }
}
/* Malerwerkstatt: kreideweiß, fast schwarz, ein kräftiges Farbtonorange */
.studie-maler { background: #ffffff; color: #1d1d1f; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.studie-maler .s-marke { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.studie-maler .s-band { background: #e4572e; color: #fff; padding: 10px 20px; font-size: 15px; font-weight: 600; }
.studie-maler .s-titel { font-weight: 800; letter-spacing: -0.035em; font-size: 36px; line-height: 1.02; }
.studie-maler .s-absatz { font-size: 16px; }
.studie-maler .s-knopf { background: #1d1d1f; color: #fff; }
.studie-maler .s-liste li { background: #f2efe9; padding: 12px 14px; margin-bottom: 6px; }
.studie-maler .s-info { color: #5c5c62; }
@container vp (min-width: 600px) {
  .studie-maler .s-band { padding: 10px 32px; }
  .studie-maler .s-titel { font-size: 48px; }
}
@container vp (min-width: 1000px) {
  .studie-maler .s-band { padding: 12px 56px; }
  .studie-maler .s-titel { font-size: 76px; }
}

/* ---------- Leistung: Zeilen an einer Achse ---------- */
.leistung { --achse: 35%; padding: var(--section) var(--margin); }
.leistung-kopf { min-height: 34svh; display: grid; align-content: center; padding-left: var(--achse); }
.leistung-titel { font-size: var(--step-head); max-width: 9em; }
.zeile { display: grid; grid-template-columns: minmax(0, 34ch) 1fr auto; column-gap: var(--gutter); align-items: start; padding-left: var(--achse); margin-top: clamp(5rem, 7vw, 6.5rem); }
.zeile h3 { font-size: var(--step-sub); line-height: 1.08; }
.zeile p { margin-top: 0.9rem; max-width: 34ch; }
.zeile-bild { grid-column: 3; object-fit: cover; background: var(--raster); }
.zeile-bild--hoch { width: clamp(12rem, 24vw, 23rem); aspect-ratio: 4 / 5; }
.zeile-bild--quer { width: clamp(15rem, 32vw, 30rem); aspect-ratio: 3 / 2; }
.zeile-bild--quadrat { width: clamp(10rem, 18vw, 17rem); aspect-ratio: 1; }
.zeile-bild--mittel { width: clamp(13rem, 28vw, 26rem); aspect-ratio: 4 / 5; }
@media (max-width: 63.99em) {
  .leistung { --achse: 0%; }
  .zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .zeile-bild { grid-column: 2; }
}
@media (max-width: 47.99em) {
  .leistung-kopf { min-height: 0; padding-bottom: 3rem; }
  .zeile { grid-template-columns: 1fr; margin-top: 4rem; }
  .zeile-bild { grid-column: 1; grid-row: 2; margin-top: 1.5rem; }
  .zeile:nth-of-type(3n + 1) .zeile-bild { width: 100%; }
  .zeile:nth-of-type(3n + 2) .zeile-bild { width: 70%; justify-self: end; }
  .zeile:nth-of-type(3n) .zeile-bild { width: 55%; }
}

/* ---------- Ablauf: ein Verb pro Tafel, als Etikett auf dem Foto ---------- */
.tafel { position: relative; display: flow-root; height: 100svh; overflow: clip; background: var(--raster); padding-bottom: clamp(10rem, 30svh, 16rem); }
.tafel-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Unten freier Raum für den Text: das Verb hält in der Mitte und wird vor dem Textkasten hinausgeschoben */
.tafel-verb { position: sticky; z-index: 1; top: calc(50svh - 0.6em); margin-top: calc(50svh - 0.6em); font-size: clamp(3.5rem, 1rem + 9vw, 10.5rem); text-align: center; }
.tafel-verb h2 { display: inline-block; padding: 0.06em 0.22em 0.12em; background: var(--papier); font-size: 1em; line-height: 0.95; letter-spacing: -0.045em; rotate: -2deg; }
.tafel:nth-child(even) .tafel-verb h2 { rotate: 1.5deg; }
.tafel-text { position: absolute; z-index: 2; left: var(--margin); bottom: var(--margin); max-width: 38ch; padding: 1rem 1.25rem 1.1rem; background: var(--papier); color: var(--text); font-size: var(--step-body); line-height: 1.45; }
.tafel-text strong { color: var(--tinte); }
@media (max-width: 47.99em) {
  /* Der Textkasten ist auf schmalen Telefonen hoch: Das Verb muss vor ihm enden */
  .tafel { padding-bottom: 16.5rem; }
  .tafel-verb { font-size: 19vw; }
  .tafel-text { right: var(--margin); max-width: none; }
}
/* Telefon quer: Text links, Verb rechts, sonst liegen sie aufeinander */
@media (min-width: 48em) and (max-height: 32em) {
  .tafel-verb { padding-right: var(--margin); font-size: 18svh; text-align: right; }
}

/* ---------- Preis als ein Satz, mit Etikett ---------- */
.preis { min-height: 84svh; display: grid; align-content: center; padding: calc(var(--section) * 0.75) var(--margin); background: var(--raster); }
.preis-satz { font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.045em; text-wrap: nowrap; }
.umbruch { display: block; }
.preis-etikett { display: inline-block; padding: 0.02em 0.22em 0.08em; background: var(--tinte); color: var(--auf-tinte); rotate: -3deg; transition: rotate 420ms var(--ease-feder), scale 420ms var(--ease-feder); }
@media (hover: hover) and (pointer: fine) {
  .preis-etikett:hover { rotate: 1deg; scale: 1.04; }
}
.preis-fuss { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; margin-top: 4rem; }
.preis-fuss p { grid-column: 1 / 7; font-size: var(--step-lead); line-height: 1.38; hyphens: manual; }
.preis-aktion { grid-column: 9 / 13; display: grid; justify-items: end; gap: 1.25rem; text-align: right; color: var(--tinte); font-weight: 500; }
@media (max-width: 47.99em) {
  .preis-satz { font-size: var(--step-head); text-wrap: wrap; }
  .preis-fuss { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .preis-fuss p, .preis-aktion { grid-column: 1; }
  .preis-fuss p { font-size: var(--step-body); }
  .preis-aktion { justify-items: stretch; text-align: left; }
}

/* ---------- Fragen: groß links, Antwort daneben ---------- */
.fragen { padding: var(--section) var(--margin); }
.frage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(4rem, 6vw, 5.5rem); }
.frage:first-child { margin-top: 0; }
.frage-f { grid-column: 1 / 7; font-size: var(--step-sub); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.frage-kopf { grid-column: 1 / -1; font-size: var(--step-head); }
.frage-a { grid-column: 8 / 13; max-width: 40ch; padding-top: 0.3em; line-height: 1.55; }
@media (max-width: 63.99em) {
  .frage { grid-template-columns: 1fr; margin-top: 3.5rem; }
  .frage-f, .frage-kopf, .frage-a { grid-column: 1; }
  .frage-a { padding-top: 0.75rem; }
}

/* ---------- Kontakt: auf voller Druckfarbe ---------- */
.kontakt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); min-height: 88svh; align-content: space-between; padding: clamp(2.5rem, 6vw, 5rem) var(--margin) clamp(2rem, 6svh, 4rem); background: var(--tinte); color: var(--auf-tinte); }
.kontakt ::selection { background: var(--auf-tinte); color: var(--tinte); }
.kontakt :focus-visible { outline-color: var(--auf-tinte); }
.kontakt-oben { grid-column: 1 / 7; max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; }
.kontakt-titel { color: var(--auf-tinte); font-size: var(--step-sub); font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; }
.kontakt-oben p { margin-top: 1rem; color: var(--auf-tinte-2); }
.kontakt-daten { grid-column: 8 / 13; display: grid; gap: 1.25rem; margin: 0.4rem 0 0; }
.kontakt-daten dt { font-weight: 650; }
.kontakt-daten dd { margin: 0; color: var(--auf-tinte-2); }
.kontakt-mail { grid-column: 1 / -1; display: block; margin-top: 4rem; font-size: 10.4vw; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.04em; text-underline-offset: 0.1em; transition: text-decoration-color var(--t-hover) ease; overflow-wrap: anywhere; }
.kontakt-aktion { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.knopf-hell { background: var(--auf-tinte); color: var(--tinte); }
.knopf-zweit { background: rgb(255 255 255 / 0.14); color: var(--auf-tinte); min-width: 13rem; }
.kopieren-text { display: inline-block; transition: filter 200ms ease, opacity 200ms ease, transform 200ms var(--ease-out); }
.kopieren-text.wechselt { filter: blur(3px); opacity: 0; transform: translateY(-0.35em); }
@media (hover: hover) and (pointer: fine) {
  .kontakt-mail:hover { text-decoration-color: currentColor; }
  .knopf-hell:hover { background: var(--auf-tinte-2); }
  .knopf-zweit:hover { background: rgb(255 255 255 / 0.24); }
}
@media (max-width: 47.99em) {
  .kontakt { grid-template-columns: 1fr; min-height: 0; }
  .kontakt-oben, .kontakt-daten, .kontakt-mail, .kontakt-aktion { grid-column: 1; }
  .kontakt-daten { margin-top: 2.5rem; }
  .kontakt-mail { font-size: 11vw; overflow-wrap: normal; margin-top: 3.5rem; }
  .kontakt-oben { font-size: var(--step-body); }
  .kontakt-aktion .knopf { flex: 1 1 100%; }
}

/* ---------- Fuß: der Name kommt zurück ---------- */
.fuss { padding: 2.5rem var(--margin) var(--margin); }
.fuss-oben { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; font-size: var(--step-small); line-height: 1.5; color: var(--text-2); }
.fuss-oben a { color: var(--tinte); }
/* Freistehende Links im Fuß: genug Fläche für den Finger */
.fuss-oben > a { flex-shrink: 0; padding-block: 0.3rem; white-space: nowrap; }
.fuss-meta nav a { display: inline-block; padding-block: 0.3rem; }
.fuss-name { margin-top: clamp(4rem, 14vw, 12rem); color: var(--tinte); font-size: 22.4vw; font-weight: 800; line-height: 0.8; letter-spacing: -0.055em; white-space: nowrap; }
.fuss-meta { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1.5rem var(--gutter); margin-top: 2rem; font-size: var(--step-small); line-height: 1.5; color: var(--text-2); }
.fuss-meta nav { display: flex; gap: 1.5rem; color: var(--tinte); }
.fuss-meta p:last-child { text-align: right; }
@media (max-width: 47.99em) {
  .fuss-name { font-size: 20.4vw; }
  .fuss-meta { grid-template-columns: 1fr; }
  .fuss-meta p:last-child { text-align: left; }
}

/* ---------- Rechtsseiten ---------- */
.recht { padding: 0 var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
/* Der Kopf der Rechtsseiten steht auf voller Druckfarbe, wie die Farbflächen der Startseite */
.recht-kopf { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-inline: calc(var(--margin) * -1); padding: clamp(3.5rem, 9svh, 7rem) var(--margin) clamp(3rem, 6vw, 4.5rem); background: var(--tinte); color: var(--auf-tinte); }
.recht-kopf ::selection { background: var(--auf-tinte); color: var(--tinte); }
.recht-titel { grid-column: 1 / -1; color: var(--auf-tinte); font-size: var(--step-display); line-height: 0.88; letter-spacing: -0.045em; }
.recht-einleitung { grid-column: 1 / 8; margin-top: 2rem; font-size: var(--step-lead); line-height: 1.38; color: var(--auf-tinte-2); }
.recht-teil { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: clamp(2.75rem, 4.5vw, 4rem); }
.recht-kopf + .recht-teil { margin-top: clamp(3.5rem, 6vw, 5rem); }
.recht-teil h2 { grid-column: 1 / 5; font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; }
.recht-inhalt { grid-column: 6 / -1; }
.recht-inhalt p, .recht-inhalt address { max-width: 62ch; }
.recht-inhalt ul { max-width: 78ch; }
.recht-inhalt > * + * { margin-top: 1em; }
.recht-inhalt h3 { margin-top: 2em; font-size: var(--step-body); }
.recht-inhalt ul { padding-left: 1.2em; }
.recht-inhalt li + li { margin-top: 0.4em; }
.recht-inhalt address { font-style: normal; }
.recht-inhalt a { color: var(--tinte); text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; overflow-wrap: anywhere; }
.platz { background: var(--tinte); color: var(--auf-tinte); padding: 0 0.2em; }
.zurueck { font-size: var(--step-body); }
@media (max-width: 63.99em) {
  .recht-einleitung, .recht-teil h2 { grid-column: 1 / -1; }
  .recht-inhalt { grid-column: 1 / -1; margin-top: 1.25rem; }
}

/* ---------- Bewegung (Inhalt bleibt ohne Skript sichtbar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Erster Bildschirm: Zeilen steigen, das Foto wird von unten aufgedeckt, dann kommt der Stempel */
  .js .held-titel .titel-zeile { opacity: 0; transform: translateY(0.25em); animation: steigen 900ms var(--ease-out) forwards; }
  .js .held-titel .titel-zeile + .titel-zeile { animation-delay: 90ms; }
  .js .held-satz, .js .held-aktion, .js .held-fakten { opacity: 0; transform: translateY(14px); animation: steigen 800ms var(--ease-out) forwards; }
  .js .held-satz { animation-delay: 180ms; }
  .js .held-aktion { animation-delay: 250ms; }
  .js .held-fakten { animation-delay: 320ms; }
  .js .stempel { opacity: 0; }
  .js .stempel.ist-da { opacity: 1; }
  .js [data-aufdecken] { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-in-out) 120ms; }
  .js [data-aufdecken] img { scale: 1.1; transition: scale 1600ms var(--ease-soft) 120ms; }
  .js [data-aufdecken].ist-da { clip-path: inset(0); }
  .js [data-aufdecken].ist-da img { scale: 1; }

  /* „wartet“ setzt das Skript nur kurz bevor ein Block von unten hereinkommt */
  .js [data-reveal].wartet { opacity: 0; transform: translateY(24px); }
  .js [data-reveal].wartet.ist-da { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }

  /* Fotos auf den Tafeln wandern langsam gegen den Bildlauf */
  @supports (animation-timeline: view()) {
    .tafel-bild, .ansatz-foto img { animation: wandern linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .ansatz-foto img { scale: 1.08; }
    .tafel-bild { scale: 1.1; }
  }
}
@keyframes steigen { to { opacity: 1; transform: none; } }
@keyframes wandern { from { translate: 0 -4%; } to { translate: 0 4%; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal].wartet:not(.ist-da) { opacity: 0; }
  .js [data-reveal].wartet.ist-da { opacity: 1; transition: opacity 400ms ease; }
  .preis-etikett, .rahmchen, .kopieren-text { transition: none; }
}