/* Drei Farben, mehr nicht. Farbe kommt aus Tills Blättern, nicht aus der Seite.
   Menschen schwarzweiß, Bilder farbig — das ist die Aussage, kein Effekt.
   Deshalb kein Theme-Umschalter: der Wechsel gehört dem Inhalt. */
:root {
  --ocker:    #a8761f;
  --ocker-dk: #7c560f;
  --schwarz:  #141210;
  --papier:   #ecefe9;
  --papier-2: #dfe4dc;
  --grau:     #575147;

  --f-1:  clamp(.74rem, .72rem + .1vw, .8rem);
  --f0:   clamp(1rem, .96rem + .2vw, 1.12rem);
  --f1:   clamp(1.15rem, 1.05rem + .5vw, 1.5rem);
  --f2:   clamp(1.8rem, 1.3rem + 2.4vw, 3.4rem);
  --f3:   clamp(2.6rem, .5rem + 7.9vw, 6.6rem);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--ocker) var(--papier-2); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--schwarz);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: var(--f0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ocker); color: var(--papier); }
/* Der Fokusring muss sich vom Untergrund abheben, auf dem er liegt.
   Ocker auf Ocker war unsichtbar - genau der Fehler, den Tastaturnutzer
   als Erstes trifft. */
:focus-visible { outline: 3px solid var(--ocker); outline-offset: 3px; }
.plakat :focus-visible, .buehne :focus-visible { outline-color: var(--schwarz); }
.kontakt :focus-visible,
footer.site :focus-visible, .tape :focus-visible { outline-color: var(--papier); }

img { display: block; max-width: 100%; }

/* Ohne Grundregel faellt jeder Verweis im Fliesstext auf das Browserblau
   zurueck. Aufgefallen am Link zur Datenschutzerklaerung im Formular. */
a { color: var(--ocker-dk); text-underline-offset: .22em; }
/* Beim Darueberfahren nicht die Farbe wechseln: Schwarz auf der schwarzen
   Kontaktflaeche waere unsichtbar gewesen. Der Strich traegt die Rueckmeldung,
   und er funktioniert auf jedem Untergrund. */
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

.wrap { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1.15rem, .5rem + 2.6vw, 3.4rem); }

.display {
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 118, "wght" 850;
  letter-spacing: -.045em;
  line-height: .84;
  text-transform: uppercase;
  margin: 0;
}

.label {
  font-variation-settings: "wdth" 88, "wght" 650;
  font-size: var(--f-1);
  letter-spacing: .24em;
  text-transform: uppercase;
}

h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--f2);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 clamp(1rem, .7rem + 1.2vw, 1.8rem);
}

p { margin: 0; max-width: 62ch; }

/* ---------- Papierkorn ----------
   Tills Blätter sind gekörntes Aquarellpapier. Eine feine Turbulenz über
   der ganzen Seite nimmt das auf, damit die Farbflächen nicht wie Lack
   wirken. Sehr schwach, sonst wird daraus Schmutz. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23k)' opacity='.5'/></svg>");
}

/* ---------- Auftakt ----------
   Ein orchestrierter Moment beim Laden statt verstreuter Effekte.
   Jedes Element startet sichtbar; die Animation verschiebt nur, sie
   blendet nichts ein. Ohne Animationsunterstützung steht alles da. */
@keyframes anheben {
  from { transform: translateY(.7rem); opacity: .001; }
  to   { transform: none; opacity: 1; }
}
.auftakt > *, .plakat .topline { animation: anheben 800ms cubic-bezier(.16,1,.3,1) backwards; }
.plakat .topline       { animation-delay: 0ms; }
.auftakt .name-wrap    { animation-delay: 90ms; }
.auftakt figure        { animation-delay: 210ms; }
.auftakt .plakat-foot  { animation-delay: 330ms; }

/* ---------- Beim Heranscrollen ----------
   Scroll-getrieben über animation-timeline. Wo der Browser das nicht
   kennt, passiert schlicht nichts und der Inhalt steht sofort richtig —
   niemand wartet auf einen Beobachter, der vielleicht nie feuert. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hereinschieben {
      from { transform: translateY(2.2rem); }
      to   { transform: none; }
    }
    .blatt, .rollen-bild figure, .vita-block, .ueber figure, .buehne .fig-wrap {
      animation: hereinschieben linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .auftakt > *, .plakat .topline { animation: none; }
}

/* ============ 1 · PLAKAT ============ */

.plakat {
  background: var(--ocker);
  position: relative;
  overflow: hidden;
  padding-top: clamp(1rem, .6rem + 1.6vw, 1.8rem);
}

.topline {
  display: flex;
  gap: clamp(1rem, .5rem + 2vw, 2.4rem);
  align-items: baseline;
  flex-wrap: wrap;
  position: relative;
  z-index: 4;
}
.topline a {
  color: var(--schwarz);
  text-decoration: none;
  font-variation-settings: "wdth" 88, "wght" 650;
  font-size: var(--f-1);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .8rem 0;
  border-bottom: 2px solid transparent;
}
.topline a {
  position: relative;
  border-bottom: 0;
  cursor: pointer;
}
.topline a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--schwarz);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.16,1,.3,1);
}
.topline a:hover::after, .topline a:focus-visible::after,
.topline a[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .topline a::after { transition: none; }
}
.topline .push { flex: 1 1 2rem; }

/* Zwei Spalten statt absoluter Positionierung: so kann das Porträt den
   Namen baulich nicht mehr anschneiden, egal wie breit das Fenster ist. */
.plakat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(.9rem, .5rem + 1.4vw, 2.2rem);
  align-items: end;
  padding-top: clamp(1.4rem, .8rem + 2.6vw, 3.2rem);
}

/* Der Name ist ein einzelnes Wort und kann nicht umbrechen. Eine Grid-Spalte
   würde ihn also nicht begrenzen, er liefe darüber hinaus. Deshalb ist die
   Spalte ein eigener Container und die Schriftgröße in cqi angegeben: sie
   rechnet sich aus der Spaltenbreite, nicht aus der Fensterbreite. */
.name-wrap {
  grid-column: 1;
  grid-row: 1;
  container-type: inline-size;
  min-width: 0;
}
.name {
  color: var(--schwarz);
  font-size: clamp(1.9rem, 11cqi, 7.4rem);
  animation: spread 1100ms cubic-bezier(.16,1,.3,1) both;
}
.name span { display: block; }
.name .two { padding-left: .08em; }

@keyframes spread {
  from { letter-spacing: .04em; }
  to   { letter-spacing: -.045em; }
}
@media (prefers-reduced-motion: reduce) {
  .name { animation: none; letter-spacing: -.045em; }
}

/* Das Porträt sitzt in der zweiten Spalte und reicht über beide Zeilen,
   steht also bündig neben dem Namen statt darüber. */
.plakat figure {
  margin: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: clamp(9.5rem, 23vw, 19rem);
}
.plakat figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  display: block;
}

.plakat-foot {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: clamp(1rem, .6rem + 1.6vw, 1.8rem) clamp(3rem, 1.6rem + 5vw, 6.5rem);
}
.plakat-foot .rollen {
  display: flex; gap: .9rem; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
  color: var(--schwarz);
}
/* Der Trennstrich gehört hinter das Wort. Als ::before am Folgeelement
     stand er beim Umbruch allein am Anfang der neuen Zeile. */
.plakat-foot .rollen li:not(:last-child)::after { content: " /"; opacity: .55; }

/* ============ 3 · PAPIER ============ */

.papier { background: var(--papier); padding-block: clamp(3rem, 1.6rem + 5vw, 6.5rem); }

.ueber {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, .8rem + 3.4vw, 4rem);
  align-items: start;
}
.ueber .text { display: flex; flex-direction: column; gap: 1.05rem; }
.ueber figure { margin: 0; position: relative; }
.ueber figure img { width: 100%; height: auto; }
.ueber figure::after {
  content: "";
  position: absolute;
  left: -1.4rem; bottom: -1.4rem;
  width: 46%; height: 46%;
  background: var(--ocker);
  z-index: -1;
}
.ueber figure { z-index: 1; isolation: isolate; }

/* ============ 3b · WERDEGANG ============ */

.vita { margin-top: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); }
.vita-block + .vita-block { margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.vita h3 {
  font-variation-settings: "wdth" 88, "wght" 700;
  font-size: var(--f-1);
  letter-spacing: .24em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--schwarz);
  color: var(--schwarz);
}
.vita ol { list-style: none; margin: 0; padding: 0; }
.vita li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .4rem 1.4rem;
  padding: .7rem 0;
  border-bottom: 1px solid #d5d0c4;
  align-items: baseline;
}
.vita li:last-child { border-bottom: 0; }
.vita .jahr {
  font-variation-settings: "wdth" 88, "wght" 600;
  font-size: var(--f-1);
  letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
  color: var(--grau);
  white-space: nowrap;
}
.vita .was { display: flex; flex-direction: column; gap: .1rem; }
.vita .pos {
  font-variation-settings: "wdth" 100, "wght" 650;
  line-height: 1.3;
}
.vita .ort { font-size: var(--f-1); color: var(--grau); }

@media (max-width: 40rem) {
  .vita li { grid-template-columns: 1fr; gap: .15rem; padding: .8rem 0; }
}

/* ============ 4 · OCKERBÜHNE ============ */

.buehne {
  background: var(--ocker);
  color: var(--schwarz);
  padding-block: clamp(2.6rem, 1.4rem + 4.4vw, 5.5rem);
  overflow: hidden;
}
.buehne .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, .8rem + 3vw, 3.6rem);
  align-items: center;
}
.buehne h2 { color: var(--schwarz); }
.buehne p { color: var(--schwarz); }
.buehne .figuren {
  mix-blend-mode: multiply;
  width: 100%;
  height: auto;
}

/* ============ 5 · ROLLEN ============ */

.rollen-sec { padding-block: clamp(3rem, 1.6rem + 5vw, 6.5rem); }
.rollen-bild {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.8rem, .4rem + 1.4vw, 1.6rem);
  align-items: start;
  margin-top: clamp(1rem, .6rem + 1.4vw, 2rem);
}
.rollen-text {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  margin-bottom: clamp(1.4rem, .8rem + 2vw, 2.6rem);
}
/* Die Vita übernimmt die Werdegang-Optik, nur ohne dessen Abstand nach oben. */
.rollen-vita { margin-top: 0; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.rollen-bild figure { margin: 0; }
.rollen-bild .a { grid-column: 1 / span 5; }
.rollen-bild .b { grid-column: 5 / span 4; margin-top: clamp(1.6rem, .8rem + 3vw, 4.2rem); }
.rollen-bild .c { grid-column: 9 / span 4; margin-top: clamp(3.2rem, 1.6rem + 6vw, 8.4rem); }

/* Bilderreihe ohne Versatz: alle oben auf einer Linie. */
.rollen-bild.reihe figure { margin-top: 0; }
.rollen-bild.reihe .a { grid-column: 1 / span 4; }
.rollen-bild.reihe .b { grid-column: 5 / span 4; }
.rollen-bild.reihe .c { grid-column: 9 / span 4; }
.rollen-bild figure { cursor: pointer; }
.rollen-bild img {
  width: 100%; height: auto;
  transition: transform 320ms cubic-bezier(.16,1,.3,1),
              filter 320ms ease;
}
.rollen-bild figure:hover img,
.rollen-bild figure:focus-within img {
  transform: translateY(-6px);
  filter: contrast(1.06);
}
.rollen-bild figcaption {
  padding-top: .7rem;
  transition: color 260ms ease;
  font-variation-settings: "wdth" 88, "wght" 650;
  font-size: var(--f-1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grau);
}
.rollen-bild figure:hover figcaption,
.rollen-bild figure:focus-within figcaption { color: var(--schwarz); }
@media (prefers-reduced-motion: reduce) {
  .rollen-bild img { transition: none; }
  .rollen-bild figure:hover img,
  .rollen-bild figure:focus-within img { transform: none; }
}

/* ============ 6 · BLÄTTER ============ */

.blaetter-sec { background: var(--papier-2); padding-block: clamp(3rem, 1.6rem + 5vw, 6.5rem); }

.blaetter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.1rem, .6rem + 1.8vw, 2.4rem);
  margin-top: clamp(1rem, .6rem + 1.4vw, 2rem);
}
.blatt { margin: 0; }
.blatt { cursor: pointer; }
.blatt img {
  width: 100%; height: auto;
  background: #fff;
  transition: transform 320ms cubic-bezier(.16,1,.3,1),
              box-shadow 320ms ease;
  box-shadow: 0 1px 2px rgba(20,18,16,.05);
}
.blatt:hover img, .blatt:focus-within img {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px -18px rgba(20,18,16,.55);
}
@media (prefers-reduced-motion: reduce) {
  .blatt img { transition: none; }
  .blatt:hover img, .blatt:focus-within img { transform: none; }
}

.blatt figcaption {
  display: flex; justify-content: space-between; gap: .8rem;
  align-items: baseline;
  padding-top: .65rem;
  font-size: var(--f-1);
}
.blatt figcaption .t {
  font-variation-settings: "wdth" 96, "wght" 650;
  letter-spacing: .01em;
}
.blatt figcaption .y {
  color: var(--grau);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-variation-settings: "wdth" 88, "wght" 500;
  letter-spacing: .1em;
}

.b-gross { grid-column: span 7; }
.b-hoch  { grid-column: span 5; }
.b-drei  { grid-column: span 4; }

/* ---------- Lupe ----------
   Die Kacheln sahen klickbar aus, ohne es zu sein, und waren mit der
   Tastatur gar nicht erreichbar. Jetzt sind es echte Schaltflächen mit
   einem nativen Dialog dahinter: Fokusfalle, Esc und Blättern inklusive. */
.lupe-auf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
}

dialog.lupe {
  border: 0;
  padding: 0;
  max-width: min(94vw, 1180px);
  max-height: 92vh;
  background: var(--papier);
  color: var(--schwarz);
  box-shadow: 0 40px 90px -30px rgba(20,18,16,.7);
}
dialog.lupe::backdrop { background: rgba(20,18,16,.88); }
/* Ohne das scrollt die Seite hinter dem offenen Bild weiter und das
   Bild schwebt am Ende über einem ganz anderen Abschnitt. */
body:has(dialog.lupe[open]) { overflow: hidden; }
dialog.lupe .rahmen {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(.8rem, .5rem + 1.2vw, 1.4rem);
}
dialog.lupe img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}
dialog.lupe .leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-variation-settings: "wdth" 88, "wght" 650;
  font-size: var(--f-1);
  letter-spacing: .12em;
  text-transform: uppercase;
}
dialog.lupe .steuer { display: flex; gap: .5rem; }
dialog.lupe .steuer button {
  min-width: 44px; min-height: 44px;
  border: 2px solid var(--schwarz);
  background: none;
  color: var(--schwarz);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
dialog.lupe .steuer button:hover { background: var(--schwarz); color: var(--papier); }
@media (prefers-reduced-motion: reduce) {
  dialog.lupe .steuer button { transition: none; }
}

/* ============ 7 · KONTAKT ============ */

.kontakt {
  background: var(--schwarz);
  color: var(--papier);
  padding-block: clamp(3rem, 1.6rem + 5vw, 6rem);
}
.kontakt h2 { color: var(--papier); }
.kontakt .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(1.2rem, .8rem + 2vw, 3rem);
  align-items: start;
}
.kontakt p { color: #b9b2a6; }

footer.site {
  background: var(--schwarz);
  color: #948b7e;
  border-top: 1px solid #2a2621;
  padding-block: 1.5rem 2.4rem;
}
footer.site .row {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
  font-variation-settings: "wdth" 88, "wght" 550;
  font-size: var(--f-1);
  letter-spacing: .16em;
  text-transform: uppercase;
}
footer.site a { color: #948b7e; text-underline-offset: .2em; }

@media (max-width: 60rem) {
  .rollen-bild .a { grid-column: 1 / span 6; margin-top: 0; }
  .rollen-bild .b { grid-column: 7 / span 6; margin-top: 2rem; }
  .rollen-bild .c { grid-column: 1 / span 6; margin-top: 1.6rem; }
  .rollen-bild.reihe .a, .rollen-bild.reihe .b { grid-column: span 6; }
  .rollen-bild.reihe .c { grid-column: span 6; margin-top: 1.6rem; }
  .b-gross, .b-hoch, .b-drei { grid-column: span 6; }
}

@media (max-width: 44rem) {
  /* Der Abstandhalter schob "Kontakt" allein in eine zweite Zeile,
     rechtsbündig und mit einer Lücke davor. Ohne ihn reiht sich der
     Punkt einfach hinter die anderen. */
  .topline .push { display: none; }
  .plakat-grid { grid-template-columns: 1fr; }
  .name-wrap { grid-row: 1; }
  .plakat figure { grid-column: 1; grid-row: 2; width: 100%; margin-top: 1.4rem; }
  .plakat figure img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 22%; }
  .plakat-foot { grid-row: 3; }
  .ueber, .buehne .inner { grid-template-columns: 1fr; }
  .buehne .inner .fig-wrap { order: -1; }
  .rollen-bild .a, .rollen-bild .b, .rollen-bild .c { grid-column: 1 / span 12; margin-top: 0; }
  .rollen-bild .b, .rollen-bild .c { margin-top: 1.2rem; }
  /* Die Reihe braucht die Regel eigens: .rollen-bild.reihe .a ist
     spezifischer als .rollen-bild .a und hielt sonst die Zweispaltigkeit
     aus der 60rem-Stufe fest. Auf einem 375er Schirm waren die Gesichter
     dadurch halb so gross wie vorgesehen. */
  .rollen-bild.reihe .a, .rollen-bild.reihe .b, .rollen-bild.reihe .c {
    grid-column: 1 / span 12; margin-top: 0;
  }
  .rollen-bild.reihe .b, .rollen-bild.reihe .c { margin-top: 1.2rem; }
  .b-gross, .b-hoch, .b-drei { grid-column: span 12; }
}

/* ============ UNTERSEITEN ============
   Dieselbe Ockerbahn wie auf der Startseite, nur ohne das grosse Plakat:
   die Unterseiten erben die Welt, machen aber keine zweite auf. */

.plakat.klein { padding-bottom: clamp(1.6rem, 1rem + 2.6vw, 3rem); }
.plakat.klein .titel {
  padding-top: clamp(1.8rem, 1rem + 3.2vw, 4rem);
  display: grid;
  gap: clamp(.7rem, .5rem + .8vw, 1.1rem);
}
.plakat.klein h1 {
  color: var(--schwarz);
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.6rem);
  max-width: 18ch;
}
.plakat.klein .vorspann {
  /* Gedecktes Braun kam auf dem Ocker nur auf 3,3:1. Das Schwarz der Seite
     erreicht 4,7:1; die Rangfolge zum Titel tragen Groesse und Gewicht. */
  color: var(--schwarz);
  max-width: 54ch;
  font-size: var(--f1);
  line-height: 1.45;
}

/* Sprungmarke: der erste Tabstopp jeder Seite, sichtbar nur mit Tastatur. */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--schwarz);
  color: var(--papier);
  padding: .8rem 1.2rem;
  font-variation-settings: "wdth" 88, "wght" 650;
  font-size: var(--f-1);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.sprung:focus { left: 0; }

/* Weiterführender Verweis, gebaut wie die Hauptnavigation. */
.weiter {
  display: inline-block;
  margin-top: clamp(1.2rem, .8rem + 1.4vw, 2rem);
  position: relative;
  color: inherit;
  text-decoration: none;
  font-variation-settings: "wdth" 88, "wght" 700;
  font-size: var(--f-1);
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: .45rem;
}
.weiter::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(.16,1,.3,1);
}
.weiter:hover::after, .weiter:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .weiter::after { transition: none; } }

/* ============ STECKBRIEF ============
   Begriff und Angabe statt Jahr und Station, sonst die Werdegang-Optik. */
.steckbrief dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 0 clamp(1.6rem, 1rem + 2.4vw, 3.4rem);
}
.steckbrief .paar {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .3rem 1.2rem;
  padding: .7rem 0;
  border-bottom: 1px solid #d5d0c4;
  align-items: baseline;
}
.steckbrief dt {
  font-variation-settings: "wdth" 88, "wght" 600;
  font-size: var(--f-1);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grau);
}
.steckbrief dd {
  margin: 0;
  font-variation-settings: "wdth" 100, "wght" 650;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 40rem) {
  .steckbrief .paar { grid-template-columns: 1fr; gap: .1rem; }
}

/* ============ FORMULAR ============
   Kanten statt Rundungen, Flächen statt Schatten - wie der Rest der Seite. */
.formular {
  display: grid;
  gap: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  max-width: 46rem;
  margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
}
.feld { display: grid; gap: .5rem; }
.feld > label {
  font-variation-settings: "wdth" 88, "wght" 700;
  font-size: var(--f-1);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.feld .pflicht { color: var(--ocker-dk); }
.feld input, .feld textarea {
  font: inherit;
  font-size: var(--f0);
  color: var(--schwarz);
  caret-color: var(--ocker-dk);
  background: #f6f8f4;
  border: 2px solid var(--schwarz);
  border-radius: 0;
  padding: .8rem .9rem;
  width: 100%;
  transition: background 180ms ease, border-color 180ms ease;
}
.feld textarea { min-height: 11rem; resize: vertical; line-height: 1.55; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--grau); opacity: 1; }
.feld input:hover, .feld textarea:hover { background: #fff; }
.feld input:focus-visible, .feld textarea:focus-visible { background: #fff; }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] {
  border-color: var(--ocker-dk);
  background: #fdf6e9;
}
/* Nicht an .feld haengen: die Meldung zur Einwilligung steht in .zustimmung
   und sah sonst als einzige gross und schwarz aus. */
.fehler {
  font-size: var(--f-1);
  color: #7c560f;
  font-variation-settings: "wdth" 96, "wght" 650;
  line-height: 1.45;
}
.fehler:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .feld input, .feld textarea { transition: none; }
}

/* Einwilligung: eigenes Kästchen, gezeichnet statt Systemhaken. */
.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  align-items: start;
}
.zustimmung input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.5rem; height: 1.5rem;
  margin: .08rem 0 0;
  border: 2px solid var(--schwarz);
  background: #f6f8f4;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.zustimmung input::after {
  content: "";
  width: .78rem; height: .44rem;
  border-left: 3px solid var(--papier);
  border-bottom: 3px solid var(--papier);
  transform: rotate(-45deg) scale(0);
  transition: transform 160ms cubic-bezier(.16,1,.3,1);
}
.zustimmung input:checked { background: var(--schwarz); }
.zustimmung input:checked::after { transform: rotate(-45deg) scale(1); }
.zustimmung label { font-size: var(--f-1); line-height: 1.55; cursor: pointer; }
.zustimmung .fehler { grid-column: 2; }
@media (prefers-reduced-motion: reduce) {
  .zustimmung input::after { transition: none; }
}

/* Honigtopf gegen Formularroboter: für Menschen nicht erreichbar. */
.honig {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.senden {
  justify-self: start;
  font: inherit;
  font-variation-settings: "wdth" 96, "wght" 750;
  font-size: var(--f-1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--schwarz);
  border: 2px solid var(--schwarz);
  border-radius: 0;
  padding: .95rem 2.2rem;
  min-height: 48px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.senden:hover, .senden:focus-visible { background: #7c560f; border-color: #7c560f; }
.senden[disabled] { background: var(--grau); border-color: var(--grau); cursor: progress; }
@media (prefers-reduced-motion: reduce) { .senden { transition: none; } }

/* Rückmeldung nach dem Absenden. */
.meldung {
  border: 2px solid var(--schwarz);
  padding: 1rem 1.2rem;
  max-width: 46rem;
  line-height: 1.55;
}
.meldung[hidden] { display: none; }
.meldung.gut { background: #e3e9df; }
.meldung.schlecht { border-color: #7c560f; background: #fdf6e9; color: #4a3409; }
.meldung b {
  display: block;
  font-variation-settings: "wdth" 88, "wght" 750;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: var(--f-1);
  margin-bottom: .3rem;
}

/* ============ RECHTSTEXT ============
   Impressum und Datenschutz werden gelesen, nicht überflogen. */
.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  font-size: var(--f1);
  letter-spacing: -.01em;
  margin-top: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  margin-bottom: .7rem;
}
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p { margin-bottom: 1rem; max-width: none; }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext a { color: #7c560f; text-underline-offset: .22em; }
.rechtstext .anschrift {
  font-style: normal;
  font-variation-settings: "wdth" 100, "wght" 650;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.rechtstext .stand {
  margin-top: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  padding-top: 1rem;
  border-top: 2px solid var(--schwarz);
  font-size: var(--f-1);
  color: var(--grau);
}

/* ============ FUSSZEILE ============ */
footer.site .row { align-items: baseline; }
footer.site nav {
  display: flex;
  gap: 1rem clamp(1rem, .6rem + 1.4vw, 2rem);
  flex-wrap: wrap;
}
footer.site a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .15rem; }
/* Der Agentur-Hinweis ist ein Satz, kein Navigationspunkt. Ohne eigenen Strich
   sähe der Link genauso aus wie der Text davor. */
footer.site .macher a { border-bottom-color: color-mix(in srgb, currentColor 45%, transparent); }
footer.site a:hover, footer.site a:focus-visible { color: var(--papier); border-bottom-color: var(--ocker); }

/* Die Kontaktfläche trägt auf den Unterseiten den Abschluss. */
.kontakt .direkt {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem clamp(1.2rem, .8rem + 2vw, 2.6rem);
  margin-top: 1.1rem;
  list-style: none;
  padding: 0;
}
.kontakt .direkt a {
  color: var(--papier);
  text-decoration: none;
  border-bottom: 2px solid var(--ocker);
  padding-bottom: .2rem;
  font-variation-settings: "wdth" 96, "wght" 650;
}
.kontakt .direkt a:hover, .kontakt .direkt a:focus-visible { border-bottom-color: var(--papier); }

/* Vier Bilder nebeneinander: Schauspielseite. Oben auf einer Linie,
   der Versatz der Dreiergruppe wirkt bei vier Porträts wie ein Versehen. */
.rollen-bild.vier figure { margin-top: 0; }
.rollen-bild.vier .a { grid-column: 1 / span 3; }
.rollen-bild.vier .b { grid-column: 4 / span 3; }
.rollen-bild.vier .c { grid-column: 7 / span 3; }
.rollen-bild.vier .d { grid-column: 10 / span 3; }
@media (max-width: 60rem) {
  .rollen-bild.vier .a, .rollen-bild.vier .b { grid-column: span 6; }
  .rollen-bild.vier .c, .rollen-bild.vier .d { grid-column: span 6; margin-top: 1.6rem; }
}
@media (max-width: 44rem) {
  .rollen-bild.vier .a, .rollen-bild.vier .b,
  .rollen-bild.vier .c, .rollen-bild.vier .d { grid-column: span 12; margin-top: 0; }
  .rollen-bild.vier .b, .rollen-bild.vier .c, .rollen-bild.vier .d { margin-top: 1.2rem; }
}

/* Nachsatz unter einem Abschnitt: der Verkaufshinweis bei den Blättern,
   der Pflichtfeldhinweis unter dem Formular. */
.nachsatz {
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  max-width: 62ch;
}
.nachsatz.klein { font-size: var(--f-1); color: var(--grau); }

/* Die Werbeproduktionen tragen kein Jahr. Die Jahresspalte bleibt trotzdem
   stehen, nur leer: faellt sie weg, hat die Filmografie zwei linke Kanten,
   und das liest sich als Versehen statt als Entscheidung. */
.vita-block.ohne-jahr .was { grid-column: 2; }
@media (max-width: 40rem) {
  .vita-block.ohne-jahr .was { grid-column: 1; }
}

/* Kontaktseite: das Formular stand allein in der linken Haelfte. */
.kontaktflaeche {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.6rem, .8rem + 3.4vw, 4rem);
  align-items: start;
}
.kontaktflaeche .formular { margin-top: 0; max-width: none; }
.kontaktflaeche figure { margin: 0; }
.kontaktflaeche figure img { width: 100%; height: auto; }
/* Kein versetztes Ockerquadrat wie bei .ueber: nach rechts versetzt ragte es
   aus der Seite heraus und erzeugte auf dem Handy waagerechten Bildlauf,
   nach links versetzt laege es unter dem Formular. */
@media (max-width: 60rem) {
  .kontaktflaeche { grid-template-columns: 1fr; }
  /* Kein order: -1. Das Bild vor dem Formular schob das erste Feld rund
     350 Punkte nach unten, und die Ueberschrift stand nicht mehr bei dem,
     was sie ankuendigt. Hier zaehlt die Aufgabe, nicht das Bild. */
  .kontaktflaeche figure { max-width: min(20rem, 100%); margin-top: 1.6rem; }
}

/* Startseite: Fernsehen und Werbung nebeneinander, auf schmalen Schirmen
   untereinander. Der Abstand kommt aus dem Raster, nicht aus margin-top. */
.vita-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(1.8rem, 1.2rem + 2vw, 3rem) clamp(1.6rem, 1rem + 2.4vw, 3.4rem);
  align-items: start;
}
.vita-spalten .vita-block + .vita-block { margin-top: 0; }

/* Profile in der Fußzeile: Zeichen in der Textfarbe, eine Strichstärke. */
footer.site .profil { display: inline-flex; align-items: center; gap: .5em; }
footer.site .profil svg {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
footer.site .profil svg .voll { fill: currentColor; stroke: none; }