/* ==========================================================================
   Components — Header, Hero, Kennzahlen, Akkordeon, Logos, Arbeiten, Footer
   ========================================================================== */

/* --- Kopfzeile ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--rule) solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--paper); } }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h, 76px);
}

/* Der Wortmarken-SVG ist sehr breit und flach (Seitenverhältnis ~12:1).
   Die Padding-Fläche macht daraus ein ausreichend großes Klickziel. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
  color: var(--ink);
  padding-block: var(--s-2);
}
/* Keine vw-Breite (Prinzip aus DESIGN-SYSTEM.md 7b): vw schliesst die
   Rollbalkenbreite anders ein als die Container-Prozentrechnung und liess
   das Logo beim Seitenwechsel je nach Rollbalken-Zustand um ein paar Pixel
   springen. */
.brand__logo { width: 208px; height: auto; display: block; }
.brand:hover { text-decoration: none; color: var(--ink-2); }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-2), 1.8vw, var(--s-4));
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list li { margin: 0; }
.nav__link {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: var(--s-1) 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current="true"] { border-bottom-color: var(--accent); text-decoration: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  background: none;
  border: var(--rule) solid var(--line);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block; width: 20px; height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before,
.nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.95em 1.6em;
  min-height: 48px;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.section--dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section--dark .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Textlink mit Pfeil */
.link-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.link-arrow:hover { text-decoration: none; border-bottom-color: var(--ink); }
.link-arrow span { transition: transform var(--dur) var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* --- Hero ----------------------------------------------------------------
   Ziel: die ganze Aussage steht im ersten Viewport. Deshalb ist die Headline
   bewusst kleiner als zuvor (vorher bis 7rem — da passte nur noch der Name
   ins Bild), und das Bild sitzt oben statt unten, damit es nicht angeschnitten
   wird.                                                                     */
.hero {
  position: relative;
  border-bottom: var(--rule) solid var(--line);
  overflow: clip;             /* fängt die Parallaxbewegung des Bildes ab */
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 47%);
  gap: clamp(var(--s-4), 4vw, var(--s-6));
  align-items: center;
  padding-block: clamp(var(--s-4), 4vw, var(--s-6));
}
.hero__text { position: relative; z-index: 1; }
.hero__media { position: relative; }

.hero__title {
  /* Bewusst zurückgenommen. Mit der alten Größe stand im ersten Viewport nur
     noch der Name — die eigentliche Aussage fiel heraus. Jetzt trägt die
     Headline in drei bis vier Zeilen, ohne ihre Wucht zu verlieren. */
  font-size: clamp(2rem, 3.5vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-4);
  max-width: 15ch;
  text-wrap: balance;
}
.hero__roles {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 550;
  color: var(--ink-2);
}
/* Marker vor jedem Eintrag, nicht nur zwischen den Einträgen: die Zeile bricht
   je nach Breite um, ein reines Trennzeichen stünde dann am Zeilenanfang. */
.hero__roles li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.hero__roles li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  background: var(--accent);
}
/* Das Bild ist absichtlich höher als sein Rahmen. Der Überschuss ist der Weg,
   den es beim Scrollen zurücklegt — dadurch entsteht die Parallaxe, ohne dass
   irgendwo eine Lücke aufreißt. --p wird vom Skript gesetzt (-1 … +1). */
/* Feste, an die Fensterhöhe gekoppelte Bildhöhe. Vorher füllte das Bild die
   ganze Rasterzeile — die wuchs mit der Textspalte mit, und object-fit
   beschnitt das Motiv dann bis zur Unkenntlichkeit. */
.hero__media picture {
  display: block;
  height: clamp(320px, 56svh, 580px);
  overflow: clip;
}
.hero__media img {
  width: 100%;
  height: calc(100% + 2 * var(--parallax-weg, 44px));
  margin-top: calc(-1 * var(--parallax-weg, 44px));
  object-fit: cover;
  display: block;
  transform: translate3d(0, calc(var(--p, 0) * var(--parallax-weg, 44px)), 0);
  will-change: transform;
  /* Sanftes Aufziehen beim Laden — einmal, dann nie wieder.
     scale steht bewusst als eigene Eigenschaft da: transform trägt bereits die
     Parallaxe, und Custom Properties ließen sich in @keyframes gar nicht
     interpolieren. */
  animation: hero-auf var(--dur-slow) var(--ease) both;
}
@keyframes hero-auf {
  from { opacity: 0; scale: 1.05; }
  to   { opacity: 1; scale: 1; }
}

/* Das NA-Signet als Gestaltungselement im Hero, nicht als zweites Logo.
   Es steht im Textfluss über der Headline — absolut positioniert lag es
   vorher mitten auf der Schrift. */
.hero__signet {
  display: block;
  width: 44px;
  color: var(--accent);
  margin-bottom: var(--s-3);
  transform: translate3d(0, calc(var(--p, 0) * -14px), 0);
  pointer-events: none;
}
.hero__signet svg { width: 100%; height: auto; display: block; }

/* "Zurueck"-Link auf Detailseiten (Blogbeitrag, Arbeitsprobe): bewusst nah an
   der Navigation und mit deutlichem Abstand zum Inhalt darunter - sonst
   wirkt er wie Teil des NA-Signet/Datum/Titel-Blocks statt einer eigenen,
   vorgelagerten Wegmarke. Die Sektion bekommt dafuer weniger Kopfabstand als
   sonst (padding-top am section-Tag), dieser Link gleicht das mit eigenem
   Abstand nach unten wieder aus. */
.zurueck { margin: 0 0 var(--s-7); }

/* --- Werdegang (Über mich) ------------------------------------------------
   Vier Karrierestationen mit Jahr - dieselbe Sprache wie die Kennzahlen
   (Strich oben statt Box), damit keine neue Bausteinart entsteht. */
.werdegang {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.werdegang__item {
  border-top: 3px solid var(--ink);
  padding: var(--s-3) var(--s-4) 0 0;
}
.werdegang__jahr {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-1);
}
.werdegang__titel { font-size: var(--step--1); color: var(--ink-2); }

/* --- Kenntnisse & Fähigkeiten (Über mich) ---------------------------------
   Schmale Balken statt Kreisdiagramm - passt zu "keine Zierelemente" und
   braucht kein SVG. Prozentwerte stammen unveraendert aus dem Bestand. */
.skill { margin-bottom: var(--s-3); }
.skill__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
}
.skill__wert { color: var(--ink-3); font-weight: 500; }
.skill__spur { height: 5px; background: var(--line); }
.skill__balken { height: 100%; background: var(--accent); }

@media (max-width: 860px) {
  .werdegang { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) 0; }
  .werdegang__item { padding-right: var(--s-4); }
}
@media (max-width: 560px) {
  .werdegang { grid-template-columns: 1fr; }
  .werdegang__item { padding-right: 0; }
}

/* Zitat im Fliesstext (Marketingweisheiten im Blog) - dieselbe Schreibschrift
   wie das Hero-Zitat, damit beide als eine Familie erkennbar bleiben. Kleiner
   und mit Akzentlinie statt zentriert auf Foto, weil es hier Fliesstext
   begleitet statt eine ganze Sektion zu tragen. */
.quote {
  border-left: 3px solid var(--accent);
  padding-left: var(--s-4);
  margin: var(--s-3) 0;
  max-width: 640px;
}
.quote p {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
.quote figcaption { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--s-2); }
.quote cite { font-style: normal; font-weight: 600; color: var(--ink); }

/* --- Kennzahlen --------------------------------------------------------- */
.figures { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figure { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-top: 3px solid var(--ink); }
.figure + .figure { padding-left: var(--s-4); }
.figure__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: var(--s-1);
}
.figure__label {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  margin-bottom: var(--s-2);
  display: block;
}
.figure__desc { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.section--dark .figure { border-top-color: var(--accent); }
.section--dark .figure__desc { color: #b9b9b9; }

/* --- Akkordeon ---------------------------------------------------------- */
.accordion { border-top: var(--rule) solid var(--line); }
.accordion__item { border-bottom: var(--rule) solid var(--line); }
.accordion__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-3) 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease);
}
.accordion__item[open] summary::after { content: "–"; }
.accordion__item summary:hover { color: var(--ink); }
.accordion__num {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.15em 0.5em;
  flex: none;
}
.accordion__body { padding-bottom: var(--s-4); }
.accordion__body > :last-child { margin-bottom: 0; }

/* --- Kundenlogos -------------------------------------------------------- */
/* Feste Spaltenzahl statt auto-fill: das elastische Raster ließ die letzte
   Reihe anbrechen, und weil die Trennlinien über den Hintergrund entstehen,
   blieb dort ein grauer Block stehen. 4 Spalten teilen beide Stände glatt:
   12 Logos = 3 Reihen, 52 Logos = 13 Reihen. Kein Loch, egal welcher Zustand. */
.clients {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rule);
  background: var(--line);
  border: var(--rule) solid var(--line);
}
.clients__more { margin-top: var(--s-5); }
.clients__item {
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: var(--s-3);
  aspect-ratio: 5 / 2;   /* flache Zellen, dem Format von Wortmarken angemessen */
  /* Der Listen-Reset (li + li) schöbe jede Zelle außer der ersten um 8px nach
     unten — im Raster sichtbar als eine einzelne verrutschte Kachel. */
  margin: 0;
}
.clients__item img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.clients__item:hover img { filter: grayscale(0); opacity: 1; }

/* --- Arbeiten (Editorial-Raster, bewusst ungleichmäßig) ----------------- */
.work {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
.work__item { grid-column: span 6; display: flex; flex-direction: column; }
.work__item:nth-child(4n + 1),
.work__item:nth-child(4n + 4) { grid-column: span 7; }
.work__item:nth-child(4n + 2),
.work__item:nth-child(4n + 3) { grid-column: span 5; }

/* --- Testvariante: drei gleiche Spalten über die volle Fensterbreite -----
   Mehr Bildwirkung, weniger redaktioneller Rhythmus als das 7/5-Raster oben.
   Bewusst ein Modifier neben .work, kein Ersatz: die Arbeitsproben-Übersicht
   behält das editorialere Raster. gap: var(--rule) statt --col-gap, damit die
   Bilder als zusammenhängende Fläche wirken, nicht als lose Kacheln. */
.work--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rule);
}
.work--drei .work__item,
.work--drei .work__item:nth-child(4n + 1),
.work--drei .work__item:nth-child(4n + 2),
.work--drei .work__item:nth-child(4n + 3),
.work--drei .work__item:nth-child(4n + 4) { grid-column: span 1; }
.work__figure { margin: 0 0 var(--s-2); overflow: hidden; background: var(--paper-2); }
.work__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.work__item:hover .work__figure img { transform: scale(1.03); }
.work__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-1);
}
.work__meta { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.work__link { text-decoration: none; }
.work__link:hover .work__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }

/* Kategorie-Zeile über dem Titel — Klartext aus der Portfolio-Taxonomie des
   Bestands, keine erfundene Einordnung. */
.work__tags {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-1);
}

/* Arbeitsproben, deren Bild noch nicht eingepflegt ist: derselbe
   Platzhalter wie beim Porträtfoto (gestrichelter Rahmen, Schraffur,
   Hinweistext) — täuscht kein Bild vor, zeigt aber an, dass eines folgt. */
.work__figure--platzhalter {
  aspect-ratio: 16 / 10;
  margin: 0 0 var(--s-2);
  border: var(--rule) dashed var(--ink-3);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 10px, rgba(0, 0, 0, 0.028) 10px 20px);
  display: grid;
  place-items: center;
}
/* Grosse Platzhalter-Variante fuer Detailseiten ohne aufloesbares Bild —
   breiteres Seitenverhaeltnis, damit die Flaeche wie ein Titelbild wirkt. */
.work__figure--gross { aspect-ratio: 21 / 9; margin: 0; }

/* --- Teaser-Karten (ohne Boxen: nur Linie + Typo) ----------------------- */
.teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.teaser { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-top: 3px solid var(--ink); }
.teaser + .teaser { padding-left: var(--s-4); }
.teaser__title { font-size: var(--step-2); margin-bottom: var(--s-2); }
.teaser p { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--s-3); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #c9c9c9; padding-block: var(--s-7) var(--s-4); }
.site-footer h2, .site-footer h3 { color: var(--paper); }
.site-footer a { color: var(--paper); text-decoration-color: var(--accent); }
.site-footer__brand { color: var(--paper); }
.site-footer__brand .brand__logo { width: min(240px, 70%); height: auto; margin-bottom: var(--s-3); }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--col-gap); }
.footer-title {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #8f8f8f;
  margin-bottom: var(--s-3);
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li + li { margin-top: var(--s-2); }
.site-footer address { font-style: normal; line-height: 1.9; }
.footer-title--spaced { margin-top: var(--s-5); }
/* Profile nebeneinander — es sind vier kurze Wörter, keine zweite Navigation */
.footer-list--inline { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.footer-list--inline li + li { margin-top: 0; }

.socket {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: var(--rule) solid #2b2b2b;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  font-size: var(--step--1);
  color: #8f8f8f;
}
.socket ul { display: flex; gap: var(--s-3); list-style: none; margin: 0 0 0 auto; padding: 0; }
.socket li { margin: 0; }

/* --- Cookie-Einwilligung -------------------------------------------------
   Flaeche statt Karte: Trennlinie oben wie beim Socket/Footer, keine
   Box-Schatten - dieselbe flache Sprache wie der Rest des Systems. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-overlay);
  background: var(--paper);
  border-top: 3px solid var(--ink);
  padding: var(--s-3) 0;
}
.consent[hidden] { display: none; }
.consent__card { display: grid; gap: var(--s-3); }
.consent__text { margin: 0; max-width: 70ch; font-size: var(--step--1); color: var(--ink-2); }
.consent__text a { color: var(--ink); }
.consent__einstellungen {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: var(--rule) solid var(--line);
}
.consent__einstellungen[hidden] { display: none; }
.consent__zeile { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--step--1); }
.consent__zeile input { margin-top: 0.3em; flex: none; }
.consent__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.consent .btn { padding: var(--s-2) var(--s-3); font-size: var(--step--1); }

/* --- Porträt-Platzhalter ------------------------------------------------
   Steht bewusst als leere, beschriftete Fläche da und nicht als Fake-Bild:
   der Rahmen zeigt Format und Position, täuscht aber keinen Inhalt vor.
   Ersetzen durch ein <picture> mit demselben Seitenverhältnis.            */
.portrait-slot {
  aspect-ratio: 4 / 5;
  border: var(--rule) dashed var(--ink-3);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 10px, rgba(0, 0, 0, 0.028) 10px 20px);
  display: grid;
  place-items: center;
}
.portrait-slot__hint {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Blogbeiträge -------------------------------------------------------- */
.posts {
  margin-top: var(--s-7);
  border-top: var(--rule) solid var(--line);
}
.post { border-bottom: var(--rule) solid var(--line); }
.post__link {
  display: grid;
  grid-template-columns: 5.5rem 12rem 1fr auto;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) 0;
  text-decoration: none;
  color: inherit;
}
.post__link:hover { text-decoration: none; }
/* Vorschaubild-Platzhalter: derselbe gestrichelte Rahmen wie beim Porträt und
   bei den Arbeitsproben - die Originaldateien liegen dem Inhaber vor und
   werden im gemeinsamen Durchgang nachgereicht. */
.post__bild {
  grid-row: 1 / 3;
  align-self: start;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: var(--rule) dashed var(--ink-3);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 10px, rgba(0, 0, 0, 0.028) 10px 20px);
  display: grid;
  place-items: center;
}
.post__bild span {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
  padding: 0 4px;
}
.post__date {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.post__title {
  font-size: var(--step-1);
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.post__link:hover .post__title { text-decoration: underline; text-decoration-color: var(--accent); }
.post__excerpt {
  grid-column: 3;
  font-size: var(--step--1);
  color: var(--ink-2);
  margin: var(--s-1) 0 0;
  max-width: 62ch;
}
.post__more {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.post__link:hover .post__more { color: var(--ink); }

/* --- Kennzahl beim Hochzählen -------------------------------------------
   Feste Ziffernbreite, damit die Zeile während der Animation nicht springt. */
.figure__num { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   Creative Revision — Bewegung, Marke, Rhythmus
   ========================================================================== */

/* --- Scroll-Reveal -------------------------------------------------------
   Grundzustand ist sichtbar. Erst wenn das Skript läuft, bekommt <html> die
   Klasse js und die Elemente starten verborgen. Ohne JavaScript bleibt also
   alles lesbar, statt dauerhaft unsichtbar zu sein.                        */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--verzug, 0ms);
}
.js [data-reveal].ist-da { opacity: 1; transform: none; }

/* --- NA-Signet als wiederkehrendes Element ------------------------------- */
.signet { display: block; color: var(--accent); }
.signet svg { width: 100%; height: auto; display: block; }
/* Kapitelmarke am Sektionskopf */
.label__signet {
  width: 15px; height: 15px;
  flex: none;
  color: var(--accent);
  margin-right: var(--s-1);
}
.label__signet svg { width: 100%; height: auto; display: block; }

/* --- Kopfzeile: Zustand beim Scrollen ------------------------------------ */
.site-header { transition: box-shadow var(--dur) var(--ease); }
.site-header[data-gescrollt] {
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(0, 0, 0, 0.5);
}
.site-header[data-gescrollt] .site-header__inner { min-height: 62px; }
.site-header__inner { transition: min-height var(--dur) var(--ease); }

/* Kontakt hebt sich als einziger Punkt vom Rest ab */
.nav__cta {
  border: 2px solid var(--ink);
  padding: 0.5em 1.1em;
  border-bottom-width: 2px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
/* Aktive Seite (Kontakt): vollflaechig statt nur der duennen Unterstreichung,
   die .nav__link[aria-current] sonst setzt - auf dem eigenen 2px-Rahmen des
   Buttons sah eine einzelne gruene Kante wie ein Darstellungsfehler aus. */
.nav__cta[aria-current="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* --- Kennzahlen: mehr Grün, mehr Gewicht --------------------------------- */
.figures { position: relative; }
.figure { position: relative; }
.figure__value { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.section--dark .figure__value { color: var(--paper); }
/* grüner Strich unter der Zahl, wächst beim Einblenden mit */
.figure__value::after {
  content: "";
  display: block;
  height: 3px;
  width: var(--strich, 0%);
  background: var(--accent);
  margin-top: var(--s-2);
  transition: width 900ms var(--ease) 180ms;
}
.figure.ist-da .figure__value::after { --strich: 68%; }

/* Dezente Rasterstruktur im Hintergrund der dunklen Sektion */
.section--dark.section--raster { position: relative; overflow: clip; }
.section--dark.section--raster::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  pointer-events: none;
}
.section--raster > .container { position: relative; }

/* --- Arbeitsproben: Bewegung beim Überfahren ----------------------------- */
.work__figure { overflow: clip; margin: 0; position: relative; background: var(--paper-2); }
.work__figure img {
  transition: transform var(--dur-slow) var(--ease);
  will-change: transform;
}
.work__link:hover .work__figure img,
.work__link:focus-visible .work__figure img { transform: scale(1.045); }

/* Overlay mit Pfeil — erscheint erst beim Überfahren */
.work__fx {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end start;
  padding: var(--s-3);
  background: linear-gradient(to top, rgba(17, 17, 17, 0.55), rgba(17, 17, 17, 0) 55%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.work__link:hover .work__fx,
.work__link:focus-visible .work__fx { opacity: 1; }
.work__pfeil {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.1rem;
  transform: translate3d(-8px, 8px, 0);
  transition: transform var(--dur) var(--ease);
}
.work__link:hover .work__pfeil,
.work__link:focus-visible .work__pfeil { transform: none; }

.work__title { transition: transform var(--dur) var(--ease); }
.work__link:hover .work__title { transform: translateX(6px); }

/* Hinweis zur Entstehung der Arbeiten — inhaltlich wichtig, deshalb
   typografisch aufgewertet statt kleingedruckt. */
.work__hinweis {
  border-left: 3px solid var(--accent);
  padding-left: var(--s-3);
  max-width: 62ch;
  margin-top: var(--s-6);
  font-size: var(--step-0);
  color: var(--ink-2);
}

/* --- Referenzkunden als laufende Logostrecke -----------------------------
   Zwei Reihen, gegenläufig und unterschiedlich schnell. Die Liste ist im
   Markup doppelt vorhanden, damit der Umlauf ohne Sprung schließt.         */
.marquee { overflow: clip; position: relative; }
.marquee + .marquee { margin-top: var(--s-3); }
.marquee__spur {
  display: flex;
  width: max-content;
  gap: var(--s-5);
  align-items: center;
  animation: marquee var(--tempo, 64s) linear infinite;
}
.marquee--rueck .marquee__spur { animation-direction: reverse; }
.marquee:hover .marquee__spur,
.marquee:focus-within .marquee__spur { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Logos laufen an den Rändern weich aus, statt hart abzuschneiden */
.marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__item {
  flex: none;
  margin: 0;
  display: grid;
  place-items: center;
  /* 96px Anzeigebreite bei 140px Quellbreite. Mehr geben die Dateien im Backup
     nicht her — die Originale gehören zu den 353 verlorenen Medien. Verkleinert
     sind sie scharf und behalten auch auf feinen Displays etwas Reserve;
     größer dargestellt müssten sie hochskaliert werden und wirken verpixelt. */
  width: 96px;
}
/* Die Quelldateien sind JPG mit weißem Grund. Auf einer grauen Fläche stünde um
   jedes Logo ein sichtbarer weißer Kasten. mix-blend-mode half nicht: opacity
   erzeugt einen eigenen Stapelkontext und isoliert die Mischung. Deshalb läuft
   die Strecke auf Weiß — dort ist schlicht nichts zu kaschieren. */
.marquee-band {
  background: var(--paper);
  border-block: var(--rule) solid var(--line);
  padding-block: var(--s-4);
  margin-top: var(--s-6);
}
.marquee__item img {
  max-width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.marquee__item:hover img { filter: grayscale(0); opacity: 1; }

/* --- Blogteaser: zurückhaltend, ohne betontes Datum ---------------------- */
.teaser-liste { display: grid; gap: var(--s-3); }
.teaser-post {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: var(--s-2);
  border-bottom: var(--rule) solid var(--line);
  text-decoration: none;
  color: inherit;
}
.teaser-post:hover { text-decoration: none; }
.teaser-post__titel {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 550;
  line-height: 1.35;
  margin: 0;
}
.teaser-post:hover .teaser-post__titel {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.teaser-post__pfeil { margin-left: auto; color: var(--ink-3); flex: none; }

/* --- Bewegung abschalten, wenn der Besucher das so eingestellt hat ------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__media img { animation: none; transform: none; }
  .hero__signet { transform: none; }
  .marquee__spur { animation: none; }
  .figure__value::after { transition: none; --strich: 68%; }
}

/* Footer wird vierspaltig — Blog zieht dort ein */
.site-footer__cols { grid-template-columns: 1.3fr 1fr 0.8fr 1.1fr; }
.teaser-liste--dunkel .teaser-post { border-bottom-color: #2b2b2b; color: var(--paper); }
.teaser-liste--dunkel .teaser-post__pfeil { color: #8f8f8f; }
.teaser-liste--dunkel .teaser-post__titel { font-size: var(--step--1); }

/* ==========================================================================
   Hero nach dem ursprünglichen Entwurf — Bild, Zitat, drei Einstiege
   Überschreibt bewusst die vorherige zweispaltige Fassung; die alten Regeln
   stehen weiter oben und bleiben für die Marken- und Rollenbausteine gültig.
   ========================================================================== */
.hero { border-bottom: 0; overflow: clip; }

.hero__bild {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 68svh, 720px);
  overflow: clip;
  background: var(--ink);
  /* html { scrollbar-gutter: stable } (base.css) reserviert bewusst Platz für
     einen Rollbalken; dadurch bleibt <body> permanent schmäler als das echte
     Fenster. Nur hier, am randabfallenden Hero-Bild, wird das ausgeglichen -
     mit dem von main.js (Abschnitt 1a) gemessenen Wert, NICHT mit vw: vw
     würde auf einem Browser mit klassischem (nicht reserviertem) Rollbalken
     zu breit ausfallen und exakt die waagerechte Scrollleiste zurückbringen,
     die an anderer Stelle bewusst vermieden wird. --rollbalken-reserve ist
     dagegen eine echte Messung und kann die Fensterbreite nie überschreiten;
     .hero { overflow: clip } fängt den Übertrag zusätzlich ab. */
  margin-right: calc(-1 * var(--rollbalken-reserve, 0px));
}
.hero__bild picture { position: absolute; inset: 0; display: block; }
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Bewegt sich langsamer als die Seite. Der Rahmen ist geclippt, deshalb
     reißt am Rand nichts auf. */
  transform: translate3d(0, calc(var(--p, 0) * 52px), 0) scale(1.12);
  will-change: transform;
  animation: hero-auf var(--dur-slow) var(--ease) both;
}
/* Schleier nur so dunkel wie nötig — das Motiv soll erkennbar bleiben,
   der Text darauf aber sicher lesbar sein. */
.hero__schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 50% 52%, rgba(17, 17, 17, 0.52), rgba(17, 17, 17, 0.26) 62%),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.16), rgba(17, 17, 17, 0.34));
}

.hero__zitat {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: var(--s-5) var(--gutter);
  /* Absolut, nicht in ch: ch misst in der geerbten Fließtextschrift, nicht in
     der viel größeren Schreibschrift — daraus wurden 210px und ein Wort je Zeile. */
  max-width: min(92%, 940px);
  text-align: center;
  color: var(--paper);
  transform: translate3d(0, calc(var(--p, 0) * -16px), 0);
}
.hero__zitat .hero__signet {
  width: 48px;
  margin: 0 auto var(--s-4);
}
.hero__zitat blockquote { margin: 0; border: 0; padding: 0; }
.hero__zitat p {
  font-family: var(--font-script);
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
}
.hero__zitat figcaption {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
/* Feine Linie über der Signatur — im Bestand stand hier ein 50px breiter
   weißer Trennstrich (av_hr custom_width='50px'). */
.hero__zitat figcaption::before {
  content: "";
  width: 50px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--s-3);
}
.hero__zitat cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
}
.hero__zitat figcaption span {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.72);
}

/* --- Die drei Einstiege ------------------------------------------------- */
.einstiege { border-bottom: var(--rule) solid var(--line); }
.einstiege__reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.einstieg {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  text-decoration: none;
  color: inherit;
  border-top: 3px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.einstieg + .einstieg { padding-left: var(--s-4); }
.einstieg:hover, .einstieg:focus-visible {
  text-decoration: none;
  border-top-color: var(--accent);
}
.einstieg__nr {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
}
.einstieg__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.einstieg__pfeil {
  margin-left: auto;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease);
}
.einstieg:hover .einstieg__pfeil { transform: translateY(4px); color: var(--ink); }

/* --- Vorstellung: gestaffelte H1 ---------------------------------------- */
.section--knapp { padding-block: clamp(var(--s-6), 7vw, var(--s-8)); }
/* Absolut, nicht in ch: ch misst bei 1rem in der Displayschrift und ergab
   knapp 280px — die Überschrift brach dann auf fünf Zeilen um. */
.vorstellung { max-width: min(100%, 46rem); }
.vorstellung__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.vorstellung__titel {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
/* Die Ortsangabe steht kleiner — gleicher Text, andere Gewichtung. */
.vorstellung__ort {
  display: block;
  font-size: 0.44em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  margin-top: var(--s-2);
}
.vorstellung .hero__roles { margin-bottom: 0; }

/* ==========================================================================
   Hero und Vorstellung — Aufbau 1:1 nach dem Bestand
   ========================================================================== */

.hero__mitte {
  position: relative;
  z-index: 1;
  max-width: min(92%, 980px);
  text-align: center;
  color: var(--paper);
  padding: var(--s-5) var(--gutter);
  transform: translate3d(0, calc(var(--p, 0) * -16px), 0);
}
.hero__mitte .hero__signet { width: 42px; margin: 0 auto var(--s-4); }

/* Vorzeile über dem Zitat — im Bestand ein eigener Textblock, nur auf Desktop
   sichtbar. Sie ordnet ein, ohne dem Zitat die Bühne zu nehmen. */
.hero__vorzeile {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

/* Das Zitat in „Dry Brush", selbst gehostet (@font-face in base.css).
   Pinselschriften laufen optisch kleiner und brauchen mehr Zeilenabstand als
   eine Grotesk — daher der größere Grad und die offenere Zeile. */
/* margin: 0 auto, nicht margin: 0 - .hero__zitat ist mit max-width schmaler
   als .hero__mitte (980px); ohne auto blieb es links buendig, waehrend das
   Signet (eigenes margin:auto) korrekt zentriert war - beides zusammen sah
   aus wie ein falsch platziertes Signet, obwohl nur das Zitat daneben lag. */
.hero__zitat { margin: 0 auto; }
.hero__zitat p {
  font-family: var(--font-script);
  /* Zusätzlich an die Fensterhöhe gekoppelt: nur nach der Breite bemessen
     wuchs das Zitat auf flachen Fenstern so weit, dass es die drei Einstiege
     unter die Falz drückte. */
  font-size: min(clamp(1.9rem, 4.6vw, 3.9rem), 8svh);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.34);
}

/* --- Die drei Einstiege: Überschrift, Satz, Pfeil ------------------------ */
.einstiege__reihe { gap: 0; }
.einstieg {
  display: block;
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  border-top: 3px solid transparent;
  border-right: var(--rule) solid var(--line);
}
.einstieg + .einstieg { padding-left: var(--s-4); }
.einstiege__reihe .einstieg:last-child { border-right: 0; }
.einstieg__kopf { display: flex; align-items: baseline; gap: var(--s-2); }
.einstieg__nr { display: block; margin-bottom: var(--s-2); }
.einstieg__satz {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}
.einstieg__pfeil { margin-left: auto; }
.einstieg:hover .einstieg__pfeil { transform: translateX(5px); }

/* --- Vorstellung -------------------------------------------------------- */
.vorstellung__kopf { margin-bottom: var(--s-6); }
.vorstellung__titel {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.vorstellung__ort {
  display: block;
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  margin-top: var(--s-2);
}
/* Der Name steht unter der Überschrift, zurückgenommen — so, wie es der
   Bestand vorsieht. */
.vorstellung__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink-3);
  margin-top: var(--s-3);
}

/* Hero und Einstiege zusammen genau eine Fensterhöhe: das Bild nimmt, was
   nach den Einstiegen übrig bleibt. So steht der ganze Einstieg über der Falz,
   ohne dass irgendwo eine Höhe geraten werden müsste. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h, 76px));
}
.hero__bild { flex: 1 1 auto; min-height: clamp(280px, 34svh, 520px); }
.einstiege { flex: 0 0 auto; }
.einstieg { padding-block: var(--s-4); }

/* Der Einstieg muss auf jeder Fensterhöhe über die Falz passen. Gemessen war
   der Zitatblock mit 613px die Untergrenze und die Einstiegsreihe 253px hoch —
   zusammen 44px zu viel bei 900px Fensterhöhe und 220px zu viel bei 700px.
   Deshalb sind Innenabstände und Schriftgrad zusätzlich an svh gekoppelt. */
.hero__mitte { padding-block: clamp(var(--s-3), 4svh, var(--s-5)); }
.hero__mitte .hero__signet { margin-bottom: clamp(var(--s-2), 2svh, var(--s-4)); }
.hero__zitat p { font-size: min(clamp(1.8rem, 4.2vw, 3.6rem), 7svh); }
.hero__zitat figcaption { margin-top: clamp(var(--s-2), 2.4svh, var(--s-4)); }
.hero__zitat figcaption::before { margin-bottom: clamp(var(--s-2), 2vh, var(--s-3)); }
.einstieg { padding-block: clamp(var(--s-3), 2.6svh, var(--s-4)); }
.einstieg__satz { line-height: 1.5; }

/* ==========================================================================
   Vorstellung — Marke, große Bezeichnung, Punktfeld im Hintergrund
   Überschreibt die vorherige Fassung: der Name steht jetzt oben neben dem
   Signet, die Berufsbezeichnung trägt als Blickfang.
   ========================================================================== */
.vorstellung { position: relative; overflow: clip; }
.punktfeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.vorstellung > .container { position: relative; z-index: 1; }

/* Lesbarkeit ueber dem Punktfeld: Einleitung und Akkordeon bekommen eine
   ruhige Papierflaeche, die Punkte bleiben in den Raendern und hinter dem
   Portraet sichtbar. padding + gleich grosses negatives margin, damit der
   Text an derselben Stelle im Raster stehen bleibt wie ohne die Flaeche -
   nur die sichtbare Flaeche wird groesser, nicht die Rasterspalte. */
.vorstellung .col-8.stack {
  position: relative;
  z-index: 2;
  background: var(--paper);
  padding: var(--s-4) var(--s-3);
  margin: calc(var(--s-4) * -1) calc(var(--s-3) * -1);
}

/* Dieselbe Punktfeld-Bühne, allgemein nutzbar für weitere Sektionen
   (Arbeitsproben- und Blog-Übersicht) - .vorstellung trägt daneben noch
   eigene, dort nicht passende Regeln (max-width etc.), deshalb ein eigenes
   Modifier statt die Klasse dort zu erweitern. */
.section--punktfeld { position: relative; overflow: clip; }
.section--punktfeld > .container { position: relative; z-index: 1; }

.vorstellung__kopf {
  margin-bottom: clamp(var(--s-6), 7vw, var(--s-8));
  max-width: 18ch;
}
/* Signet und Name in einer Zeile — die Marke steht vor der Aussage. */
.vorstellung__marke {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.vorstellung__signet { width: 26px; flex: none; color: var(--accent); }
.vorstellung__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}

/* Der Blickfang. Deutlich größer als zuvor und mit leichterem Schnitt —
   große Grade wirken bei 700er Fettung erschlagend, nicht souverän. */
.vorstellung__titel {
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}
.vorstellung__ort {
  display: block;
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  margin-top: var(--s-3);
}

/* Korrektur zweier Erblasten aus der vorigen Fassung:
   1. .vorstellung war dort ein Div INNERHALB der Sektion und trug max-width:46rem.
      Seit die Klasse an der <section> hängt, kappte diese Regel die ganze
      Sektion auf 736px — Raster und Container inbegriffen.
   2. max-width in ch misst in der geerbten Fließtextschrift, nicht in der
      83px großen Überschrift. Aus 18ch wurden 169px und sechs Zeilen. */
.section.vorstellung { max-width: none; }
.vorstellung__kopf { max-width: min(100%, 64rem); }

/* Untergrenze für die Ortsangabe: 0.3em der Überschrift ergibt auf 390px
   Breite nur noch 11,5px. Sie skaliert mit, fällt aber nie unter die
   Fließtextgröße — sie gehört zur H1 und muss lesbar bleiben. */
.vorstellung__ort { font-size: max(0.3em, var(--step-0)); }

/* ==========================================================================
   Formular — Kontaktseite
   Keine eigene Optik erfunden: dieselben Mittel wie im Rest des Systems
   (Haarlinie statt Schatten, radius 0, Akzent nur im Fokusring).
   ========================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--col-gap);
}
.form-feld { margin-bottom: var(--s-4); }
.form-feld--voll { grid-column: 1 / -1; }
.form-feld label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-1);
}
.form-feld input,
.form-feld textarea {
  width: 100%;
  padding: var(--s-2);
  border: var(--rule) solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease);
}
.form-feld input:hover,
.form-feld textarea:hover { border-color: var(--ink-3); }
.form-feld textarea { resize: vertical; min-height: 8rem; }
.form-hinweis {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-top: var(--s-2);
  max-width: var(--measure);
}
.form-feld--einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--step--1);
  color: var(--ink-2);
}
/* width: auto ist der eigentlich entscheidende Teil dieser Regel. Die
   allgemeine ".form-feld input { width: 100% }" weiter oben gilt auch fuer
   diese Checkbox; "flex: none" ueberschreibt zwar flex-basis, nicht aber
   width - die Checkbox beanspruchte dadurch unsichtbar 100% der Zeilenbreite
   (1208px) als Flex-Basis, verdraengte das Label auf 0px Breite, und dessen
   Inhalt (der Datenschutz-Link) ragte sichtbar 44px ueber den Formularrand
   hinaus. document.documentElement.scrollWidth zeigte das NICHT an: die
   Sicherung html,body{overflow-x:clip} in base.css verhindert zwar eine
   Scrollleiste, macht scrollWidth dafuer aber blind gegen genau diesen Fall.
   Gefunden ueber eine element-genaue getBoundingClientRect-Pruefung
   (rebuild_alle_ueberstaende.py, rebuild_link_diag.py). */
.form-feld--einwilligung input { width: auto; margin-top: 0.3em; flex: none; }
/* min-width: 0 zusaetzlich als Sicherheitsnetz: Flex-Kinder verweigern per
   Spec-Voreinstellung (min-width: auto) das Schrumpfen unter ihre
   intrinsische Inhaltsbreite - ohne das koennte ein langer Einwilligungstext
   denselben Fehler auf andere Weise wieder herstellen. */
.form-feld--einwilligung label { display: inline; font: inherit; margin: 0; min-width: 0; flex: 1 1 auto; }
.form-status {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 3px solid var(--ink);
  font-size: var(--step--1);
}
.form-status--ok { border-left-color: var(--accent); }
.form-status--fehler { border-left-color: #b3261e; }
/* Honeypot gegen einfache Formular-Bots: fuer Menschen nicht auffindbar
   (kein Tab-Stop, aus dem Bild geschoben statt display:none - manche Bots
   ueberspringen display:none gezielt). */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
altcha-widget {
  margin-top: var(--s-3);
  display: block;
  --altcha-color-base: var(--paper);
  --altcha-color-base-content: var(--ink);
  --altcha-border-color: var(--ink-3);
  --altcha-checkbox-border-color: var(--ink-3);
  --altcha-color-primary: var(--accent);
  --altcha-color-primary-content: var(--accent-ink);
  --altcha-color-neutral: var(--paper-2);
  --altcha-color-neutral-content: var(--ink);
  --altcha-max-width: 100%;
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}