@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/spectral-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spectral-latin-500-normal.woff2) format('woff2')}

:root{
  --erde:#26211b;      /* Walderde, dunkler Grund oben */
  --erde-2:#332c24;
  --stein:#dddbd4;     /* kühler Grabstein, heller Grund */
  --stein-2:#cfccc3;
  --tinte:#2b2722;     /* Schrift auf Stein */
  --leise:#615a50;
  --holz:#c08a55;      /* Holz */
  --moos:#55633f;
  --moos-hell:#9aab76;
  --papier:#ece6da;    /* Schrift auf Erde */
  --mass:38rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--stein);color:var(--tinte);font-family:'Spectral',Georgia,serif;font-weight:300;font-size:1.1875rem;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--moos)}
:focus-visible{outline:2px solid var(--holz);outline-offset:4px;border-radius:2px}
p{margin:0 0 1em}
h1,h2,h3{font-weight:400;margin:0;line-height:1.15}
.rahmen{max-width:72rem;margin:0 auto;padding:0 clamp(1rem,5vw,4rem)}

/* ---------- Kopf auf Walderde ---------- */
.kopf{background:var(--erde);color:var(--papier);overflow:hidden}
.kopf .rahmen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:center;min-height:min(92vh,52rem);padding-top:3rem;padding-bottom:4rem}
.marke{font-size:1.25rem;letter-spacing:.01em;margin:0 0 auto;align-self:start}
.marke b{font-weight:500}
.kopf-text{display:flex;flex-direction:column;gap:1.75rem;height:100%;justify-content:space-between}
.kopf h1{font-size:clamp(2.6rem,6.2vw,4.75rem);font-weight:300;letter-spacing:-.015em;line-height:1.05;max-width:12ch}
.kopf .lead{font-size:1.25rem;color:#cfc6b6;max-width:30ch;margin:0}
.knopf{display:inline-block;align-self:flex-start;padding:.85rem 1.75rem;border:1px solid var(--holz);color:var(--papier);text-decoration:none;border-radius:999px;font-size:1.05rem;transition:background .2s,color .2s}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin:0}
.nebenlink{color:#cfc6b6;font-size:1.05rem}
.nebenlink:hover{color:var(--holz)}
.knopf:hover{background:var(--holz);color:var(--erde)}

/* Das Zeichen */
.druck{width:100%;max-width:34rem;justify-self:end;aspect-ratio:1}
.druck svg{width:100%;height:100%;display:block;overflow:visible}
.druck .bau{transform-box:fill-box;transform-origin:50% 100%;animation:drucken 3.2s cubic-bezier(.45,.05,.3,1) .3s both}
@keyframes drucken{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.druck .bau{animation:none}}
.druck .duese{animation:duese 3.2s cubic-bezier(.45,.05,.3,1) .3s both}
@keyframes duese{from{transform:translateY(0);opacity:1}92%{opacity:1}to{transform:translateY(-252px);opacity:0}}
@media (prefers-reduced-motion:reduce){.druck .duese{display:none}}

/* ---------- Stiller Text ---------- */
.still{padding:clamp(4rem,10vw,7rem) 0;border-top:1px solid var(--stein-2)}
.still p{font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.38;max-width:24ch;margin:0;font-weight:300}
.still p+p{margin-top:1.4rem;font-style:italic;color:var(--moos)}

/* ---------- Abschnitte ---------- */
#beigaben{border-top:0}
.abschnitt{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--stein-2)}
.abschnitt>.rahmen{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem)}
.abschnitt h2{font-size:1.65rem;font-weight:400}
.abschnitt .text{max-width:var(--mass)}
.hinweis{color:var(--leise);font-style:italic}

/* Beigaben */
.stuecke{grid-column:1/-1;list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.5rem 2rem;max-width:none}
.stueck figure{margin:0}
.stueck .bild{aspect-ratio:4/5;background:var(--stein-2);display:grid;place-items:center;border-radius:2px}
.stueck .bild svg{width:46%;height:auto}
.stueck h3{font-size:1.3rem;margin:1rem 0 .3rem}
.stueck p{font-size:1.02rem;color:var(--leise);margin:0 0 .6rem;line-height:1.55}
.stueck .preis{font-size:1rem;color:var(--tinte)}

/* Ablauf */
.schritte{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.75rem;max-width:var(--mass)}
.schritte li{counter-increment:s;display:grid;grid-template-columns:2.5rem 1fr;align-items:baseline}
.schritte li::before{content:counter(s);font-size:1.5rem;color:var(--holz);font-weight:400}
.schritte b{font-weight:500}

/* Person */
.person .zitat{font-size:clamp(1.5rem,2.8vw,2rem);font-style:italic;line-height:1.35;margin-top:2rem;color:var(--moos);max-width:22ch}

/* Kontakt auf Erde */
.kontakt{background:var(--erde-2);color:var(--papier);border-top:0}
.kontakt .text{max-width:30rem}
.kontakt .mail{font-size:clamp(1.5rem,3.5vw,2.2rem);margin:1.25rem 0 .5rem;display:inline-block;color:var(--papier);text-decoration-color:var(--holz)}
.kontakt .mail:hover{color:var(--holz)}
.kontakt .klein{color:#b9b0a1;font-size:1rem}

/* Fuß */
footer{background:var(--erde);color:#b9b0a1;font-size:.95rem;padding:2.5rem 0}
footer .rahmen{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:center}
footer p{margin:0}
footer a{color:var(--papier)}
footer nav{display:flex;gap:1.5rem}

/* ---------- Unterseiten ---------- */
.kopf-klein{background:var(--erde);padding:1.5rem 0}
.kopf-klein a{color:var(--papier);text-decoration:none;display:inline-flex;align-items:center;gap:.75rem;font-size:1.25rem}
.kopf-klein svg{width:40px;height:40px}
.kopf-klein path[stroke="#3b2f26"]{stroke:var(--papier)}
.kopf-klein b{font-weight:500}
.recht{max-width:44rem;margin:0 auto;padding:4rem clamp(1rem,5vw,4rem) 6rem}
.recht h1{font-size:clamp(2.2rem,6vw,3rem);font-weight:300;margin-bottom:2rem}
.recht h3{font-size:1.3rem;font-weight:500;margin:2.2rem 0 .5rem}
.recht ul{padding-left:1.2em;margin:0 0 1em}

/* Einstieg Bestatter-Seite */
.einstieg{background:var(--erde);color:var(--papier);padding:clamp(3rem,9vw,7rem) 0 clamp(3.5rem,9vw,6rem)}
.einstieg .ueber{font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--holz);margin:0 0 1.25rem}
.einstieg h1{font-size:clamp(2.3rem,5.6vw,4.25rem);font-weight:300;letter-spacing:-.015em;line-height:1.08;max-width:16ch;margin-bottom:1.75rem}
.einstieg .lead{font-size:1.25rem;color:#cfc6b6;max-width:36ch;margin:0 0 2rem}

/* ---------- Schmal ---------- */
@media (max-width:760px){
  .kopf .rahmen{grid-template-columns:1fr;min-height:0;padding-top:1.5rem;gap:1rem}
  .druck{order:-1;justify-self:center;max-width:16rem;margin:1rem 0 0}
  .marke{position:absolute;top:1.25rem;left:clamp(1rem,5vw,4rem)}
  .kopf .rahmen{position:relative;padding-top:4rem}
  .kopf-text{gap:1.25rem}
  .abschnitt>.rahmen{grid-template-columns:1fr;gap:1.25rem}
  .stueck .bild{aspect-ratio:4/3}
  .stueck .bild svg{width:34%}
}

/* ---------- Beigaben entstehen ---------- */
.bewegt .stueck .bau-klein{clip-path:inset(100% 0 0 0)}
.bewegt .stueck .duese-klein{opacity:0}
.bewegt .stueck.da .bau-klein{animation:aufbauen 2.2s cubic-bezier(.45,.05,.3,1) both}
.bewegt .stueck.da .duese-klein{animation:duese-klein 2.2s cubic-bezier(.45,.05,.3,1) both}
.bewegt .stueck:nth-child(2).da .bau-klein,.bewegt .stueck:nth-child(2).da .duese-klein{animation-delay:.35s}
.bewegt .stueck:nth-child(3).da .bau-klein,.bewegt .stueck:nth-child(3).da .duese-klein{animation-delay:.7s}
@keyframes aufbauen{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes duese-klein{from{transform:translateY(0);opacity:.9}90%{opacity:.9}to{transform:translateY(-76px);opacity:0}}
.duese-klein{opacity:0}

/* ---------- Dann ist es Erde: die Buchstaben setzen sich ---------- */
.erde .k{display:inline-block}
.bewegt .erde .k{opacity:0;transform:translateY(-.35em);filter:blur(3px)}
.bewegt .erde.da .k{animation:setzen 1.6s cubic-bezier(.2,.6,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes setzen{to{opacity:1;transform:none;filter:none}}

/* ---------- Ablauf: der Faden wächst mit ---------- */
.schritte li{position:relative}
.schritte li:not(:last-child)::after{content:"";position:absolute;left:.42rem;top:2.2rem;bottom:-1.4rem;width:1px;background:var(--holz);opacity:.5;transform-origin:top;transform:scaleY(1)}
.bewegt .schritte li::before{color:var(--stein-2);transition:color .6s}
.bewegt .schritte li.da::before{color:var(--holz)}
.bewegt .schritte li:not(:last-child)::after{transform:scaleY(0);transition:transform 1.1s cubic-bezier(.45,.05,.3,1) .2s}
.bewegt .schritte li.da:not(:last-child)::after{transform:scaleY(1)}

/* ---------- Mitte: das Zeichen wird zu Erde ---------- */
.zerfall{height:190vh;position:relative}
.zerfall-buehne{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.zerfall-bild{width:min(70vw,360px);height:auto;aspect-ratio:3/4}
@media (prefers-reduced-motion:reduce){.zerfall{height:auto;padding:3rem 0}.zerfall-buehne{position:static;height:auto}}