/* ==========================================================================
   components.css – Hero, Buttons, Leistungs-Teaser, Sections
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Die Platte war 576 px hoch bei 283 px Inhalt (49 % Füllung) — sie las als
     Plakat. 46svh mit Deckel bei 29rem gibt 460 px, Füllung 62 %: Bühne bleibt
     Bühne, aber der Inhalt trägt sie. */
  min-height: clamp(22rem, 46svh, 29rem);
  /* War vh-abhängig (clamp(2.5rem, 6vh, 4.5rem)): auf einem 900-px-Fenster
     standen hier 54 px, auf 1000 px 60 px — der Abstand hat sich beim Zoomen
     der Fensterhöhe mitbewegt. Jetzt fix 60 px wie der Rest der Seite. */
  padding-block: 60px;
  background-color: var(--punzgrau);
  color: var(--werkpapier);
  border-radius: 0 0 44px 44px;

  /* Tiefe entsteht aus zwei Schichten, nicht aus einer:
     1. Licht von oben in der Platte – ein flacher Kegel, der die Mitte
        aufhellt und die Ränder dunkel lässt. Ohne ihn ist Punzgrau eine
        Fläche; mit ihm hat die Platte eine Lichtquelle.
     2. Schatten unter der Platte – die gerundete Unterkante liegt sichtbar
        über dem Papier, statt darauf zu kleben.
     Beide bleiben unter der Wahrnehmungsschwelle für "Effekt": kein Verlauf
     über die ganze Höhe, kein Grauschleier, keine Farbe. */
  background-image: radial-gradient(
    70% 58% at 50% -4%,
    rgba(242, 239, 232, 0.1) 0%,
    rgba(242, 239, 232, 0.035) 42%,
    transparent 72%
  );
  box-shadow:
    0 24px 48px -18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(242, 239, 232, 0.06);
}

/* Papierkorn auf der Platte: SVG-Rauschen als Textur.
   Soft-Light auf Punzgrau frisst niedrige Deckkraft komplett (4 % ergaben
   messbar 0,4/255). 25 % landen bei ~3/255 – das ist die sichtbare
   3-bis-4-Prozent-Textur, ohne dass die Fläche schmutzig wirkt. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='korn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23korn)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.25;
  mix-blend-mode: soft-light;
}

@media (prefers-reduced-transparency: reduce) {
  .hero::after {
    display: none;
  }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(60rem + 2 * var(--gutter));
  text-align: center;
}

.hero__eyebrow {
  color: var(--altmessing);
}

.hero__title {
  /* Volle Breite, nicht Inhaltsbreite: als Flex-Kind schrumpft die Überschrift
     sonst auf die längste Zeile und die zweite bricht grundlos um. */
  width: 100%;
  margin-top: 1.5rem;
  font-size: clamp(2rem, 4.9vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--werkpapier);
  /* Mobil bricht der Titel sonst mitten in der Aussage um.
     balance verteilt die Zeilen gleichmäßig, statt den Rest zu verwaisen. */
  text-wrap: balance;
}

.hero__line {
  display: block;
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 68ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--feinsilber);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Primär auf hellem Grund: invertierte Platte.
   Werkpapier-Füllung wie im Header, aber auf Papierhintergrund unsichtbar –
   deshalb Punzgrau-Fläche mit Werkpapier-Schrift. Kein Messing mehr
   (2,8:1 auf Papier wäre zu schwach), und klar unterscheidbar vom Ghost. */
.btn--primary {
  background-color: var(--punzgrau);
  color: var(--werkpapier);
  border-color: var(--punzgrau);
}

.btn--primary:hover {
  background-color: #2b2926;
  border-color: #2b2926;
}

.btn--ghost {
  background-color: transparent;
  color: var(--punzgrau);
  border-color: var(--punzgrau);
}

.btn--ghost:hover {
  background-color: var(--punzgrau);
  color: var(--werkpapier);
}

/* Auf dunklem Grund: Werkpapier-Füllung, kein Messing */
.btn--light {
  background-color: var(--werkpapier);
  color: var(--punzgrau);
  border-color: var(--werkpapier);
}

.btn--light:hover {
  background-color: #fffdf8;
  border-color: #fffdf8;
}

.btn--lg {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

/* Zweitrangige Handlung: Textlink mit Pfeil, kein zweiter Button */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.15rem;
  color: var(--werkpapier);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--feinsilber) 45%, transparent);
  transition: border-color 120ms ease;
}

/* Ruhezustand: feine Silberlinie. Im Hover dieselbe Messinglinie wie in der
   Navigation – nicht currentColor, das war Werkpapier und damit hell auf hell. */
.btn-link:hover,
.btn-link:focus-visible {
  border-bottom-color: var(--altmessing);
}

/* --- Sections ------------------------------------------------------------ */

/* Ein Takt für die ganze Seite: 60 px oben und unten, überall. Der frühere
   Clamp (56–96 px) hat bei breitem Fenster 96 px gesetzt und die Startseite
   in zwei Rhythmen geteilt. */
.section {
  padding-block: 60px;
}

/* Der Ablauf ist ein eigener Schnitt: dunkle Fläche zwischen zwei hellen
   Blöcken. Damit hat die Seite drei Rhythmen statt zweimal denselben. */
.section--dark {
  background-color: var(--punzgrau);
  color: var(--werkpapier);
}

.section--dark .eyebrow {
  color: var(--altmessing);
}

.section--dark .section__intro {
  color: var(--feinsilber);
}

.ablauf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.ablauf__schritt {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(242, 239, 232, 0.22);
}

.ablauf__nummer {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--altmessing);
  margin-bottom: 0.9rem;
}

.ablauf__title {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.ablauf__text {
  margin-top: 0.85rem;
  max-width: 42ch;
  line-height: 1.6;
  color: var(--feinsilber);
}

/* Abschluss der Werkbank: eine Haarlinie, dann die Dauer. Kein Preis, keine
   Termingarantie — nur die Spanne, in der es realistisch fertig wird. */
.ablauf__dauer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.15rem;
  border-top: 1px solid rgba(242, 239, 232, 0.16);
  font-size: 0.9375rem;
  color: var(--feinsilber);
}

/* Die Zeile steht in einer Flex-Reihe; das Label darf nicht mitschrumpfen. */
.ablauf__dauer .eyebrow {
  flex: none;
}

/* Arbeiten: Film und Fallakte stehen sich gegenüber. Der Film bekommt die
   Bühne, die Akte erklärt ihn, statt dass eine Bildunterschrift darunter
   hängt. Solange kein Video existiert, trägt die Akte die Sektion allein —
   deshalb ist sie Inhalt, nicht Deko. */
.arbeiten__buehne {
  display: grid;
  /* Film 3:2 zur Akte. Der Film bleibt die Bühne, die Akte ist die zweite
     Stimme – nicht die Fußnote. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  /* Beide Spalten enden auf derselben Kante. Vorher stand die Akte oben und
     liess rechts unten ein Loch. */
  align-items: stretch;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.arbeiten__video {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Der Film füllt die Bühne und bringt seine eigene Bedienung mit. Poster
   statt schwarzer Fläche: beim Laden steht ein Bild da, kein Loch. */
.arbeiten__film {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(242, 239, 232, 0.07);
  background-color: #141312;
  /* Dieselbe Tiefe wie der Hero: Licht von oben, Kante unten. */
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(242, 239, 232, 0.06);
}

/* Die Beschriftung steht unter dem Bild, nicht darin: native Bedienelemente
   sitzen unten im Bild, ein Slate dort würde mit ihnen kollidieren. */
.arbeiten__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-gedaempft);
}

/* Die Ethik-Tafel im Film ist ein Zitat, keine Mitgliedschaft. Die Zeile
   steht in der Bildunterschrift, weil sie sich auf das Bild bezieht – und in
   Fließtextschrift, damit sie nicht wie ein Etikett der Marke aussieht. */
.arbeiten__zitat {
  flex-basis: 100%;
  margin-top: 0.15rem;
  padding-left: calc(18px + 0.55rem);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--tinte-gedaempft) 88%, transparent);
}

.arbeiten__caption::before {
  content: "";
  width: 18px;
  height: 1px;
  background-color: var(--messing-ink);
}

.arbeiten__fallback {
  margin: 0;
  padding: 1rem;
  color: var(--feinsilber);
}

/* Untertitel: Standard ist Arial auf hartem Schwarz – das liest sich wie ein
   fremdes Fenster im Bild. Eigene Schrift, eigener Grund, weiche Kante. */
.arbeiten__film::cue {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.35;
  color: #f7f4ed;
  background-color: rgba(20, 19, 18, 0.78);
  text-shadow: none;
}

.akte {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Das Label erbt die Eyebrow-Maße aus base.css; hier steht nur der Abstand. */
.akte__label {
  color: var(--messing-ink);
  padding-bottom: 0.75rem;
}

/* Die drei Schritte teilen sich die Höhe des Films: gleiche Abstände, keine
   Restfläche am unteren Rand. */
.akte__row {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-content: center;
  gap: 0.7rem;
  padding-block: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--tinte-gedaempft) 20%, transparent);
}

/* Dieselbe Regel wie bei den Leistungs-Nummern: Markerfarbe eine Stufe
   Richtung Punzgrau. Messing-Ink allein war auf Werkpapier zu weich neben
   dem 16-px-Text; die Ziffer soll den Einstieg markieren, nicht schmücken. */
.akte__row b {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--messing-ink) 78%, var(--punzgrau));
}

.akte__row span {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinte-gedaempft);
}

.akte__fuss {
  margin-top: auto;
  padding-top: 1rem;
  max-width: 34ch;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--tinte-gedaempft) 80%, transparent);
}


.section__head {
  max-width: 62ch;
}

/* Zentrierter Sektionskopf (Startseite, Leistungen): Eyebrow, Titel und
   Intro stehen mittig wie im Hero. Der Intro-Absatz bleibt im Lesemaß,
   die Überschrift darf die volle Containerbreite nutzen — sonst bricht
   "Drei Arbeiten, ein Anspruch" mitten in der Aufzählung. */
.section__head--center {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow-Maße stehen einmal in base.css; Sektionsköpfe erben sie. */

.section__head--center .section__intro {
  max-width: 54ch;
  margin-inline: auto;
}

/* Der Titel soll einzeilig stehen. Bei 28 px bräuchte „Leistungen" auf
   390 px rund 240 px – passt; längere Titel („Drei Schritte, kein
   Blindflug") brechen bewusst um. Unter 480 px deshalb herunterskaliert
   (7,2 vw ergibt bei 390 px 28 px, bei 360 px 25,9 px). */
@media (max-width: 480px) {
  .section__head--center .section__title {
    font-size: clamp(1.75rem, 7.2vw, 2rem);
  }
}

.section__title {
  margin-top: 0.75rem;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1.12;
}

.section__intro {
  margin-top: 1rem;
  color: var(--tinte-gedaempft);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* --- Leistungen: drei Stelen statt einer Preistabelle ---------------------
   Die drei Leistungen sind gleichrangig, aber nicht austauschbar. Deshalb
   keine Zeilen auf einem Blatt – das liest sich als Tarif. Stattdessen drei
   Spalten auf gemeinsamer Oberkante: Ziffer, Stichwort mit Icon, Titel,
   Text. Eine Leiter, die in jeder Spalte gleich gebaut ist.
   Die Haarlinie läuft nur über die Spalte, nicht über die ganze Seite: sie
   ist Werkstatt-Tisch, kein Tabellenkopf. */

.leistungen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Sprite-Block im Dokument, aber nicht im Layout. */
.leistungen-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.leistung {
  --marker: var(--feinsilber);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--punzgrau) 26%, transparent);
}

.leistung--messing {
  --marker: var(--messing-ink);
}

.leistung--patina {
  --marker: var(--patina);
}

.leistung--feinsilber {
  --marker: color-mix(in srgb, var(--feinsilber) 55%, var(--punzgrau));
}

/* Altmessing selbst kommt auf Werkpapier nur auf 2,78:1 – als große Ziffer
   war das zu blass. Die Nummer mischt deshalb jede Markerfarbe eine Stufe
   Richtung Punzgrau: gleiche Farblogik, aber alle drei lesbar, und Feinsilber
   bleibt trotzdem die hellste der drei. */
.leistung__nummer {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--marker) 78%, var(--punzgrau));
  margin-bottom: 0.9rem;
}

/* Prägestempel: 01–03 werden gesetzt, nicht eingeblendet. Der Satz fällt
   2 px nach unten und legt dabei seinen Schatten ab; danach steht er still.
   Kein Fade, keine größere Bewegung — der Weg ist der Schlag. */
.leistung__nummer,
.ablauf__nummer {
  transform: translateY(-2px);
  text-shadow: 0 1px 0 rgba(29, 28, 26, 0);
  transition:
    transform 120ms cubic-bezier(0.2, 0.85, 0.25, 1),
    text-shadow 120ms linear;
}

.leistung__nummer.ist-gesetzt {
  transform: translateY(0);
  text-shadow: 0 1px 0 rgba(29, 28, 26, 0.24);
}

.ablauf__nummer.ist-gesetzt {
  transform: translateY(0);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .leistung__nummer,
  .ablauf__nummer {
    transition: none;
  }
}

/* Stichwort und Icon auf einer Zeile: das Icon trägt die Markierungsfarbe
   der Spalte, das Stichwort bleibt gedämpfte Tinte. So bekommt die Farbe
   eine zweite Aufgabe außer der Ziffer, ohne dass die Spalte bunt wird. */
.leistung__stichwort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-gedaempft);
}

.leistung__icon {
  flex: 0 0 auto;
  line-height: 0;
  color: var(--marker);
}

.leistung__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.leistung__title {
  margin-top: 0.55rem;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* Der Text steht unter dem Titel, nicht neben ihm: in der Spalte gibt es
   keine zweite Achse, an der eine Falz hängen könnte. Lesemaß bleibt. */
.leistung__text {
  margin-top: 0.85rem;
  max-width: 42ch;
  color: var(--tinte-gedaempft);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  /* Unter 1000 px sind drei Spalten zu eng für 42 Zeichen Text. Die Stelen
     stapeln sich: jede behält ihre Oberkante, die Ziffer bleibt der erste
     Schritt der Leiter. */
  .leistungen {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.25rem;
  }

  .leistung__text {
    max-width: 66ch;
  }

  .ablauf {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .ablauf__text {
    max-width: 66ch;
  }
}

@media (max-width: 960px) {
  /* Unter 960 px stehen Film und Akte untereinander: der Film behält die
     volle Breite, die Akte rückt darunter und darf den Lesefluss breiter
     nutzen. */
  .arbeiten__buehne {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 0;
    border-radius: 0 0 28px 28px;
    /* Auch mobil 60 px — der Hero stand hier bei 64/80 und war damit der
       letzte Ausreißer im Takt. */
    padding-block: 60px;
  }

  .hero__line {
    display: inline;
  }

  .hero__lead {
    margin-top: 1.25rem;
  }

  .hero__actions {
    gap: 1.25rem;
    margin-top: 2rem;
  }
}

@media (max-width: 640px) {
  /* Mobil bleibt die Leiter, nur enger: Ziffer kleiner, Abstände kürzer.
     Das Stichwort muss in einer Zeile halten („Positionierung, Zeichen,
     Tonalität" ist das längste): 10 px Schrift, Icon 18 px. */
  .leistung__stichwort {
    font-size: 0.625rem;
    gap: 0.4rem;
  }

  .leistung__icon svg {
    width: 18px;
    height: 18px;
  }

  .leistung__nummer {
    font-size: 1.4rem;
    margin-bottom: 0.7rem;
  }

  .leistung__title {
    font-size: 1.3rem;
  }

  .ablauf__title {
    font-size: 1.3rem;
  }

  /* Auf dem Handy ist der Intro-Absatz keine eigene Stufe mehr: 18 px neben
     einem 21-px-Titel liest sich als zweite Überschrift. */
  .section__intro {
    font-size: 1rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .btn-link {
    align-self: center;
  }
}

/* --- Kontaktformular ------------------------------------------------------ */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.contact__form {
  max-width: 40rem;
}

.contact__aside {
  border-left: var(--hairline);
  padding-left: clamp(1rem, 2.5vw, 2rem);
  color: var(--tinte-gedaempft);
}

/* E-Mail-Link in der Randspalte: ruhig in Ruhe, Messing beim Hover — dieselbe
   Geste wie im Fuss und in der Navigation. Die Dauerlinie unter dem Link war
   Dekoration ohne Funktion. */
.contact__aside a {
  color: var(--messing-ink);
  text-decoration: none;
}

.contact__aside a:hover,
.contact__aside a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--altmessing);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.contact__note {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-top: 0.75rem;
}

/* Preis-Hinweis über den Feldern: Messingkante statt Kasten, damit es als
   Hinweis liest und nicht als Warnung. */
.contact__preis {
  margin: 0 0 1.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--messing-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tinte-gedaempft);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-gedaempft);
}

.field__hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--feinsilber);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--punzgrau);
  background: var(--papier-erhaben);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--altmessing);
  outline-offset: 1px;
  border-color: var(--altmessing);
}

.field textarea {
  resize: vertical;
  min-height: 10rem;
}

.field--actions {
  margin-top: 0.5rem;
}

.field__note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tinte-gedaempft);
  margin-top: 0.875rem;
}

/* Honeypot: im DOM, aber nicht für Menschen und nicht per Tab erreichbar. */
.form__honeypot-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  border-left: 3px solid var(--altmessing);
  background: var(--papier-erhaben);
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  color: var(--tinte-gedaempft);
}

.notice p {
  margin: 0;
}

.notice ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.notice--success {
  border-left-color: var(--patina);
}

.notice--error {
  border-left-color: var(--rostrot);
}

@media (max-width: 860px) {
  .contact {
    grid-template-columns: 1fr;
  }

  .contact__aside {
    border-left: 0;
    border-top: var(--hairline);
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

/* --- Fließtext (Rechtliches) ---------------------------------------------- */

.prose {
  max-width: 68ch;
  color: var(--tinte-gedaempft);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--punzgrau);
  margin: 2.5rem 0 0.75rem;
}

.prose h3:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.prose ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose a {
  color: var(--messing-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.prose__address {
  font-style: normal;
  line-height: 1.7;
  padding: 1rem 1.15rem;
  margin: 0 0 1.25rem;
  background: var(--papier-erhaben);
  border-left: 3px solid var(--altmessing);
  border-radius: var(--radius);
  color: var(--punzgrau);
}

/* Platzhalter-Hinweis: sichtbar, damit er vor dem Livegang nicht übersehen wird. */
.prose__todo {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rostrot);
  border: 1px dashed var(--rostrot);
  border-radius: var(--radius);
}

/* --- Werkstatt: Herkunft statt Selbstvorstellung --------------------------
   Kein „Über mich", sondern der Nachweis, woher die Handschrift kommt.
   Der Kopf steht mittig unter der Haarlinie (wie die Sektionsköpfe der
   Leistungen), der Fließtext darunter im Lesemaß – zentriert gesetzt,
   linksbündig gelesen. Die Sektion ist die letzte vor dem Fuss, deshalb
   trennt sie nur eine Haarlinie von den Arbeiten. */

/* Werkstatt schliesst die Seite im Dunkeln: der Text geht in den Fuss ueber,
   der Fuss ist sein Kolophon. Die Haarlinie ist hier hell, weil sie auf
   Punzgrau sonst unsichtbar waere. */
#werkstatt {
  border-top: 1px solid rgba(242, 239, 232, 0.16);
  /* Der Fuss ist der Kolophon dieses Blocks: die Standard-Luft von 60 px
     liess zwischen letztem Satz und Marke eine Flaeche entstehen, die wie
     ein vergessener Abschnitt aussah. */
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.werkstatt__kopf {
  /* In rem, nicht ch: `36ch` maß an der 16-px-Grundschrift der Spalte und
     brach den 48-px-Titel nach zwei Wörtern um. */
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.werkstatt__kopf .section__title {
  margin-top: 0.5rem;
  text-wrap: balance;
}

/* Die eine Zeile unter dem Titel: Datenblatt statt Selbstlob. */
.werkstatt__daten {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--feinsilber) 72%, transparent);
}

.werkstatt__text {
  max-width: 62ch;
  margin: clamp(2rem, 3.5vw, 2.75rem) auto 0;
}

.werkstatt__text p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--feinsilber);
  text-wrap: pretty;
}

.werkstatt__text p + p {
  margin-top: 1.05rem;
}

/* Der Satz, der „gehört der zum CCC?" beantwortet, steht am Ende des
   Fließtexts – nach dem Absatz, der den Club überhaupt erst nennt. */
.werkstatt__text p.werkstatt__fazit {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(242, 239, 232, 0.16);
  max-width: 46ch;
  line-height: 1.55;
  color: var(--altmessing);
  font-weight: 500;
}

@media (max-width: 860px) {
  .werkstatt__kopf {
    max-width: none;
  }
  .werkstatt__text p {
    font-size: 1rem;
  }
}