@charset "UTF-8";

/* ==========================================================================
   Winzer Natursteine und Grabmale

   Gestaltung nach dem Vorbild steinmetz-sturm.de, Farben von Winzer.
   Ausgemessene Werte der Vorlage: Work Sans, H1/H2 38px/500 mit -1px
   Laufweite, Buttons 62px hoch ohne Radius, Sektionsabstaende 140/210/70/40,
   Reveal beim Scrollen 0.8s mit 50px Versatz und 200ms Staffelung.

   FARBEN: Blau, Weiss und wenig Grau, abgenommen von der Visitenkarte.
   ========================================================================== */

:root {
  /* Blau der Visitenkarte. Die Fussleiste traegt das kraeftige Blau,
     die Wortmarke ein dunkleres Navy. Dazu Weiss und wenig Grau.
     Die Werte stammen vom Foto der Karte. Entschieden im Oktober 2026:
     Sie bleiben so, verbindliche Druckfarben werden nicht nachgefragt. */
  --akzent:       #1B4B96;   /* Blau der Fussleiste */
  --akzent-hell:  #5B8AC9;
  --akzent-tief:  #14396F;
  --akzent-lasur: rgba(27, 75, 150, .85);

  --dunkel:       #16325E;   /* Navy der Wortmarke, fuer dunkle Sektionen */
  --dunkel-hoch:  #4C555F;   /* das bisschen Grau */
  --schleier:     rgba(22, 50, 94, .55);

  --weiss:        #FFFFFF;
  --gedaempft:    #F2F4F7;
  --linie:        #DDE2E9;

  --text:         #111111;
  --text-2:       rgba(0, 0, 0, .6);
  --text-3:       #5F6874;   /* vorher #97A0AC, Kontrast 2,6:1 zu wenig */
  --text-auf:     #FFFFFF;
  --text-auf-2:   rgba(255, 255, 255, .72);

  --fehler:       #A32A1E;
  --fehler-lasur: #F7E3E0;

  /* Typografie der Vorlage */
  --gross:   38px;
  --zahl:    44px;
  --normal:  16.5px;
  --klein:   15.5px;
  --nav:     20px;

  --bahn:    1280px;
  --sek:     140px;   /* uk-section-large */
  --sek-xl:  210px;   /* uk-section-xlarge */
  --sek-std:  70px;
  --sek-s:    40px;
}

/* ------------------------------------------------------------------ Schrift
   Selbst gehostet, damit die Seite ohne Cookie-Banner auskommt.
   TODO: Work-Sans-Dateien nach assets/fonts/ legen.
   ----------------------------------------------------------------------- */

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/worksans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/worksans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/worksans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Serife nur fuer die Wortmarke. TODO: Datei nach assets/fonts/ legen. */
@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/cinzel-600.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------------- Basis */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: "Work Sans", "Segoe UI", system-ui, sans-serif;
  font-size: var(--normal);
  font-weight: 400;
  line-height: 1.7;          /* Vorlage: 28.05px auf 16.5px */
  letter-spacing: normal;    /* Laufweite nur bei Ueberschriften und Knoepfen */
  -webkit-font-smoothing: antialiased;
}

h1, h2, .gross {
  font-size: var(--gross);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--text);
  margin: 0;
}

h3 { font-size: var(--normal); font-weight: 500; letter-spacing: -.6px; margin: 0; }

p { margin: 0; }
p + p { margin-top: 1.4em; }

a { color: inherit; }

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

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

.bild { width: 100%; height: auto; object-fit: cover; background: var(--gedaempft); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akzent); color: var(--text-auf); padding: 14px 20px;
}
.skip:focus { left: 0; }

.bahn { width: min(100% - 40px, var(--bahn)); margin-inline: auto; }

/* Die seitlichen Einblendungen schieben Elemente kurz aus der Zeile.
   clip statt hidden, damit die klebende Kopfzeile funktioniert. */
main { overflow-x: clip; }

/* Der Punkt am Satzende, in der Vorlage in Akzentfarbe */
.punkt { color: var(--akzent); }

/* Kleine Vorzeile ueber der Ueberschrift */
.vorzeile {
  font-size: var(--normal);
  color: var(--akzent);
  letter-spacing: -.5px;
  margin-bottom: 18px;
}

.fliess { color: var(--text-2); max-width: 32em; }

/* ------------------------------------------------------------------- Kopf */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.kopf[data-gescrollt="ja"] { box-shadow: 0 1px 14px rgba(0,0,0,.07); border-bottom-color: var(--linie); }

.kopf__innen {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  min-height: 140px;         /* Vorlage: 100px Navbar plus 20px oben und unten */
  padding-block: 20px;
  transition: min-height .25s ease;
}
.kopf[data-gescrollt="ja"] .kopf__innen { min-height: 90px; }

.marke {
  text-decoration: none; display: grid; gap: 5px; justify-items: center;
  color: var(--dunkel);
}

/* Serifenversalien zwischen zwei Balken, wie auf der Visitenkarte.
   Entschieden im Oktober 2026: Die Textfassung bleibt das Logo der Website. */
.marke__wort {
  display: flex; align-items: center; gap: 11px;
  font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  font-size: 30px; font-weight: 600; line-height: 1;
  letter-spacing: .07em; text-transform: uppercase;
}
.marke__wort::before,
.marke__wort::after {
  content: ""; width: 24px; height: 7px; background: currentColor; flex: none;
}

.marke__zusatz {
  font-family: "Cinzel", Georgia, serif;
  font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap;
}

.marke--gross .marke__wort { font-size: 42px; gap: 15px; }
.marke--gross .marke__wort::before,
.marke--gross .marke__wort::after { width: 34px; height: 9px; }
.marke--gross .marke__zusatz { font-size: 14px; }

/* Nur fuer Vorleseprogramme */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.nav__liste {
  display: flex; justify-content: center; gap: 44px;
  list-style: none; margin: 0; padding: 0;
}
.nav__liste a {
  font-size: var(--nav); line-height: 1.7; letter-spacing: -.6px;
  text-transform: uppercase; text-decoration: none; color: var(--text-2);
  transition: color .2s ease;
}
.nav__liste a:hover { color: var(--text); }
.nav__liste a[aria-current="page"] { color: var(--text); }

.kopf__icons { display: flex; gap: 10px; }

.ikon {
  width: 36px; height: 36px; border-radius: 500px;
  background: var(--dunkel); color: var(--text-auf);
  display: grid; place-items: center;
  transition: background .2s ease;
}
.ikon:hover { background: var(--akzent); }
.ikon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.menue-schalter { display: none; }

/* ---------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 40px;
  border: 0; border-radius: 0;
  font: inherit; font-size: var(--normal); font-weight: 400; letter-spacing: -.5px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .22s ease;
}
.knopf--akzent { background: var(--akzent); color: var(--text-auf); }
.knopf--akzent:hover { background: var(--akzent-tief); }

.knopf--rand { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); }
.knopf--rand:hover { box-shadow: inset 0 0 0 1px var(--akzent); color: var(--akzent); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }

/* Pfeil-Link wie in der Fusszeile der Vorlage */
.pfeil {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; font-size: var(--normal);
}
.pfeil::after {
  content: ""; width: 22px; height: 1px; background: var(--akzent);
  position: relative; transition: width .2s ease;
}
.pfeil:hover::after { width: 34px; }

/* -------------------------------------------------------------- Sektionen */

.sek     { padding-block: var(--sek); }

.sek--std{ padding-block: var(--sek-std); }

.sek--gedaempft { background: var(--gedaempft); }
.sek--dunkel { background: var(--dunkel); color: var(--text-auf); }
.sek--dunkel h1, .sek--dunkel h2, .sek--dunkel h3,
.sek--dunkel .gross { color: var(--text-auf); }   /* .gross setzt sonst die dunkle Textfarbe */
.sek--dunkel .punkt { color: var(--akzent-hell); }  /* das dunkle Blau verschwindet sonst im Grund */
.sek--dunkel .fliess { color: var(--text-auf-2); }

/* Auf der navyblauen Sektion waere ein blauer Knopf nicht vom Grund zu
   unterscheiden. Dort wird er weiss mit blauer Schrift. */
.sek--dunkel .knopf--akzent { background: var(--weiss); color: var(--dunkel); }
.sek--dunkel .knopf--akzent:hover { background: #DDE7F4; color: var(--dunkel); }

/* ------------------------------------------------------------------- Held */

.held__innen { display: grid; gap: 60px; align-items: start; }

/* Der Held der Vorlage ist breiter als der uebrige Satzspiegel: die Textspalte
   misst 531px, die beiden Bilder je 380px. Das geht in 1280px nicht auf, in der
   Vorlage laufen die Bilder ueber den Container hinaus. Wir loesen es sauber
   ueber eine breitere Bahn nur fuer diesen Abschnitt. */

/* Grid-Kinder duerfen schrumpfen, sonst sprengen Bildstreifen die Zeile */
.held__innen > *, .flaeche__innen > *, .kopfzeile > *, .raster > *, .kontaktspalten > * { min-width: 0; }
@media (min-width: 960px) { .held__innen { grid-template-columns: .41fr .59fr; gap: 70px; } }

.held__unterzeile { font-size: var(--normal); color: var(--akzent); margin: 28px 0 0; max-width: 30em; }

/* --------------------------------------------------- Block mit Farbflaeche */

.flaeche { position: relative; }
.flaeche__grund {
  position: absolute; left: 0; top: 0;
  width: min(56%, 980px); height: 55%;
  background: var(--dunkel-hoch);
  z-index: 0;
}
.flaeche__innen {
  position: relative; z-index: 1;
  display: grid; gap: 50px; align-items: center;
  padding-block: 190px;
}
@media (min-width: 960px) { .flaeche__innen { grid-template-columns: 2fr 1fr; gap: 70px; } }

/* Wie beim Held laeuft der Bildstreifen in der Vorlage ueber den Satzspiegel
   hinaus. Breitere Bahn nur hier, damit die Bilder auf 435px kommen. */
@media (min-width: 1100px) {
  .flaeche .bahn { width: min(100% - 40px, 1400px); }
  .flaeche__innen { grid-template-columns: 910px 420px; gap: 70px; }
}

/* ------------------------------------------------------------- Bildstreifen */

.streifen { position: relative; min-width: 0; max-width: 100%; }
.streifen__spur {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 22px) / 4);   /* vier Kacheln wie in der Vorlage */
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.streifen__spur::-webkit-scrollbar { display: none; }
.streifen__spur > * { scroll-snap-align: start; }

.streifen__nav { display: flex; gap: 2px; margin-top: 22px; }
.streifen__knopf {
  width: 46px; height: 46px; border: 0; cursor: pointer;
  background: var(--gedaempft); color: var(--text);
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.streifen__knopf:hover { background: var(--akzent); color: var(--text-auf); }
.streifen__knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Beispielarbeiten: zwei hohe Bilder nebeneinander, wie in der Vorlage
   435 x 877 Pixel, also Verhaeltnis 1:2, mit 40px Abstand. */
.streifen--gross .streifen__spur { gap: 40px; }
@media (min-width: 960px) {
  .streifen--gross .streifen__spur { grid-auto-columns: calc((100% - 40px) / 2); }
}
.beispiel { display: block; text-decoration: none; }
.beispiel__bild { aspect-ratio: 1 / 2; }

/* Die Pfeile liegen in der Vorlage auf dem Streifen, weiss und 56px gross */
.streifen__nav--auflage {
  position: absolute; top: 30px; right: 30px; z-index: 2;
  margin-top: 0; gap: 0;
}
.streifen__nav--auflage .streifen__knopf {
  width: 56px; height: 56px; background: var(--weiss);
}
.streifen__nav--auflage .streifen__knopf:hover { background: var(--akzent); color: var(--text-auf); }
.streifen__nav--auflage .streifen__knopf svg { width: 24px; height: 24px; }

/* Bildkachel mit Beschriftungsbalken in Akzentfarbe */
.marke-kachel { position: relative; }

/* ------------------------------------------------------------- Kennzahlen */

/* --------------------------------------------------------------- Raster */

.raster { display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px)  { .raster--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .raster--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .raster--4 { grid-template-columns: repeat(4, 1fr); } }
.raster figure { margin: 0; }
.archiv { margin-top: 64px; align-items: start; }

.kopfzeile { display: grid; gap: 40px; align-items: end; margin-bottom: 60px; }
@media (min-width: 960px) { .kopfzeile { grid-template-columns: 1.4fr .6fr; } }
.kopfzeile .knopfreihe { margin-top: 0; justify-content: flex-end; }

/* ----------------------------------------------------------- Kontaktblock */

.kontaktspalten { display: grid; gap: 46px; }
@media (min-width: 760px) { .kontaktspalten { grid-template-columns: repeat(2, 1fr); gap: 56px; } }

.kontaktspalte h3 {
  font-size: 22px; font-weight: 500; letter-spacing: -.8px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.22);
}
.kontaktspalte__zeile {
  padding-block: 22px; border-bottom: 1px solid rgba(255,255,255,.22);
  color: var(--text-auf-2);
}
.kontaktspalte__zeile:last-child { border-bottom: 0; }
.kontaktspalte .pfeil { color: var(--text-auf); }
.kontaktspalte .pfeil::after { background: var(--akzent-hell); }

.schlusswort { text-align: center; margin-top: 76px; color: var(--text-auf-2); }
.schlusswort .knopf { margin-top: 30px; }

/* ------------------------------------------------------------------- Fuss */

.fusskarte {
  background: var(--weiss); color: var(--text);
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; margin-top: 90px;
}
/* Ohne min-width 0 kann die Karte auf schmalen Geraeten nicht schrumpfen */
.fusskarte > * { min-width: 0; }
/* Die Karte liegt in der dunklen Sektion, erbt sonst weisse Schrift */
.fusskarte h1, .fusskarte h2, .fusskarte h3,
.fusskarte__satz { color: var(--text); }
.fusskarte .marke { color: var(--dunkel); }
@media (min-width: 760px) { .fusskarte { grid-template-columns: 1fr 1fr; } }

.fusskarte__links  { padding: 64px 56px; }
.fusskarte__rechts { padding: 64px 56px; display: grid; place-items: center; border-top: 1px solid var(--linie); }
@media (min-width: 760px) {
  .fusskarte__rechts { border-top: 0; border-left: 1px solid var(--linie); }
}

.fusskarte__satz { font-size: 30px; font-weight: 500; letter-spacing: -1px; line-height: 1.3; }
.fusskarte__links-liste { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; font-size: var(--klein); }
.fusskarte__links-liste a { color: var(--text-2); text-decoration: none; }
.fusskarte__links-liste a:hover { color: var(--akzent); }

.fusskarte__marke { justify-items: center; }

.fusszeile {
  padding-block: 26px; font-size: var(--klein);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  color: var(--text-auf-2);
}
.fusszeile a { color: inherit; text-decoration: none; }
.fusszeile a:hover { color: var(--text-auf); }
.fusszeile__sozial { display: flex; gap: 20px; }

/* --------------------------------------------------------------- Formular */

.formular { display: grid; gap: 22px; max-width: 620px; margin-top: 40px; }
.feldpaar { display: grid; gap: 22px; }
@media (min-width: 560px) { .feldpaar { grid-template-columns: 1fr 1fr; } }

.feld { display: grid; gap: 8px; }
.feld label { font-size: var(--klein); font-weight: 500; }
.feld input, .feld textarea {
  font: inherit; color: var(--text); background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 0;
  padding: 15px 16px; min-height: 54px; width: 100%;
}
.feld textarea { min-height: auto; resize: vertical; }
.feld input:hover, .feld textarea:hover { border-color: var(--akzent-hell); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--fehler); }
.feld__hilfe  { font-size: var(--klein); color: var(--text-3); }
.feld__fehler { font-size: var(--klein); color: var(--fehler); font-weight: 500; }

.feld--haken { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.feld--haken input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; accent-color: var(--akzent); }
.feld--haken label { font-weight: 400; color: var(--text-2); font-size: var(--klein); }
.feld--haken .feld__fehler { grid-column: 1 / -1; }

.formular .knopf { justify-self: start; }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hinweis { padding: 26px 28px; border: 1px solid var(--linie); margin-bottom: 30px; }
.hinweis--gut    { background: var(--gedaempft); border-color: var(--akzent); }
.hinweis--gut p  { color: var(--text-2); margin-top: 12px; }
.hinweis--fehler { background: var(--fehler-lasur); border-color: var(--fehler); color: var(--fehler); }

.titelkopf { padding-block: 80px 40px; }
.titelkopf .fliess { margin-top: 22px; }
.brotkrume { font-size: var(--klein); color: var(--akzent); margin-bottom: 16px; }
.brotkrume a { text-decoration: none; }
.leer { background: var(--gedaempft); padding: 34px; color: var(--text-2); max-width: 46em; }
.galerie__bu { margin-top: 12px; font-size: var(--klein); color: var(--text-2); }
.galerie__bu b { display: block; color: var(--text); font-weight: 500; }
.galerie__knopf { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* ------------------------------------------------------------- Bildschau */

.schau {
  position: fixed; inset: 0; z-index: 90; border: 0; padding: 30px;
  background: rgba(17,17,17,.94);
  place-items: center;
}
/* Nur im geoeffneten Zustand anzeigen. Ein pauschales display:grid
   ueberschreibt die Browservorgabe dialog:not([open]){display:none}
   und laesst den Schliessen-Knopf frei auf der Seite stehen. */
.schau[open] { display: grid; }
.schau::backdrop { background: rgba(17,17,17,.94); }
.schau img { max-width: min(100%, 1100px); max-height: 86vh; width: auto; }
.schau__zu {
  position: absolute; top: 20px; right: 20px;
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.4);
  background: transparent; color: #fff; cursor: pointer; font-size: 20px;
}

/* Positionierungssatz auf den Grabmalseiten */
.haltung {
  font-size: 20px; font-weight: 500; letter-spacing: -.6px;
  color: var(--akzent); margin-top: 18px;
}
.titelkopf .haltung + .fliess { margin-top: 12px; }

/* Formularspalte auf der Kontaktseite, seit die Standortkarten entfallen sind */
.formularspalte { max-width: 42rem; }

/* ------------------------------------------------- Kategorienliste im Grabmalblock */

.kategorien { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.kategorien li { border-bottom: 1px solid var(--linie); }
.kategorien a {
  display: grid; gap: 2px; padding: 15px 0; text-decoration: none;
  transition: padding-left .2s ease;
}
.kategorien a:hover { padding-left: 8px; }
.kategorien__name { font-weight: 500; letter-spacing: -.3px; }
.kategorien a:hover .kategorien__name { color: var(--akzent); }
.kategorien__text { font-size: var(--klein); color: var(--text-2); }

/* ------------------------------------------------------------------ Ablauf */

/* ------------------------------------------------------- Vier Kernleistungen */

.kernraster { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 620px)  { .kernraster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kernraster { grid-template-columns: repeat(4, 1fr); } }

.kern__link { display: block; text-decoration: none; }
.kern__bild { aspect-ratio: 4 / 3; }
.kern__name { font-size: 20px; font-weight: 500; letter-spacing: -.6px; margin-top: 18px; }
.kern__link:hover .kern__name { color: var(--akzent); }
.kern__text { font-size: var(--klein); color: var(--text-2); margin-top: 8px; }

/* ------------------------------------------------------------ Aus der Werkstatt */

.werkraster { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 620px)  { .werkraster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .werkraster { grid-template-columns: repeat(4, 1fr); } }

.werk { position: relative; }
.werk__bild { aspect-ratio: 4 / 3; }
.werk__label {
  position: absolute; left: 0; bottom: 20px;
  background: var(--akzent-lasur); color: var(--text-auf);
  padding: 12px 20px; font-size: var(--klein); letter-spacing: -.3px;
}

/* ---------------------------------------------------------- Vertrauensleiste */

.vertrauen {
  list-style: none; margin: 0; padding: 34px 0;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  display: grid; gap: 28px;
}
@media (min-width: 620px)  { .vertrauen { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; } }
@media (min-width: 1040px) { .vertrauen { grid-template-columns: repeat(4, 1fr); gap: 40px; } }

.vertrauen li { display: grid; gap: 4px; }
.vertrauen__wert {
  font-size: 20px; font-weight: 500; letter-spacing: -.6px; color: var(--akzent);
}
.vertrauen__text { font-size: var(--klein); color: var(--text-2); }

/* ------------------------------------------------- Einblenden beim Scrollen
   Entspricht dem uk-scrollspy der Vorlage: 0.8s, 50px Versatz, 200ms Staffel.
   ----------------------------------------------------------------------- */

/* Eine einzige Bewegung fuer die ganze Seite: leicht von unten, 700ms,
   ruhiges Easing. Keine seitlich hereinfliegenden Elemente mehr. */
.zeig { opacity: 0; transform: translateY(20px); }

.zeig.ist-da {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--verzug, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .zeig { opacity: 1 !important; transform: none !important; }
  .zeig.ist-da { transition: none; }
}

/* Ohne JavaScript bleibt alles sichtbar */
.kein-js .zeig { opacity: 1; transform: none; }

/* Standardmaessig aus, im Medienblock unten wieder an.
   Muss VOR dem Medienblock stehen, sonst gewinnt sie bei gleicher
   Spezifitaet und die Rufleiste bleibt ueberall unsichtbar. */
.ruf-leiste { display: none; }

/* ------------------------------------------------- Kopfzeile und Rufleiste

   Eigener Umschaltpunkt: Marke, funfteilige Navigation und die vier
   Icon-Knoepfe passen erst ab rund 1140px nebeneinander. Bei 1024px lief die
   Kopfzeile vorher um 86px ueber den Bildschirmrand hinaus.
   ----------------------------------------------------------------------- */

@media (max-width: 1139px) {
  .kopf__innen { grid-template-columns: 1fr auto; min-height: 68px; position: relative; }
  .kopf[data-gescrollt="ja"] .kopf__innen { min-height: 64px; }
  .kopf__icons { display: none; }

  .menue-schalter {
    display: inline-flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 16px; background: transparent;
    border: 1px solid var(--linie); border-radius: 0;
    font: inherit; font-size: var(--klein); text-transform: uppercase;
    letter-spacing: 1px; color: var(--text); cursor: pointer;
  }
  .menue-schalter__balken,
  .menue-schalter__balken::before,
  .menue-schalter__balken::after {
    content: ""; display: block; width: 18px; height: 2px; background: currentColor;
  }
  .menue-schalter__balken { position: relative; }
  .menue-schalter__balken::before { position: absolute; top: -6px; }
  .menue-schalter__balken::after  { position: absolute; top:  6px; }

  .nav {
    display: none; position: absolute; inset: 100% 0 auto; z-index: 60;
    background: var(--weiss); box-shadow: 0 12px 24px rgba(0,0,0,.1);
    padding: 8px 20px 24px;
  }
  .nav[data-offen="ja"] { display: block; }
  .nav__liste { flex-direction: column; gap: 0; }
  .nav__liste a { display: block; padding: 15px 0; border-bottom: 1px solid var(--linie); font-size: 17px; }

  /* Dauerhaft erreichbar. Im Trauerfall wird angerufen. */
  .ruf-leiste {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0; z-index: 45;
  }
  .ruf-leiste a {
    display: flex; align-items: center; justify-content: center;
    min-height: 56px; text-decoration: none; font-size: var(--normal);
  }
  .ruf-leiste__ruf  { background: var(--akzent); color: var(--text-auf); }
  .ruf-leiste__chat { background: var(--dunkel); color: var(--text-auf); }

  body { padding-bottom: 56px; }
}

/* Sehr schmale Geraete: Wortmarke und Menueknopf passen bei 360px sonst
   nicht nebeneinander, die Kopfzeile lief um rund 44px ueber. */
@media (max-width: 419px) {
  .kopf__innen { gap: 14px; }
  .marke__wort { font-size: 24px; gap: 8px; }
  .marke__wort::before, .marke__wort::after { width: 18px; height: 5px; }
  .marke__zusatz { font-size: 10px; letter-spacing: .1em; }
  .menue-schalter { padding: 0 12px; gap: 8px; }
  .fusskarte__links, .fusskarte__rechts { padding: 32px 20px; }
  .fusskarte__satz { font-size: 21px; }

  /* Die grosse Wortmarke in der Fusskarte sprengt 320px sonst */
  .marke--gross .marke__wort { font-size: 26px; gap: 9px; }
  .marke--gross .marke__wort::before,
  .marke--gross .marke__wort::after { width: 20px; height: 6px; }
  .marke--gross .marke__zusatz { font-size: 10px; letter-spacing: .08em; }
}

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 959px) {

  :root { --sek: 80px; --sek-xl: 96px; --sek-std: 56px; --gross: 30px; --zahl: 34px; }

  
  /* Unter 1140px stand die Flaeche als Streifen neben dem Bild und sah wie
     ein Layoutfehler aus. Ueber die volle Breite wirkt sie gewollt. */
  .flaeche__grund { left: 0; right: 0; width: auto; height: 46%; }
  .flaeche__innen { padding-block: 60px; }
  .kopfzeile .knopfreihe { justify-content: flex-start; margin-top: 8px; }
  .fusskarte__links, .fusskarte__rechts { padding: 40px 28px; }
  .fusskarte__satz { font-size: 24px; }
  

  /* Telefon, E-Mail und WhatsApp in der Fusszeile waren nur 28px hoch.
     Auf dem Handy sind das die wichtigsten Links der Seite. */
  .kontaktspalte .pfeil { padding-block: 8px; }

  /* Tablet: drei Spalten stapeln sonst einspaltig und lassen Abschnitte
     auf fast 2000px anwachsen. Zwei Spalten sind hier sinnvoll. */
  .raster--3 { grid-template-columns: repeat(2, 1fr); }

  /* Auf dem Tablet zwei Beispielbilder statt vier winzigen */
  .streifen--gross .streifen__spur { grid-auto-columns: calc((100% - 40px) / 2); }

}

/* Unter 700px: einspaltig, Bilder in voller Breite.
   Vorher waren Grabmal- und Heldbilder auf dem Handy nur rund 150px breit. */
@media (max-width: 699px) {
  /* Vorher standen die beiden Knoepfe mit 187 und 223px untereinander.
     Volle Breite wirkt aufgeraeumter und trifft sich mit dem Daumen besser. */
  .knopfreihe { gap: 12px; }
  .knopfreihe .knopf { flex: 1 1 100%; }
  

  
  
  
  

  .streifen--gross .streifen__spur { grid-auto-columns: 100%; gap: 22px; }
  .streifen__spur { grid-auto-columns: 100%; }

  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }

  /* Ein hohes 1:2-Bild fuellt sonst den halben Bildschirm.
     !important, weil bild() das Seitenverhaeltnis inline setzt. */
  .beispiel__bild { aspect-ratio: 3 / 4 !important; }

  /* Leistungsbilder flacher, sonst waechst der Abschnitt auf 1900px */
  .kern__bild { aspect-ratio: 16 / 10 !important; }

  /* Material- und Werkzeugaufnahmen tragen auch zu zweit:
     Detailbilder, keine Grabmale. Spart rund 700px Hoehe. */
  .werkraster { grid-template-columns: 1fr 1fr; gap: 14px; }
  .werk__label { bottom: 12px; padding: 8px 12px; }

  .streifen__nav--auflage { top: 14px; right: 14px; }
}

/* ---------------------------------------------------- Bausteine Unterseiten */

.kachel__text { padding: 20px 0 0; }
.kachel__text h2, .kachel__text h3 { font-size: 22px; letter-spacing: -.8px; }
.kachel__text p { color: var(--text-2); margin-top: 8px; font-size: var(--klein); }
a.marke-kachel { text-decoration: none; display: block; }

/* Leistungsgruppen */
.gruppen { display: grid; gap: 44px; }
@media (min-width: 860px) { .gruppen { grid-template-columns: repeat(3, 1fr); } }
.gruppe { border-top: 2px solid var(--akzent); padding-top: 22px; }
.gruppe h2, .gruppe h3 { font-size: 22px; letter-spacing: -.8px; }
.gruppe__einleitung { color: var(--text-2); font-size: var(--klein); margin-top: 10px; }
.gruppe__punkte { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: var(--klein); }
.gruppe__punkte li { padding-left: 20px; position: relative; color: var(--text-2); }
.gruppe__punkte li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 10px; height: 1px; background: var(--akzent);
}

/* Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
@media (min-width: 760px) { .zeitleiste { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
.zeitleiste__punkt { border-top: 1px solid var(--linie); padding-top: 20px; }
.zeitleiste__punkt p { color: var(--text-2); margin-top: 10px; font-size: var(--klein); }
.zeitleiste__jahr {
  font-size: var(--zahl); font-weight: 500; letter-spacing: -1.5px;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}

.kontaktspalte { min-width: 0; }

/* ==========================================================================
   Erweiterungen der finalen Gestaltung (frueher v2.css)
   Warme Steinflaeche, groessere Aussagen, Bildkompositionen.
   ========================================================================== */

:root {
  /* Ergaenzend, keine neue Leitfarbe: warmes Hellgrau und Steinbeige */
  --stein:        #ECE8E2;
  --stein-hell:   #F6F4F1;
  --anthrazit:    #2F353B;
  --anthrazit-2:  #383F46;

  /* Staerkere Hierarchie fuer die grossen Aussagen */
  --titel:  clamp(32px, 3.3vw, 50px);
  --gross:  clamp(28px, 2.8vw, 42px);

  /* Ruhiges Easing fuer alle neuen Bewegungen */
  --ruhig: cubic-bezier(.22, .61, .36, 1);
}

.titel-gross {
  font-size: var(--titel);
  line-height: 1.14;
  letter-spacing: -.03em;
}

/* Kleine Bildunterschrift, wie in einem Bildband */
.bildzeile {
  margin-top: 14px;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--text-3);
}

/* Elemente mit leichter Scrolltiefe. Der Versatz kommt aus v2.js. */
.tiefe { will-change: transform; }

/* ------------------------------------------------------------------ Buehne */

.buehne { padding-block: 60px 150px; }

.buehne__innen { display: grid; gap: 64px; align-items: center; }
.buehne__innen > * { min-width: 0; }

@media (min-width: 960px) {
  .buehne .bahn { width: min(100% - 40px, 1400px); }
  .buehne__innen { grid-template-columns: 5fr 7fr; gap: 80px; }
}

.buehne__titel {
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 1.04;
  letter-spacing: -.04em;
  max-width: 8.6em;
}
.buehne .held__unterzeile { margin-top: 34px; }

/* Komposition: grosses Hauptbild, kleines Detail darueber, warme Flaeche dahinter */
.buehne__bild { position: relative; padding-bottom: 110px; }

.buehne__grund {
  position: absolute; z-index: 0;
  top: 14%; bottom: 0; left: 20%; right: -60px;
  background: var(--stein);
}

.buehne__haupt { position: relative; z-index: 1; margin: 0 0 0 auto; width: 76%; }
.buehne__haupt .bildzeile { padding-left: 2px; }

.buehne__detail {
  position: absolute; z-index: 2; margin: 0;
  left: 0; bottom: 34px; width: 40%;
}
/* Schmaler weisser Steg trennt die beiden Bilder wie im Satzspiegel */
.buehne__detail .bild { outline: 10px solid var(--weiss); }

/* ------------------------------------------------------- Grabmale als Steinblock */

.flaeche--stein .flaeche__grund {
  width: min(64%, 1120px); height: 60%;
  overflow: hidden;
  background-color: var(--anthrazit);
  /* Sehr feine Koernung, darunter ein kaum merklicher Verlauf */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.12'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--anthrazit-2), var(--anthrazit) 70%);
}

/* Grosses Wort im Grund, kaum sichtbar, wie in den Stein gehauen */
.flaeche__wort {
  position: absolute; top: 34px;
  left: max(20px, calc((100vw - 1400px) / 2));
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(64px, 10.5vw, 168px);
  font-weight: 600; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, .055);
  user-select: none;
}

.flaeche--stein .flaeche__innen { padding-block: 230px 120px; }

/* ----------------------------------------------------------------- Historie */

.historie__innen { display: grid; gap: 70px; align-items: center; }
.historie__innen > * { min-width: 0; }
@media (min-width: 960px) {
  .historie__innen { grid-template-columns: 6fr 5fr; gap: 100px; }
}

.historie__bilder { position: relative; padding-bottom: 80px; }
.historie__grund {
  position: absolute; z-index: 0;
  top: 70px; bottom: 0; right: 10%; left: -400px;
  background: var(--stein);
}
.historie__haupt { position: relative; z-index: 1; margin: 0; width: 84%; }
.historie__klein {
  position: absolute; z-index: 2; margin: 0;
  right: 0; bottom: 0; width: 36%;
}
.historie__klein .bild { outline: 10px solid var(--weiss); }
.historie__klein .bildzeile { margin-top: 20px; }

/* Kennzahlen als tragende Elemente, Zahl deutlich groesser als der Text */
.zahlen { margin: 54px 0 0; border-top: 1px solid var(--linie); }
.zahlen__zeile {
  display: grid; grid-template-columns: minmax(150px, .9fr) 1fr;
  align-items: center; column-gap: 28px;
  padding-block: 22px; border-bottom: 1px solid var(--linie);
}
.zahlen__wert {
  order: -1; margin: 0;
  font-size: clamp(48px, 5vw, 80px); font-weight: 500;
  line-height: 1; letter-spacing: -.045em;
  color: var(--dunkel); font-variant-numeric: tabular-nums;
}
.zahlen__text { font-size: var(--klein); color: var(--text-2); line-height: 1.5; }

/* ------------------------------------------------------------------ Ablauf */

.schritte {
  list-style: none; margin: 0; padding: 0;
  position: relative; display: grid; gap: 48px;
  --linie-farbe: #B8C3D2;
}
.schritt__nr {
  display: inline-block; position: relative; z-index: 1;
  background: var(--gedaempft);
  font-size: 34px; font-weight: 500; line-height: 1;
  letter-spacing: -.03em; color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.schritt__titel { font-size: 21px; font-weight: 500; letter-spacing: -.6px; margin-top: 22px; }
.schritt__text  { font-size: var(--klein); color: var(--text-2); margin-top: 10px; max-width: 22em; }

/* Desktop: quer. Die Linie laeuft auf Hoehe der Ziffern. */
@media (min-width: 900px) {
  .schritte { grid-template-columns: repeat(4, 1fr); gap: 44px; }
  .schritte::before {
    content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 1px;
    background: var(--linie-farbe);
    transform-origin: left;
  }
  .schritt__nr { padding-right: 22px; }
}

/* Mobil: senkrecht, Linie links an den Ziffern entlang */
@media (max-width: 899px) {
  .schritte { padding-left: 64px; gap: 44px; }
  .schritte::before {
    content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 1px;
    background: var(--linie-farbe);
    transform-origin: top;
  }
  .schritt { position: relative; }
  .schritt__nr {
    position: absolute; left: -64px; top: -2px;
    width: 44px; padding-block: 6px; text-align: center; font-size: 26px;
  }
  .schritt__titel { margin-top: 0; }
}

/* Linien bauen sich beim Scrollen langsam auf (Klasse aus v2.js) */
.js-linie .schritte::before { transform: scaleX(0); transition: transform 1.8s var(--ruhig) .2s; }

@media (max-width: 899px) {
  .js-linie .schritte::before { transform: scaleY(0); }
}
.js-linie .ist-gezogen::before { transform: none; }

/* ------------------------------------------------------------- Ruhepunkt */

/* ------------------------------------------------------------- Leistungen */

/* --------------------------------------------------------------- Material */

/* Mit Maus: Satz erscheint erst beim Darueberfahren, Bild waechst langsam */

/* ------------------------------------------------------------- Begleitung */

.begleitung__innen { display: grid; gap: 64px; align-items: center; }
.begleitung__innen > * { min-width: 0; }
@media (min-width: 960px) {
  .begleitung__innen { grid-template-columns: 5fr 6fr; gap: 100px; }
}

.begleitung__bilder { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.begleitung__bilder figure { margin: 0; }
.begleitung__neben { margin-top: 140px !important; }

/* Deutlich gekennzeichneter Platzhalter, kein Stockfoto */
.platzhalter {
  aspect-ratio: 4 / 5;
  display: grid; place-content: center; gap: 12px; text-align: center;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(76, 85, 95, .05) 14px 15px),
    var(--stein);
  border: 1px dashed #B9B2A7;
  color: var(--dunkel-hoch);
}
.platzhalter__marke {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent);
}
.platzhalter__text { font-size: var(--klein); line-height: 1.5; }

/* ------------------------------------------------------------------ Zitat */

.zitat { padding-block: 120px; }

/* ------------------------------------------------- Umschalter nur im Entwurf */

/* -------------------------------------------------------------- Bewegung */

@media (prefers-reduced-motion: reduce) {
  .tiefe { transform: none !important; }
  
  .js-linie .schritte::before { transform: none; transition: none; }
}

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 959px) {
  .buehne { padding-block: 34px 90px; }
  .buehne__innen { gap: 54px; }

  /* Volle Breite, feste Hoehe: Prozentwerte liefen bei der langen
     Kategorienliste in den Text hinein. */
  .flaeche--stein .flaeche__grund { left: 0; right: 0; width: auto; height: 400px; }
  .flaeche--stein .flaeche__innen { padding-block: 130px 70px; }
  .flaeche__wort { top: 26px; }

  .historie__bilder { padding-bottom: 60px; }
  .historie__grund { top: 50px; right: 18%; left: -40px; }

  .zitat { padding-block: 80px; }
}

@media (max-width: 699px) {
  .buehne__titel { font-size: 42px; }

  /* Komposition bleibt auch auf dem Handy erhalten, nur enger */
  .buehne__bild { padding-bottom: 70px; margin-right: -20px; }
  .buehne__haupt { width: 84%; }
  .buehne__detail { width: 44%; bottom: 22px; }
  .buehne__detail .bild { outline-width: 7px; }
  .buehne__grund { left: 26%; right: 0; top: 18%; }
  .buehne__haupt .bildzeile { display: none; }

  .flaeche__wort { font-size: 46px; }

  .historie__haupt { width: 88%; }
  .historie__klein { width: 46%; }
  .historie__klein .bild { outline-width: 7px; }
  .historie__haupt .bildzeile { max-width: 50%; }
  .zahlen__zeile { grid-template-columns: 112px 1fr; column-gap: 18px; padding-block: 18px; }
  .zahlen__wert { font-size: 46px; }

  
  
  
  

  
  
  

  

  .begleitung__bilder { grid-template-columns: 1.2fr 1fr; gap: 16px; }
  .begleitung__neben { margin-top: 90px !important; }
  .platzhalter { padding: 14px; }
}

/* ==========================================================================
   Feinabstimmung der finalen Gestaltung (frueher v3.css)
   ========================================================================== */

/* ------------------------------------------------------------------ Buehne
   Aufbau aus V2, aber kompakter: Bild kleiner, Text oben ausgerichtet,
   damit die Ueberschrift frueher ins Blickfeld kommt. */

.buehne--kompakt { padding-block: 40px 110px; }

@media (min-width: 960px) {
  .buehne--kompakt .buehne__innen { align-items: start; gap: 70px; }
  .buehne--kompakt .buehne__text { padding-top: 56px; }
}

.buehne--kompakt .buehne__bild { padding-bottom: 80px; }
.buehne--kompakt .buehne__haupt { width: 66%; }
.buehne--kompakt .buehne__detail { width: 34%; left: 6%; bottom: 24px; }
.buehne--kompakt .buehne__grund { top: 12%; left: 26%; right: -40px; }

/* ------------------------------------------------------- Grabmal-Block
   Das Hintergrundwort richtet sich nach der Breite der dunklen Flaeche
   (Container-Einheiten) und passt so immer vollstaendig hinein. */

.flaeche--stein .flaeche__grund { container-type: inline-size; }
.flaeche--stein .flaeche__wort {
  left: 4cqi;
  font-size: clamp(48px, 9vw, 140px);   /* Rueckfall ohne Container-Einheiten */
  font-size: 14.5cqi;
  letter-spacing: .03em;
}

/* Kategorienliste aus V1: etwas mehr Abstand zum Einleitungstext */
.flaeche--stein .kategorien { margin-top: 40px; }

/* ------------------------------------------------------------------ Ablauf
   Spalten und Schriftgroessen aus V1, dazu die feine Linie aus V2.
   Kleine Ziffern sitzen auf der Linie. */

.schritte--leise .schritt__nr {
  font-size: 14px; font-weight: 500; line-height: 1;
  letter-spacing: .08em;
}
.schritte--leise .schritt__titel { font-size: 20px; margin-top: 18px; }
.schritte--leise .schritt__text  { margin-top: 10px; }

@media (min-width: 900px) {
  .schritte--leise { gap: 40px; }
  .schritte--leise::before { top: 7px; background: #CBD3DE; }
  .schritte--leise .schritt__nr { padding-right: 16px; }
}

@media (max-width: 899px) {
  .schritte--leise { padding-left: 52px; gap: 40px; }
  .schritte--leise::before { left: 17px; background: #CBD3DE; }
  .schritte--leise .schritt__nr {
    left: -52px; top: 7px; width: 36px;
    font-size: 13px; padding-block: 5px;
  }
  .schritte--leise .schritt__titel { margin-top: 0; }
}

/* -------------------------------------------------------------- Ruhepunkt
   Das Bild steht still, die Seite gleitet darueber (background-attachment).
   Auf Touchgeraeten ist fixed unzuverlaessig (iOS ignoriert es, Android
   ruckelt), dort scrollt das Bild normal mit. */

.ruhepunkt {
  display: grid; place-items: center; text-align: center;
  min-height: clamp(420px, 72vh, 760px);
  background-color: var(--anthrazit);
  background-image:
    linear-gradient(rgba(16, 24, 36, .44), rgba(16, 24, 36, .44)),
    url("/assets/img/deko-ausstellung-abend-1536.jpg");
  background-image:
    linear-gradient(rgba(16, 24, 36, .44), rgba(16, 24, 36, .44)),
    image-set(url("/assets/img/deko-ausstellung-abend-1536.webp") type("image/webp"),
              url("/assets/img/deko-ausstellung-abend-1536.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 40%;
  background-attachment: fixed;
}

.ruhepunkt__satz {
  font-size: clamp(30px, 4.2vw, 64px); font-weight: 500;
  line-height: 1.1; letter-spacing: -.03em;
  color: var(--text-auf);
  white-space: nowrap;
}
.ruhepunkt__satz .punkt { color: var(--akzent-hell); }

@media (max-width: 1024px), (hover: none) {
  .ruhepunkt {
    background-attachment: scroll;
    background-image:
      linear-gradient(rgba(16, 24, 36, .44), rgba(16, 24, 36, .44)),
      url("/assets/img/deko-ausstellung-abend-1200.jpg");
    background-image:
      linear-gradient(rgba(16, 24, 36, .44), rgba(16, 24, 36, .44)),
      image-set(url("/assets/img/deko-ausstellung-abend-1200.webp") type("image/webp"),
                url("/assets/img/deko-ausstellung-abend-1200.jpg") type("image/jpeg"));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ruhepunkt { background-attachment: scroll; }
}

/* ---------------------------------------- Leistungen und Werkstatt (V1)
   Nur ein langsamer, kaum merklicher Bild-Hover kommt dazu. */

.zoomrahmen { overflow: hidden; }
.zoomrahmen .bild { transition: transform .8s var(--ruhig); }

@media (hover: hover) and (pointer: fine) {
  .zoomrahmen:hover .bild,
  a:hover .zoomrahmen .bild { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .zoomrahmen .bild { transition: none; transform: none !important; }
}

/* -------------------------------------------------------------- Begleitung
   Die echte Aufnahme steht gross, der Portraet-Platzhalter daneben. */

.platzhalter--klein { aspect-ratio: 3 / 4; padding: 16px; }
.platzhalter--klein .platzhalter__text { font-size: 14px; }

/* ============================================================ Unterseiten
   Gleiche Bausteine wie auf der Startseite V3. Aktiv ueber $design_v3. */

/* Seitentitel mit derselben Gewichtung wie die Buehne */
.titelkopf { padding-block: 70px 30px; }
.titelkopf h1 {
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.05; letter-spacing: -.04em;
}
.titelkopf .fliess { margin-top: 26px; }
.titelkopf .haltung { margin-top: 22px; }

/* Grabmal-Kacheln: Titel etwas kraeftiger */
.kachel__text { padding-top: 24px; }
.kachel__text h2 { font-size: 25px; }
.galerie__knopf.zoomrahmen { display: block; }

/* Ueber uns: Bildgruppe rechts neben dem Text, Flaeche nach rechts gespiegelt */
.historie__bilder--rechts .historie__grund { left: 18%; right: -60px; top: 60px; }
.historie__bilder--rechts .historie__haupt { margin-left: auto; }
.historie__bilder--rechts .historie__klein { right: auto; left: 0; }
.historie__bilder--rechts .historie__haupt .bildzeile { text-align: right; }

/* Fliesstextblock (Leistungen), bisher ohne eigene Gestaltung */
.prosa > * { max-width: 44rem; }
.prosa p { margin-top: 26px; color: var(--text-2); }

/* Zeitleiste: Jahreszahlen wie die Kennzahlen der Startseite */
.zeitleiste__jahr {
  font-size: clamp(46px, 4.6vw, 72px); line-height: 1;
  letter-spacing: -.045em; color: var(--dunkel);
}
.zeitleiste__punkt p { margin-top: 14px; }

/* Leistungsgruppen: feine Linie statt blauem Balken, ruhiger */
.gruppe { border-top: 1px solid var(--linie); padding-top: 26px; }

/* -------------------------------------------------- Umschalter im Entwurf */

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 959px) {
  .buehne--kompakt { padding-block: 30px 80px; }
}

@media (max-width: 699px) {
  .buehne--kompakt .buehne__haupt { width: 80%; }
  .buehne--kompakt .buehne__detail { width: 42%; left: 0; bottom: 18px; }
  .buehne--kompakt .buehne__bild { padding-bottom: 60px; }

  .ruhepunkt { min-height: 62vh; }

  .titelkopf { padding-block: 44px 20px; }
  .titelkopf h1 { font-size: 40px; }
  .historie__bilder--rechts .historie__grund { left: 14%; right: -20px; }
  .historie__bilder--rechts .historie__haupt .bildzeile { display: none; }

  /* Detail- und Archivbilder zu zweit statt einzeln untereinander */
  .raster--4 { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .raster--4 .galerie__bu { font-size: 13.5px; }

  /* Die echte Aufnahme bekommt auf dem Handy den groesseren Anteil */
  .begleitung__bilder { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
  .platzhalter--klein .platzhalter__marke { font-size: 10px; letter-spacing: .1em; }
  .begleitung__neben { margin-top: 70px !important; }
  .ruhepunkt__satz { white-space: normal; font-size: 34px; max-width: 9em; margin-inline: auto; }
}

/* ==========================================================================
   Bewegung (Oktober 2026)
   Alles laeuft genau einmal, ruhig und ohne Wiederholung. Bei reduzierter
   Bewegung bleibt alles sofort sichtbar (siehe Block am Ende).
   ========================================================================== */

/* Listen erscheinen Zeile fuer Zeile, sobald ihr Abschnitt eingeblendet ist */
.staffel > * { opacity: 0; transform: translateY(10px); }
.ist-da .staffel > *,
.staffel.ist-da > * {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s var(--ruhig);
}
.staffel > :nth-child(1) { transition-delay: .25s; }
.staffel > :nth-child(2) { transition-delay: .33s; }
.staffel > :nth-child(3) { transition-delay: .41s; }
.staffel > :nth-child(4) { transition-delay: .49s; }
.staffel > :nth-child(5) { transition-delay: .57s; }
.staffel > :nth-child(6) { transition-delay: .65s; }
.staffel > :nth-child(n+7) { transition-delay: .73s; }
.kein-js .staffel > * { opacity: 1; transform: none; }

/* Bilder in Rahmen entfalten sich beim Erscheinen aus leichter Naehe */
.beispiel { overflow: hidden; }
.zeig .zoomrahmen .bild,
.zoomrahmen.zeig .bild,
.zeig .beispiel .bild { transform: scale(1.06); }
.ist-da .zoomrahmen .bild,
.zoomrahmen.ist-da .bild,
.ist-da .beispiel .bild { transform: none; transition: transform 1.6s var(--ruhig); }

/* Der langsame Hover bleibt erhalten */
@media (hover: hover) and (pointer: fine) {
  .ist-da .zoomrahmen:hover .bild,
  .zoomrahmen.ist-da:hover .bild,
  a:hover .zoomrahmen .bild { transform: scale(1.03); transition-duration: .8s; }
}

/* Hero: Hauptbild rueckt beim Laden langsam in Position */
.buehne__haupt .tiefe { overflow: hidden; }
.buehne__haupt.zeig .bild { transform: scale(1.06); }
.buehne__haupt.ist-da .bild { transform: none; transition: transform 2.4s var(--ruhig); }

/* Der Satz im Ruhepunkt kommt langsamer als der Rest */
.ruhepunkt__satz.zeig.ist-da { transition-duration: 1.4s, 1.4s; }

@media (prefers-reduced-motion: reduce) {
  .staffel > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .zoomrahmen .bild, .beispiel .bild, .buehne__haupt .bild { transform: none !important; transition: none !important; }
}


/* ------------------------------------------------- Ergaenzungen Oktober 2026 */

/* Grabmal-Kacheln: Knopf statt Anzahl. Die ganze Kachel bleibt der Link. */
.kachel__knopf { margin-top: 22px; height: 52px; padding: 0 28px; }
.marke-kachel:hover .kachel__knopf { box-shadow: inset 0 0 0 1px var(--akzent); color: var(--akzent); }

/* Leistungsgruppen mit Bild statt Linie */
.gruppe { border-top: 0; padding-top: 0; }
.gruppe__bild { margin-bottom: 26px; }

/* Restaurierung: Text mittig zur Bildgruppe */
@media (min-width: 960px) { .restaurierung { align-items: center; } }

/* Vorzeile im Fliesstextblock bleibt blau und ohne Absatzabstand */
.prosa .vorzeile { color: var(--akzent); margin-top: 0; }

/* Natursteinarbeiten auf dem Handy zu zweit, wie die uebrigen Detailbilder */
@media (max-width: 699px) {
  .raster--paar { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .raster--paar .galerie__bu { font-size: 13.5px; }
}

/* ----------------------------------------------- Buehne auf Handy und Tablet
   Bild zuerst und randlos, die Ueberschrift liegt weiss unten im Bild (wie
   beim Ruhepunkt). Detailbild und Flaeche entfallen. Der Telefonknopf entfaellt,
   weil die Rufleiste am unteren Rand das Anrufen schon uebernimmt. */

@media (max-width: 959px) {
  .buehne--kompakt { padding-block: 0 72px; }
  .buehne--kompakt .buehne__innen { gap: 0; grid-template-columns: minmax(0, 1fr); }
  .buehne--kompakt .buehne__text { display: contents; }

  .buehne--kompakt .buehne__bild { grid-area: 1 / 1; margin: 0 -20px; padding: 0; }
  .buehne--kompakt .buehne__grund,
  .buehne--kompakt .buehne__detail { display: none; }
  .buehne--kompakt .buehne__haupt { width: 100%; margin: 0; }
  .buehne--kompakt .buehne__haupt .bild { aspect-ratio: auto !important; height: min(118vw, 68svh); }
  .buehne--kompakt .buehne__bild::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(16, 24, 36, .78), rgba(16, 24, 36, .46) 40%, rgba(16, 24, 36, 0) 70%);
  }

  .buehne--kompakt .buehne__kopf {
    grid-area: 1 / 1; align-self: end;
    position: relative; z-index: 3; padding-bottom: 30px;
  }
  .buehne--kompakt .buehne__kopf .vorzeile { color: rgba(255, 255, 255, .9); margin-bottom: 12px; }
  .buehne--kompakt .buehne__kopf { text-shadow: 0 1px 14px rgba(16, 24, 36, .35); }
  .buehne--kompakt .buehne__titel { color: var(--text-auf); font-size: clamp(38px, 10.6vw, 66px); }
  .buehne--kompakt .buehne__titel .punkt { color: var(--akzent-hell); }

  .buehne--kompakt .held__unterzeile { margin-top: 26px; }
  .buehne--kompakt .knopfreihe { margin-top: 26px; }
  .buehne--kompakt .buehne__ruf { display: none; }
  .buehne--kompakt .buehne__mehr { background: var(--akzent); color: var(--text-auf); box-shadow: none; }

  /* Nicht aus Weiss einblenden: das Bild steht sofort und rueckt nur langsam
     in Position, die Ueberschrift kommt kurz danach. */
  .buehne--kompakt .buehne__haupt.zeig { opacity: 1; transform: none; }
  .buehne--kompakt .buehne__kopf { animation: buehne-kopf 1.1s var(--ruhig) .25s both; }
}

@keyframes buehne-kopf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .buehne--kompakt .buehne__kopf { animation: none; }
}

/* ------------------------------------------ Rueckmeldungen von Max (Okt. 2026) */

/* Kundenstimmen: ruhig, ohne Karten, mit grossem Anfuehrungszeichen */
.stimmen { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
@media (min-width: 900px) { .stimmen { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.stimme { margin: 0; position: relative; padding-top: 46px; border-top: 1px solid var(--linie); }
.stimme::before {
  content: "\201E"; position: absolute; top: -26px; left: -3px;
  font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: 1;
  color: var(--akzent-hell);
}
.stimme p { font-size: 18px; line-height: 1.6; letter-spacing: -.2px; color: var(--text); }
.stimmen__hinweis { margin-top: 48px; font-size: 13.5px; color: var(--text-3); }
.stimme--einzeln { margin-top: 34px; }
.stimme--einzeln p { font-size: 17px; }

/* Restaurierung: Vorher und Nachher gleich gross nebeneinander */
.vorher-nachher { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.vorher-nachher figure { margin: 0; }
.vorher-nachher__rahmen { position: relative; }
.vorher-nachher__marke {
  position: absolute; left: 0; top: 16px;
  padding: 7px 14px; font-size: 13px; letter-spacing: .04em;
  background: var(--weiss); color: var(--text);
}
.vorher-nachher__marke--nachher { background: var(--akzent); color: var(--text-auf); }
.vorher-nachher__zeile { grid-column: 1 / -1; margin-top: 4px; }

/* Zeitleiste mit vier Stationen */
@media (min-width: 760px)  { .zeitleiste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .zeitleiste { grid-template-columns: repeat(4, 1fr); } }

/* Standorte auf der Kontaktseite */
.standort { padding-top: 24px; display: grid; gap: 12px; }
.standort__name { font-size: 25px; letter-spacing: -.8px; }
.standort__rolle { color: var(--akzent); font-size: var(--klein); margin-top: -6px; }
.standort p { color: var(--text-2); font-size: var(--klein); }
.standort .pfeil { color: var(--akzent); font-size: var(--klein); margin-top: 6px; justify-self: start; }

/* Begleitung mit nur einem Foto, bis ein Porträt vorliegt */
.begleitung__bilder--einzeln { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext { padding-top: 20px; }
.rechtstext h2 { font-size: 22px; letter-spacing: -.6px; margin-top: 48px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { margin-top: 14px; }
.rechtstext a { color: var(--akzent); }

/* Fusszeile: Hinweis auf die Umsetzung */
.fusszeile__macher a { white-space: nowrap; }
@media (min-width: 480px) { .fusszeile__macher { white-space: nowrap; } }
@media (max-width: 479px) {
  .fusskarte__links { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: start; }
  .fusskarte__satz { grid-column: 1 / -1; }
  .fusskarte__links-liste { flex-direction: column; gap: 10px; }
  .fusskarte__links-liste.fusskarte__sozial { margin-top: 30px; }
}
.fusszeile__macher a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.herz { color: #E06A6A; }

/* Zeilen brechen zwischen den Teilen um, nicht mitten darin */
.am-stueck { white-space: nowrap; }
@media (max-width: 359px) { .am-stueck { white-space: normal; } }

/* Rechtstexte: breiter, damit Angaben einzeilig bleiben */
.rechtstext.sek .prosa > * { max-width: 52rem; }

/* Keine einzelnen Woerter am Absatzende, ausgewogene Ueberschriften */
p, li, dt, dd, figcaption, blockquote, .kategorien__text { text-wrap: pretty; }
h1, h2, h3, .gross, .ruhepunkt__satz { text-wrap: balance; }
.buehne__titel { text-wrap: wrap; }   /* bewusst dreizeilig gesetzt */

/* Kennzahlen: Text bekommt den Rest der Zeile, damit er einzeilig bleibt */
.zahlen__zeile { grid-template-columns: clamp(108px, 15vw, 210px) 1fr; column-gap: 24px; }

/* Fusszeile: zwei Teile auf einer Grundlinie (p + p setzte sonst Abstand oben) */
.fusszeile { align-items: baseline; }
.fusszeile p + p { margin-top: 0; }
@media (max-width: 759px) { .fusszeile { flex-direction: column; gap: 10px; } }
.fusskarte__sozial { margin-top: 12px; }