/* ==========================================================================
   TRE MANI — Edizione I · Il Primo Mano
   Werte stammen aus design_handoff_tre_mani_website/README.md + den Prototypen.
   Radius ist überall 4px, Schatten gibt es keine: Tiefe kommt aus Flächenfarbe
   und Haarlinien. Das ist Absicht und keine Sparmaßnahme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Markenfarben */
  --olivenhain: #55603a;
  /* Vier Prozent dunkler als das urspruengliche #A65E2E. Der alte Wert lag auf
     Kalkputz bei 4,29:1 und verfehlte damit AA fuer Normaltext — und zwar in
     beide Richtungen: als Linkfarbe, als Eyebrow und als Grund des
     Primaerknopfs, auf dem Kalkputz-Text steht. #9F5A2C bringt 4,59:1, der
     Unterschied betraegt sieben, vier und zwei Stufen pro Kanal. */
  --terracotta: #9f5a2c;
  --olio: #c9a227;

  /* Die drei Sortenfarben. Standen vorher als rohe Hexwerte im style-Attribut
     der Oelkarten — darunter einmal #C9A227, also zeichengleich mit --olio.
     Wird das Gold je nachjustiert, zog diese eine Stelle nicht mit. */
  --dot-leggero: #d9c86a;
  --dot-medio: var(--olio);
  --dot-intenso: #7e8b3e;

  /* Zwei Lesefassungen des Goldes. Olio Nuovo selbst ist ein Mittelton und
     trägt als Fläche, Linie und Badge-Füllung — als Text scheitert es aber
     an WCAG AA: auf Olivenhain nur 2,2–2,8:1, auf Karte 2,3:1. Deshalb
     heller für Text auf Oliv, dunkler für Text auf hellem Grund. Beide
     bleiben erkennbar Gold; wo Olio Nuovo keine Schrift ist, bleibt es. */
  --olio-auf-oliv: #efdca0; /* Text auf --olivenhain   — 4,9:1 */
  --olio-auf-hell: #a5851c; /* Text auf --karte        — 3,3:1 (Großtext) */

  --kalkputz: #f4efe3;
  --karte: #fbf8f0;
  --steineiche: #2a2620;
  --nero: #12100e; /* nur Produktpanels, nie Seitenhintergrund */

  /* Abgeleitete Alphawerte. Nicht weiter aufhellen — sonst kippt der Kontrast. */
  --ink-74: rgba(42, 38, 32, 0.74);
  --ink-72: rgba(42, 38, 32, 0.72);
  --ink-70: rgba(42, 38, 32, 0.7);
  --ink-68: rgba(42, 38, 32, 0.68);
  --ink-66: rgba(42, 38, 32, 0.66);
  --ink-64: rgba(42, 38, 32, 0.64);
  --ink-60: rgba(42, 38, 32, 0.6);
  --ink-50: rgba(42, 38, 32, 0.5);
  --ink-20: rgba(42, 38, 32, 0.2);
  --ink-12: rgba(42, 38, 32, 0.12);
  --hairline: rgba(42, 38, 32, 0.14);

  --lime-85: rgba(244, 239, 227, 0.85);
  --lime-80: rgba(244, 239, 227, 0.8);
  --lime-78: rgba(244, 239, 227, 0.78);
  --lime-75: rgba(244, 239, 227, 0.75);
  --lime-70: rgba(244, 239, 227, 0.7);
  --lime-62: rgba(244, 239, 227, 0.62);
  --lime-55: rgba(244, 239, 227, 0.55);
  --lime-50: rgba(244, 239, 227, 0.5);
  --hairline-dark: rgba(244, 239, 227, 0.22);

  /* Schrift */
  --serif: 'Marcellus', 'Times New Roman', Georgia, serif;
  --sans: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;

  /* Maß */
  --container: 1180px;
  --container-narrow: 820px;
  --pad-x: clamp(20px, 4vw, 44px);
  --pad-x-narrow: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 7vw, 92px);
  --radius: 4px;
  --card-pad: clamp(26px, 3vw, 36px);

  /* Bewegung. Die CSS-Standardkurven sind zu weich, deshalb eigene. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 160ms;
  --t-reveal: 520ms;
}

/* --------------------------------------------------------------------------
   2 · Grundlagen
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anker dürfen nicht unter den Sticky-Header rutschen. Die echte Kopfhöhe
     setzt das Skript als --kopfhoehe; der Wert hier ist nur die Rückfallebene
     für den Fall, dass es nicht läuft. Seit der Lockup senkrecht steht, ist
     der Kopf je nach Breite unterschiedlich hoch — eine feste Zahl wäre auf
     einer der beiden Seiten falsch. */
  scroll-padding-top: calc(var(--kopfhoehe, 92px) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kalkputz);
  color: var(--steineiche);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

a {
  color: var(--terracotta);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}

a:hover {
  color: var(--olivenhain);
  text-decoration: underline;
}

/* Fokus nur bei Tastaturnutzung, aber dann deutlich. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400; /* Marcellus hat genau einen Schnitt — niemals fett setzen. */
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3 · Layout
   -------------------------------------------------------------------------- */
/* Ab sehr breiten Schirmen darf der Satzspiegel mitwachsen. Bei 1180 px
   blieben auf einem 2560er Monitor links und rechts je rund 680 px leer —
   die Seite wirkte wie ein schmaler Streifen. 1360 px füllt spürbar besser,
   ohne die Lesbarkeit anzutasten: die Textblöcke haben eigene ch-Grenzen
   (48ch im Hero, 66–72ch in den Fließtexten) und werden dadurch nicht länger.
   Laptop- und Handybreiten bleiben unberührt. */
@media (min-width: 1600px) {
  :root {
    --container: 1360px;
  }
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.wrap--narrow {
  max-width: var(--container-narrow);
  padding-inline: var(--pad-x-narrow);
}

/* Abschnitte auf hellem Grund tragen nur oben Abstand; der nächste Abschnitt
   liefert den Rest. Der letzte vor einer dunklen Fläche schließt selbst ab. */
.section {
  padding-top: var(--section-y);
}

.section--close {
  padding-bottom: var(--section-y);
}

.section--dark {
  background: var(--steineiche);
  color: var(--kalkputz);
  margin-top: var(--section-y);
  padding-block: var(--section-y);
}

.section--olive {
  background: var(--olivenhain);
  color: var(--kalkputz);
  padding-block: clamp(26px, 3vw, 38px);
}

/* Grids kollabieren von selbst — keine Media Queries nötig.
   min-width:0 verhindert, dass lange Wörter die Spalte sprengen. */
.grid {
  display: grid;
  gap: 18px;
}

.grid > * {
  min-width: 0;
}

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--mano { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--oel { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
/* Die Ablaufkarten stehen in einer <ol>: Listenpunkte und Eigenabstand raus.
   Stand vorher als Inline-Style am Element. */
.grid--ablauf {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.grid--trust {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.grid--split {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Zwei Textkarten nebeneinander: hier ist Strecken falsch. Die kuerzere
   bekaeme sonst 155 px leeren Boden, und das liest sich wie ein Fehler statt
   wie Absicht. Wo eine Karte gegen ein Bild oder ein Formular steht, bleibt
   es beim Strecken — dort sollen die Kanten zusammenfallen. */
.grid--split--oben {
  align-items: start;
}
.grid--fotos {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

/* Zwei Bilder statt vier: breitere Spalten und mehr Hoehe, sonst stuenden
   zwei 539 px breite Fotos in einem 220-px-Streifen. */
.grid--fotos--gross {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

/* --------------------------------------------------------------------------
   4 · Typografie-Bausteine
   -------------------------------------------------------------------------- */
/* Abstand vor einem Raster oder einer Karte. Vorher standen dafuer fuenf
   verschiedene Inline-Werte im Markup (0, 10, 18, 28, 34 px), die in keiner
   Skala lagen. Ueberschriften, denen Fliesstext folgt, behalten den
   Standardwert aus .h2. */
.abstand-block {
  margin-bottom: 28px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--terracotta);
  margin-bottom: 12px;
}

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

.h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.1;
}

.h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--olivenhain);
  margin-bottom: 16px;
}

.section--dark .h2 {
  color: var(--kalkputz);
}

.lead {
  font-size: clamp(16.5px, 1.4vw, 18.5px);
  line-height: 1.65;
  color: var(--ink-72);
  max-width: 70ch;
}

.section--dark .lead {
  color: var(--lime-78);
  max-width: 72ch;
}

/* Zwei Vorspannabsaetze hintereinander brauchen eine Fuge. p traegt margin: 0,
   und .lead setzt keinen Eigenabstand — ohne diese Regel lesen sich zwei
   aufeinanderfolgende Absaetze wie einer. */
.lead + .lead {
  margin-top: 15px;
}

/* --------------------------------------------------------------------------
   5 · Wortmarke & Logo

   Der Lockup ist das Originallogo aus assets/img/logo.svg, hier aber in
   HTML/CSS nachgebaut statt als Bild eingebunden. Drei Gründe:
   · Die SVG-Datei enthält echten <text>. Als <img> geladen, sieht sie die
     Webfonts der Seite nicht und fiele auf Times zurück.
   · So bleibt „TRE MANI“ auswählbarer, vorlesbarer Text.
   · Der Animations-Handoff macht es selbst so (ein <span> je Zeichen).

   Die Proportionen stammen aus dem Logo (Canvas 440×170): Wortmarke 44,
   Laufweite 10 → 0.227em; Herkunftszeile 13, Laufweite 6 → 0.46em.
   Eine Abweichung ist Absicht: die Herkunftszeile wäre maßstabsgetreu nur
   5,5 px groß — der Handoff sagt dazu selbst „below ~180 px width drop the
   origin line“. Statt sie zu streichen, steht sie hier auf lesbaren 9 px.
   -------------------------------------------------------------------------- */
.marke {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.marke:hover {
  color: inherit;
  text-decoration: none;
}

.marke__wort {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.227em;
  color: var(--steineiche);
  margin-top: 7px;
  /* Laufweite hängt auch hinter dem letzten Buchstaben — ohne Ausgleich
     säße die zentrierte Zeile um die halbe Laufweite zu weit rechts. */
  margin-right: -0.227em;
  white-space: nowrap;
}

.marke__herkunft {
  display: block;
  font-family: var(--serif);
  /* Maßstabsgetreu wären das 5,5px. Der Handoff sagt dazu „below ~180 px
     width drop the origin line“ — statt sie zu streichen, steht sie hier auf
     10px. Darunter ist gesperrte Versalschrift nicht mehr zu entziffern. */
  font-size: 10px;
  letter-spacing: 0.46em;
  color: var(--terracotta);
  margin-top: 6px;
  margin-right: -0.46em;
  white-space: nowrap;
}

/* Auf Dunkel dreht sich die Helligkeit um. */
.marke--dunkel .marke__wort { color: var(--kalkputz); }
.marke--dunkel .marke__herkunft { color: var(--olio); }

/* Das Zeichen: Zweig mit drei Blättern, das obere in Gold. Genau eine
   Goldbetonung, nie mehr — die drei Blätter stehen für die drei Erzeuger. */
.mark {
  flex: none;
}

/* Im Lockup gibt die Höhe den Ton an, die Breite folgt dem Seitenverhältnis
   des Zweigs (36 : 62). Feste Breite und Höhe zugleich würde ihn stauchen. */
.marke .mark {
  height: 28px;
  width: auto;
}

.mark__stem { fill: none; stroke: var(--olivenhain); stroke-width: 2.4; stroke-linecap: round; }
.mark__leaf--gold { fill: var(--olio); }
.mark__leaf--oliv { fill: var(--olivenhain); }

/* Olivenhain auf Steineiche wäre kaum zu erkennen, deshalb im Footer heller. */
.mark--dunkel .mark__stem { stroke: rgba(244, 239, 227, 0.62); }
.mark--dunkel .mark__leaf--oliv { fill: rgba(244, 239, 227, 0.52); }

/* --------------------------------------------------------------------------
   6 · Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 227, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  transition: border-color 200ms ease;
}

/* Nach dem ersten Scrollen wird die Kante minimal deutlicher — genug, damit der
   Header sich von der Seite abhebt, zu wenig, um aufzufallen. */
.header[data-scrolled='true'] {
  border-bottom-color: rgba(42, 38, 32, 0.22);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  position: relative;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
  font-size: 15.5px;
  font-weight: 500;
}

.nav a {
  color: var(--steineiche);
  position: relative;
  padding-block: 4px;
  text-decoration: none;
}

.nav a:hover {
  color: var(--terracotta);
  text-decoration: none;
}

/* Aktiver Abschnitt: 2px Terracotta-Linie, die von links einwächst.
   clip-path statt width, damit nichts umbricht. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--terracotta);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 220ms var(--ease-out);
}

.nav a[aria-current='true'] {
  color: var(--terracotta);
}

.nav a[aria-current='true']::after {
  clip-path: inset(0 0 0 0);
}

/* Burger — erst unterhalb von 920px sichtbar.
   War 860px. Mit dem siebten Eintrag („Die Einladung") brach die Leiste
   bei 861px auf zwei Zeilen um: die Navigation misst dort 533px, der
   Lockup daneben laesst ihr nicht genug. Bei 920px bleiben rund 50px
   Fuge zwischen Wortmarke und erstem Eintrag. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 9px 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--steineiche);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease;
}

.nav-toggle:active {
  transform: scale(0.97);
}

.nav-toggle__bars {
  position: relative;
  width: 16px;
  height: 10px;
  flex: none;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--steineiche);
  transition: transform 220ms var(--ease-out), opacity 140ms ease;
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 4.25px; }
.nav-toggle__bars span:nth-child(3) { top: 8.5px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(4.25px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-4.25px) rotate(-45deg);
}

@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Der senkrechte Lockup kostet Höhe. Auf schmalen Schirmen ist der
     Sticky-Header sonst ein Fünftel des Bildes. */
  .header .marke .mark { height: 23px; }
  .header .marke__wort { font-size: 16px; margin-top: 5px; }
  /* Nicht weiter als auf 9px herunter — gesperrte Versalien werden sonst
     unleserlich, und die Zeile trägt die Herkunft, also echte Information. */
  .header .marke__herkunft { font-size: 9px; margin-top: 4px; letter-spacing: 0.38em; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--kalkputz);
    border-bottom: 1px solid var(--hairline);
    padding: 6px var(--pad-x) 16px;
    font-size: 17px;

    /* Um die eigene Höhe nach oben geschoben und weggeblendet.
       Kein display:none — sonst lässt sich nichts animieren. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 240ms var(--ease-out), opacity 180ms ease,
      visibility 0s linear 240ms;
  }

  .nav[data-open='true'] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 240ms var(--ease-out), opacity 180ms ease, visibility 0s;
  }

  .nav a {
    padding: 13px 2px;
    border-bottom: 1px solid var(--hairline);
  }

  .nav a:last-child {
    border-bottom: none;
  }

  .nav a::after {
    left: -8px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    clip-path: inset(100% 0 0 0);
  }

  .nav a[aria-current='true']::after {
    clip-path: inset(0 0 0 0);
  }
}

/* Ganz schmale Schirme. Bei 320 px bleiben nach dem Satzspiegel 280 px; der
   Lockup mass dort 197 px, dazu 20 px Fuge und 95 px Menuknopf — zusammen
   312 px, und der Knopf schob die Seite 12 px nach rechts. Breitenbestimmend
   ist die gesperrte Herkunftszeile, nicht die Wortmarke. Weniger Sperrung
   statt kleinerer Schrift: 9 px sind bei Versalien die Untergrenze, die
   Sperrung hat dagegen Luft. */
@media (max-width: 380px) {
  .header .marke__herkunft {
    letter-spacing: 0.2em;
  }
}

/* --------------------------------------------------------------------------
   7 · Hero
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 52px);
  /* Oben ansetzen, nicht mittig. Der Text wiegt 314 px, das Produktpanel gut
     das Doppelte — zentriert stand ueber der Ueberschrift ein Loch von rund
     140 px, und das Auge fiel sofort nach rechts. Jetzt beginnen beide Spalten
     auf derselben Linie. */
  align-items: start;
  padding-block: clamp(36px, 5vw, 64px) clamp(40px, 5vw, 72px);
}

.hero > * {
  min-width: 0;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Die Spalte arbeitet mit gap: 20px — der Eigenabstand der Eyebrow kaeme
   oben drauf und risse die Zeile von der Ueberschrift ab. */

/* Der Schriftgrad steht hier ausdruecklich, weil er sonst gar nicht greift:
   `.hero__text p` hat mit 0,1,1 die hoehere Spezifitaet als `.eyebrow` mit
   0,1,0 und ueberschrieb dessen 13 px mit seinen 20 px. Die Hero-Eyebrow war
   damit als einzige von neun aus der Reihe — versehentlich, nicht entworfen.
   Sie bleibt groesser als die Abschnitts-Eyebrows, weil sie eine andere
   Aufgabe hat: sie sagt als einzige Zeile der Seite, worum es ueberhaupt
   geht. 16 px statt der geerbten 20 — gesperrte Versalien wirken deutlich
   groesser als Gemischtsatz derselben Groesse. */
.hero__text .eyebrow {
  margin-bottom: 0;
  font-size: 16px;
  /* .hero__text p gibt allen Absaetzen der Spalte max-width: 48ch — ein
     Zeilenmass fuer Fliesstext. Auf ein gesperrtes Versallabel gehoert es
     nicht, und ch skaliert mit dem Schriftgrad: beim Verkleinern von 20 auf
     16 px wurde die Grenze schneller enger als der Text schmaler, und die
     Zeile brach mitten im Begriff um. */
  max-width: none;
}

.hero__text p {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-72);
  max-width: 48ch;
}

/* Produktpanel: Nero ist Fogliantica-Gastfarbe und bleibt auf Produkte begrenzt. */
/* Sortenreihe in der Heldenspalte. Steht anstelle der drei Markenchips, die
   neben dem 741 px hohen Panel untergingen. Sie nennt zum ersten Mal im
   ersten Bildschirm, was in der Box liegt — und zeigt dieselben drei Sorten,
   die auf dem Foto daneben stehen.

   Die Punkte sind dieselbe Mechanik wie in den Oelkarten: die Fuellung haengt
   an [data-intensity], die Farbe an den --dot-Token. Dekorativ, deshalb
   aria-hidden — die Intensitaet steht als Wort daneben. */
.sorten {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sorten__titel {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--olivenhain);
}

.sorten__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sorte {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  /* Die Zeile darf umbrechen. Ihre Breite haengt an der Heldenspalte, nicht
     an der Fensterbreite: einspaltig am Handy misst sie 320 px, im schmalen
     Zweispalter um 768 px ebenfalls rund 340 px. Ein Haltepunkt traefe also
     immer nur einen der beiden Faelle. So rutscht die Intensitaetszeile von
     selbst nach unten, wenn sie nicht mehr danebenpasst. */
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.sorte:last-child {
  border-bottom: 1px solid var(--hairline);
}

.sorte[data-intensity="1"] { --dot: var(--dot-leggero); }
.sorte[data-intensity="2"] { --dot: var(--dot-medio); }
.sorte[data-intensity="3"] { --dot: var(--dot-intenso); }

.sorte__name {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--steineiche);
  flex: none;
  min-width: 6.4em;
}

.sorte__punkte {
  display: flex;
  gap: 5px;
  flex: none;
}

.sorte__punkte span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-12);
}

.sorte[data-intensity="1"] .sorte__punkte span:nth-child(-n + 1),
.sorte[data-intensity="2"] .sorte__punkte span:nth-child(-n + 2),
.sorte[data-intensity="3"] .sorte__punkte span:nth-child(-n + 3) {
  background: var(--dot);
}

.sorte__wort {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-64);
  text-align: right;
  /* Nimmt den Rest der Zeile und darf schrumpfen. Vorher stand hier
     margin-left: auto — eine Automarge schluckt den freien Raum aber, bevor
     der Flexumbruch ueberhaupt greift: bei 320 px Fenster wurde die Zeile
     dadurch 320 px breit in einem 280 px breiten Satzspiegel, und die
     Bezeichnung lief rechts aus dem Bild. min-width: 0 hebt die
     Vorgabegroesse min-content auf, sonst schrumpft ein Flexkind nicht
     unter sein laengstes Wort. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Die Eckdaten, die vorher die Chips trugen. Als ruhige Zeile, damit sie
   die Sortenreihe darueber nicht schlagen. */
.sorten__fuss {
  font-size: 14.5px;
  letter-spacing: 0.3px;
  color: var(--ink-64);
}

.panel {
  background: var(--nero);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Das Foto fuellt das Panel randlos, im Seitenverhaeltnis seines eigenen
   Ausschnitts (768:880). Es bringt einen Hintergrund mit — Holztisch, helle
   Wand —, und genau deshalb waere Zentrieren hier falsch: die Aufnahme
   saesse als helles Rechteck mit sichtbarer Kante im Nero.

   Zwischendurch stand hier object-fit: contain, fuer eine freigestellte
   Fassung ohne eigenen Hintergrund. Die ist abgeloest. Merksatz fuer den
   naechsten Bildwechsel: freigestellt -> contain mit Polster, mit
   Hintergrund -> cover ohne. */
.panel__media {
  flex: none;
  display: block;
  padding: 0;
  min-height: 0;
  aspect-ratio: 768 / 880;
  overflow: hidden;
}

.panel__media picture {
  display: block;
  height: 100%;
}

.panel__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.panel__caption {
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 36px) clamp(22px, 2.8vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.panel__rule {
  height: 2px;
  width: 46px;
  background: var(--olio);
  margin-bottom: 6px;
}

.panel__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--kalkputz);
  letter-spacing: 0.5px;
}

.panel__meta {
  font-size: 16px;
  line-height: 1.5;
  color: var(--lime-70);
}

/* Gleiche Behandlung wie im Hero. Das Raster zieht das Panel auf die Hoehe
   der Textkarte daneben, deshalb hier keine feste Verhaeltnisangabe: das
   Bild fuellt, was es bekommt. */
.panel--box {
  display: block;
  padding: 0;
  min-height: clamp(320px, 36vw, 460px);
  overflow: hidden;
}

.panel--box picture {
  display: block;
  height: 100%;
}

.panel--box img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8 · Vertrauensleiste
   -------------------------------------------------------------------------- */
.trust__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Die Leiste steht im ersten Bildschirm, in drei Spalten von 340 px, direkt
   unter einer Unterzeile von 20 px. Sie trug bis hierher das kleinste
   Schriftpaar der Seite (21/15,5) — dasselbe wie die Ablaufkarten, die aber
   zu viert in 230-px-Spalten weit unten stehen: gleiche Groesse, zwei ganz
   verschiedene Aufgaben. Seit die Texte auf je eine Zeile gekuerzt sind, ist
   auch der Platz da. 17 px ist der Grundwert der Seite (body, .textkarte > p,
   .kontakt-karte p) — die Leiste liegt damit nicht mehr unter dem Fliesstext,
   den sie ankuendigt. */
.trust__title {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--olio-auf-oliv);
}

.trust__body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--lime-85);
}

/* Zwischen rund 620 und 900 px quetscht das Raster drei Spalten auf je 220 px.
   Nur dort wird zurueckgenommen — und zwar ueber eine Media Query statt ueber
   ein clamp(): ein clamp haengt an der Fensterbreite, nicht an der
   Spaltenbreite. Der erste Versuch, clamp(21px, 1.7vw, 24px), erreichte seinen
   Hoechstwert erst ab 1412 px Fenster und lieferte auf einem 1280er Laptop
   21,8 px — also praktisch den alten Wert, genau dort, wo die meisten sitzen.
   Am Handy steht die Leiste einspaltig ueber die volle Breite und braucht die
   Ruecknahme deshalb nicht. */
@media (min-width: 620px) and (max-width: 900px) {
  .trust__title {
    font-size: 21px;
  }

  .trust__body {
    font-size: 16.5px;
  }
}

/* --------------------------------------------------------------------------
   9 · Karten
   -------------------------------------------------------------------------- */
.card {
  background: var(--karte);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.card__title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--steineiche);
}

.card__body {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   10 · Mano-Zähler
   Der gesamte Zustandsunterschied hängt an data-status. Eine Hand zu bestätigen
   heißt: data-status auf "confirmed" setzen, Namen und Absatz austauschen.
   Kein CSS anfassen, kein Markup umbauen.
   -------------------------------------------------------------------------- */
.mano {
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.mano[data-status='confirmed'] {
  background: rgba(244, 239, 227, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.4); /* durchgezogen = belegte Tatsache */
}

.mano[data-status='pending'] {
  background: rgba(244, 239, 227, 0.03);
  border: 1px dashed rgba(244, 239, 227, 0.3); /* gestrichelt = angekündigt, offen */
}

.mano__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mano__label {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 4px;
}

.mano[data-status='confirmed'] .mano__label { color: var(--olio); }
.mano[data-status='pending'] .mano__label { color: var(--lime-55); }

/* Jede Hand steht für ein Jahr: 2026, 2027, 2028. Die Zahl sitzt unmittelbar
   über dem Namen, deshalb der negative Abstand — sie gehört zum Namen und
   nicht in die Reihe der übrigen Kartenelemente mit ihren 13px Abstand. */
.mano__jahr {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: -7px;
}

.mano[data-status='confirmed'] .mano__jahr { color: var(--olio); }
.mano[data-status='pending'] .mano__jahr { color: var(--lime-55); }

.mano__name {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
}

.mano[data-status='pending'] .mano__name { color: var(--lime-50); }

.mano__body {
  font-size: 16px;
  line-height: 1.55;
}

.mano[data-status='confirmed'] .mano__body { color: var(--lime-80); }
.mano[data-status='pending'] .mano__body { color: var(--lime-62); }

/* Das Blattzeichen der Karte folgt demselben Schalter. */
.mano__mark { margin-block: 2px; }
.mano__mark .mark__stem { stroke: rgba(244, 239, 227, 0.4); stroke-width: 2; stroke-linecap: butt; }
.mano__mark .mark__leaf { fill: var(--olio); stroke: none; }

.mano[data-status='pending'] .mano__mark .mark__stem { stroke: rgba(244, 239, 227, 0.25); }
.mano[data-status='pending'] .mano__mark .mark__leaf {
  fill: none;
  stroke: rgba(244, 239, 227, 0.45);
  stroke-width: 1.6;
}

/* Badge: Goldfüllung = bestätigt, Kontur = noch offen */
.badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  border-radius: 3px;
  padding: 5px 10px;
  white-space: nowrap;
}

.mano[data-status='confirmed'] .badge {
  color: var(--steineiche);
  background: var(--olio);
  border: 1px solid var(--olio);
}

.mano[data-status='pending'] .badge {
  color: var(--lime-70);
  border: 1px solid rgba(244, 239, 227, 0.35);
  background: transparent;
}

/* Gleicher Grad und gleiche Helligkeit wie der Vorspann ueber den Karten.
   Vorher stand hier 16 px in Lime 70 % gegen 18,5 px in Lime 78 % darueber —
   ausgerechnet der Satz, der sagt, was das alles fuer den Besteller heisst,
   war der leiseste des Abschnitts. */
.mano-note {
  margin-top: 26px;
  font-size: clamp(16.5px, 1.4vw, 18.5px);
  line-height: 1.65;
  color: var(--lime-78);
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   11 · Fogliantica
   -------------------------------------------------------------------------- */
.foto-block {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: clamp(280px, 32vw, 420px);
}

.foto-block img {
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 32vw, 420px);
  object-fit: cover;
}


/* Randloses Bildband. Traegt die ganze Fensterbreite, deshalb steht es im
   Markup ausserhalb von .wrap. Am Handy ein hoeheres Seitenverhaeltnis:
   bei 16:9 waere das Band auf 390 px Breite nur 219 px hoch und das Foto
   damit kleiner als vorher. Die Gasse steht mittig im Bild, deshalb
   uebersteht derselbe Ausschnitt beide Formate. */
.bildband {
  margin-block: clamp(26px, 3.5vw, 44px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.bildband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 920px) {
  .bildband {
    aspect-ratio: 16 / 9;
  }
}

/* Die beiden Absaetze der Ortskarte standen frueher ueber die volle
   Rasterbreite und liefen dabei auf 82 Zeichen. In der Reihe neben der
   Textkarte sind es rund 62 — die Inline-Angaben im Markup entfallen. */
.card__body--gross {
  font-size: 17px;
  line-height: 1.6;
}

.textkarte {
  background: var(--karte);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Nur die eigenen Absätze der Karte, nicht alles Verschachtelte.
   Als Nachfahren-Regel (`.textkarte p`) griff das auch auf die Absätze in
   .stat und übersteuerte sie: `.textkarte p` hat die höhere Spezifität als
   `.stat__zahl`, weshalb die Kennzahlen mit 17px statt der im Handoff
   vorgeschriebenen 26px Marcellus in Olivenhain gerendert haben. */
.textkarte > p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-74);
}

.logo-guest {
  width: 132px;
  max-width: 50%;
  height: auto;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.stat {
  padding-top: 14px;
  border-top: 2px solid var(--olio);
}

.stat__zahl {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--olivenhain);
}

.stat__label {
  font-size: 14.5px;
  color: var(--ink-66);
  line-height: 1.4;
}

/* Fotogrid — die Bilder sind per Klick vergrößerbar */
.foto {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--karte);
  border: 1px solid var(--hairline);
}

/* Höhe folgt der Spaltenbreite über aspect-ratio, nicht mehr über eine feste
   clamp(…vw…)-Höhe. Der Unterschied ist kein Kosmetikpunkt: alle sechs Fotos
   in beiden Rastern sind serverseitig einheitlich auf 800×620 zugeschnitten
   (tools/optimize-images.mjs) — 40:31. Eine feste Höhe unabhängig von der
   tatsächlichen Spaltenbreite passt nur zufällig zu diesem Verhältnis; bei
   einer Spalte (Handy, volle Breite) klaffte sie weit auseinander (Spalte
   2,17:1 gegen Bild 1,29:1) und object-fit: cover schnitt 41 % der Bildhöhe
   oben und unten weg — auf dem Smartphone sahen die Fotos entsprechend
   schmal und abgeschnitten aus. Mit aspect-ratio bleibt die Höhe bei jeder
   Spaltenbreite im richtigen Verhältnis, exakt im zugeschnittenen Rahmen.
   .grid--fotos--gross braucht deshalb keine eigene Höhe mehr: ihre Spalten
   sind breiter (minmax(300px, …) statt minmax(200px, …)), die Bilder werden
   über dieselbe Regel automatisch proportional höher. */
.foto img {
  width: 100%;
  /* height: auto ist Pflicht, nicht Kosmetik: die <img>-Elemente tragen
     height="620" als HTML-Attribut (fürs CLS-freie Laden vor dem Laden des
     CSS). Ohne dieses height:auto wirkt das Attribut als Präsentations-Hinweis
     mit eigenem Gewicht — dann stehen width UND height beide fest, und
     aspect-ratio hat nichts mehr zu berechnen. Geprüft: ohne diese Zeile
     rendert der Browser exakt 620px hoch, komplett unabhängig vom Wert oben. */
  height: auto;
  aspect-ratio: 40 / 31;
  object-fit: cover;
  transition: transform 420ms var(--ease-out);
}

.foto figcaption {
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ink-66);
}

.foto__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}

/* Hover-Effekte nur dort, wo es echten Hover gibt — auf Touch löst ein Tap
   sonst den Hoverzustand aus, und der bleibt hängen. */
@media (hover: hover) and (pointer: fine) {
  .foto__btn:hover img {
    transform: scale(1.03);
  }
}

.foto__btn:active img {
  transform: scale(1.01);
}

.foto__lupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(18, 16, 14, 0.62);
  border-radius: var(--radius);
  color: var(--kalkputz);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .foto__btn:hover .foto__lupe,
  .foto__btn:focus-visible .foto__lupe {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   12 · Box & Badges
   -------------------------------------------------------------------------- */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.badge--gold {
  font-size: 11px;
  color: #8a6e14;
  border: 1px solid var(--olio);
  background: rgba(201, 162, 39, 0.12);
}

.badge--oliv {
  font-size: 11px;
  color: var(--olivenhain);
  border: 1px solid var(--olivenhain);
}

.box-titel {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 32px);
  color: var(--steineiche);
}

/* Ersetzt die Inline-Schriftwerte, die vorher im Markup standen. */
.box-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-72);
}

/* Die Kennzahlenreihe der Box steht in einer schmaleren Spalte als die in
   „Der Ort" — dort teilen sich drei Werte 547 px, hier ebenso, aber mit
   laengeren Beschriftungen. Etwas kleinere Zahlen halten die drei Spalten
   nebeneinander, statt sie umbrechen zu lassen. */
.textkarte .stats .stat__zahl {
  font-size: 23px;
}

.box-liste {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-74);
}

.box-liste li::marker {
  color: var(--olio);
}

.karte-fuss {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-64);
}

/* --------------------------------------------------------------------------
   13 · Die drei Öle
   Intensität steckt in data-intensity, die Füllfarbe in --dot.
   -------------------------------------------------------------------------- */
/* Ersetzt die Inline-Schriftwerte aus dem Markup. */
.oel-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 66ch;
  margin-bottom: 22px;
}

/* Die Skala nimmt vorweg, was die drei Karten einzeln erzaehlen: das ist eine
   Reihe, keine Auswahl. Der Verlauf geht von der hellen Goldlesart zum
   Olivenhain — genau die beiden Farben, die auch die Intensitaetspunkte der
   ersten und der letzten Karte tragen. Rein dekorativ, deshalb aria-hidden:
   jede Karte nennt ihre Intensitaet ohnehin als Punktzahl und als Wort. */
.skala {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-64);
}

.skala__lauf {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #d9c86a 0%,
    var(--olio) 48%,
    #7e8b3e 100%
  );
}

.skala__ende {
  flex: none;
}

/* Flasche ueber dem Text statt daneben. Nebeneinander blieben der Flasche rund
   75 px Breite — auf so wenig sind die drei Etiketten (gruen, schwarz-gold,
   hellgruen) nicht mehr zu unterscheiden, und genau daran erkennt man die
   Sorten am schnellsten. Gleichzeitig blieben dem Text nur rund 215 px, was
   vierzeilige Absaetze mit sehr unruhigem Flattersatz ergab.
   Uebereinander bekommt die Flasche gut die doppelte Hoehe und der Text die
   volle Kartenbreite. Nebenwirkung: die Paarungszeile wird ueberall einzeilig,
   dadurch liegen die drei Trennlinien endlich auf einer Hoehe. */
.oel {
  padding: 0;
  gap: 0;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

/* Die Buehne traegt einen Hauch der Sortenfarbe aus --dot. Das gibt jeder
   Karte eine eigene Anmutung, ohne dass ein zweiter Farbwert ins Markup
   muss. Die erste Angabe ist der Rueckfall fuer Browser ohne color-mix. */
.oel > picture {
  display: grid;
  place-items: center;
  padding: 26px 20px 22px;
  background: var(--karte);
  background: color-mix(in srgb, var(--dot) 10%, var(--karte));
  border-bottom: 1px solid var(--hairline);
}

/* Die Karte ist am Handy (350 px) praktisch genauso breit wie am Rechner
   (352 px) — das Raster faellt von drei Spalten auf eine, die Spaltenbreite
   bleibt. Eine vw-Klammer waere hier deshalb falsch herum: 19vw ergaben am
   Rechner 274 px und am Handy 74 px, obwohl beide Male dasselbe Feld zur
   Verfuegung steht. 17vw mit hohem Minimum liefert auf beiden rund 240 px
   und laesst die Flasche erst auf wirklich breiten Schirmen mitwachsen. */
.oel__flasche {
  width: auto;
  height: clamp(240px, 17vw, 300px);
  object-fit: contain;
}

.oel__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 22px 26px 26px;
}

.intensitaet {
  display: flex;
  align-items: center;
  gap: 9px;
}

.intensitaet__punkt {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-12);
  flex: none;
}

.oel[data-intensity='1'] { --dot: var(--dot-leggero); }
.oel[data-intensity='2'] { --dot: var(--dot-medio); }
.oel[data-intensity='3'] { --dot: var(--dot-intenso); }

.oel[data-intensity='1'] .intensitaet__punkt:nth-child(-n + 1),
.oel[data-intensity='2'] .intensitaet__punkt:nth-child(-n + 2),
.oel[data-intensity='3'] .intensitaet__punkt:nth-child(-n + 3) {
  background: var(--dot);
}

.intensitaet__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--ink-68);
  margin-left: 6px;
}

.oel__name {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--steineiche);
}

.oel__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-72);
}

.oel__paarung {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ink-12);
  font-size: 15px;
  color: var(--ink-66);
}

/* --------------------------------------------------------------------------
   14 · Ablauf
   -------------------------------------------------------------------------- */
.schritt {
  padding: 28px 26px;
  gap: 10px;
}

.schritt__nr {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--olio-auf-hell);
  line-height: 1;
}

.schritt__titel {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--steineiche);
}

/* --------------------------------------------------------------------------
   14b · Der Grund
   Ein Zitat zwischen Ablauf und Kontakt. Die Seite hatte keinen Schluss —
   sie ging vom Prozess direkt zum Formular. Hier steht der einzige Satz, der
   nicht erklaert, sondern behauptet; entsprechend traegt er Marcellus in der
   hellen Goldlesart auf Olivenhain (4,94:1 — Grosstext, Schwelle 3:1).
   -------------------------------------------------------------------------- */
.frage {
  /* Abschnitte auf hellem Grund tragen nur oben Abstand — der vorhergehende
     Ablauf endet deshalb buendig an seiner letzten Karte. Ohne diesen Rand
     stiess das gruene Band unmittelbar daran, was wie ein Fehler aussah.
     .section--dark loest das genauso. */
  margin-top: var(--section-y);
  padding-block: clamp(48px, 6vw, 80px);
  text-align: center;
}

.frage__zitat {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.18;
  color: var(--olio-auf-oliv);
  margin-bottom: 16px;
  text-wrap: balance;
}

.frage__antwort {
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--lime-85);
  max-width: 58ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   15 · Kontakt
   -------------------------------------------------------------------------- */
.kontakt-karte {
  background: var(--olivenhain);
  color: var(--kalkputz);
  border-radius: var(--radius);
  padding: clamp(28px, 3.2vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kontakt-karte h3 {
  font-size: clamp(24px, 2.4vw, 30px);
}

.kontakt-karte p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--lime-85);
}

.kontakt-wege {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.weg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: rgba(244, 239, 227, 0.1);
  border: 1px solid rgba(244, 239, 227, 0.28);
  border-radius: var(--radius);
  color: var(--kalkputz);
  text-decoration: none;
  transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.weg:hover {
  background: rgba(244, 239, 227, 0.18);
  color: var(--kalkputz);
  text-decoration: none;
}

.weg:active {
  transform: scale(0.99);
}

.weg__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  /* Nicht --olio-auf-oliv: dieses Label sitzt nicht auf dem Olivenhain
     selbst, sondern auf der Pille, die ihn mit 10 % Kalkputz aufhellt.
     Der hellere Grund frisst den Kontrast (3,96:1). Ein Ton heller reicht,
     um über 4,5:1 zu kommen; vom Wert daneben bleibt es durch Gewicht 700
     und die Sperrung unterscheidbar. */
  color: #f7edcb;
  min-width: 76px;
  flex: none;
}

.weg__wert {
  /* Als Flexkind haette der Wert die Vorgabe min-width: auto und koennte
     nicht unter die Breite der Adresse schrumpfen — bei 320 px lief
     tremaniceglie@gmail.com aus der Pille heraus. anywhere erlaubt den
     Umbruch auch mitten in einer Zeichenkette ohne Trennstelle. */
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.kontakt-fuss {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-dark);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lime-78);
}

/* --------------------------------------------------------------------------
   16 · Formular
   -------------------------------------------------------------------------- */
.form-karte {
  background: var(--karte);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(28px, 3.2vw, 38px);
  position: relative;
  /* Die Karte wird vom Raster auf die Höhe der Kontaktkarte gezogen. Damit
     die Bestätigung darin mittig sitzt und nicht oben klebt, füllt der
     jeweils sichtbare Inhalt die ganze Karte. */
  display: flex;
  flex-direction: column;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

.form__titel {
  font-family: var(--serif);
  font-size: clamp(23px, 2.2vw, 27px);
  color: var(--steineiche);
}

.form__hinweis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-68);
  margin-bottom: 2px;
}

.form__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  /* Nicht heller: 13,5 px sind Normaltext, auch fett. Tinte 60 % ergab
     4,03:1 auf dem Kartengrund und verfehlte AA; 68 % bringt 5,13:1. */
  color: var(--ink-68);
  min-width: 0;
}

.feld input,
.feld textarea {
  font-family: var(--sans);
  /* Nicht unter 16px: iOS Safari zoomt sonst beim Fokussieren hinein. */
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--steineiche);
  background: var(--kalkputz);
  /* Der Rahmen ist das einzige Erkennungsmerkmal des Feldes: Feldgrund auf
     Kartengrund sind 1,03:1, also praktisch unsichtbar. Damit greift WCAG
     1.4.11 und verlangt 3:1 — Tinte 20 % lag bei 1,48:1, 50 % bringt 3,04:1. */
  border: 1px solid var(--ink-50);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--t-hover) ease, background var(--t-hover) ease;
}

.feld textarea {
  resize: vertical;
  min-height: 108px;
}

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--olivenhain);
}

.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--olivenhain);
  outline-offset: 1px;
}

/* Platzhalter sind Text, also gilt 4,5:1 — 38 % Tinte waren 2,20:1 und damit
   der schwächste Wert der Seite. 68 % bringt 4,95:1 und bleibt vom Eingabewert
   klar unterscheidbar: der steht in Steineiche bei rund 12:1. */
.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--ink-68);
}

/* Fehlerzustand — im Prototyp nicht vorgesehen, hier in derselben Bildsprache:
   Terracotta-Rand plus eine Zeile Terracotta-Text unter dem Feld. */
.feld[data-fehler='true'] input,
.feld[data-fehler='true'] textarea {
  border-color: var(--terracotta);
  background: rgba(166, 94, 46, 0.05);
}

.feld__fehler {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--terracotta);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
}

.feld[data-fehler='true'] .feld__fehler {
  opacity: 1;
  transform: translateY(0);
}

/* Honigtopf: für Menschen unsichtbar, für viele Bots unwiderstehlich.
   Kein display:none — manche Bots überspringen genau das. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   17 · Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: var(--radius);
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--t-hover) ease, color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  cursor: progress;
  opacity: 0.72;
}

.btn:disabled:active {
  transform: none;
}

.btn--primaer {
  background: var(--terracotta);
  color: var(--kalkputz);
  border: none;
  padding: 15px 28px;
}

.btn--primaer:hover:not(:disabled) {
  background: var(--olivenhain);
  color: var(--kalkputz);
  text-decoration: none;
}

.btn--sekundaer {
  background: transparent;
  border: 1.5px solid var(--olivenhain);
  color: var(--olivenhain);
  padding: 13.5px 26px;
}

.btn--sekundaer:hover {
  background: var(--olivenhain);
  color: var(--kalkputz);
  text-decoration: none;
}

/* Beim Senden wird die Beschriftung weichgezeichnet statt ausgetauscht — der
   harte Textwechsel wirkt sonst wie ein Ruckler. */
.btn__text {
  display: inline-block;
  transition: filter 200ms ease, opacity 200ms ease;
}

.btn[data-laedt='true'] .btn__text {
  filter: blur(2px);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   18 · Erfolgs- und Fehlermeldung des Formulars
   -------------------------------------------------------------------------- */
.erfolg {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
  flex: 1;
  justify-content: center;
  text-align: center;
  align-items: center;
}

/* Der Fokus springt nach dem Absenden hierher, damit Screenreader die
   Bestätigung vorlesen. Sichtbar markiert werden muss das nicht — es ist
   kein Bedienelement, und ein Rahmen um die Dankesmeldung sieht aus wie
   ein Fehler. Angesagt wird sie über role="status". */
.erfolg:focus,
.erfolg:focus-visible {
  outline: none;
}

.erfolg__titel {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--olivenhain);
}

.erfolg p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-72);
  max-width: 38ch;
}

.erfolg .mark__stem { stroke: rgba(42, 38, 32, 0.3); stroke-width: 2; stroke-linecap: butt; }
.erfolg .mark__leaf { fill: var(--olio); }

/* Der Wechsel Formular -> Bestätigung ist eine Zustandsänderung, kein Auftritt:
   kurz, ohne Versatz, mit leichtem Weichzeichner als Brücke. */
.erfolg[data-ein='true'] {
  animation: zustandswechsel 320ms var(--ease-out) both;
}

@keyframes zustandswechsel {
  from { opacity: 0; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}

/* Sendefehler: die Adressen bleiben erreichbar, niemand soll in einer
   Sackgasse stehen. */
/* Fehlerübersicht über dem Formular. Gleiche Bildsprache wie die
   Sendefehler-Box darunter: Terracotta-Kontur, links 3 px, getönte Füllung.
   Sie trägt keinen eigenen Fokusrahmen — der Fokus springt nur programm-
   gesteuert hierher, und ein Ring um eine Meldung liest sich wie ein
   zweiter Fehler. */
.fehlerliste {
  border: 1px solid var(--terracotta);
  border-left: 3px solid var(--terracotta);
  background: rgba(166, 94, 46, 0.06);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.fehlerliste:focus {
  outline: none;
}

.fehlerliste__titel {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--steineiche);
  margin-bottom: 7px;
}

.fehlerliste__punkte {
  margin: 0;
  padding-left: 19px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--steineiche);
}

.fehlerliste__punkte li + li {
  margin-top: 5px;
}

.fehlerliste__punkte a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fehlerliste__punkte a:hover {
  color: var(--steineiche);
}

.sendefehler {
  border: 1px solid var(--terracotta);
  border-left: 3px solid var(--terracotta);
  background: rgba(166, 94, 46, 0.06);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--steineiche);
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   19 · Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 1100px);
  max-height: 94vh;
  color: var(--kalkputz);
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(18, 16, 14, 0.9);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.lightbox__figur {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lightbox__figur img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  object-fit: contain;
  margin-inline: auto;
}

.lightbox__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15.5px;
}

.lightbox__zaehler {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--olio);
  flex: none;
}

/* Nichts erscheint aus dem Nichts — Start bei 0.96, nicht bei 0. */
.lightbox[open] .lightbox__figur {
  animation: lightbox-auf 240ms var(--ease-out) both;
}

@keyframes lightbox-auf {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(244, 239, 227, 0.12);
  border: 1px solid rgba(244, 239, 227, 0.3);
  border-radius: var(--radius);
  color: var(--kalkputz);
  cursor: pointer;
  transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.lightbox__nav:hover { background: rgba(244, 239, 227, 0.22); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.94); }

.lightbox__nav--zurueck { left: -58px; }
.lightbox__nav--vor { right: -58px; }

.lightbox__zu {
  position: absolute;
  top: -50px;
  right: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(244, 239, 227, 0.3);
  border-radius: var(--radius);
  color: var(--kalkputz);
  cursor: pointer;
  transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.lightbox__zu:hover { background: rgba(244, 239, 227, 0.14); }
.lightbox__zu:active { transform: scale(0.94); }

/* Auf schmalen Schirmen ist links und rechts kein Platz — dann rücken die
   Bedienelemente ins Bild. */
@media (max-width: 1240px) {
  .lightbox { max-width: 92vw; }
  .lightbox__nav--zurueck { left: 8px; }
  .lightbox__nav--vor { right: 8px; }
  .lightbox__zu { top: 8px; right: 8px; background: rgba(18, 16, 14, 0.6); }
}

/* --------------------------------------------------------------------------
   20 · Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--steineiche);
  color: var(--lime-70);
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  align-items: start;
  padding-block: clamp(36px, 4vw, 52px);
}

.footer__marke {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__liste {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
}

.footer__liste a,
.footer__unten a {
  color: var(--lime-75);
}

.footer__liste a:hover,
.footer__unten a:hover {
  color: var(--kalkputz);
}

.footer__balken {
  border-top: 1px solid rgba(244, 239, 227, 0.14);
}

.footer__balken p {
  padding-block: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lime-55);
}

.footer__unten {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 15px;
  padding-block: 26px;
}

/* --------------------------------------------------------------------------
   21 · Rechtsseiten
   -------------------------------------------------------------------------- */
.recht-header {
  border-bottom: 1px solid var(--hairline);
}

.recht-header .wrap {
  padding-block: 16px;
}

.recht {
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px);
}

.recht h1 {
  font-size: clamp(32px, 4vw, 44px);
  margin-bottom: 10px;
  color: var(--steineiche);
}

.recht__vorspann {
  margin-bottom: 40px;
  font-size: 16px;
  color: var(--ink-60);
}

.recht section {
  margin-bottom: 34px;
}

.recht section:last-child {
  margin-bottom: 0;
}

.recht h2 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--olivenhain);
}

.recht p {
  font-size: 17.5px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.recht p:last-child {
  margin-bottom: 0;
}

/* Dieser Block trägt die Handelsvertreter-Klarstellung. Rechtlich tragend —
   nicht entfernen, nicht umformulieren. */
.recht__hervor {
  background: var(--karte);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--olio);
  border-radius: var(--radius);
  padding: 26px 28px;
}

.recht__leise {
  color: var(--ink-66);
}

/* --------------------------------------------------------------------------
   22 · Bewegung
   Die Vorlage kommt ohne Animation aus. Was hier dazukommt, ist bewusst knapp:
   ein Einblenden beim ersten Sichtbarwerden, sonst nichts. Ohne JavaScript
   greift die .js-Bedingung nicht und alles ist sofort sichtbar.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
}

.js .reveal[data-sichtbar='true'] {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--verzug, 0ms);
}

/* Weniger Bewegung heißt weniger, nicht nichts.
   Der übliche Pauschalschalter (`transition-duration: 0.01ms` auf alles)
   trifft nicht nur Bewegung, sondern auch Farb-, Rahmen- und
   Deckkraftwechsel — und das sind Zustandsanzeigen, keine Animation. Er
   nimmt dem Eingabefeld die aufscheinende Fehlermeldung, dem Knopf die
   Quittung und dem Link die Hover-Rückmeldung. Deshalb hier andersherum:
   erlaubt bleibt, was Zustand zeigt; abgeschaltet wird, was sich bewegt. */
/* --------------------------------------------------------------------------
   21b · Sehr schmale Schirme

   Bei 320 px bleiben nach dem Satzspiegel 280 px uebrig. Spuren mit einem
   Mindestmass von 300 px (Splitraster) oder 320 px (Hero) sind dann breiter
   als ihr Behaelter und schieben die Seite nach rechts — bei 320 px waren es
   20 px. Einspaltig stuenden diese Raster dort ohnehin, also wird es auch so
   geschrieben.

   Der Block steht bewusst hier unten und nicht oben bei der Kopfzeile: die
   Regeln haben dieselbe Spezifitaet wie die Rasterdefinitionen in Abschnitt 3,
   also entscheidet die Reihenfolge. Weiter oben blieben sie wirkungslos.

   minmax(0, 1fr) statt 1fr, weil 1fr als Untergrenze den Mindestinhalt des
   breitesten Kindes traegt. Und nicht minmax(min(300px, 100%), 1fr): das
   loest Chrome in repeat(auto-fit) nicht auf, die ganze Angabe faellt aus
   und die Spalten stapeln sich.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero,
  .grid--split,
  .grid--fotos--gross {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    /* Nur noch diese Eigenschaften dürfen überblenden. Alles andere —
       transform, clip-path — springt ohne Zwischenschritt. */
    transition-property: color, background-color, border-color, outline-color,
      opacity, filter, fill, stroke !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* Keine Stauchung beim Drücken, kein Zoom auf den Fotos. */
  .btn:active,
  .nav-toggle:active,
  .weg:active,
  .lightbox__zu:active,
  .foto__btn:active img,
  .foto__btn:hover img {
    transform: none;
  }

  .lightbox__nav:active {
    transform: translateY(-50%);
  }

  /* Das mobile Menü erscheint, statt hereinzufahren. */
  .nav,
  .nav[data-open='true'] {
    transform: none;
  }

  /* Einblenden bleibt als reine Deckkraftänderung — ohne Versatz und ohne
     Kaskade, damit nichts über den Schirm wandert. */
  .js .reveal {
    transform: none;
  }

  .js .reveal[data-sichtbar='true'] {
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }

  /* Der Wechsel zur Bestätigung ist eine Überblendung ohne Bewegung und
     darf deshalb seine Dauer behalten. */
  .erfolg[data-ein='true'] {
    animation-duration: 240ms !important;
  }
}

/* --------------------------------------------------------------------------
   23 · Intro-Animation

   Umsetzung der Logo-Animation aus design_handoff_tre_mani_logo/README.md.
   Die dortige Fassung ist 10,0 s lang und für eine Endlosschleife gebaut
   (Social-Clip). Als einmaliger Vorspann vor einer B2B-Seite ist das zu lang,
   deshalb ist die Choreografie auf 3,5 s gestaucht: Reihenfolge, Kurven und
   Proportionen bleiben, der 1,6-s-Ausklang und die langen Pausen zwischen den
   Blättern entfallen.

   Zeitplan (Sekunden ab 0) — Original → hier:
     Bühne blendet auf      0,00–0,60  →  0,00–0,25
     Kamera 1.08 → 1.00     0,00–10,0  →  0,00–3,50
     Stamm zeichnet sich    0,25–1,50  →  0,10–0,70
     Blatt unten            2,05–2,90  →  0,85–1,25
     Blatt mitte            2,85–3,70  →  1,20–1,60
     Blatt oben (gold)      3,65–4,50  →  1,55–1,95
     Goldschein auf/ab      2,85–4,60  →  1,20–2,00
     Haarlinie zieht auf    5,10–6,10  →  2,05–2,50
     Buchstaben (Versatz)   5,35–7,15  →  2,25–3,02
     Herkunftszeile         6,35–7,35  →  2,75–3,15
     Übergang zur Seite     9,30–10,0  →  3,20–3,50

   Eine bewusste Vereinfachung: der Handoff gibt jedem Blatt für Drehung und
   Skalierung leicht verschiedene Endzeiten und Kurven. Bei 0,40 s Laufzeit
   ist dieser Unterschied nicht mehr wahrnehmbar, deshalb hier eine gemeinsame
   Transform-Animation je Blatt mit der vorgeschriebenen „pop“-Kurve.
   -------------------------------------------------------------------------- */
.intro {
  /* Standardmäßig aus. Sichtbar wird das Intro nur, wenn das Skript im
     <head> sich dafür entscheidet — ohne JavaScript gibt es keinen Vorspann
     und damit auch keine Möglichkeit, dass er die Seite verdeckt. */
  display: none;
}

html.intro-laeuft .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--kalkputz);
  /* Zwei feste Verlaufsebenen aus dem Handoff: eine helle Aufhellung in der
     oberen Mitte, darüber eine leichte Abdunklung zu den Rändern. */
  background-image:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.65) 0%, rgba(244, 239, 227, 0) 58%),
    radial-gradient(ellipse at 50% 50%, rgba(42, 38, 32, 0) 55%, rgba(42, 38, 32, 0.1) 100%);
}

html.intro-laeuft body {
  overflow: hidden;
}

/* Kurven des Handoffs. Nur diese drei, plus die Kamerakurve. */
.intro {
  --e-enter: cubic-bezier(0.215, 0.61, 0.355, 1); /* ease-out-cubic */
  --e-draw: cubic-bezier(0.445, 0.05, 0.55, 0.95); /* ease-in-out-sine */
  --e-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ease-out-back */
  --e-kamera: cubic-bezier(0.39, 0.575, 0.565, 1); /* ease-out-sine */
}

/* Das gerenderte Video füllt die Bühne und behält sein Seitenverhältnis.
   Die Ränder, die dabei frei bleiben, zeigen denselben Kalkputz-Grund wie das
   Video selbst — der Übergang ist dadurch nicht zu sehen. */
.intro__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Nimmt keine Klicks an, damit jeder Klick das Overlay beendet. */
  pointer-events: none;
}

.intro__buehne {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-inline: var(--pad-x);
  animation:
    intro-auf 0.25s var(--e-enter) both,
    intro-kamera 3.5s var(--e-kamera) both;
}

@keyframes intro-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes intro-kamera {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* Goldschein hinter dem Zweig */
.intro__glanz {
  position: absolute;
  top: clamp(10px, 3vw, 40px);
  left: 50%;
  width: clamp(280px, 46vw, 520px);
  aspect-ratio: 1;
  translate: -50% -30%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0) 62%);
  pointer-events: none;
  animation: intro-glanz 0.8s var(--e-enter) 1.2s both;
}

@keyframes intro-glanz {
  0% { opacity: 0; }
  38% { opacity: 1; }
  100% { opacity: 0.25; }
}

.intro__zweig {
  width: auto;
  height: clamp(118px, 17vw, 230px);
  overflow: visible;
  position: relative;
}

.intro__stamm {
  fill: none;
  stroke: var(--olivenhain);
  stroke-width: 2.4;
  stroke-linecap: round;
  /* pathLength="1" im Markup macht die Länge unabhängig von der echten
     Pfadlänge — dadurch ist der Strich exakt steuerbar. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: intro-zeichnen 0.6s var(--e-draw) 0.1s both;
}

@keyframes intro-zeichnen {
  to { stroke-dashoffset: 0; }
}

/* Blätter wachsen aus dem Punkt, an dem sie am Stamm sitzen. */
.intro__blatt {
  transform-box: view-box;
  opacity: 0;
  animation:
    intro-blatt-auf 0.15s var(--e-enter) both,
    intro-blatt-form 0.4s var(--e-pop) both;
}

.intro__blatt--unten {
  fill: var(--olivenhain);
  transform-origin: 31px 46px;
  animation-delay: 0.85s;
  --dreh: -18deg;
}

.intro__blatt--mitte {
  fill: var(--olivenhain);
  transform-origin: 33px 30px;
  animation-delay: 1.2s;
  --dreh: 18deg;
}

.intro__blatt--oben {
  fill: var(--olio);
  transform-origin: 32px 16px;
  animation-delay: 1.55s;
  --dreh: -18deg;
}

@keyframes intro-blatt-auf {
  to { opacity: 1; }
}

@keyframes intro-blatt-form {
  from { transform: rotate(var(--dreh)) scale(0); }
  to { transform: rotate(0deg) scale(1); }
}

.intro__linie {
  width: clamp(230px, 32vw, 420px);
  height: 1px;
  background: rgba(42, 38, 32, 0.22);
  margin-top: clamp(20px, 3vw, 54px);
  transform: scaleX(0);
  animation: intro-linie 0.45s var(--e-draw) 2.05s both;
}

@keyframes intro-linie {
  to { transform: scaleX(1); }
}

.intro__wort {
  display: flex;
  margin-top: clamp(16px, 2.6vw, 34px);
  font-family: var(--serif);
  font-size: clamp(38px, 6.6vw, 126px);
  line-height: 1;
  color: var(--steineiche);
  /* Entspricht letter-spacing: 26px bei 126px Schriftgrad. */
  letter-spacing: 0.206em;
  margin-right: -0.206em;
}

.intro__wort span {
  display: inline-block;
  opacity: 0;
  animation: intro-buchstabe 0.45s var(--e-enter) both;
}

/* Die Wortlücke ist im Original 48px bei 126px Schriftgrad. */
.intro__wort span[data-luecke] {
  width: 0.38em;
}

.intro__wort span:nth-child(1) { animation-delay: 2.25s; }
.intro__wort span:nth-child(2) { animation-delay: 2.295s; }
.intro__wort span:nth-child(3) { animation-delay: 2.34s; }
.intro__wort span:nth-child(4) { animation-delay: 2.385s; }
.intro__wort span:nth-child(5) { animation-delay: 2.43s; }
.intro__wort span:nth-child(6) { animation-delay: 2.475s; }
.intro__wort span:nth-child(7) { animation-delay: 2.52s; }
.intro__wort span:nth-child(8) { animation-delay: 2.565s; }

@keyframes intro-buchstabe {
  from { opacity: 0; transform: translateY(0.21em); }
  to { opacity: 1; transform: translateY(0); }
}

.intro__herkunft {
  margin-top: clamp(10px, 1.4vw, 20px);
  font-family: var(--serif);
  font-size: clamp(11px, 1.6vw, 30px);
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  white-space: nowrap;
  color: var(--terracotta);
  opacity: 0;
  animation: intro-herkunft 0.4s var(--e-enter) 2.75s both;
}

@keyframes intro-herkunft {
  from { opacity: 0; transform: translateY(0.47em); }
  to { opacity: 1; transform: translateY(0); }
}

/* Überspringen. Liegt unten mittig und ist ab der ersten Sekunde erreichbar —
   wer die Seite kennt, soll nicht warten müssen. */
.intro__skip {
  position: absolute;
  bottom: clamp(20px, 4vh, 44px);
  left: 50%;
  translate: -50% 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 9px 18px;
  font: inherit;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--ink-64);
  cursor: pointer;
  opacity: 0;
  animation: intro-skip 0.3s var(--e-enter) 0.9s both;
  transition: background var(--t-hover) ease, color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}

@keyframes intro-skip {
  to { opacity: 1; }
}

.intro__skip:hover {
  background: rgba(42, 38, 32, 0.05);
  color: var(--steineiche);
}

.intro__skip:active {
  transform: translate(-50%, 0) scale(0.97);
}

/* Übergabe an die Seite: die Bühne blendet weg, dann nimmt das Skript das
   Overlay aus dem Dokument. */
.intro[data-ende='true'] {
  animation: intro-ende 0.3s var(--e-enter) both;
  pointer-events: none;
}

@keyframes intro-ende {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Weniger Bewegung: der Handoff schreibt dafür ausdrücklich „render the final
   frame, no motion“. Also genau das — das fertige Logo, kurz stehend, nur
   mit einer Deckkraftblende hinein und wieder hinaus. */
@media (prefers-reduced-motion: reduce) {
  .intro__buehne,
  .intro__glanz,
  .intro__stamm,
  .intro__blatt,
  .intro__linie,
  .intro__wort span,
  .intro__herkunft,
  .intro__skip {
    animation: intro-auf 0.2s ease both !important;
  }

  .intro__stamm { stroke-dashoffset: 0; }
  .intro__blatt { opacity: 1; transform: none; }
  .intro__linie { transform: scaleX(1); }
  .intro__glanz { opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   24 · Hilfsklassen
   -------------------------------------------------------------------------- */
.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke für Tastaturnutzer — erst beim Fokussieren sichtbar. */
.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 100;
  background: var(--olivenhain);
  color: var(--kalkputz);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
  transition: transform 180ms var(--ease-out);
}

.skip:focus {
  transform: translate(-50%, 0);
  color: var(--kalkputz);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   25 · Druck und PDF-Ausgabe

   Gedacht für die Durchsicht beim Erzeuger: Seite öffnen, Strg+P, „Als PDF
   speichern“. Der entscheidende Punkt dabei ist, dass Browser
   Hintergrundfarben standardmäßig NICHT drucken. Ohne die Regeln hier stünde
   der dunkle Abschnitt „Die Idee“ mit fast weißer Schrift auf weißem Grund —
   also unsichtbar, ebenso Vertrauensleiste, Kontaktkarte und Footer.

   Deshalb werden alle dunklen Flächen für den Druck umgedreht: heller Grund,
   dunkle Schrift, Haarlinien statt Farbflächen. Das funktioniert unabhängig
   davon, ob jemand „Hintergrundgrafiken“ im Druckdialog anhakt.
   -------------------------------------------------------------------------- */
@media print {
  @page {
    margin: 16mm 14mm;
  }

  /* Was im Papier keinen Sinn ergibt. */
  .intro,
  .nav-toggle,
  .nav,
  .lightbox,
  .skip,
  .foto__lupe,
  .intro__skip {
    display: none !important;
  }

  html,
  body {
    background: #fff;
  }

  /* Die Kopfzeile steht einmal oben statt mitzulaufen — sonst fehlt die
     Wortmarke im Dokument ganz. */
  .header {
    position: static;
    background: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--hairline);
    break-after: avoid;
  }

  /* Alles, was am Bildschirm dunkel ist, wird hell. */
  .section--dark,
  .section--olive,
  .footer,
  .kontakt-karte,
  .panel,
  .panel--box {
    background: #fff !important;
    color: var(--steineiche) !important;
    margin-top: 0;
  }

  .section--dark .h2,
  .footer__wortmarke,
  .marke--dunkel .marke__wort,
  .panel__title,
  .kontakt-karte h3 {
    color: var(--steineiche) !important;
  }

  .section--dark .eyebrow,
  .trust__title,
  .mano__label,
  .mano__jahr,
  .weg__label,
  .marke--dunkel .marke__herkunft,
  .schritt__nr {
    /* Olio Nuovo ist auf Weiß zu blass — die dunkle Lesefassung nehmen. */
    color: var(--olio-auf-hell) !important;
  }

  .section--dark .lead,
  .mano-note,
  .trust__body,
  .panel__meta,
  .kontakt-karte p,
  .kontakt-fuss,
  /* Ohne diese beiden stehen E-Mail-Adresse und Telefonnummer in Kalkputz
     auf Weiß — im Ausdruck also praktisch unsichtbar. */
  .weg,
  .weg__wert,
  .footer,
  .footer__liste a,
  .footer__balken p,
  .mano[data-status='confirmed'] .mano__body,
  .mano[data-status='pending'] .mano__body,
  .mano[data-status='pending'] .mano__name {
    color: var(--ink-74) !important;
  }

  /* Flächen, die am Schirm Farbe tragen, bekommen im Druck eine Kontur. */
  .panel,
  .panel--box,
  .kontakt-karte,
  .weg,
  .section--olive .wrap {
    border: 1px solid var(--hairline) !important;
    padding: 16px;
  }

  /* Der Mano-Zähler lebt von durchgezogen gegen gestrichelt — das muss
     bleiben, sonst geht die Kernaussage des Abschnitts verloren. */
  .mano[data-status='confirmed'] {
    border: 1px solid var(--olio-auf-hell) !important;
  }

  .mano[data-status='pending'] {
    border: 1px dashed rgba(42, 38, 32, 0.4) !important;
  }

  .mano[data-status='confirmed'] .badge {
    background: none !important;
    border: 1px solid var(--olio-auf-hell) !important;
    color: var(--olio-auf-hell) !important;
  }

  .mano[data-status='pending'] .badge {
    border: 1px solid var(--ink-50) !important;
    color: var(--ink-64) !important;
  }

  /* Das Blattzeichen wird auf hellem Grund sonst unsichtbar. */
  .mark--dunkel .mark__stem { stroke: var(--olivenhain) !important; }
  .mark--dunkel .mark__leaf--oliv { fill: var(--olivenhain) !important; }
  .mano__mark .mark__stem { stroke: var(--olivenhain) !important; }
  .mano[data-status='pending'] .mano__mark .mark__leaf {
    stroke: var(--olivenhain) !important;
  }

  .btn--primaer {
    background: none !important;
    color: var(--terracotta) !important;
    border: 1.5px solid var(--terracotta) !important;
  }

  /* Nichts mitten auf der Seite zerreißen. */
  .card,
  .mano,
  .foto,
  .textkarte,
  .kontakt-karte,
  .form-karte,
  .trust__item,
  .stat {
    break-inside: avoid;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  section {
    break-before: auto;
  }

  /* Gedruckt wird nicht gescrollt — sonst bliebe alles unterhalb der ersten
     Seite weiß. */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}