/* ==========================================================================
   Schreinerei Wöhrle – „Werkstatt mit Stube“
   Tokens aus schreinerei-woehrle-design-system/tokens.css (1:1), ergänzt um Layout & Bewegung.
   Schriften lokal (SIL OFL) – kein Google-Server.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-vf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="standard"] {
  --anthrazit-500: #333d3f; --anthrazit-600: #2e3839; --anthrazit-700: #2a3334; --anthrazit-800: #262e30; --anthrazit-900: #22292b;
  --anthrazit-100: #e2dfd5; --anthrazit-300: #9a9d98; --anthrazit-400: #6b716f;
  --eiche-100: #f0e6d7; --eiche-200: #e3d2bd; --eiche-300: #d3b99e; --eiche-400: #c09a78; --eiche-500: #a9774b; --eiche-600: #8f6743; --eiche-700: #78593c;
  --rot-500: #db193b; --rot-600: #b81a36;
  --tinte: #231f20; --leinen: #faf5ea; --oe-creme: #fff8d7; --sand: #e6dcc8; --stein: #6f6a62;

  --surface: var(--leinen);
  --surface-card: var(--oe-creme);
  --surface-dark: var(--anthrazit-500);
  --surface-info: var(--sand);
  --surface-quiet: var(--eiche-100);
  --ink: var(--tinte);
  --ink-muted: var(--stein);
  --ink-on-dark: var(--oe-creme);
  --label: var(--eiche-700);
  --line: var(--sand);
  --line-accent: var(--eiche-500);
  --field-border: var(--eiche-500);
  --action: var(--rot-500);
  --action-hover: var(--rot-600);
  --on-action: #ffffff;
  --action-on-dark: var(--oe-creme);
  --on-action-on-dark: var(--anthrazit-500);
  --link: var(--rot-500);
  --link-hover: var(--rot-600);
  --jubilaeum: var(--rot-500);
  --fehler: var(--rot-600);
  --focus-ring: 0 0 0 2px #faf5ea, 0 0 0 4px #231f20;
  --focus-ring-dark: 0 0 0 2px #333d3f, 0 0 0 4px #fff8d7;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --layout-max: 1200px; --layout-text: 680px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --surface-sanft: #f2ebdc; /* Tönung zwischen Leinen und Sand – für große ruhige Flächen */
  --rand: clamp(16px, 4vw, 40px);
  --kopf-h: 76px;
  --sektion: clamp(72px, 9vw, 128px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
/* Modus „Stille“ (Bestattungen): nur wegnehmen – kein Rot, keine Bewegung */
[data-theme="stille"] {
  --line-accent: var(--eiche-700);
  --action: var(--anthrazit-500);
  --action-hover: var(--anthrazit-800);
  --on-action: var(--oe-creme);
  --link: var(--anthrazit-500);
  --link-hover: var(--tinte);
  --jubilaeum: var(--anthrazit-500);
  --fehler: var(--tinte);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 24px);
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
::selection { background: var(--eiche-200); color: var(--tinte); }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.w-dunkel :focus-visible { box-shadow: var(--focus-ring-dark); }

.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-4); top: -80px; z-index: 200;
  background: var(--anthrazit-500); color: var(--oe-creme); padding: 12px 18px; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: var(--space-4); }

.container { width: 100%; max-width: calc(var(--layout-max) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Typografie ---------- */
.h1, .hero__titel, .h2, .h3, .zitat, .jubilaeum__zahl, .leistung__nr, .chronik__jahr, .kontakt__nummer,
.ablauf__nr, .referenz__titel, .einsatz__titel, .ort__name, .faq__frage, .fuss__name, .lightbox__titel, .anfrage__erfolg-titel, .formular__legende, .menue__nav a, .orteband__liste, .werte__titel, .ablauf__titel, .chronik__titel {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-optical-sizing: auto;
}
.hero__titel { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; font-weight: 600; letter-spacing: -0.015em; }
.h2 { font-size: clamp(29px, 3.3vw, 42px); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font-size: clamp(23px, 2.2vw, 28px); line-height: 1.22; font-weight: 500; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }
.hero__titel, .h2 { hyphens: manual; }
@media (max-width: 479px) { .hero__titel, .h2, .h3 { hyphens: auto; } }

.w-label {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin: 0 0 var(--space-3);
}
.w-label--stein { color: var(--ink-muted); }
.w-label--hell { color: var(--ink-on-dark); }
.w-label--linie { display: flex; align-items: center; gap: var(--space-3); }
.w-label--linie::before { content: ""; width: 28px; height: 2px; background: var(--line-accent); flex: none; }
.w-label--hell.w-label--linie::before { background: var(--eiche-400); }

/* ---------- Buttons & Links ---------- */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.2; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s var(--ease-out);
}
.w-btn .icon { transition: transform .3s var(--ease-out); }
.w-btn:hover .icon:last-child { transform: translateX(3px); }
.w-btn:active { transform: translateY(1px); }
.w-btn--primaer { background: var(--action); color: var(--on-action); }
.w-btn--primaer:hover { background: var(--action-hover); }
.w-btn--sekundaer { background: var(--anthrazit-500); color: var(--oe-creme); }
.w-btn--sekundaer:hover { background: var(--anthrazit-800); }
.w-btn--aufDunkel { background: var(--action-on-dark); color: var(--on-action-on-dark); }
.w-btn--aufDunkel:hover { background: #fff; }
.w-btn[disabled], .w-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

.w-textlink {
  display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: color .2s;
}
.w-textlink:hover { color: var(--link-hover); }
.w-textlink .icon { transition: transform .3s var(--ease-out); }
.w-textlink:hover .icon { transform: translateX(4px); }
.w-dunkel .w-textlink { color: var(--ink-on-dark); }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--leinen) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: transform .45s var(--ease-out), border-color .3s;
}
.kopf--gescrollt { border-bottom-color: var(--line); }
.kopf--versteckt { transform: translateY(calc(-100% - 24px)); } /* + Überhang des Logo-Schilds */
.kopf__leiste { display: flex; align-items: center; gap: var(--space-5); height: var(--kopf-h); }
.kopf__logo { align-self: flex-start; flex: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.kopf__logo img { width: 160px; height: auto; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: width .4s var(--ease-out); }
.kopf--gescrollt .kopf__logo img { width: 140px; }
.kopf__nav { margin-left: auto; }
.kopf__liste { display: flex; gap: clamp(14px, 1.6vw, 28px); }
.kopf__liste a {
  position: relative; display: block; padding: 8px 0; font-size: 16px; font-weight: 600; text-decoration: none; color: var(--ink);
}
.kopf__liste a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--eiche-500);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.kopf__liste a:hover::after, .kopf__liste a[aria-current]::after { transform: scaleX(1); }
.kopf__aktionen { display: flex; align-items: center; gap: var(--space-4); }
.kopf__cta { min-height: 44px; padding: 10px 18px; }
.kopf__menue {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 8px 4px 8px 12px; background: none; border: 0; cursor: pointer; font-weight: 600;
}
/* Drei Striche; geöffnet werden der obere und untere zum „X“, der mittlere blendet aus */
.kopf__menue-linien { position: relative; width: 22px; height: 14px; }
.kopf__menue-linien i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out), top .35s var(--ease-out), opacity .2s; }
.kopf__menue-linien i:nth-child(1) { top: 0; }
.kopf__menue-linien i:nth-child(2) { top: 6px; }
.kopf__menue-linien i:nth-child(3) { top: 12px; }
.kopf__menue[aria-expanded="true"] .kopf__menue-linien i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.kopf__menue[aria-expanded="true"] .kopf__menue-linien i:nth-child(2) { opacity: 0; }
.kopf__menue[aria-expanded="true"] .kopf__menue-linien i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1099px) {
  .kopf__nav { display: none; }
  .kopf__aktionen { margin-left: auto; }
  .kopf__menue { display: inline-flex; }
}
@media (max-width: 639px) {
  :root { --kopf-h: 68px; }
  .kopf__cta { display: none; }
  .kopf__logo img, .kopf--gescrollt .kopf__logo img { width: 140px; }
}

/* Mobiles Menü */
.menue {
  position: fixed; inset: 0; z-index: 55; padding: calc(var(--kopf-h) + 24px) var(--rand) 32px;
  background: var(--anthrazit-500); color: var(--oe-creme);
  display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto;
}
.menue[hidden] { display: none; }
.menue__nav li { opacity: 0; transform: translateY(14px); }
.menue--offen .menue__nav li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i) * 45ms + 60ms); }
.menue__nav a { display: block; padding: 10px 0; font-size: clamp(28px, 7vw, 40px); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 248, 215, .12); }
.menue__nav a[aria-current] { color: var(--eiche-300); }
.menue__fuss { margin-top: var(--space-7); display: grid; gap: var(--space-4); }
.menue__fuss p { color: var(--anthrazit-100); font-size: 16px; }
body.menue-auf { overflow: hidden; }
body.menue-auf .kopf { background: var(--leinen); }

/* ---------- Sektionen ---------- */
.sektion { padding-block: var(--sektion); }
.sektion__kopf { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sektion__kopf .h2 { margin-bottom: var(--space-4); }
.sektion__kopf--breit { max-width: none; display: grid; gap: var(--space-5); align-items: end; }
@media (min-width: 1024px) { .sektion__kopf--breit { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } .sektion__kopf--breit .h2 { margin-bottom: 0; } }

.w-dunkel { background: var(--surface-dark); color: var(--ink-on-dark); }
.w-dunkel .lead, .w-dunkel p { color: var(--ink-on-dark); }

/* Bilder allgemein */
picture { background: var(--grund, var(--sand)); overflow: hidden; border-radius: var(--radius-md); }
picture img { width: 100%; height: 100%; object-fit: cover; }
.bild-hinweis {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgba(250, 245, 234, .92); color: var(--tinte); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.bild-unterschrift { margin-top: var(--space-3); font-size: 15px; color: var(--ink-muted); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); }
.hero__raster { display: grid; gap: clamp(48px, 6vw, 72px); align-items: center; }
@media (min-width: 1024px) { .hero__raster { grid-template-columns: 1.08fr 1fr; } }
.hero__label { margin-bottom: var(--space-5); }
.hero__titel { margin-bottom: var(--space-5); max-width: 19ch; }
.hero__lead { max-width: 560px; margin-bottom: var(--space-6); color: var(--ink); }
.hero__fakten { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-6); margin-top: clamp(36px, 4vw, 56px); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.hero__fakten li { display: grid; gap: 2px; }
.hero__fakten strong { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: 22px; font-weight: 600; line-height: 1.2; }
.hero__fakten span { font-size: 15px; color: var(--ink-muted); line-height: 1.35; }
@media (max-width: 559px) { .hero__fakten { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); } .hero__fakten li:last-child { grid-column: 1 / -1; } }

.hero__bilder { position: relative; aspect-ratio: 1 / .96; width: 100%; max-width: 640px; justify-self: center; }
.hero__bild { position: absolute; }
.hero__bild picture { position: relative; width: 100%; height: 100%; }
.hero__bild--1 { top: 0; right: 0; width: 74%; height: 62%; }
.hero__bild--1::after { content: ""; position: absolute; inset: 16px -14px -14px 16px; border: 1px solid var(--eiche-400); border-radius: var(--radius-md); z-index: -1; }
.hero__bild--2 { left: 0; bottom: 4%; width: 52%; height: 40%; }
.hero__bild--3 { right: 7%; bottom: 0; width: 34%; height: 44%; }
.hero__bild--3 img { object-position: 30% 50%; }

.jubilaeum { position: absolute; left: 1%; top: 3%; width: clamp(128px, 15vw, 168px); aspect-ratio: 1; display: grid; place-items: center; z-index: 3; }
.jubilaeum__ringe { position: absolute; inset: 0; width: 100%; height: 100%; }
.jubilaeum__ringe circle, .jubilaeum__ringe ellipse { fill: none; }
.jubilaeum::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: var(--leinen); }
.jubilaeum__inhalt { position: relative; display: grid; justify-items: center; text-align: center; margin: 0; }
.jubilaeum__zahl { font-size: clamp(40px, 4.6vw, 54px); line-height: .9; font-weight: 600; letter-spacing: -0.02em; color: var(--jubilaeum); font-variant-numeric: tabular-nums; }
.jubilaeum__text { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-top: 4px; }

.ringe__ring { fill: none; stroke: var(--eiche-500); }

/* ---------- Orte-Band ---------- */
.orteband { background: var(--anthrazit-500); color: var(--oe-creme); overflow: hidden; padding-block: 18px; }
.orteband__spur { display: flex; width: max-content; will-change: transform; }
.orteband__liste { display: flex; flex: none; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.orteband__liste li { display: flex; align-items: center; }
.orteband__liste li::after { content: ""; width: 7px; height: 7px; margin-inline: clamp(20px, 2.6vw, 36px); border-radius: 50%; background: var(--eiche-400); }

/* ---------- Leistungen ---------- */
.sprungmarken { border-block: 1px solid var(--line); padding-block: var(--space-4); margin-bottom: var(--space-4); }
/* Raster statt Fließen: Nummern und Texte stehen in jeder Spalte bündig untereinander (Handy/Tablet 2, Desktop 4 Spalten) */
.sprungmarken ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-5); }
@media (min-width: 1024px) { .sprungmarken ul { grid-template-columns: repeat(4, 1fr); } }
.sprungmarken a { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; align-items: baseline; padding: 8px 0; font-weight: 600; line-height: 1.3; text-decoration: none; transition: color .2s; }
.sprungmarken a:hover { color: var(--eiche-700); text-decoration: underline; text-underline-offset: 4px; }
.sprungmarken__nr { font-size: 13px; color: var(--eiche-700); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .sprungmarken a { font-size: 16px; } }

.leistung { display: grid; gap: clamp(32px, 4vw, 56px); padding-block: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.leistung:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .leistung { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(48px, 6vw, 96px); }
  .leistung--gespiegelt .leistung__medien { order: 2; }
  .leistung__medien { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.leistung__medien { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.leistung__bild { position: relative; grid-column: span 3; aspect-ratio: 1 / 1; }
.leistung__bild picture { width: 100%; height: 100%; }
.leistung__bild--1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.leistung__bild--2 { margin-top: 0; }
.leistung__bild--3 { margin-top: clamp(20px, 3vw, 40px); }
.leistung__bild:only-child { aspect-ratio: 3 / 2; }
/* Drei Hochformat-Fotos nebeneinander (Türen) */
.leistung__medien--hoch .leistung__bild { grid-column: span 2; aspect-ratio: 3 / 4.2; margin-top: 0; }
.leistung__medien--hoch .leistung__bild--2 { margin-top: clamp(20px, 3vw, 40px); }
/* Zwei gleich große Fotos (Sonnenschutz) */
.leistung__medien--paar .leistung__bild { grid-column: span 3; aspect-ratio: 4 / 3; margin-top: 0; }
.leistung__medien--paar .leistung__bild--2 { margin-top: clamp(20px, 3vw, 40px); }
/* Einspaltig (Handy/Tablet): Fotos nie breiter als die Originale zulassen */
@media (max-width: 1023px) {
  .leistung__medien { max-width: 640px; }
  .leistung__medien--paar, .leistung__medien--hoch { max-width: 820px; }
  .leistung__bild:only-child { max-width: 600px; }
}

.leistung__text { max-width: 600px; }
.leistung__nr { font-size: clamp(56px, 6vw, 84px); line-height: .9; font-weight: 600; color: var(--eiche-300); margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; }
.leistung__titel { margin-bottom: var(--space-4); }
.leistung__lead { font-size: clamp(18px, 1.5vw, 20px); font-weight: 600; line-height: 1.5; margin-bottom: var(--space-5); }
.haken { display: grid; gap: 10px 24px; margin: var(--space-6) 0; padding: var(--space-5) 0; border-block: 1px solid var(--line); }
@media (min-width: 560px) { .haken { grid-template-columns: 1fr 1fr; } }
.haken li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.haken .icon { color: var(--eiche-700); margin-top: 1px; stroke-width: 2; }
.leistung__aktion { margin: 0; }

.bestattung-hinweis {
  display: grid; gap: var(--space-5); align-items: center; margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 48px); background: var(--surface-info); border-top: 1px solid var(--line-accent); border-radius: var(--radius-md);
}
.bestattung-hinweis .h3 { margin-bottom: var(--space-3); }
.bestattung-hinweis p { max-width: 640px; }
@media (min-width: 900px) { .bestattung-hinweis { grid-template-columns: 1fr auto; gap: var(--space-8); } }

/* ---------- Ablauf ---------- */
.ablauf { background: var(--surface-sanft); border-block: 1px solid var(--line); }
.ablauf__schritte { position: relative; display: grid; gap: var(--space-6); counter-reset: schritt; }
.ablauf__schritt { position: relative; }
.ablauf__nr {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-5);
  border: 1px solid var(--eiche-500); border-radius: 50%; background: var(--surface-sanft);
  font-size: 24px; font-weight: 600; color: var(--eiche-700);
  transition: background-color .45s, border-color .45s, color .45s, transform .45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 160ms);
}
/* Erreichte Schritte füllen sich (wie die Punkte der Chronik) */
.ablauf__schritt.ist-erreicht .ablauf__nr { background: var(--eiche-600); border-color: var(--eiche-600); color: var(--oe-creme); transform: scale(1.04); }
.ablauf__titel { font-size: 22px; font-weight: 500; line-height: 1.25; margin-bottom: var(--space-2); }
.ablauf__schritt p { font-size: 17px; color: var(--ink); }
.ablauf__verlauf { position: relative; }
.ablauf__linie { position: absolute; left: 27px; top: 28px; width: 2px; height: 0; background: var(--eiche-200); }
.ablauf__linie span { position: absolute; inset: 0; background: var(--eiche-600); transform: scaleY(var(--fortschritt, 1)); transform-origin: top; }

/* Handy & Tablet: senkrechte Zeitleiste – Zahl links, Text rechts, Linie füllt sich beim Scrollen */
@media (max-width: 1023px) {
  .ablauf__schritte { gap: var(--space-7); }
  .ablauf__schritt { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-5); align-items: start; }
  .ablauf__nr { grid-row: 1 / span 2; margin-bottom: 0; transition-delay: 0s; }
  .ablauf__titel { padding-top: 13px; }
  .ablauf__schritt p { grid-column: 2; }
}
/* Desktop: vier Spalten, waagerechte Linie zeichnet sich, die Zahlen füllen sich nacheinander */
@media (min-width: 1024px) {
  .ablauf__schritte { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .ablauf__schritte::before {
    content: ""; position: absolute; top: 28px; left: 28px; right: 12%; height: 1px; background: var(--eiche-500);
    transform: scaleX(var(--ablauf, 1)); transform-origin: left; transition: transform 1.6s var(--ease-in-out);
  }
  .ablauf__linie { display: none; }
}

/* ---------- Referenzen ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); }
.filter__knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; cursor: pointer;
  background: transparent; border: 1px solid var(--eiche-300); border-radius: var(--radius-sm); font-weight: 600; font-size: 16px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.filter__knopf span { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--eiche-700); transition: color .2s; }
.filter__knopf:hover { border-color: var(--anthrazit-500); }
.filter__knopf[aria-pressed="true"] { background: var(--anthrazit-500); border-color: var(--anthrazit-500); color: var(--oe-creme); }
.filter__knopf[aria-pressed="true"] span { color: var(--eiche-300); }

.referenzen__raster { display: grid; gap: clamp(32px, 4vw, 48px) clamp(20px, 2.4vw, 32px); }
@media (min-width: 480px) { .referenzen__raster { grid-template-columns: 1fr 1fr; } } /* ab 480 px zweispaltig: die Fotos sind nur ~410 px breit */
@media (min-width: 1024px) { .referenzen__raster { grid-template-columns: repeat(3, 1fr); } }
.referenz[hidden] { display: none; }
.referenz--neu { animation: einblenden .6s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 50ms); }
@keyframes einblenden { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.referenz__bild { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); }
.referenz__bild picture { aspect-ratio: 4 / 3; }
.referenz__bild img { transition: transform .9s var(--ease-out); }
.referenz__bild:hover img { transform: scale(1.045); }
.referenz__lupe {
  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--leinen); color: var(--tinte); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s var(--ease-out);
}
.referenz__bild:hover .referenz__lupe, .referenz__bild:focus-visible .referenz__lupe { opacity: 1; transform: none; }
.referenz figcaption { padding-top: var(--space-4); }
.referenz .w-label { margin-bottom: 6px; }
.referenz__titel { font-size: 21px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.referenz__objekt { font-size: 16px; color: var(--ink-muted); }

.lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--oe-creme); }
.lightbox::backdrop { background: rgba(34, 41, 43, .94); }
.lightbox[open] { display: grid; place-items: center; animation: einblenden .35s var(--ease-out); }
.lightbox__rahmen { position: relative; width: min(960px, 100% - 2 * var(--rand)); display: grid; gap: var(--space-4); padding-block: 64px 24px; }
/* Originalgröße, nie hochskaliert (die Referenzfotos sind 400–900 px breit) */
.lightbox__figur img { display: block; width: auto; height: auto; max-width: 100%; max-height: 68vh; margin-inline: auto; border-radius: var(--radius-md); background: var(--anthrazit-700); }
.lightbox__figur figcaption { padding-top: var(--space-4); }
.lightbox .w-label { color: var(--eiche-300); }
.lightbox__titel { font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; line-height: 1.25; margin-bottom: 4px; }
.lightbox__objekt { color: var(--anthrazit-100); }
.lightbox__zu { position: absolute; top: 8px; right: 0; display: grid; place-items: center; width: 48px; height: 48px; background: none; border: 1px solid rgba(255, 248, 215, .3); border-radius: var(--radius-sm); color: var(--oe-creme); cursor: pointer; }
.lightbox__zu .icon { width: 24px; height: 24px; }
.lightbox__steuerung { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.lightbox__pfeil { display: grid; place-items: center; width: 48px; height: 48px; background: none; border: 1px solid rgba(255, 248, 215, .3); border-radius: var(--radius-sm); color: var(--oe-creme); cursor: pointer; transition: background-color .2s, color .2s; }
.lightbox__pfeil:hover, .lightbox__zu:hover { background: var(--oe-creme); color: var(--anthrazit-500); }
.lightbox__zaehler { font-variant-numeric: tabular-nums; color: var(--anthrazit-100); font-size: 15px; }
.lightbox :focus-visible { box-shadow: var(--focus-ring-dark); }
body.lightbox-auf { overflow: hidden; }

/* ---------- Über uns ---------- */
.ueber__raster { display: grid; gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (min-width: 1024px) { .ueber__raster { grid-template-columns: 5fr 6fr; } .ueber__bild { position: sticky; top: calc(var(--kopf-h) + 32px); } }
.ueber__bild picture { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .ueber__bild picture { aspect-ratio: 4 / 4.4; } }
.ueber__bild img { object-position: 38% 50%; }
.ueber__text .h2 { margin-bottom: var(--space-5); }
.ueber__text .lead { margin-bottom: var(--space-5); }
.ueber__text > p { max-width: var(--layout-text); }
.werte { display: grid; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
@media (min-width: 640px) { .werte { grid-template-columns: repeat(3, 1fr); } }
.werte li { display: grid; gap: var(--space-3); align-content: start; }
.werte .icon { width: 30px; height: 30px; color: var(--eiche-700); stroke-width: 1.3; }
.werte__titel { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.werte p { font-size: 16px; line-height: 1.5; }

/* Chronik */
.chronik { margin-top: var(--sektion); padding-block: var(--sektion); background: var(--surface-quiet); }
.chronik__raster { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .chronik__raster { grid-template-columns: 5fr 7fr; gap: var(--space-9); } .chronik__kopf { position: sticky; top: calc(var(--kopf-h) + 48px); align-self: start; } }
.chronik__kopf .h2 { margin-bottom: var(--space-4); }
.chronik__kopf p { max-width: 440px; }
.chronik__baum { position: relative; width: min(340px, 80%); margin-top: var(--space-7); }
.chronik__ringe { width: 100%; }
.chronik__ringe .ringe__ring { stroke: var(--eiche-300); transition: stroke .6s, stroke-width .6s; }
.chronik__ringe .ringe__ring.ist-aktiv { stroke: var(--eiche-700); stroke-width: 2.2; }
/* Bei 2027 erscheint die rote 125 in der Mitte der Ringe – wie im Hero */
.chronik__jubilaeum { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; margin: 0; pointer-events: none; }
.chronik__jubilaeum .jubilaeum__zahl { font-size: clamp(48px, 4.6vw, 62px); }
.chronik__jubilaeum .jubilaeum__text { margin-top: 6px; }
.js .chronik__jubilaeum { opacity: 0; transform: scale(.6); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); }
.js .chronik.ist-jubilaeum .chronik__jubilaeum { opacity: 1; transform: none; }
@media (max-width: 1023px) { .chronik__baum { display: none; } }

.chronik__spalte { position: relative; padding-left: clamp(28px, 4vw, 48px); }
.chronik__linie { position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--eiche-200); }
.chronik__linie span { position: absolute; inset: 0; background: var(--eiche-600); transform: scaleY(var(--fortschritt, 1)); transform-origin: top; }
.chronik__eintrag { position: relative; display: grid; gap: var(--space-2); padding-bottom: clamp(36px, 4vw, 56px); }
.chronik__eintrag:last-child { padding-bottom: 0; }
@media (min-width: 640px) { .chronik__eintrag { grid-template-columns: 150px 1fr; gap: var(--space-6); } }
.chronik__eintrag::before {
  content: ""; position: absolute; top: 14px; left: calc(-1 * clamp(28px, 4vw, 48px) - 6px); width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface-quiet); border: 2px solid var(--eiche-400); transition: background-color .4s, border-color .4s, transform .4s var(--ease-out);
}
.chronik__eintrag.ist-erreicht::before { background: var(--eiche-600); border-color: var(--eiche-600); transform: scale(1.15); }
.chronik__jahr { font-size: clamp(36px, 4vw, 52px); line-height: 1; font-weight: 600; color: var(--eiche-600); margin: 0; font-variant-numeric: tabular-nums; transition: color .4s; }
.chronik__eintrag.ist-erreicht .chronik__jahr { color: var(--tinte); }
.chronik__titel { font-size: 21px; font-weight: 500; margin-bottom: 4px; padding-top: 6px; }
.chronik__eintrag--jubilaeum .chronik__jahr { color: var(--jubilaeum); }

/* ---------- Engagement ---------- */
.engagement .sektion__kopf { margin-bottom: clamp(32px, 4vw, 56px); }
.karussell__spur {
  display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px max(var(--rand), calc((100vw - var(--layout-max)) / 2)) 24px; scroll-padding-inline: max(var(--rand), calc((100vw - var(--layout-max)) / 2));
  scrollbar-width: none;
}
.karussell__spur::-webkit-scrollbar { display: none; }
.karussell__spur:focus-visible { box-shadow: inset var(--focus-ring-dark); }
.einsatz { flex: 0 0 min(400px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--anthrazit-700); border-radius: var(--radius-md); overflow: hidden; }
.einsatz__bild picture { aspect-ratio: 4 / 3; border-radius: 0; }
.einsatz__text { padding: var(--space-5) var(--space-5) var(--space-6); }
.einsatz__titel { font-size: 22px; font-weight: 500; line-height: 1.25; margin-bottom: var(--space-3); color: var(--oe-creme); }
.einsatz__text p:last-child { font-size: 16px; line-height: 1.55; color: var(--anthrazit-100); }
.einsatz .w-label { color: var(--eiche-300); margin-bottom: 8px; }
/* Kein aspect-ratio: Safari verbreitert sonst den Kasten, wenn der Text höher ist als 4:3, und schneidet rechts das Polster ab */
.einsatz__zitat { margin: 0; width: 100%; min-height: calc(min(400px, 82vw) * .75); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: var(--space-6) clamp(28px, 9%, 40px); background: var(--eiche-700); }
.einsatz__zitat p { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: clamp(21px, 2vw, 25px); line-height: 1.35; font-weight: 500; color: var(--oe-creme); }
.einsatz__zitat p::before { content: "„"; }
.einsatz__zitat p::after { content: "“"; }
.einsatz__zitat footer { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--eiche-200); }
.karussell__steuerung { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.karussell__knopf { display: grid; place-items: center; width: 48px; height: 48px; flex: none; background: none; border: 1px solid rgba(255, 248, 215, .35); border-radius: var(--radius-sm); color: var(--oe-creme); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.karussell__knopf:hover { background: var(--oe-creme); color: var(--anthrazit-500); }
.karussell__knopf[disabled] { opacity: .35; cursor: default; background: none; color: var(--oe-creme); }
.karussell__fortschritt { position: relative; flex: 1; height: 2px; background: rgba(255, 248, 215, .18); overflow: hidden; }
.karussell__fortschritt span { position: absolute; inset: 0; background: var(--eiche-400); transform-origin: left; transform: scaleX(var(--k, .25)); transition: transform .2s linear; }

/* ---------- Einzugsgebiet ---------- */
.region__raster { display: grid; gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (min-width: 1024px) { .region__raster { grid-template-columns: 1fr 1fr; } }
.region .h2 { margin-bottom: var(--space-5); }
.region .lead { margin-bottom: var(--space-4); }
.region__adresse { display: flex; gap: var(--space-3); margin-top: var(--space-6); font-weight: 600; }
.region__adresse .icon { color: var(--eiche-700); margin-top: 3px; }
.region__adresse .w-textlink { margin-top: 6px; font-weight: 600; }
.orte { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.ort { display: grid; gap: 2px; padding: var(--space-4) var(--space-3) var(--space-4) 0; border-bottom: 1px solid var(--line); }
.ort:nth-child(odd) { padding-right: var(--space-5); }
.ort__name { font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.25; }
.ort__info { font-size: 14px; color: var(--ink-muted); }
.ort--heimat { grid-column: 1 / -1; padding: var(--space-5); margin-block: var(--space-3); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ort--heimat .ort__info { color: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }

/* ---------- Fragen ---------- */
.fragen { background: var(--surface-sanft); border-top: 1px solid var(--line); }
.fragen__raster { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 1024px) { .fragen__raster { grid-template-columns: 4fr 7fr; gap: var(--space-9); } .fragen__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); } }
.fragen__kopf .h2 { margin-bottom: var(--space-4); }
.fragen__kopf p { margin-bottom: var(--space-5); max-width: 420px; }
.faq { border-top: 1px solid var(--eiche-300); }
.faq__eintrag { border-bottom: 1px solid var(--eiche-300); interpolate-size: allow-keywords; }
.faq__eintrag summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) 0; cursor: pointer; list-style: none; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__frage { font-size: clamp(19px, 1.7vw, 22px); font-weight: 500; line-height: 1.35; }
.faq__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--eiche-400); border-radius: 50%; color: var(--eiche-700); transition: transform .4s var(--ease-out), background-color .3s, color .3s; }
.faq__eintrag[open] .faq__icon { transform: rotate(45deg); background: var(--anthrazit-500); border-color: var(--anthrazit-500); color: var(--oe-creme); }
.faq__eintrag summary:hover .faq__frage { color: var(--eiche-700); }
.faq__antwort { padding: 0 56px var(--space-5) 0; max-width: 720px; }
.faq__antwort a { color: var(--link); text-underline-offset: 3px; }
.faq__eintrag::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
.faq__eintrag[open]::details-content { block-size: auto; }

/* ---------- Kontakt & Formular ---------- */
.kontakt__raster { display: grid; gap: clamp(40px, 5vw, 80px); align-items: start; }
@media (min-width: 1024px) { .kontakt__raster { grid-template-columns: 5fr 7fr; } .kontakt__info { position: sticky; top: calc(var(--kopf-h) + 32px); } }
.kontakt__info .h2 { margin-bottom: var(--space-5); }
.kontakt__telefon { display: grid; gap: 2px; margin: var(--space-6) 0 var(--space-5); text-decoration: none; width: fit-content; }
.kontakt__telefon .w-label { margin: 0; }
.kontakt__nummer { font-size: clamp(36px, 4vw, 50px); line-height: 1.05; font-weight: 600; letter-spacing: -0.01em; transition: color .2s; }
.kontakt__telefon:hover .kontakt__nummer { color: var(--eiche-700); }
.kontakt__liste { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.kontakt__liste li { display: flex; gap: var(--space-3); align-items: flex-start; }
.kontakt__liste .icon { color: var(--eiche-700); margin-top: 4px; }
.kontakt__liste a { text-underline-offset: 3px; }
.kontakt__formular { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px); scroll-margin-top: calc(var(--kopf-h) + 16px); }

.formular__gruppe { margin: 0 0 var(--space-6); padding: 0; border: 0; min-width: 0; }
.formular__legende { padding: 0; margin-bottom: var(--space-4); font-size: 22px; font-weight: 500; }
.formular__raster { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .formular__raster { grid-template-columns: 1fr 1fr; } .feld--voll { grid-column: 1 / -1; } }
.feld { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; }
.feld label, .feld__label { font-size: 16px; font-weight: 600; }
.feld__optional { font-weight: 400; color: var(--ink-muted); }
.pflicht { color: var(--fehler); font-weight: 600; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: var(--sand); color: var(--ink); font: 400 17px/1.4 var(--font-sans); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.feld textarea { resize: vertical; min-height: 140px; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--stein); opacity: 1; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--eiche-700); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { background: #fffdf6; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.feld__auswahl { position: relative; }
.feld__auswahl select { appearance: none; padding-right: 44px; cursor: pointer; }
.feld__auswahl .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--eiche-700); }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border: 2px solid var(--fehler); }
.feld__fehler { font-size: 15px; color: var(--fehler); font-weight: 600; }

.fotos {
  display: grid; justify-items: center; gap: 6px; padding: var(--space-5); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--eiche-500); border-radius: var(--radius-md); background: var(--leinen); transition: background-color .2s, border-color .2s;
}
.fotos:hover, .fotos--ziehen { background: var(--eiche-100); border-color: var(--eiche-700); }
.fotos__icon { width: 30px; height: 30px; color: var(--eiche-700); }
.fotos__text { font-size: 17px; }
.fotos__text strong { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.fotos__hinweis { font-size: 15px; color: var(--ink-muted); max-width: 440px; }
/* Unsichtbares Datei-Feld: höhere Spezifität als „.feld input“, sonst wird es 100 % breit und ragt über den Bildschirmrand */
.feld .fotos__eingabe { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.feld:has(.fotos__eingabe:focus-visible) .fotos { box-shadow: var(--focus-ring); }
.no-js .fotos { display: none; }
.no-js .feld .fotos__eingabe { position: static; width: 100%; height: auto; min-height: 48px; padding: 11px 14px; border: 1px solid var(--field-border); opacity: 1; }
.fotos__liste { display: grid; gap: 8px; }
.fotos__liste:empty { display: none; }
.foto-eintrag { display: flex; align-items: center; gap: var(--space-3); padding: 8px; background: var(--leinen); border: 1px solid var(--line); border-radius: var(--radius-sm); animation: einblenden .3s var(--ease-out); }
.foto-eintrag img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); background: var(--sand); }
.foto-eintrag__name { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto-eintrag__name small { display: block; color: var(--ink-muted); font-size: 13px; }
.foto-eintrag button { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-muted); }
.foto-eintrag button:hover { color: var(--fehler); background: var(--rot-100, #f6dbd5); }

.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__datenschutz { font-size: 15px; color: var(--ink-muted); line-height: 1.5; margin-bottom: var(--space-5); }
.formular__meldung { padding: var(--space-4); margin-bottom: var(--space-5); border-left: 3px solid var(--fehler); background: var(--leinen); font-weight: 600; }
.formular__meldung[hidden] { display: none; }
.formular__senden { width: 100%; }
@media (min-width: 640px) { .formular__senden { width: auto; } }

.anfrage__erfolg { display: grid; justify-items: start; gap: var(--space-3); padding-block: var(--space-4); scroll-margin-top: calc(var(--kopf-h) + 32px); }
.anfrage__erfolg[hidden] { display: none; }
.anfrage__erfolg:focus { outline: none; }
.anfrage__erfolg-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--anthrazit-500); color: var(--oe-creme); margin-bottom: var(--space-2); }
.anfrage__erfolg-icon .icon { width: 32px; height: 32px; stroke-width: 2; stroke-dasharray: 30; stroke-dashoffset: 0; }
.anfrage__erfolg--neu { animation: einblenden .6s var(--ease-out); }
.anfrage__erfolg--neu .anfrage__erfolg-icon { animation: aufploppen .6s var(--ease-out) .1s both; }
.anfrage__erfolg--neu .anfrage__erfolg-icon .icon { animation: haken .5s var(--ease-out) .45s both; }
@keyframes aufploppen { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes haken { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.anfrage__erfolg-titel { font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; line-height: 1.25; max-width: 22ch; }
.anfrage__erfolg p { max-width: 520px; }
.anfrage__erfolg-klein { font-size: 16px; color: var(--ink-muted); }
.anfrage__erfolg-klein a { color: var(--ink); font-weight: 600; }
.anfrage__erfolg .w-btn { margin-top: var(--space-3); }

/* ---------- Fuß ---------- */
.fuss { padding-block: clamp(56px, 7vw, 96px) var(--space-6); }
.fuss__raster { display: grid; gap: var(--space-7) var(--space-6); }
@media (min-width: 640px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.fuss__logo { width: 190px; height: auto; margin: -8px 0 var(--space-4) -10px; }
.fuss__marke p { font-size: 16px; max-width: 360px; color: var(--anthrazit-100); }
.fuss__jubilaeum { margin-top: var(--space-5); font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: 18px; color: var(--oe-creme) !important; }
.fuss__jubilaeum-zahl { font-size: 34px; font-weight: 600; margin-right: 4px; }
.fuss__titel { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eiche-300); margin-bottom: var(--space-4); }
.fuss address { font-size: 16px; line-height: 1.6; color: var(--anthrazit-100); margin-bottom: var(--space-4); }
.fuss__kontakt, .fuss__links, .fuss__orte { display: grid; gap: 8px; font-size: 16px; }
.fuss__kontakt li { display: flex; gap: 10px; align-items: center; color: var(--anthrazit-100); }
.fuss__kontakt .icon { color: var(--eiche-300); }
.fuss a { text-decoration: none; color: var(--oe-creme); }
.fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss__orte { color: var(--anthrazit-100); }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid rgba(255, 248, 215, .14); font-size: 15px; color: var(--anthrazit-300); }
.fuss__unten p { color: var(--anthrazit-300); }
.fuss__recht span { color: var(--anthrazit-100); }

/* Tippflächen auf Handy und Tablet mind. 44 px hoch (Footer- und Kontaktlinks, Textlinks) */
@media (max-width: 767px), (pointer: coarse) {
  .fuss__links, .fuss__kontakt { gap: 0; }
  .fuss__links a, .fuss__kontakt a, .kontakt__liste a { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss__kontakt li { min-height: 44px; }
  .w-textlink { min-height: 44px; }
}

/* Schnellleiste (Handy) */
.schnellleiste { display: none; }
@media (max-width: 767px) {
  .schnellleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--anthrazit-500); border-top: 1px solid rgba(255, 248, 215, .12);
    transition: transform .4s var(--ease-out);
  }
  .schnellleiste a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius-sm); font-weight: 600; font-size: 16px; color: var(--oe-creme); text-decoration: none; }
  /* Rahmen um „Jetzt anrufen“: Kontrast zur (dunklen) Browserleiste darunter */
  .schnellleiste a:first-child { border: 1.5px solid rgba(255, 248, 215, .6); }
  .schnellleiste__cta { background: var(--action); color: var(--on-action) !important; }
  .schnellleiste--weg { transform: translateY(110%); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.menue-auf .schnellleiste { transform: translateY(110%); }
}

/* ---------- 404 ---------- */
.fehlerseite { padding-block: clamp(80px, 12vw, 160px); }
.fehlerseite__code { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: clamp(88px, 14vw, 160px); line-height: 1; font-weight: 600; color: var(--eiche-300); margin-bottom: var(--space-4); }
.fehlerseite .h2 { margin-bottom: var(--space-4); }
.fehlerseite .lead { max-width: 620px; margin-bottom: var(--space-6); }

/* ==========================================================================
   Modus „Stille“ – Bestattungen
   ========================================================================== */
.stille-kopf { padding: clamp(64px, 9vw, 136px) 0 clamp(48px, 6vw, 96px); }
.stille-kopf .container { max-width: calc(880px + 2 * var(--rand)); }
.stille-kopf h1 { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: clamp(32px, 4vw, 50px); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--space-6); text-wrap: balance; }
.stille-zitat { margin: 0; padding: clamp(28px, 4vw, 48px) 0; border-block: 1px solid var(--line-accent); }
.stille-zitat p { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.45; font-weight: 400; margin-bottom: var(--space-4); }
.stille-zitat footer { font-size: 16px; color: var(--ink-muted); letter-spacing: .04em; }
.stille-text { padding-bottom: clamp(64px, 8vw, 128px); }
.stille-text .container { max-width: calc(880px + 2 * var(--rand)); }
.stille-text p, .stille-text li { line-height: 1.75; }
.stille-text .lead { margin-bottom: var(--space-6); }
.stille-liste { display: grid; gap: 0; margin: var(--space-6) 0 var(--space-7); border-top: 1px solid var(--line); }
/* Ganzzahlige Zeilenhöhe + Strich als Rahmenlinie: so landet jeder Strich auf vollen Pixeln und alle wirken gleich */
.stille-liste li { padding: var(--space-4) 0 var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); position: relative; line-height: 32px; }
.stille-liste li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-4) + 16px); width: 16px; height: 0; border-top: 1px solid var(--line-accent); }
.stille-h2 { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: clamp(25px, 2.6vw, 32px); line-height: 1.25; font-weight: 500; margin: var(--space-9) 0 var(--space-5); }
.stille-kontakt { display: grid; gap: var(--space-5); margin-top: var(--space-8); padding: clamp(28px, 4vw, 48px); background: var(--surface-info); border-radius: var(--radius-md); }
@media (min-width: 760px) { .stille-kontakt { grid-template-columns: 1fr auto; align-items: center; } }
.stille-kontakt .w-label { margin-bottom: var(--space-2); }
.stille-kontakt__nummer { display: block; font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; font-weight: 500; text-decoration: none; margin-bottom: var(--space-2); }
.stille-kontakt p { margin: 0; }
.stille-kontakt address { line-height: 1.6; }
.stille-faq { margin-top: var(--space-4); }
.stille-faq .faq { border-color: var(--line); }
.stille-faq .faq__eintrag { border-color: var(--line); }
.stille-faq .faq__icon { border-color: var(--line-accent); color: var(--eiche-700); }
.stille-faq .faq__eintrag[open] .faq__icon { background: var(--anthrazit-500); }
.stille-zurueck { margin-top: var(--space-8); }

/* ==========================================================================
   Bewegung – nur mit JavaScript und ohne „Bewegung reduzieren“
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }

  .js [data-auftritt] { opacity: 0; transform: translateY(18px); }
  .js .ist-geladen [data-auftritt], .js.ist-geladen [data-auftritt] { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }

  .js [data-zeilen] .wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .js [data-zeilen] .wort > span { display: inline-block; transform: translateY(105%); }
  .js.ist-geladen [data-zeilen] .wort > span { transform: none; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--w, 0) * 45ms + 120ms); }

  /* Bilder: von unten freilegen wie ein Brett unter dem Hobel */
  .js [data-enthuellen] picture { clip-path: inset(100% 0 0 0); }
  .js [data-enthuellen] img { transform: scale(1.14); }
  .js [data-enthuellen].ist-sichtbar picture { clip-path: inset(0 0 0 0); transition: clip-path 1.25s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 140ms); }
  .js [data-enthuellen].ist-sichtbar img { transform: scale(1); transition: transform 1.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms); }
  .js .hero__bild--1::after { opacity: 0; transform: translate(-10px, -10px); }
  .js .hero__bild--1.ist-sichtbar::after { opacity: 1; transform: none; transition: opacity 1s .9s, transform 1.2s var(--ease-out) .9s; }

  [data-parallax] { will-change: transform; }

  /* Strich minimal länger als der Ring (1,02) – sonst bleibt nach dem Zeichnen eine Haarlinien-Lücke */
  .js .ringe__ring { stroke-dasharray: 1.02 1.02; stroke-dashoffset: 1.02; }
  .js .ist-geladen .jubilaeum__ringe .ringe__ring, .js.ist-geladen .jubilaeum__ringe .ringe__ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-in-out); transition-delay: calc(var(--i) * 220ms + 700ms); }
  .js .chronik__ringe.ist-sichtbar .ringe__ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-in-out), stroke .6s, stroke-width .6s; transition-delay: calc(var(--i) * 200ms), 0s, 0s; }

  /* Endlos-Laufband: zwei identische Listen, nach genau einer Listenbreite beginnt es nahtlos von vorn */
  .orteband__spur { animation: laufband 36s linear infinite; }
  @keyframes laufband { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

  .js .ablauf__schritte { --ablauf: 0; }
  .js .ablauf__schritte.ist-sichtbar { --ablauf: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .orteband__spur { width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--rand); }
  .orteband__liste { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: 8px; }
  .orteband__liste[aria-hidden="true"] { display: none; }
}
/* Im Modus Stille nie Bewegung */
[data-theme="stille"] [data-reveal], [data-theme="stille"] [data-auftritt] { opacity: 1 !important; transform: none !important; transition: none !important; }