/* ==========================================================================
   Frau Quitte – quitte.paulburghardt.me
   Palette aus dem Logo: Quittengelb, Blattgrün, warmes Papier, Nussbaumdunkel
   ========================================================================== */

/* ---------- Schriften (lokal, DSGVO) ---------- */
@font-face {
  font-family: "Coalhand";
  src: url("../fonts/coalhand.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Drei Toene, die man auch wirklich auseinanderhaelt: die Fusszeile ist
     der tiefste Ton, der abgesetzte Abschnitt der hellste. */
  --walnut: #0E0A07;   /* Russ – Kopfbalken und Fusszeile */
  --paper:  #17120E;   /* Rinde – Grundton der Seite */
  --linen:  #241C15;   /* Glut – der abgesetzte Abschnitt */
  --ink:    #F1EADF;   /* warmes Leinen – Text, 9,3:1 auf Rinde */
  --olive:  #A9B68C;   /* Salbei – zweite Farbe */
  --quince: #E0B44C;   /* Quittengold – der einzige Akzent */
  --quince-deep: #E0B44C;

  --papier: #F2EADA;   /* Zettel – der einzige helle Grund der Seite */
  --tinte:  #241A0E;   /* Schrift darauf, 13,9:1 auf dem Papier */
  --tinte-soft: rgba(36, 26, 14, .78);

  --hair:       rgba(241, 234, 223, .30);
  --hair-soft:  rgba(241, 234, 223, .13);
  --ink-soft:   rgba(241, 234, 223, .76);

  --serif:  "Lora", Georgia, "Times New Roman", serif;
  --script: "Coalhand", "Segoe Script", cursive;

  --gutter:    1.25rem;
  --shell-max: 1040px;
  --shell:   min(100% - var(--gutter) * 2, var(--shell-max));
  --shell-w: min(100% - var(--gutter) * 2, 1240px);
  --bleed:   max(var(--gutter), calc((100% - var(--shell-max)) / 2));
  /* Um so viel ragt die breite Schale je Seite ueber den Satzspiegel hinaus -
     die Linie, auf der die Fusszeile endet. Schmaler als 1040px: null. */
  --ueberhang: max(0px, calc((min(100vw - var(--gutter) * 2, 1240px)
                            - min(100vw - var(--gutter) * 2, var(--shell-max))) / 2));
  --rhythm:  clamp(4.5rem, 8vw, 7.5rem);
  --ease:    cubic-bezier(.22, .61, .36, 1);
  --ease-hart: cubic-bezier(.16, 1, .3, 1);   /* schnell da, dann ausschwingen */
}

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

:root { color-scheme: dark; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: inherit; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

:focus-visible {
  outline: 2px solid var(--quince-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

.shell { width: var(--shell); margin-inline: auto; }
.shell-wide { width: var(--shell-w); margin-inline: auto; }

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--quince); color: var(--walnut);
  padding: .7rem 1.1rem; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Typografie ---------- */
/* Coalhand setzt die Oberlaengen bis 24 % ueber die Zeilenbox und die
   Unterlaengen bis 36 % darunter. Mit line-height:1 lag diese Tinte ausserhalb
   der Elementbox. Am Schreibtisch faellt das nicht auf, auf dem Handy schon:
   jede .reveal-Blende ist ein eigener Compositing-Layer, und der wird auf die
   Elementbox zugeschnitten - dort waren "Sortiment", "Team" und "Spezielle
   Wuensche?" oben angeschnitten. 1.5 fasst Ober- und Unterlaengen; das
   negative margin-block holt die zusaetzliche Zeilenhoehe wieder aus dem
   Layout, damit die Abstaende bleiben wie sie waren. */
.script {
  font-family: var(--script);
  font-weight: 400;
  line-height: 1.5;
  margin-block: -.25em;
  letter-spacing: .005em;
  color: var(--ink);
}

.section-title {
  font-size: clamp(2.5rem, 4.6vw, 3.5rem);
  margin-bottom: calc(2.4rem - .25em);
}
/* Kurzer Quittenstrich unter der Ueberschrift. Die alte Haarlinie lief ueber
   die ganze Spaltenbreite und war bei .16 Deckung nicht mehr als Absicht zu
   lesen – nur noch als Kratzer. */
.section-title::after,
.page-head .script::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-top: calc(.9rem - .25em);
  border-radius: 2px;
  background: var(--quince);
}

.lead {
  font-size: 1.1875rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34ch;
}

.prose { max-width: 52ch; }
.prose p + p { margin-top: 1.1em; }

.sub {
  font-family: var(--serif);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .002em;
  margin-bottom: .9rem;
}

.muted { color: var(--ink-soft); }

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--rhythm); }
.section--tint { background: var(--linen); }
.section--tight { padding-block: calc(var(--rhythm) * .62); }
/* Vor dem abgesetzten Sortimentblock mehr Luft: sonst klebt die Tonflaeche
   an den Leitmotiven. */
.section:has(+ #sortiment) { padding-bottom: calc(var(--rhythm) * 1.25); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.section-head .section-title { margin-bottom: 0; flex: 1 1 auto; }
.section-head + * { margin-top: 2.6rem; }

/* ---------- Bildrahmen (das wiederkehrende Detail) ---------- */
.frame { position: relative; display: block; }
.frame > .frame-inner {
  display: block;
  overflow: hidden;
  background: var(--linen);
  box-shadow: 0 0 0 1px var(--hair-soft), 0 20px 44px -26px rgba(0, 0, 0, .9);
}
.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Die Fotos sind im Original flau; ohne die Anhebung wirken sie auf dem
     dunklen Grund schmutzig statt warm. */
  filter: saturate(1.06) contrast(1.04);
  transition: transform 1s var(--ease);
}
/* Nur was anklickbar ist, reagiert auch. Der Zoom lag vorher auf jedem Bild,
   auch auf denen, die zu nichts fuehren. */
a:hover .frame img,
a:focus-visible .frame img { transform: scale(1.04); }


/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: .9375rem;
  letter-spacing: .055em;
  line-height: 1;
  text-decoration: none;
  padding: 1.05em 2.1em;
  border: 1px solid var(--olive);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color .28s var(--ease), border-color .28s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--olive);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .28s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover { color: var(--walnut); border-color: var(--olive); }

.btn--light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--light::before { background: #F2EADC; }
.btn--light:hover { color: var(--walnut); border-color: #F2EADC; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20,15,11,.55), rgba(20,15,11,0));
  opacity: 1;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.site-header.is-solid {
  background: rgba(9, 6, 4, .93);
  box-shadow: 0 1px 0 var(--hair-soft);
}
.site-header.is-solid::before { opacity: 0; }

@supports (backdrop-filter: blur(8px)) {
  .site-header.is-solid { background: rgba(9, 6, 4, .82); backdrop-filter: blur(12px); }
  /* backdrop-filter erzeugt einen Containing Block: das fixierte Menue waere sonst im Balken gefangen. */
  .nav-open .site-header.is-solid {
    background: rgba(9, 6, 4, .99);
    backdrop-filter: none;
  }
}
.nav-open { overflow: hidden; }

.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.45rem;
  transition: padding .45s var(--ease);
}
.site-header.is-solid .header-bar { padding-block: .7rem; }

.brand {
  display: block;
  line-height: 0;
  transition: opacity .4s var(--ease);
}
/* Auf der Startseite liegt das grosse Logo direkt darunter – kein doppeltes Logo. */
.site-header:not(.is-solid) .brand { opacity: 0; visibility: hidden; pointer-events: none; }
.brand img {
  height: 52px;
  width: auto;
  transition: height .45s var(--ease);
}
.site-header.is-solid .brand img { height: 34px; }

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  position: relative;
  color: #F6F2EA;
  text-decoration: none;
  font-size: .96875rem;
  letter-spacing: .045em;
  padding-block: .25rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--quince);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav a:hover::after,
.nav a.is-current::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  border: 0; background: transparent; cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  margin: 5.5px auto;
  background: #F6F2EA;
  transition: transform .35s var(--ease), opacity .25s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 580px;
  height: 100svh;
  max-height: 900px;
  display: grid;
  place-items: center;
  /* Beschneidet das Foto auf den Bogen unten. */
  overflow: hidden;
  /* Keine Grundfarbe: der Hero stoesst direkt an die Textur der Seite. */
  background: transparent;
  /* Die untere Kante: eineinhalb Wellen ueber die Breite, mit deutlich
     verschiedenen Ausschlaegen. Die erste (links, vom Kamm bei 4/64 ins Tal
     bei 62/64) holt weiter aus als die zweite (44/64 hinauf auf 4/64); rechts
     laeuft die Kante flach bei 6/64 aus, endet also auf anderer Hoehe als
     links. Zwei Maskenlagen, damit die Welle immer --bogen hoch bleibt und
     nicht mit der Hero-Hoehe mitwaechst; preserveAspectRatio='none' zieht
     sie auf jede Breite. */
  --bogen: clamp(38px, 6vw, 86px);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0 H1200 V6 C1000 6 1000 44 800 44 C590 44 590 4 380 4 C190 4 190 62 0 62 Z'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-size: 100% var(--bogen), 100% calc(100% - var(--bogen) + 1px);
  mask-position: bottom, top;
  mask-repeat: no-repeat;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.09);
  filter: brightness(1.22) saturate(1.08) contrast(1.04);
  animation: heroZoom 14s var(--ease) forwards;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  /* Eine echte Vignette: aussen dunkel, in der Mitte offen. Vorher war es
     andersherum - der dunkle Fleck lag in der Bildmitte und hat das Foto
     flach und neblig gemacht. Oben Platz fuer das Menue, unten fuer die
     Bogenkante.
     Die Werte sind gegenueber der ersten Fassung deutlich zurueckgenommen,
     damit das Foto heller steht. Ganz weg duerfen sie nicht: das Logo und die
     beiden Zeilen darunter sind weiss und brauchen einen Grund, auf dem sie
     auch bei hellen Stellen im Foto noch lesbar sind. */
  background:
    radial-gradient(118% 82% at 50% 44%, rgba(14,10,7,.22) 0%, rgba(14,10,7,.38) 58%, rgba(14,10,7,.70) 100%),
    linear-gradient(to bottom, rgba(14,10,7,.46), rgba(14,10,7,.08) 36%, rgba(14,10,7,.58));
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: 7rem 4rem;
  display: grid;
  justify-items: center;
  gap: 1.35rem;
}
.hero-logo {
  width: min(78vw, 400px);
  height: auto;
  filter: drop-shadow(0 4px 30px rgba(0,0,0,.72));
}
.hero-headline {
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.35;
  color: #FDFBF7;
  max-width: 22ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.hero-text {
  color: rgba(253,251,247,.86);
  max-width: 46ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.hero-cta { margin-top: .8rem; }

.hero-scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 4.6rem;
  width: 46px; height: 54px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, 16px);
  animation: heroScrollIn 1.15s var(--ease) 2.1s forwards;
}
@keyframes heroScrollIn { to { opacity: 1; transform: translate(-50%, 0); } }
.hero-scroll span {
  display: block;
  width: 1px; height: 40px;
  background: linear-gradient(rgba(253,251,247,0), rgba(253,251,247,.9));
  transform-origin: top;
  animation: scrollCue 2.8s var(--ease) infinite;
}
@keyframes scrollCue {
  0%   { transform: scaleY(.2); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1);  opacity: 0; }
}

/* Hero-Sequenz: kein blosses Aufblenden. Das Logo wird von unten mit einer
   Bogenkante aufgedeckt, Text und Knopf kommen hart heran und schwingen aus. */
.hero-logo {
  opacity: 0;
  animation: heroLogo 1.25s var(--ease-hart) .25s forwards;
}
@keyframes heroLogo {
  from { opacity: 0; clip-path: ellipse(64% 0% at 50% 108%); }
  to   { opacity: 1; clip-path: ellipse(150% 150% at 50% 108%); }
}

.hero-headline, .hero-text, .hero-cta {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn .9s var(--ease-hart) forwards;
}
.hero-headline{ animation-delay: .95s; }
.hero-text    { animation-delay: 1.18s; }
.hero-cta     { animation-delay: 1.41s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ---------- Aktuelles: ein angepinnter Zettel ----------
   Der einzige helle Fleck der Seite. Bild und Text liegen zusammen auf dem
   Blatt, das Blatt haengt leicht schief an der dunklen Wand. */
.brett {
  /* Luft fuer die gedrehten Ecken und den Schatten. */
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
}
.zettel {
  /* Winkel und Hoehe sind Stellschrauben: jeder Zettel setzt sie anders,
     der Rest des Papiers bleibt fuer alle gleich. */
  --dreh: -1.4deg;
  --hoch: 0rem;
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.2rem) clamp(1.9rem, 3.4vw, 2.6rem);
  background: var(--papier);
  color: var(--tinte);
  /* Zwei Faktoren statt fester Werte: das Handy dreht alle Zettel flacher und
     stellt den Versatz ab, ohne die Winkel der einzelnen Plaetze zu verlieren. */
  --neig: 1;
  --versatz: 1;
  transform: rotate(calc(var(--dreh) * var(--neig))) translateY(calc(var(--hoch) * var(--versatz)));
  /* Zwei Schatten: der enge legt die Kante auf die Wand, der weite haelt
     das Blatt darueber. */
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35), 0 26px 50px -22px rgba(0, 0, 0, .85);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* Papierfaser statt glatter Flaeche, dieselbe Machart wie Stein und Holz. */
.zettel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='faser'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.05' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23faser)' opacity='0.13'/%3E%3C/svg%3E");
  background-size: 420px 420px;
  background-blend-mode: multiply;
}
/* Beim Darueberfahren richtet sich das Blatt ein wenig auf. */
.zettel:hover {
  transform: rotate(calc(var(--dreh) * var(--neig) * .35)) translateY(calc(var(--hoch) * var(--versatz) - 4px));
  box-shadow: 0 3px 7px rgba(0, 0, 0, .3), 0 34px 60px -24px rgba(0, 0, 0, .8);
}

/* Die Nadel sitzt nicht in der Mitte - sonst waere die Symmetrie zurueck. */
.pinnadel {
  position: absolute;
  top: calc(var(--nadel-gr, 24px) / -2);
  left: var(--nadel-x, 44%);
  width: var(--nadel-gr, 24px);
  height: var(--nadel-gr, 24px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FBE8B0 0%, var(--nadel-ton, var(--quince)) 38%, #8C6A22 100%);
  box-shadow: 0 4px 9px rgba(0, 0, 0, .55), inset 0 -2px 3px rgba(0, 0, 0, .3);
}
/* Der Schatten, den die Nadel auf das Papier wirft. */
.pinnadel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 76%;
  width: 16px;
  height: 7px;
  transform: translateX(-42%);
  border-radius: 50%;
  background: rgba(60, 42, 18, .3);
  filter: blur(2px);
}

.zettel .frame { margin-bottom: clamp(1.4rem, 2.6vw, 1.9rem); }
.zettel .frame-inner {
  aspect-ratio: 4 / 3;
  background: #E2D8C6;
  /* Auf hellem Papier traegt der dunkle Schlagschatten von vorher nicht. */
  box-shadow: 0 0 0 1px rgba(46, 33, 16, .16), 0 6px 16px -10px rgba(46, 33, 16, .7);
}
.zettel .prose { max-width: none; }
.zettel .sub { color: var(--tinte); }
.zettel .muted { color: var(--tinte-soft); }

/* ---------- Die drei Anordnungen am Brett ----------
   Alle drei sind absichtlich unsymmetrisch: Winkel, Hoehe, Breite und Nadel
   sind an jedem Platz anders. Zwei gleich breite Zettel links und rechts
   wuerden sich sofort als Paar mit Mitte lesen, egal wie schief sie haengen.
   Der Versatz laeuft ueber transform und kostet keine Hoehe - deshalb bekommt
   das Brett sie unten als Polster dazu. */
.brett--zweit,
.brett--flankiert {
  display: grid;
  align-items: start;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.brett--zweit {
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  padding-bottom: 5.6rem;
}
.brett--flankiert {
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 16.5rem);
  padding-bottom: 6.8rem;
}
/* Der grosse Zettel steht im Markup vorn - fuer die Vorlesereihenfolge und
   fuer den Fall ohne JavaScript. Bei "flankiert" setzt ihn das Raster mittig. */
.brett--flankiert > :nth-child(1) { grid-column: 2; grid-row: 1; }
.brett--flankiert > :nth-child(2) { grid-column: 1; grid-row: 1; }
.brett--flankiert > :nth-child(3) { grid-column: 3; grid-row: 1; }

.brett--zweit     > :nth-child(1) { --dreh: -1.4deg; --hoch: 0rem; }
.brett--zweit     > :nth-child(2) { --dreh:  2.7deg; --hoch: 3.4rem; }
.brett--flankiert > :nth-child(1) { --dreh: -1.1deg; --hoch: 0rem; }
.brett--flankiert > :nth-child(2) { --dreh:  2.4deg; --hoch: 4.6rem; }
.brett--flankiert > :nth-child(3) { --dreh: -3.2deg; --hoch: 1.9rem; }

/* Nadeln: andere Stelle, andere Groesse, beim mittleren Platz auch ein anderer
   Ton - drei gleiche Nadeln haetten die Asymmetrie der Winkel wieder eingesammelt. */
.brett--zweit     > :nth-child(2) .pinnadel,
.brett--flankiert > :nth-child(2) .pinnadel { --nadel-x: 66%; --nadel-gr: 19px; --nadel-ton: var(--olive); }
.brett--flankiert > :nth-child(3) .pinnadel { --nadel-x: 29%; --nadel-gr: 17px; }

.zettel--klein {
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.35rem) clamp(1.2rem, 2.4vw, 1.6rem);
}
/* Quadratisch statt 4:3 - noch ein Unterschied, der die Kleinen vom Grossen trennt. */
.zettel--klein .frame-inner { aspect-ratio: 1 / 1; }
.zettel--klein .frame { margin-bottom: clamp(.9rem, 1.8vw, 1.2rem); }
.zettel--klein .sub { font-size: 1.125rem; margin-bottom: .5rem; }
.zettel--klein .muted { font-size: .9375rem; line-height: 1.55; }

/* ---------- Leitmotive ----------
   Drei Reihen, das Bild wechselt die Seite. Es steht randlos: von der
   Bildschirmkante bis zur Mitte, und dort hoert es nicht mit einer Kante auf,
   sondern blendet in den Grund der Seite aus.
   Nur zur Textseite hin. Oben und unten stand einmal dieselbe Blende - das
   nahm dem Bild die Kante, die es oben und unten haben soll. */
.motive {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
}
.motiv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.motiv-bild {
  display: block;
  /* Hoehe statt Seitenverhaeltnis: sonst waere eine Reihe auf einem breiten
     Schirm hoeher als das Fenster. */
  height: clamp(19rem, 52vw, 32rem);
}
.motiv-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Wie bei allen Fotos der Seite: im Original sind sie flau. */
  filter: saturate(1.06) contrast(1.04);
  -webkit-mask-image: linear-gradient(to right, #000 36%, transparent 94%);
  mask-image: linear-gradient(to right, #000 36%, transparent 94%);
}
/* Explizit gesetzt statt mit order - die Reihenfolge im Quelltext bleibt gleich. */
.motiv:nth-child(even) .motiv-bild { grid-column: 2; grid-row: 1; }
.motiv:nth-child(even) .motiv-text { grid-column: 1; grid-row: 1; }
.motiv:nth-child(even) .motiv-bild img {
  -webkit-mask-image: linear-gradient(to left, #000 36%, transparent 94%);
  mask-image: linear-gradient(to left, #000 36%, transparent 94%);
}

/* Den Satzspiegel haelt allein der Text ein - das Bild laeuft darueber hinaus. */
.motiv-text {
  max-width: 38ch;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  justify-self: start;
}
.motiv:nth-child(even) .motiv-text { justify-self: end; }
.motiv h3 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1.5;
  margin: -.25em 0 calc(.9rem - .25em);
}
.motiv h3 a { text-decoration: none; transition: color .26s var(--ease); }
.motiv h3 a:hover { color: var(--quince); }
.motiv p { color: var(--ink-soft); }
.motiv-mehr {
  display: inline-block;
  margin-top: 1.3rem;
  font-size: .9375rem;
  letter-spacing: .05em;
  color: var(--quince);
  text-decoration: none;
  padding-bottom: .3rem;
  border-bottom: 1px solid transparent;
  transition: border-color .28s var(--ease);
}
.motiv-mehr::after { content: " \2192"; }
.motiv-mehr:hover { border-bottom-color: var(--quince); }

/* ---------- Sortiment ---------- */
.rail-nav { display: flex; gap: .6rem; }
.rail-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .3s, border-color .3s, opacity .3s;
}
.rail-btn:hover:not(:disabled) { background: var(--olive); border-color: var(--olive); color: var(--walnut); }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn svg { width: 16px; height: 16px; }

.rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 12px var(--bleed) .5rem;
  scroll-padding-inline: var(--bleed);
  scrollbar-width: none;
  --fade: min(46px, var(--bleed));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.rail:empty { min-height: 405px; }
.shell + .rail { margin-top: 2.6rem; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 254px; scroll-snap-align: start; }
.rail .frame-inner { aspect-ratio: 3 / 4; }
.rail h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.4rem 0 .4rem;
}
.rail p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- Team ---------- */
.team-card {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 4.5vw, 4rem);
  align-items: center;
}
.team-card .frame { max-width: 360px; }
.team-card .frame-inner { aspect-ratio: 600 / 648; }

/* ---------- Bewertungen: kleine Zettel am selben Brett ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  /* Unterschiedlich lange Zettel sollen unterschiedlich lang bleiben. */
  align-items: start;
  padding-block: clamp(1rem, 2.5vw, 1.8rem);
}
.zettel--notiz {
  max-width: none;
  margin-inline: 0;
  padding: clamp(1.5rem, 2.8vw, 2rem) clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.5rem, 2.8vw, 2rem);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 34px -18px rgba(0, 0, 0, .8);
}
/* Drei Winkel, drei Hoehen, drei Nadelpositionen - nichts steht auf einer
   Linie. Der Dreierrhythmus laeuft weiter, wenn mehr Zettel dazukommen. */
.quotes > :nth-child(3n+1) { --dreh: -2.2deg; --hoch: .4rem; }
.quotes > :nth-child(3n+2) { --dreh: 1.6deg;  --hoch: -1.1rem; }
.quotes > :nth-child(3n)   { --dreh: -.9deg;  --hoch: 1.3rem; }
.quotes > :nth-child(3n+1) .pinnadel { left: 29%; }
.quotes > :nth-child(3n+2) .pinnadel { left: 64%; }
.quotes > :nth-child(3n)   .pinnadel { left: 45%; }

.quote p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinte);
}
/* Getippter Zettel, von Hand unterschrieben. */
.quote footer {
  margin-top: 1.1rem;
  font-family: var(--script);
  font-size: 1.2rem;
  font-style: normal;
  line-height: 1.3;
  color: var(--tinte-soft);
}

/* ---------- Kontakt ----------
   Eine Ansprache statt einer Tabelle: die Anschrift und die Zeiten stehen
   jetzt in der Fusszeile, hier steht nur noch die Einladung zu fragen. */
.kontakt-zug {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 39rem);
  gap: clamp(1.4rem, 2.6vw, 2rem);
  /* Oben buendig: die Karte beginnt auf der Zeile "Spezielle Wuensche?" und
     ragt nicht darueber hinaus. */
  align-items: start;
}
.anfrage { max-width: 62ch; }

/* ---------- Karte ----------
   Aus OpenStreetMap-Daten selbst gezeichnet (siehe README): eine Datei im
   eigenen Ordner, keine Anfrage an Dritte, nichts nachzuladen. Deshalb
   braucht sie auch keine Einwilligung wie eine eingebettete Fremdkarte. */
/* Die Karte laeuft nach rechts aus dem Satzspiegel heraus und endet auf
   derselben Linie wie die Fusszeile - wie eine Karte, die am Blattrand
   weitergeht. Der weiche Rand traegt das, eine harte Kante taete es nicht. */
.karte { margin: 0 calc(var(--ueberhang) * -1) 0 0; }
.karte > a {
  position: relative;
  display: block;
  border-radius: var(--kante);
  overflow: hidden;
  background: #1B1510;
}
.karte img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1s var(--ease);
}
.karte > a:hover img, .karte > a:focus-visible img { transform: scale(1.04); }
/* Der Name sitzt neben dem Punkt in der Mitte - die Schrift der Seite, die
   eine Datei im <img> nicht mitbekaeme. */
.karte-name {
  position: absolute;
  /* In Prozent, nicht in rem: sonst wandert der Name vom Punkt weg, sobald
     die Karte kleiner skaliert. */
  left: 53%;
  top: 43%;
  font-family: var(--script);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  line-height: 1.5;
  margin-block: -.25em;
  color: var(--quince);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.karte figcaption {
  margin-top: .7rem;
  font-size: .75rem;
  letter-spacing: .02em;
  color: rgba(241, 234, 223, .42);
}
.karte figcaption a { color: inherit; text-underline-offset: .2em; }
.karte figcaption a:hover { color: var(--quince); }
.anfrage-oben {
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  color: var(--quince);
}
.anfrage-titel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  line-height: 1.1;
  margin-top: .75rem;
}
.anfrage-text {
  margin-top: 1.1rem;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.anfrage-wege {
  margin-top: 1.5rem;
  display: grid;
  gap: 0;
  justify-items: start;
}
.anfrage-weg {
  display: inline-grid;
  grid-template-columns: 1.45rem auto;
  gap: .85rem;
  align-items: center;
  /* Der Abstand zwischen den drei Zeilen kommt allein aus dieser Hoehe.
     36px statt der empfohlenen 44px - auf Wunsch enger, aber ueber der
     Untergrenze von 24px, unter der ein Tippbereich nicht mehr trifft. */
  min-height: 36px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ink);
  text-decoration: none;
  transition: color .26s var(--ease);
}
.anfrage-weg:hover { color: var(--quince); }
.anfrage-weg svg { width: 17px; height: 17px; color: var(--quince); }
/* Die Mailadresse ist laenger als die Nummern und darf schmal umbrechen. */
.anfrage-weg[href^="mailto"] { font-size: clamp(.95rem, 1.8vw, 1.1rem); overflow-wrap: anywhere; }


/* Die Bewertungen haengen jetzt am Holz und sind damit ein eigener Block: der
   braucht unten dieselbe Luft wie oben, sonst sitzen die schiefen Zettel auf
   der Kante. Kontakt und Fusszeile lesen sich weiter als ein Zug. */
#bewertungen { padding-block: clamp(2.6rem, 5vw, 4.2rem); }
#kontakt { padding-block: clamp(2.2rem, 4vw, 3.2rem) clamp(1.8rem, 3.4vw, 2.8rem); }

/* ---------- Fusszeile ---------- */
.site-footer {
  background: var(--walnut);
  border-top: 1px solid var(--hair-soft);
  color: rgba(237,229,216,.72);
  padding-block: clamp(2.4rem, 4.6vw, 3.6rem) 2.5rem;
  font-size: .9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2.4rem, 4vw, 3.5rem);
}
/* Der Quittenstrich sitzt unter der Schrift, nicht unter der ganzen Spalte -
   dieselbe Geste wie unter den Abschnittsueberschriften weiter oben. */
.footer-spalte h2 {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  padding: 0 1.5rem .75rem 0;
  margin-bottom: 1.6rem;
  border-bottom: 2px solid var(--quince);
}
.footer-spalte p { line-height: 1.8; }
.footer-spalte p + p { margin-top: 1.15rem; }

.footer-links, .footer-zeilen { list-style: none; margin: 0; padding: 0; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  /* Der Abstand zwischen den Links ist diese Tippflaeche, kein Margin. 32px
     statt 40px - auf Wunsch enger, wie bei den Kontaktwegen, und weiter ueber
     der Untergrenze von 24px, unter der ein Tippbereich nicht mehr trifft. */
  min-height: 32px;
  text-decoration: none;
  transition: color .26s var(--ease);
}
.footer-zeilen li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .9rem;
  align-items: start;
  line-height: 1.8;
}
.footer-zeilen li + li { margin-top: .9rem; }
.footer-zeilen svg {
  width: 15px;
  height: 15px;
  margin-top: .45em;        /* auf die erste Textzeile ausgerichtet */
  color: var(--quince);
}
.footer-zeilen a {
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .26s var(--ease);
}
.footer-links a:hover, .footer-zeilen a:hover { color: var(--quince); }

/* Das Zeichen steht mittig, die Haarlinien laufen nach beiden Seiten aus. */
.footer-marke {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 5vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-marke::before, .footer-marke::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--hair-soft);
}
.footer-marke img { height: clamp(68px, 9vw, 96px); width: auto; opacity: .92; }

.footer-legal {
  margin-top: 2.1rem;
  text-align: center;
  font-size: .8125rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(237,229,216,.64);
}

/* ---------- Unterseiten ---------- */
.page-head {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-head .script {
  font-size: clamp(2.8rem, 6vw, 4.2rem);
}
.page-head p { margin-top: 1.4rem; }

/* Wohnen / Schenken / Genießen: dasselbe randlose Bild wie das Leitmotiv auf
   der Startseite, hier ueber die volle Breite. Die Blende laeuft nach oben und
   unten, weil links und rechts nichts mehr daneben steht. */
.seiten-bild {
  height: clamp(15rem, 42vw, 30rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}
.seiten-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
}

/* Galerie */
.gallery {
  columns: 4;
  column-gap: 1.4rem;
  padding-bottom: var(--rhythm);
}
.gallery a {
  display: block;
  margin-bottom: 1.4rem;
  break-inside: avoid;
  overflow: hidden;
  background: var(--linen);
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1s var(--ease), opacity .6s;
}
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.05); }

/* Bilder, die die Lightbox oeffnen */
.zoombar { cursor: zoom-in; }
/* currentColor: haelt den Rahmen sowohl auf dem dunklen Grund als auch auf dem Zettel sichtbar. */
img.zoombar:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  background: #16100B;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  outline: 1px solid rgba(246,242,234,.22);
  outline-offset: 10px;
}
.lb-btn {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}
.lb-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-btn svg { width: 18px; height: 18px; }
.lb-count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: .875rem;
  letter-spacing: .08em;
}

/* Die Knopfzeile der Fehlerseiten. */
.cta-zeile { margin-top: 2.3rem; }

/* Rechtstexte */
.legal { padding-bottom: var(--rhythm); }
.legal h2 {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 2.8rem 0 .7rem;
}
.legal h2:first-child { margin-top: 0; }

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .gallery { columns: 3; }
}

/* Nebeneinander lohnt sich nur, solange dem Text neben der breiten Karte
   die rund 375px bleiben, die die Ueberschrift einzeilig braucht. */
@media (max-width: 1080px) {
  .kontakt-zug { grid-template-columns: 1fr; gap: 2.2rem; }
  .karte { max-width: 30rem; margin-right: 0; }
}

@media (max-width: 860px) {
  :root { --gutter: 1rem; }

  /* Hauptmenue wird zum Hamburger */
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    background: var(--walnut);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; }
  .nav a { font-size: 1.5rem; letter-spacing: .03em; }

  .rail-nav { display: none; }
  .hero-scroll { display: none; }
}

@media (max-width: 740px) {
  .team-card { grid-template-columns: 1fr; gap: 2.4rem; }
  .team-card .frame { max-width: 300px; }

  /* Schmaler Bildschirm: weniger Schraeglage, sonst stoesst das Blatt an, und
     kein Versatz - untereinander waere er nur ein Loch zwischen den Zetteln.
     Als Faktor, damit die Winkel der einzelnen Plaetze erhalten bleiben. */
  .zettel { --neig: .65; --versatz: 0; }
  .zettel .frame-inner { aspect-ratio: 3 / 2; }
  .zettel--klein .frame-inner { aspect-ratio: 1 / 1; }

  /* Die Anordnungen stapeln sich. Die nth-child-Auswahl muss wiederholt werden,
     sonst kommt sie gegen die Platzierung weiter oben nicht an. */
  .brett--zweit,
  .brett--flankiert { grid-template-columns: 1fr; padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
  .brett--flankiert > :nth-child(1),
  .brett--flankiert > :nth-child(2),
  .brett--flankiert > :nth-child(3) { grid-column: 1; grid-row: auto; }
  /* Prozent, nicht nur rem: bei 390px waeren 22rem fast die volle Spalte -
     der kleine Zettel saehe dann aus wie der grosse. */
  .zettel--klein { max-width: min(22rem, 78%); }
  /* Untereinander kaeme die Breite sonst von nirgends mehr - dann haetten die
     beiden Kleinen nur noch den Winkel, der sie unterscheidet. */
  .brett--flankiert > :nth-child(3) { max-width: min(19rem, 66%); }

  /* Untereinander steht kein Text mehr neben dem Bild, zu dem es ausblenden
     koennte - also blendet es gar nicht mehr, sondern steht als Band ueber der
     vollen Breite. Die waagerechte Maske muss dafuer weg, sonst bliebe die
     halb ausgeblendete Seite der Breitversion stehen. */
  .motive { gap: 3.4rem; }
  .motiv {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    justify-items: center;
    text-align: center;
  }
  .motiv:nth-child(even) .motiv-bild,
  .motiv:nth-child(even) .motiv-text { grid-column: 1; grid-row: auto; }
  .motiv-bild {
    width: 100%;
    height: clamp(15rem, 62vw, 22rem);
  }
  .motiv-bild img,
  .motiv:nth-child(even) .motiv-bild img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .motiv-text,
  .motiv:nth-child(even) .motiv-text { justify-self: center; max-width: 36ch; }
  .motiv p { margin-inline: auto; }

  .quotes { grid-template-columns: 1fr; gap: 2.4rem; }
  /* Einspaltig nicht ueber die ganze Breite - ein Zettel ueber 700px waere
     ein Streifen. Stattdessen schmaler und abwechselnd links und rechts. */
  .zettel--notiz { max-width: 30rem; }
  .quotes > :nth-child(even) { margin-left: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .gallery { columns: 2; column-gap: 1rem; }
  .gallery a { margin-bottom: 1rem; }
}

@media (max-width: 460px) {
  body { font-size: 1rem; }
  :root { --gutter: 1.125rem; }
  .brand img { height: 42px; }
  .hero-inner { padding-block: 6rem 3.5rem; }
  .lead { font-size: 1.0625rem; }
  .rail p, .site-footer { font-size: 1rem; }
  .rail:empty { min-height: 366px; }
  .quotes > :nth-child(3n+1) { --dreh: -1.4deg; }
  .quotes > :nth-child(3n+2) { --dreh: 1deg; }
  .quotes > :nth-child(3n)   { --dreh: -.6deg; }
  .rail > * { flex-basis: 200px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .hero-media img { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .rail { scroll-behavior: auto; }
  .hero-scroll span { animation: none; opacity: .8; }
}

/* ==========================================================================
   Rundungen, Korn und Staffelung – das Rustikale sichtbarer machen
   ========================================================================== */

:root {
  /* Die Bilder teilen sich eine Kante: oben etwas weicher als unten,
     damit die Bilder als eine Familie zu lesen sind. */
  --kante: 10px 10px 3px 3px;
}

/* ---------- Material statt Farbflaeche ----------
   Zwei prozedurale Texturen als data-URI, keine Bilddatei, kein Request:
   Stein fuer die ganze Seite, Holzmaserung fuer den abgesetzten Abschnitt.
   Stellschrauben: baseFrequency = Koernung, opacity im <rect> = Staerke.
   Bei 0.30 verschmierte das Korn die Fotos; 0.16/0.22 traegt die Haptik,
   ohne dass die Flaeche schmutzig wird. */

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='stein'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.013' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23stein)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: 700px 700px;
  background-blend-mode: soft-light;
}

/* Holz: in der Waagerechten gedehntes Rauschen ergibt eine laufende Maserung. */
.section--tint,
.site-footer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500'%3E%3Cfilter id='holz'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.3' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23holz)' opacity='0.22'/%3E%3C/svg%3E");
  background-size: 900px 500px;
  background-blend-mode: soft-light;
}

/* Darueber noch ein feines Korn, damit auch die Fotos die Papierhaptik bekommen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Die Fusszeile stand mit .55 knapp ueber der Grenze - mit Textur braucht sie Luft. */
.footer-legal { color: rgba(237,229,216,.64); }

/* ---------- Kurven ---------- */
/* Der getoente Abschnitt trennt sich jetzt ueber den Farbwert, nicht ueber
   eine Rundung - die Linse zog die Seite krumm. */
.section--tint {
  border-block: 1px solid var(--hair-soft);
}

/* Das Teamfoto bringt seinen eigenen Rand mit: in team.webp ist unten eine
   Welle freigestellt. Ring, Schatten und Rundung haben dagegen gearbeitet -
   sie zeichneten ein Rechteck um eine Form, die keines ist. */
.team-card .frame-inner {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Alle uebrigen Bilder teilen sich eine Kante. */
.zettel .frame-inner,
.rail .frame-inner { border-radius: var(--kante); }

.btn { border-radius: 999px; }
.rail-btn, .lb-btn { border-radius: 50%; }
.gallery a { border-radius: 10px; }
.lightbox img { border-radius: 6px; }

/* ---------- Staffelung: die Teile eines Abschnitts kommen nacheinander ---------- */
.motive > *,
.anfrage-wege > * {
  opacity: 0;
  transform: translateY(18px);
}
.is-in .motive > *,
.is-in .anfrage-wege > * {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
/* Die Zettel haengen schief - ihr Auftritt darf nur die Deckung bewegen,
   sonst biegt "transform: none" sie gerade. */
.quotes > * { opacity: 0; }
.is-in .quotes > * { opacity: 1; transition: opacity .85s var(--ease); }
.is-in .motive > :nth-child(2),
.is-in .quotes > :nth-child(2),
.is-in .anfrage-wege > :nth-child(2) { transition-delay: .13s; }
.is-in .motive > :nth-child(3),
.is-in .quotes > :nth-child(3),
.is-in .anfrage-wege > :nth-child(3) { transition-delay: .26s; }

/* ---------- Reduzierte Bewegung: nichts darf unsichtbar bleiben ---------- */
@media (prefers-reduced-motion: reduce) {
  .motive > *,
  .anfrage-wege > * { opacity: 1; transform: none; }
  .quotes > * { opacity: 1; }
}