/* ============================================================
   JGC Handwerk — Design-System
   Farbwelt der bestehenden Seite (Sand, Holz, Taupe, Sandgold),
   Bewegungs- und Layoutsprache nach dem Vorbild fora.so.
   ============================================================ */

@import url("../fonts/fonts.css");

/* ---------- 1. Tokens ------------------------------------- */

:root {
  /* Marke — ausgelesen aus der bestehenden Seite */
  --taupe-900: #2f2a26;
  --taupe-800: #403833;
  --taupe-700: #594d46; /* Logo-Braun */
  --taupe-600: #6f625a;
  --taupe-500: #8c7f77;

  --gold-600: #8c6d42; /* dunkel genug fuer Text auf hell */
  --gold-500: #b99a66;
  --gold-400: #d1b280; /* Marken-Sandgold */
  --gold-300: #e3cca6;
  --gold-200: #f0e2c9;

  --sand-50: #fdfbf7;
  --sand-100: #f8f3ec;
  --sand-200: #f1e9dd;
  --sand-300: #e6dac8;

  /* Holz der Bretterwand im Hero: Hirnholz und Schraubenkoepfe an den Brettenden */
  --holz-800: #3a2a1c;
  --holz-900: #2a1d12;

  --text: #4a4a4a; /* Fliesstext der bestehenden Seite */
  --text-weak: #77706b;
  --white: #fff;

  /* Rollen */
  --bg: var(--sand-50);
  --bg-alt: var(--sand-100);
  --ink: var(--taupe-700);
  --accent: var(--gold-400);
  --accent-text: var(--gold-600);
  --line: rgba(89, 77, 70, 0.12);
  --line-soft: rgba(89, 77, 70, 0.07);

  /* Glas — der Fora-Kartenlook, auf hellem Grund gedacht */
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(18px) saturate(1.25);

  /* Schatten: eng gestapelt statt einer harten Kante */
  --shadow-sm: 0 1px 2px rgba(89, 77, 70, 0.05), 0 2px 8px -2px rgba(89, 77, 70, 0.06);
  --shadow-md: 0 1px 2px rgba(89, 77, 70, 0.05), 0 12px 28px -8px rgba(89, 77, 70, 0.14);
  --shadow-lg: 0 2px 4px rgba(89, 77, 70, 0.06), 0 28px 60px -18px rgba(89, 77, 70, 0.22);

  /* Radien */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 100px;

  /* Raster */
  --max: 1200px;
  --max-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 9rem);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.44, 0, 0.56, 1);
  --dur: 0.55s;

  --header-h: 76px;
}

/* ---------- 2. Grundlage ---------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: Raleway, system-ui, sans-serif;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

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

/* Browser geben <figure> von Haus aus 40px Seitenabstand — das verschiebt
   sonst jede Bildkachel gegenueber dem Textraster. */
figure {
  margin: 0;
}

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

a {
  color: inherit;
  text-decoration-color: var(--gold-400);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.3s var(--ease-inout), text-decoration-color 0.3s var(--ease-inout);
}

a:hover {
  color: var(--accent-text);
  text-decoration-color: var(--gold-600);
}

:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--gold-300);
  color: var(--taupe-900);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--taupe-700);
  color: var(--sand-50);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Layout-Bausteine --------------------------- */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: var(--max-narrow);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tint {
  background: var(--bg-alt);
}

/* Weicher Uebergang zwischen zwei Flaechen statt harter Kante */
.section--tint::before,
.section--tint::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 120px;
  pointer-events: none;
}

.section--tint::before {
  top: 0;
  background: linear-gradient(to bottom, var(--sand-50), transparent);
}

.section--tint::after {
  bottom: 0;
  background: linear-gradient(to top, var(--sand-50), transparent);
}

/* ---------- 4. Typo-Muster (Fora-Rhythmus) ---------------- */

/* Kapsel-Etikett ueber jeder Ueberschrift */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  font-family: Raleway, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--taupe-600);
  margin-bottom: 1.5rem;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(209, 178, 128, 0.25);
}

.h-display {
  font-size: clamp(2.35rem, 1.3rem + 4.4vw, 4.6rem);
  font-weight: 200;
  letter-spacing: -0.032em;
  line-height: 1.04;
}

.h-section {
  font-size: clamp(1.95rem, 1.2rem + 3.1vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.h-card {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.7;
  color: var(--text);
  max-width: 62ch;
}

.section-head {
  max-width: 68ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head .lead {
  margin-top: 1.5rem;
}

.text-accent {
  color: var(--accent-text);
}

/* ---------- 5. Knoepfe ------------------------------------ */

.btn {
  --btn-bg: var(--taupe-700);
  --btn-fg: var(--sand-50);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: Raleway, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease-inout),
    color 0.35s var(--ease-inout), border-color 0.35s var(--ease-inout);
  box-shadow: var(--shadow-sm);
}

/* Lichtwischer beim Ueberfahren — das Fora-Detail */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--btn-fg);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.7);
  --btn-fg: var(--taupe-700);
  border-color: var(--line);
  backdrop-filter: blur(10px);
}

.btn--ghost:hover {
  --btn-bg: var(--white);
  border-color: var(--gold-400);
}

.btn--gold {
  --btn-bg: var(--gold-400);
  --btn-fg: var(--taupe-900);
}

.btn--lg {
  padding: 1.1rem 2.1rem;
  font-size: 1.05rem;
}

.btn__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 0.35s var(--ease);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

/* ---------- 6. Karten mit Maus-Lichtfleck ----------------- */

.card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

/* Der Lichtfleck folgt dem Zeiger (--mx/--my setzt main.js) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(209, 178, 128, 0.3), transparent 68%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-inout);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(209, 178, 128, 0.45);
}

.card:hover::before {
  opacity: 1;
}

.card__body {
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* ---------- 7. Kopfzeile ---------------------------------- */

/* Lesefaden: duenne Goldlinie am oberen Rand, waechst mit dem Scrollweg.
   Die Breite setzt main.js als Inline-Transform — hier darf darum keine
   transition auf transform stehen, sonst zieht die Linie nach. */
.scrollspur {
  position: fixed;
  inset: 0 0 auto;
  z-index: 130;
  height: 2px;
  pointer-events: none;
}

#scrollspurBalken {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(to right, var(--gold-600), var(--gold-400) 60%, var(--gold-300));
  will-change: transform;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease-inout), box-shadow 0.4s var(--ease-inout),
    border-color 0.4s var(--ease-inout), backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: rgba(253, 251, 247, 0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 24px rgba(89, 77, 70, 0.06);
}

.header__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

/* Schriftzug wie auf der alten Seite; waechst mit der Hoehe der Kopfzeile mit */
.brand img {
  display: block;
  height: calc(var(--header-h) - 24px);
  width: auto;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  font-family: Raleway, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--taupe-600);
  text-decoration: none;
  transition: color 0.3s var(--ease-inout), background 0.3s var(--ease-inout);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--ink);
  background: rgba(209, 178, 128, 0.16);
}

.header__cta {
  margin-left: 0.75rem;
  padding: 0.7rem 1.3rem;
  font-size: 0.92rem;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  cursor: pointer;
  /* Die drei Striche muessen uebereinander liegen, nicht nebeneinander */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s;
}

.nav-toggle span + span {
  margin-top: 4.5px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- 8. Hero: Bretterwand -------------------------- */

/* Das Holzfoto wird zur Wand aus acht Brettern; die Teilung folgt den
   echten Fugen im Foto. Beim Scrollen bleibt die Buehne stehen, die
   Bretter gleiten weg und geben den Inhalt frei.

   Zwei Betriebsarten:
   - Ruhe (ohne JavaScript, ruhige Darstellung): die Wand ist ein Band
     oben, der Inhalt steht sichtbar darunter.
   - Bewegt (.js.bewegt am <html>): die Wand bedeckt die ganze Buehne,
     main.js (Baustein Bretterwand) steuert das Oeffnen ueber GSAP.

   WICHTIG: keine CSS-Transition auf transform von .hero__brett,
   .hero__logo und .hero__buehne — GSAP setzt dort Inline-Transforms,
   eine Transition laesst sie sichtbar nachziehen (Stolperfalle aus
   CLAUDE.md). */

.hero {
  position: relative;
  background: var(--sand-50);
}

/* Auf Holz braucht die Kopfzeile von Anfang an ihren hellen Glasgrund */
.bewegt .header:not(.is-stuck) {
  background: rgba(253, 251, 247, 0.8);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Masse der Wand. --wand-b/--wand-h sind Breite und Hoehe der Wand; der
   Baustein Bretterwand traegt die gemessenen Pixelwerte ein, die Angaben
   hier sind der Rueckfall. --bgw/--bgh ist die Groesse, in der das Foto die
   Wand ganz bedeckt (Seitenverhaeltnis 1,4985) — etwas breiter als noetig,
   weil die Bretter seitlich ueberstehen. --logo ist der Durchmesser des
   Logos vor der Wand. */
.hero__buehne {
  --wand-b: 100vw;
  --wand-h: clamp(260px, 42svh, 440px);
  --ueber: 0.04; /* seitlicher Ueberstand der Bretter, als Anteil der Wandbreite */
  --bgw: max(calc(var(--wand-b) * (1 + 2 * var(--ueber))), calc(var(--wand-h) * 1.4985));
  --bgh: calc(var(--bgw) / 1.4985);
  --logo: clamp(150px, min(24vw, 30svh), 210px);
  --mx: 0;
  --my: 0;
  --p: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Ruhe-Layout: die Wand steht im Quelltext hinter dem Inhalt (sie liegt in
     der bewegten Fassung darueber), gehoert optisch aber nach oben */
  display: flex;
  flex-direction: column;
  --oben: var(--header-h); /* Abstand der Wand zum oberen Rand der Buehne */
  padding-top: var(--oben);
}

.hero__buehne > .hero__wand {
  order: -1;
}

/* Bewegt: die Buehne fuellt den kleinen Bildschirm (svh), die Wand reicht bis
   zur grossen Bildschirmhoehe (lvh). Am Handy verschwindet beim Scrollen die
   Adressleiste; die angeheftete Buehne waechst dann nicht mit, und ohne den
   Ueberstand der Wand bliebe unten ein heller Streifen. Seitlich schneidet die
   Buehne weiter ab (clip), nach unten darf die Wand ueberstehen. Browser ohne
   "clip" (Safari vor 16) verwerfen die Angabe und behalten "hidden" von oben. */
.js.bewegt .hero__buehne {
  --oben: 0px;
  --wand-h: max(100lvh, 600px);
  --logo: clamp(200px, min(26vw, 38svh), 340px);
  min-height: max(100svh, 600px);
  display: grid;
  align-items: center;
  overflow: clip visible;
}

/* Warmer Schein hinter dem Inhalt, damit die geoeffnete Buehne nicht leer wirkt */
.hero__licht {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(48% 40% at 12% 22%, rgba(240, 226, 201, 0.9), transparent 66%),
    radial-gradient(52% 44% at 90% 28%, rgba(209, 178, 128, 0.5), transparent 68%),
    radial-gradient(120% 60% at 50% 100%, rgba(209, 178, 128, 0.42), transparent 76%);
  pointer-events: none;
}

/* Bewegt: der Schein reicht wie die Wand bis zur grossen Bildschirmhoehe und
   laeuft unten weich in den naechsten Abschnitt aus — sonst stuende nach dem
   Loesen der Anheftung eine harte Kante am Ende der Buehne. */
.js.bewegt .hero__licht {
  bottom: auto;
  height: calc(var(--wand-h) + 28vh);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 38vh), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 38vh), transparent);
}

/* ---------- Inhalt hinter der Wand ------------------------- */

.hero__inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.js.bewegt .hero__inhalt {
  padding-block: calc(var(--header-h) + 1.25rem) clamp(1.5rem, 4svh, 3rem);
}

/* Landeplatz des Logos. Im Ruhe-Layout bleibt das Logo auf dem Band. */
.hero__logoplatz {
  display: none;
  width: clamp(84px, min(9vw, 13svh), 120px);
  aspect-ratio: 1;
  margin-bottom: clamp(1rem, 2.4svh, 1.6rem);
}

.js.bewegt .hero__logoplatz {
  display: block;
}

/* Im Ruhe-Layout steht der Leitsatz schon auf dem Band */
.hero__etikett {
  display: none;
}

.js.bewegt .hero__etikett {
  display: inline-flex;
  margin-bottom: clamp(0.9rem, 2.2svh, 1.3rem);
}

.hero__titel {
  max-width: 16.5em;
  font-size: clamp(2.05rem, min(1rem + 3.2vw, 7.4svh), 3.9rem);
}

.hero__lead {
  margin-top: clamp(1rem, 2.4svh, 1.5rem);
  max-width: 58ch;
}

.hero__aktionen {
  margin-top: clamp(1.25rem, 3.2svh, 2.1rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* Vertrauensleiste unter dem Hero */
.trustbar {
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
}

.trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Raleway, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--taupe-600);
}

.trustbar__item svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--gold-500);
  flex: none;
}

.hero__trust {
  margin-top: clamp(1.4rem, 3.6svh, 2.75rem);
  padding-top: clamp(1rem, 2.4svh, 1.6rem);
}

/* Startwerte der Freigabe. Gelten nur in der bewegten Betriebsart; faellt
   das Skript aus, nimmt es .bewegt wieder weg und alles steht sichtbar da. */
.js.bewegt .hero__inhalt [data-freigabe] {
  opacity: 0;
}

/* Hinter der geschlossenen Wand nimmt der unsichtbare Inhalt keine Klicks an
   (die Bretter selbst lassen Klicks durch). main.js setzt .ist-offen, sobald
   die Bretter weit genug weg sind. */
.js.bewegt .hero__buehne:not(.ist-offen) .hero__inhalt {
  pointer-events: none;
}

/* ---------- Wand und Bretter ------------------------------- */

.hero__wand {
  position: relative;
  height: var(--wand-h);
  overflow: hidden;
}

.js.bewegt .hero__wand {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: max(100%, 100lvh);
  overflow: visible;
  pointer-events: none;
}

/* Aeussere Huelle: hier greifen GSAP (transform) und der Zeiger (translate).
   Der Zeiger-Anteil laeuft mit dem Oeffnen (--p) gegen null. */
.hero__brett {
  position: absolute;
  left: calc(var(--ueber) * -100%);
  width: calc(100% + var(--ueber) * 200%);
  top: calc(var(--von) * var(--bgh) - (var(--bgh) - var(--wand-h)) / 2);
  height: calc((var(--bis) - var(--von)) * var(--bgh) + 0.6px);
  translate: calc(var(--mx) * var(--tiefe, 0) * (1 - var(--p)) * 1px) 0;
  will-change: transform;
}

/* Innere Flaeche: traegt das Foto und den Auftritt beim Laden */
.hero__holz {
  position: absolute;
  inset: 0;
  background-image: url("../img/holz.webp");
  background-repeat: no-repeat;
  background-size: var(--bgw) var(--bgh);
  background-position: calc((var(--wand-b) - var(--bgw)) / 2 + var(--wand-b) * var(--ueber)) calc(var(--von) * var(--bgh) * -1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 5px rgba(36, 24, 14, 0.5),
    0 4px 14px rgba(36, 24, 14, 0.38);
}

/* Hirnholz und Schrauben an beiden Brettenden — sichtbar, sobald ein Brett
   beim Weggleiten mit seinem Ende durchs Bild faehrt */
.hero__holz::before,
.hero__holz::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 58px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0 1.2px, transparent 1.6px) 30px 26% / 12px 12px no-repeat,
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0 1.2px, transparent 1.6px) 30px 74% / 12px 12px no-repeat,
    radial-gradient(circle at 50% 50%, var(--holz-900) 0 4.4px, transparent 5px) 30px 26% / 12px 12px no-repeat,
    radial-gradient(circle at 50% 50%, var(--holz-900) 0 4.4px, transparent 5px) 30px 74% / 12px 12px no-repeat;
}

.hero__holz::before {
  left: 0;
  border-left: 7px solid var(--holz-800);
}

.hero__holz::after {
  right: 0;
  transform: scaleX(-1);
  border-left: 7px solid var(--holz-800);
}

/* ---------- Logo, Leitsatz, Hinweis ------------------------ */

.hero__logo {
  --hoehe: 1; /* 1 = schwebt vor der Wand, 0 = liegt am Platz; setzt GSAP */
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--oben) + var(--wand-h) * 0.44);
  width: var(--logo);
  aspect-ratio: 1;
  margin: calc(var(--logo) / -2) 0 0 calc(var(--logo) / -2);
  translate: calc(var(--mx) * -16px * (1 - var(--p))) calc(var(--my) * -9px * (1 - var(--p)));
  will-change: transform;
}

/* Die Buchstaben der Bilddatei sind durchsichtig. Dahinter liegt eine halb
   deckende helle Ebene, leicht weichgezeichnet: die Schrift wird lesbar, das
   Holz schimmert noch durch. Sie reicht bis 98 % des Durchmessers, weil die
   Buchstaben bis 97,4 % an den Rand gehen; der Rest liegt unter der deckenden
   Scheibe. Der Schlagschatten sitzt hier als box-shadow statt als filter am
   Bild — ein Bildschatten schiene durch die Buchstaben und machte sie trueb,
   ein box-shadow wird nur ausserhalb der Ebene gemalt. */
.hero__logo::before {
  content: "";
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  background: rgba(253, 251, 247, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 calc(5px + var(--hoehe) * 21px) calc(12px + var(--hoehe) * 28px) rgba(36, 24, 14, calc(0.22 + var(--hoehe) * 0.24));
}

.hero__logo img {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__leitsatz {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(var(--oben) + var(--wand-h) * 0.44 + var(--logo) / 2 + 0.6rem);
  margin: 0;
  padding-inline: var(--gutter);
  text-align: center;
  font-family: Raleway, sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--taupe-900);
  translate: calc(var(--mx) * -8px * (1 - var(--p))) 0;
}

.js.bewegt .hero__leitsatz {
  top: calc(var(--wand-h) * 0.44 + var(--logo) / 2 + clamp(1rem, 3svh, 2rem));
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.1rem);
}

/* Dezent hellere Ebene hinter dem Leitsatz: halb deckend und dahinter leicht
   weichgezeichnet, damit die Maserung die Buchstaben nicht zerschneidet */
.hero__leitsatz span {
  display: inline-block;
  padding: 0.28em 0.95em 0.36em;
  border-radius: var(--r-pill);
  background: rgba(253, 251, 247, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.hero__hinweis {
  display: none;
}

.js.bewegt .hero__hinweis {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 3.4svh, 2.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: Raleway, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand-50);
}

/* Dunkle, halb deckende Ebene hinter dem Wort — auf hellem wie dunklem Holz
   lesbar. Rechts weniger Innenabstand: der Buchstabenabstand haengt hinter
   dem letzten Buchstaben noch einmal an. */
.hero__hinweis-wort {
  padding: 0.5em 0.85em 0.5em 1.05em;
  border-radius: var(--r-pill);
  background: rgba(36, 24, 14, 0.42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.hero__hinweis-linie {
  position: relative;
  width: 1px;
  height: 42px;
  overflow: hidden;
  background: rgba(253, 251, 247, 0.4);
}

/* Ein Lichtpunkt laeuft die Linie hinab */
.hero__hinweis-linie::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 16px;
  background: var(--sand-50);
  animation: hinweis-lauf 2.3s var(--ease-inout) infinite;
}

@keyframes hinweis-lauf {
  0% {
    transform: translateY(-18px);
  }
  100% {
    transform: translateY(46px);
  }
}

/* ---------- 8b. Hero-Auftritt ------------------------------ */

/* Die Bretter fahren abwechselnd von links und rechts herein. Der Auftritt
   sitzt auf der inneren Flaeche — die Huelle gehoert GSAP.
   Fuellmodus bewusst "backwards" statt "both": eine Animation, die nach dem
   Ende weiter fuellt, schlaegt Inline-Styles — GSAP koennte Leitsatz und
   Hinweis dann nicht mehr ausblenden. */
.js.bewegt .hero__holz {
  animation: brett-einfahren 1.2s var(--ease) backwards;
  animation-delay: calc(0.05s + var(--n) * 0.075s);
}

@keyframes brett-einfahren {
  from {
    transform: translate3d(calc(var(--seite) * 104%), 0, 0);
  }
}

.js.bewegt .hero__logo img,
.js.bewegt .hero__logo::before {
  animation: logo-auf 1.15s var(--ease) 0.85s backwards;
}

@keyframes logo-auf {
  from {
    opacity: 0;
    scale: 0.8;
  }
}

/* Leitsatz und Hinweis blenden an den Kindern ein, nicht am Rahmen: ein
   Rahmen mit Deckkraft unter 1 schneidet die Weichzeichnung der hellen und
   dunklen Ebene ab, sie spraenge dann am Ende des Auftritts sichtbar um. */
.js.bewegt .hero__leitsatz span,
.js.bewegt .hero__hinweis > span {
  animation: wandtext-zeigen 0.9s var(--ease-inout) 1.5s backwards;
}

.js.bewegt .hero__hinweis > span {
  animation-delay: 2s;
}

@keyframes wandtext-zeigen {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}

/* ---------- 9. Leistungen (Reiter wie bei Fora) ----------- */

.tabs {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.tabs__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  color: var(--taupe-600);
  text-align: left;
  cursor: pointer;
  transition: background 0.4s var(--ease-inout), border-color 0.4s var(--ease-inout), color 0.4s var(--ease-inout),
    transform 0.4s var(--ease);
}

.tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: rgba(209, 178, 128, 0.4);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.tab__num {
  font-family: Raleway, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-500);
  padding-top: 0.28em;
  flex: none;
  transition: color 0.4s var(--ease-inout);
}

.tab[aria-selected="true"] .tab__num {
  color: var(--gold-600);
}

.tab__title {
  font-family: Raleway, sans-serif;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  display: block;
}

.tab__hint {
  display: block;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-weak);
  margin-top: 0.2rem;
}

.tabs__panels {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
  background: var(--sand-200);
}

.panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 0.6s var(--ease-inout), transform 0.8s var(--ease), visibility 0.6s;
}

.panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.panel__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

.panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(47, 42, 38, 0.88) 0%, rgba(47, 42, 38, 0.35) 42%, transparent 68%);
}

.panel__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  color: var(--sand-50);
}

.panel__caption h3 {
  color: var(--white);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 400;
}

.panel__caption p {
  margin-top: 0.6rem;
  max-width: 46ch;
  color: rgba(253, 251, 247, 0.86);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* Beim Reiterwechsel setzt sich das Bild langsam zurecht und die
   Beschriftung steigt nach — beides nur solange das Panel aktiv ist. */
.panel.is-active .panel__media img {
  animation: panel-ruhe 7s var(--ease-inout) both;
}

@keyframes panel-ruhe {
  from {
    transform: scale(1.07);
  }
  to {
    transform: scale(1);
  }
}

.panel.is-active .panel__caption {
  animation: caption-steigen 0.8s var(--ease) 0.15s backwards;
}

@keyframes caption-steigen {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
}

/* Schmale Bildschirme: Liste statt Reiter. main.js setzt .tabs--liste, sobald
   die Reiter einspaltig stehen, und baut jeder Leistung einen Kopf aus ihrem
   Reiter. Dann steht jede Leistung als Karte da: Nummer, Titel, Kurztext und
   darunter ihr Bild. Ohne JavaScript bleibt es bei Reiterleiste und erstem Bild. */
.panel__kopf {
  display: none;
}

.tabs--liste .tabs__list {
  display: none;
}

.tabs--liste .tabs__panels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.tabs--liste .panel {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  padding: 0.75rem;
  border: 1px solid rgba(209, 178, 128, 0.4);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  box-shadow: var(--shadow-sm);
}

.tabs--liste .panel__kopf {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.6rem 0.6rem 1rem;
  color: var(--ink);
}

.tabs--liste .panel__kopf .tab__num {
  color: var(--gold-600);
}

.tabs--liste .panel__media {
  border-radius: var(--r-md);
}

/* Schmal bricht die Bildunterschrift in mehr Zeilen um und reicht hoeher ins
   Bild — der dunkle Verlauf muss darum weiter hinauf und kraeftiger sein */
.tabs--liste .panel__media::after {
  background: linear-gradient(to top, rgba(47, 42, 38, 0.92) 0%, rgba(47, 42, 38, 0.74) 48%, rgba(47, 42, 38, 0.2) 80%, transparent 94%);
}

/* Der Titel steht schon im Kopf der Karte; fuer Vorleseprogramme bleibt er
   in der Bildunterschrift erhalten, nur unsichtbar */
.tabs--liste .panel__caption h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tabs--liste .panel__caption p {
  margin-top: 0;
}

/* In der Liste sind alle Bilder zugleich zu sehen — kein Auftritt je Wechsel */
.tabs--liste .panel .panel__media img,
.tabs--liste .panel .panel__caption {
  animation: none;
}

/* Auf Tablets wird das Bild sonst sehr hoch */
@media (min-width: 600px) {
  .tabs--liste .panel__media {
    aspect-ratio: 16 / 9;
  }
}

.area-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  font-size: 0.96rem;
  color: var(--taupe-600);
}

.area-note svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gold-500);
  flex: none;
  margin-top: 0.22rem;
}

/* ---------- 10. Ueber mich -------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  /* Der goldene Schein hinter dem Portraet ragt am Handy sonst 1 px ueber den Seitenrand (V7).
     clip statt hidden: schneidet nur seitlich und macht keinen Scrollbereich auf. */
  overflow-x: clip;
}

.about__media {
  position: relative;
}

.about__portrait {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}

/* Goldener Ring hinter dem Portraet */
.about__media::before {
  content: "";
  position: absolute;
  inset: -6% -6% auto auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209, 178, 128, 0.5), transparent 68%);
  z-index: -1;
  filter: blur(8px);
}

.about__quote {
  font-family: Raleway, sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

/* Bewusst eine eigene Klasse: ein blankes "span" traefe auch die
   .wort-Spannen der Wort-Einblendung und machte jedes Wort zum Block. */
.about__quote-akzent {
  display: block;
  color: var(--accent-text);
  font-weight: 400;
}

.about__facts {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}

.fact {
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.6);
}

.fact__value {
  display: block;
  font-family: Raleway, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.fact__label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-weak);
}

/* ---------- 11. Projekte ---------------------------------- */

/* Waagerechte Bahn, die beim Scrollen seitwaerts laeuft */
.rail {
  position: relative;
  overflow: hidden;
}

.rail__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Erste Karte buendig zum Textblock, rechts laeuft die Bahn aus dem Bild.
     100% statt 100vw, damit die Scrollleiste nicht mitzaehlt. */
  padding-inline-start: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
  padding-inline-end: var(--gutter);
  will-change: transform;
}

/* Fallback: seitwaerts wischen statt beim Scrollen mitlaufen */
.rail--swipe {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-400) transparent;
  -webkit-overflow-scrolling: touch;
}

.rail--swipe .rail__track {
  transform: none !important;
  padding-bottom: 0.75rem;
}

/* An den Anfang schnappen, damit die naechste Karte angeschnitten sichtbar
   bleibt — das zeigt, dass es seitwaerts weitergeht. */
.rail--swipe .shot {
  scroll-snap-align: start;
}

.shot {
  position: relative;
  flex: none;
  width: clamp(250px, 30vw, 380px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--sand-200);
}

/* Die Karten der Bahn blenden einzeln gestaffelt ein (Klasse und --sd setzt
   main.js). Bewusst auf der Karte statt auf Bahn oder Gleis: die beiden
   werden von ScrollTrigger transformiert und vertragen keine transition. */
.js .shot {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.96);
  transition: opacity 0.7s var(--ease-inout), transform 0.9s var(--ease);
  transition-delay: var(--sd, 0ms);
}

.js .shot.ist-da {
  opacity: 1;
  transform: none;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.shot:hover img {
  transform: scale(1.05);
}

.shot__label {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1.25rem 1.15rem;
  background: linear-gradient(to top, rgba(47, 42, 38, 0.85), transparent);
  color: var(--sand-50);
  font-family: Raleway, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Vorher/Nachher-Schieber */
.compare-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.compare {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--sand-200);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  --pos: 50%;
}

.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.compare__after {
  clip-path: inset(0 0 0 var(--pos));
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: rgba(253, 251, 247, 0.9);
  box-shadow: 0 0 18px rgba(47, 42, 38, 0.4);
  pointer-events: none;
  z-index: 3;
}

.compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(253, 251, 247, 0.95);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  color: var(--taupe-700);
}

.compare__grip svg {
  width: 22px;
  height: 22px;
}

.compare__tag {
  position: absolute;
  top: 1rem;
  z-index: 2;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(47, 42, 38, 0.72);
  backdrop-filter: blur(8px);
  color: var(--sand-50);
  font-family: Raleway, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compare__tag--before {
  left: 1rem;
}

.compare__tag--after {
  right: 1rem;
}

.compare__caption {
  margin-top: 0.9rem;
  font-family: Raleway, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--taupe-600);
  text-align: center;
}

/* ---------- 12. Kontakt ----------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contact__direct {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(12px);
  text-decoration: none;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease-inout), box-shadow 0.4s var(--ease);
}

.contact-link:hover {
  transform: translateX(3px);
  border-color: rgba(209, 178, 128, 0.5);
  box-shadow: var(--shadow-sm);
  color: inherit;
}

.contact-link__icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(209, 178, 128, 0.2);
  color: var(--gold-600);
}

.contact-link__icon svg {
  width: 19px;
  height: 19px;
}

.contact-link__label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-weak);
}

.contact-link__value {
  display: block;
  font-family: Raleway, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

/* Formular */
.form {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: Raleway, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--taupe-600);
  letter-spacing: 0.01em;
}

.field .req {
  color: var(--gold-600);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 0.98rem;
  color: var(--text);
  transition: border-color 0.3s var(--ease-inout), box-shadow 0.3s var(--ease-inout), background 0.3s;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.65;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a8a09a;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(209, 178, 128, 0.22);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #c0562f;
  box-shadow: 0 0 0 3px rgba(192, 86, 47, 0.14);
}

.field__error {
  min-height: 1.15rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #a8461f;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-weak);
}

.consent input {
  width: 19px;
  height: 19px;
  margin: 0.22rem 0 0;
  flex: none;
  accent-color: var(--taupe-700);
  cursor: pointer;
}

.form__foot {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.form__note {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-weak);
  max-width: 34ch;
}

/* Rueckmeldung nach dem Absenden — nie stillschweigend scheitern */
.form__status {
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: 0.94rem;
  line-height: 1.6;
}

.form__status[hidden] {
  display: none;
}

.form__status--info {
  border-color: rgba(209, 178, 128, 0.55);
  background: rgba(240, 226, 201, 0.45);
  color: var(--taupe-800);
}

.form__status--error {
  border-color: rgba(192, 86, 47, 0.4);
  background: rgba(192, 86, 47, 0.08);
  color: #8f3c1a;
}

.form__diag {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.79rem;
  color: var(--text-weak);
  font-variant-numeric: tabular-nums;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Koeder */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 13. Fusszeile --------------------------------- */

.footer {
  position: relative;
  background: var(--taupe-800);
  color: rgba(253, 251, 247, 0.72);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  font-size: 0.94rem;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(209, 178, 128, 0.5), transparent);
}

.footer a {
  color: rgba(253, 251, 247, 0.82);
  text-decoration: none;
}

.footer a:hover {
  color: var(--gold-300);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.footer h2,
.footer h3 {
  color: var(--sand-50);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 1.1rem;
}

.footer__brand {
  display: inline-flex;
  margin-bottom: 1.25rem;
}

/* Heller Schriftzug auf dem dunklen Grund der Fusszeile */
.footer__brand img {
  display: block;
  height: 64px;
  width: auto;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(253, 251, 247, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.86rem;
  color: rgba(253, 251, 247, 0.55);
}

/* ---------- 14. Rechtstexte ------------------------------- */

.legal {
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 5rem)) var(--section-y);
}

.legal__body h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 400;
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}

.legal__body h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}

.legal__body h2:first-of-type {
  margin-top: 0;
}

.legal__body ul {
  padding-left: 1.25rem;
  margin: 0 0 1.1em;
}

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

.legal__body address {
  font-style: normal;
  padding: 1.15rem 1.4rem;
  border-left: 2px solid var(--gold-400);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 1.5rem;
}

.legal__body a {
  word-break: break-word;
}

/* ---------- 15. Scroll-Einblendungen ---------------------- */

/* Die Startwerte gelten NUR, wenn JavaScript laeuft (Klasse "js" am <html>).
   Sonst bliebe die Seite bei einem Script-Fehler unsichtbar. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.75s var(--ease-inout), transform 0.85s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Kinder nacheinander einblenden */
.js .reveal-group > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.7s var(--ease-inout), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js .reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Ueberschriften bauen sich Wort fuer Wort auf: main.js zerlegt Elemente
   mit data-worte in .wort-Spannen und setzt je Wort die Verzoegerung --wd.
   Ohne JavaScript gibt es keine Spannen — der Text steht dann einfach da. */
.wort {
  display: inline-block;
}

.js [data-worte] .wort {
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  filter: blur(6px);
  transition: opacity 0.55s var(--ease-inout), transform 0.75s var(--ease), filter 0.65s var(--ease-inout);
  transition-delay: var(--wd, 0ms);
}

.js [data-worte].ist-da .wort {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- 16. Anpassung an Geraete ---------------------- */

@media (max-width: 980px) {
  .tabs,
  .about,
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .tabs__list,
  .contact__direct {
    position: static;
  }

  .about__media {
    max-width: 460px;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer__brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 66px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin: 0;
    padding: 1rem var(--gutter) 1.75rem;
    background: rgba(253, 251, 247, 0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-md);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease-inout), transform 0.4s var(--ease), visibility 0.35s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__link {
    padding: 0.85rem 1rem;
    font-size: 1.02rem;
  }

  .header__cta {
    margin: 0.5rem 0 0;
    justify-content: center;
  }

  .form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .trustbar {
    gap: 0.6rem 1.5rem;
  }

  .trustbar__item {
    font-size: 0.82rem;
  }

  /* Hero: mehr Ueberstand der Bretter, sonst ragen Hirnholz und Schrauben der
     Brettenden schon im Ruhezustand ins schmale Bild */
  .hero__buehne {
    --ueber: 0.2;
  }

  /* In der angehefteten Buehne muss alles auf einen Schirm passen */
  .js.bewegt .hero__lead,
  .js.bewegt .hero__trust-weit {
    display: none;
  }

  .hero__aktionen .btn {
    padding: 0.95rem 1.5rem;
    font-size: 0.98rem;
  }
}

/* ---------- 17. Ruhige Darstellung ------------------------ */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal,
  .js .reveal-group > *,
  .js [data-worte] .wort,
  .js .shot {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Die Bretterwand im Hero braucht hier keine Regel: bei ruhiger Darstellung
     setzt der Kopf der Seite kein .bewegt, sie ist dann ein ruhiges Holzband. */
}

/* ---------- 18. Druck ------------------------------------- */

@media print {
  .header,
  .nav,
  .scrollspur,
  .hero__wand,
  .hero__logo,
  .hero__logoplatz,
  .hero__leitsatz,
  .hero__hinweis,
  .rail,
  .form {
    display: none !important;
  }

  /* Im Druck steht der Hero-Inhalt einfach da, auch mitten im Oeffnen */
  .hero__inhalt [data-freigabe] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}