@font-face{font-family:'Bodoni Moda';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/bodoni-400.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/bodoni-400i.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/bodoni-500.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/bodoni-600.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/figtree-400.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/figtree-400i.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/figtree-500.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/figtree-600.woff2) format('woff2')}
:root{--nacht:#121014;--kohle:#1b181e;--elfenbein:#f3eee6;--papier:#faf7f1;--sand:#e9e2d6;--violett:#5c3f74;--violett-t:#3f2a52;--flieder:#cbb8de;--silber:#b8b2a9;--tinte:#1f1b22;--grau:#6d6771;--linie:#d9d2c6;--serif:'Bodoni Moda',Didot,'Times New Roman',serif;--sans:'Figtree',system-ui,sans-serif;--rand:22px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--elfenbein);color:var(--tinte);font:400 17.5px/1.7 var(--sans);overflow-x:clip;padding-bottom:calc(63px + env(safe-area-inset-bottom,0px));-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.05;margin:0 0 .45em;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,9.2vw,5.4rem);font-weight:400}
h2{font-size:clamp(2.1rem,7.4vw,3.9rem);font-weight:400}
h3{font-size:clamp(1.5rem,5vw,2rem)}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--violett)}
.dunkel h1 em,.dunkel h2 em,.dunkel h3 em,.nacht h1 em,.nacht h2 em{color:var(--flieder)}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:var(--nacht);color:#fff;padding:10px 14px;z-index:99}.skip:focus{left:10px}
.hof{padding:0 var(--rand);max-width:1240px;margin:0 auto}
.vorzeile{font:600 15px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--violett);margin:0 0 16px;display:flex;align-items:center;gap:14px}
.vorzeile::before{content:'';width:34px;height:1px;background:currentColor;flex:none}
.dunkel .vorzeile,.nacht .vorzeile{color:var(--flieder)}
.lead{font-size:1.18rem;line-height:1.6;max-width:56ch;color:#3a343e}
.dunkel .lead,.nacht .lead,.mensch .lead{color:#d9d3dc}
.klein{font-size:.95rem;color:var(--grau)}
.dunkel .klein,.nacht .klein{color:#a9a2ad}
.schmal{max-width:62ch}
/* Notensystem: fünf Linien, das Zeichen des Hauses */
.system{position:relative;height:38px;margin:0 0 26px;max-width:min(100%,420px)}
.system::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--silber) 0 1px,transparent 1px 9px);opacity:.75}
.system i{position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:var(--violett);transform:rotate(-20deg) scaleX(1.25)}
.system i::after{content:'';position:absolute;right:1px;top:-20px;width:1.5px;height:26px;background:var(--violett);transform:rotate(20deg);transform-origin:bottom}
.system b{position:absolute;left:30px;top:0;font:600 15px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--violett);background:var(--elfenbein);padding:3px 8px 3px 6px;white-space:nowrap}
.dunkel .system::before,.nacht .system::before,.mensch .system::before,.u-kopf .system::before,.kaffee .system::before{opacity:.45}
.dunkel .system i,.nacht .system i,.mensch .system i,.u-kopf .system i,.kaffee .system i{background:var(--flieder)}.dunkel .system i::after,.nacht .system i::after,.mensch .system i::after,.u-kopf .system i::after,.kaffee .system i::after{background:var(--flieder)}
.dunkel .system b{background:var(--kohle);color:var(--flieder)}.nacht .system b,.mensch .system b,.u-kopf .system b{background:var(--nacht);color:var(--flieder)}.kaffee .system b{background:var(--violett);color:#fff}.kaffee .system::before{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.6) 0 1px,transparent 1px 9px)}
.papier .system b{background:var(--papier)}
.weiss .system b{background:#fff}
/* Knöpfe im Rahmen einer Trauerkarte: zwei Linien */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;font:600 15px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--nacht);color:var(--nacht);background:transparent;position:relative;transition:background .25s,color .25s,transform .2s;cursor:pointer}
.knopf::after{content:'';position:absolute;inset:4px;border:1px solid currentColor;opacity:.45;pointer-events:none;transition:inset .25s}
.knopf:hover::after{inset:7px}
.knopf:active{transform:translateY(1px)}
.k-voll{background:var(--nacht);color:var(--elfenbein);border-color:var(--nacht)}.k-voll:hover{background:var(--violett);border-color:var(--violett)}
.k-violett{background:var(--violett);color:#fff;border-color:var(--violett)}.k-violett:hover{background:var(--violett-t);border-color:var(--violett-t)}
.k-hell{border-color:var(--elfenbein);color:var(--elfenbein)}.k-hell:hover{background:var(--elfenbein);color:var(--nacht)}
.k-hell-voll{background:var(--elfenbein);color:var(--nacht);border-color:var(--elfenbein)}.k-hell-voll:hover{background:#fff}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* Textverweis in der Sprache des Hauses: Wort mit Notenlinie */
.weiter{display:inline-flex;flex-direction:column;gap:5px;font:600 15px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--violett);padding:8px 0;min-height:44px;justify-content:center}
.weiter i{display:block;height:5px;background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 2.5px);opacity:.6;transition:opacity .25s,transform .25s}
.weiter:hover i{opacity:1;transform:scaleX(1.06);transform-origin:left}
.dunkel .weiter,.nacht .weiter{color:var(--flieder)}
/* Abschnitte */
section{padding:64px 0}
.dunkel{background:var(--kohle);color:var(--elfenbein)}
.nacht{background:var(--nacht);color:var(--elfenbein)}
.papier{background:var(--papier)}
.weiss{background:#fff}
.dunkel p,.nacht p{color:#d9d3dc}
.dunkel h2,.dunkel h3,.nacht h2,.nacht h3{color:#fff}
/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:var(--nacht);color:var(--elfenbein);border-bottom:1px solid rgba(243,238,230,.12)}
.kopf-i{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}.marke,.kopf-tel,.menuknopf{flex:none}.kopf-i{padding:12px var(--rand);padding-top:calc(12px + env(safe-area-inset-top,0px));max-width:1240px;margin:0 auto}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
.marke img{width:198px;height:auto}
.marke .m-wort{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.marke .m-wort b{font:500 1.45rem/1 var(--serif);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.marke .m-wort span{font:400 .62rem/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:#d7d1dc;margin-top:5px}
.nav-desk{display:none}
.kopf-tel{display:none}
.menuknopf{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 4px;background:none;border:0;color:var(--elfenbein);font:400 1.25rem/1 var(--serif);letter-spacing:.06em;cursor:pointer}
.menuknopf i{position:relative;display:block;width:30px;height:30px}.menuknopf i::before{content:'';position:absolute;left:4px;bottom:4px;width:13px;height:13px;border-radius:50%;background:var(--flieder);transform:rotate(-20deg) scaleX(1.25)}.menuknopf i::after{content:'';position:absolute;left:17px;bottom:9px;width:1.5px;height:22px;background:var(--flieder);transform:rotate(12deg);transform-origin:bottom}
/* Vollbild-Menü */
.scheibe{position:fixed;inset:0;z-index:60;background:var(--nacht);color:var(--elfenbein);transform:translateY(-100%);visibility:hidden;transition:transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s .55s;overflow:auto;padding:calc(18px + env(safe-area-inset-top,0px)) var(--rand) 40px}
.scheibe.offen{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s}
.scheibe-kopf{display:flex;justify-content:space-between;align-items:center;min-height:48px}
.scheibe-zu{background:none;border:0;color:var(--elfenbein);font:400 1.25rem/1 var(--serif);letter-spacing:.06em;cursor:pointer;min-height:46px;padding:0 4px}
.scheibe ul{list-style:none;margin:34px 0 0;padding:0}
.scheibe li a{display:block;padding:12px 0;font:400 clamp(1.9rem,7.6vw,2.6rem)/1.1 var(--serif);text-decoration:none;color:#fff;border-bottom:1px solid rgba(243,238,230,.12)}
.scheibe li a[aria-current]{color:var(--flieder);font-style:italic}
.scheibe li a small{display:block;font:400 15px/1.3 var(--sans);letter-spacing:.02em;color:#a9a2ad;margin-top:2px}
.scheibe-fuss{margin-top:30px}
.scheibe-fuss .tel{display:inline-block;padding:9px 0;font:400 1.7rem/1.1 var(--serif);color:#fff;text-decoration:none}
.scheibe .system{margin-top:26px}.scheibe .system b{background:var(--nacht);color:var(--flieder)}.scheibe .system i,.scheibe .system i::after{background:var(--flieder)}.scheibe .system::before{opacity:.45}
/* Einstieg */
.held{position:relative;background:var(--nacht);color:var(--elfenbein);overflow:hidden;padding:0}
.held-bild{position:relative;height:62vh;min-height:420px}
.held-bild img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.held-bild::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,20,.25) 0%,rgba(18,16,20,0) 30%,rgba(18,16,20,.55) 68%,rgba(18,16,20,1) 100%)}
.held-text{position:relative;padding:0 var(--rand) 44px;margin-top:-120px}
.held-text .vorzeile{color:var(--flieder)}
.held h1{color:#fff;max-width:12ch;text-wrap:balance}
.held h1 em{color:var(--flieder)}
.held .lead{color:#e3dde6;max-width:42ch;margin-top:14px}
.tagnacht{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--flieder);margin-bottom:14px}
.tagnacht i{position:relative;width:20px;height:22px;display:block}.tagnacht i::before{content:'';position:absolute;left:1px;bottom:2px;width:10px;height:10px;border-radius:50%;background:var(--flieder);transform:rotate(-20deg) scaleX(1.25)}.tagnacht i::after{content:'';position:absolute;left:11px;bottom:6px;width:1.5px;height:16px;background:var(--flieder);transform:rotate(12deg);transform-origin:bottom}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(203,184,222,.6)}70%{box-shadow:0 0 0 12px rgba(203,184,222,0)}100%{box-shadow:0 0 0 0 rgba(203,184,222,0)}}
.tel-gross{display:inline-block;font:400 clamp(1.9rem,8vw,3rem)/1 var(--serif);color:#fff;text-decoration:none;letter-spacing:.02em;margin:2px 0 0;padding:8px 0}
.held .klein{color:#b8b1bd}
/* Wortmarke-Band unter dem Einstieg: die Fassade spricht */
.fassade{background:var(--nacht);color:var(--elfenbein);padding:26px 0 30px;border-top:1px solid rgba(243,238,230,.14)}
.fassade-i{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;font:500 15px/1.3 var(--serif);letter-spacing:.26em;text-transform:uppercase;color:#cfc8d3}
.fassade-i span{position:relative;padding:0 2px}
/* Erste Stunden */
.stunden{padding:64px 0 20px}
.takt{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.takt li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--linie)}
.takt li:last-child{border-bottom:1px solid var(--linie)}
.takt b{font:400 2.6rem/1 var(--serif);font-style:italic;color:var(--violett)}
.takt h3{font-size:1.35rem;margin-bottom:.3em}
.takt .note{position:relative;width:14px;height:14px;border-radius:50%;background:var(--violett);transform:rotate(-20deg) scaleX(1.25);margin:10px 0 0 6px}.takt .note::after{content:'';position:absolute;right:1px;top:-20px;width:1.5px;height:26px;background:var(--violett);transform:rotate(20deg);transform-origin:bottom}
.takt p{margin:0;color:#4a444e}
/* Zweispalter Bild/Text mit Verschmelzen */
.zwei{display:grid;gap:30px;align-items:center}
.foto{margin:0;position:relative}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.weich img{-webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,transparent 100%)}
.foto.weich-l img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%)}
.foto.weich-r img{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%)}
.foto.weich-u img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)}
.foto.hoch{aspect-ratio:3/4}
.foto.quer{aspect-ratio:4/3}
.foto.quadrat{aspect-ratio:1}
figcaption{font:400 15px/1.4 var(--sans);color:var(--grau);margin-top:10px;letter-spacing:.04em}
/* Der Mensch */
.mensch{background:var(--nacht);color:var(--elfenbein);overflow:hidden}
.mensch .foto img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
.mensch .rollen{margin:18px 0 0;font:400 1.25rem/1.4 var(--serif);font-style:italic;color:var(--flieder)}
.zitat{font:400 clamp(1.45rem,4.6vw,2rem)/1.3 var(--serif);font-style:italic;color:#fff;max-width:30ch;margin:22px 0 0;position:relative;padding-left:22px}
.zitat::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--flieder)}
.zitat cite{display:block;font:600 15px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--flieder);font-style:normal;margin-top:14px}
/* Versprechen */
.versprechen ol{list-style:none;margin:30px 0 0;padding:0;counter-reset:v}
.versprechen li{counter-increment:v;padding:20px 0 20px 64px;position:relative;border-top:1px solid var(--linie)}
.versprechen li::before{content:counter(v,upper-roman);position:absolute;left:0;top:18px;font:400 1.5rem/1 var(--serif);font-style:italic;color:var(--violett)}
.versprechen li b{display:block;font:500 1.25rem/1.25 var(--serif);margin-bottom:4px}
.versprechen li span{color:#4a444e}
.versprechen li:last-child{border-bottom:1px solid var(--linie)}
.siegel{display:flex;align-items:center;gap:18px;margin-top:30px}
.siegel img{width:84px;height:84px;border-radius:50%}
.siegel p{margin:0;font:400 1.05rem/1.4 var(--serif);font-style:italic}
.siegel small{display:block;font:600 15px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grau);font-style:normal;margin-top:4px}
/* Leistungen als Programmblatt */
.blatt{background:var(--papier);border:1px solid var(--linie);padding:30px 22px 26px;position:relative;box-shadow:0 30px 60px -40px rgba(18,16,20,.35)}
.blatt::before{content:'';position:absolute;inset:8px;border:1px solid var(--linie);pointer-events:none}
.blatt h3{font-size:1.4rem;margin:0 0 10px;padding-bottom:8px;border-bottom:0;display:flex;align-items:baseline;gap:12px}
.blatt h3 i{font-style:italic;font-weight:400;color:var(--violett);font-size:1.1rem}
.blatt ul{margin:0;padding:0;list-style:none}
.blatt li{padding:7px 0 7px 22px;position:relative;color:#3a343e;font-size:1.02rem}
.blatt li::before{content:'';position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--violett);transform:rotate(-20deg) scaleX(1.3);opacity:.85}
.blatt{margin-top:30px}.satz{padding:22px 0 10px;break-inside:avoid}.satz+.satz{border-top:1px solid var(--linie)}.satz:first-child{padding-top:4px}
.geste{margin:16px -6px -10px;padding:26px 20px 28px;background:var(--violett);color:#fff}.geste h3{border-color:rgba(255,255,255,.3);color:#fff}.geste h3 i{color:var(--flieder)}.geste p{color:#efe8f4;margin:0}
/* Bestattungsarten als Reihen */
.arten{display:grid;gap:0;margin-top:26px}
.art{scroll-margin-top:96px;display:grid;gap:16px;padding:30px 0;border-top:1px solid var(--linie)}
.art:last-child{border-bottom:1px solid var(--linie)}
.art .foto{aspect-ratio:16/10}
.art .foto img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%)}
.art .nr{font:400 1.1rem/1 var(--serif);font-style:italic;color:var(--violett);margin-bottom:8px;display:block}
.art h3{font-size:1.7rem}
.art p{color:#3a343e;margin:0 0 .7em}
.art p:last-child{margin:0}
/* Streifen der Arten auf der Startseite */
.strom{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--rand);padding:4px var(--rand) 18px;margin:26px calc(-1*var(--rand)) 0;scrollbar-width:none}
.strom::-webkit-scrollbar{display:none}
.strom a{flex:0 0 72%;max-width:320px;scroll-snap-align:start;text-decoration:none;color:inherit;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--nacht)}
.strom a img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.strom a:hover img{transform:scale(1.04)}
.strom a::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,20,0) 40%,rgba(18,16,20,.9) 100%)}
.strom a span{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;color:#fff;font:400 1.5rem/1.1 var(--serif)}
.strom a span small{display:block;font:600 15px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--flieder);margin-bottom:6px}
/* Vorsorge-Einladung: der Kaffeetisch */
.kaffee{background:var(--violett);color:#fff;position:relative;overflow:hidden}
.kaffee::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 28px)}
.kaffee .hof{position:relative}
.kaffee .vorzeile{color:var(--flieder)}
.kaffee h2{color:#fff}.kaffee h2 em{color:var(--flieder)}
.kaffee p{color:#e9e1f0}
.kaffee .knopf{border-color:#fff;color:#fff}.kaffee .knopf:hover{background:#fff;color:var(--violett)}
/* Gedenkportal-Kerze */
.kerze{display:grid;gap:26px}
.flamme{width:64px;height:84px;position:relative;margin:0 0 10px 30px}
.flamme::before{content:'';position:absolute;left:50%;bottom:0;width:16px;height:56px;margin-left:-8px;border-radius:2px 2px 1px 1px;background:linear-gradient(#3a343e,#3a343e) 50% 0/2px 10px no-repeat,linear-gradient(90deg,#e2dacc,#fbf7ef 45%,#d3cabb) 0 100%/100% calc(100% - 9px) no-repeat}
.flamme::after{content:'';position:absolute;left:50%;bottom:52px;width:14px;height:26px;margin-left:-7px;background:radial-gradient(ellipse at 50% 72%,#fff 0,#f6dfae 38%,#c9a4e0 72%,transparent 100%);border-radius:50% 50% 50% 50%/68% 68% 32% 32%;box-shadow:0 0 22px 8px rgba(246,223,174,.22);animation:flackern 2.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes flackern{0%,100%{transform:scaleX(1) scaleY(1)}30%{transform:scaleX(.9) scaleY(1.08) translateX(1px)}60%{transform:scaleX(1.05) scaleY(.96) translateX(-1px)}}
.wege{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.wege li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.wege li b{font:400 1.9rem/1 var(--serif);font-style:italic;color:var(--flieder)}
.wege li span{display:block;color:#d9d3dc}
.wege li strong{display:block;font:500 1.15rem/1.3 var(--serif);color:#fff;margin-bottom:3px}
/* Zwei Häuser */
.haeuser{display:grid;gap:24px;margin-top:30px}
.haus{display:grid;gap:14px;align-content:start}
.haus .foto{aspect-ratio:4/3}
.haus .foto img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%)}
.haus h3{margin:0}
.haus address{font-style:normal;color:#3a343e;line-height:1.6}
.haus address a,.kk .adresse a,.ds a{text-decoration:none;font-weight:600;color:var(--violett);display:inline-block;padding:12px 0;margin:-12px 0}
/* Fuss */
.fuss{background:var(--nacht);color:#cfc8d3;padding:56px 0 30px}
.fuss .system{max-width:none;margin-bottom:34px}.fuss .system::before{opacity:.35}.fuss .system i,.fuss .system i::after{background:var(--flieder)}.fuss .system b{background:var(--nacht);color:var(--flieder)}
.fuss .f-logo{margin-bottom:28px}
.fuss .f-logo img{width:210px}
.fuss-g{display:grid;gap:26px}
.fuss h4{font:600 15px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--flieder);margin:0 0 10px}
.fuss p{margin:0;line-height:1.65}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff}
.fuss-u{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:36px;padding-top:18px;border-top:1px solid rgba(243,238,230,.14);font-size:15px;color:#8f8794}
.fuss-u a{min-height:44px;display:inline-flex;align-items:center}
.vermerk{background:#0b0b0c;text-align:center;padding:10px var(--rand)}
.vermerk a{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.vermerk .seele{font:400 15px/1 var(--serif);color:#fff;font-style:italic}
.vermerk img{width:150px;height:auto}
/* Feste Leiste unten (Handy) */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--nacht);border-top:1px solid rgba(243,238,230,.16);padding-bottom:env(safe-area-inset-bottom,0px)}
.leiste a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;text-decoration:none;color:var(--elfenbein);font:600 15px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;gap:3px}
.leiste a b{font:400 1.25rem/1 var(--serif);letter-spacing:.02em;text-transform:none}
.leiste .l-a{background:var(--violett);color:#fff}
/* Unterseiten-Kopf */
.u-kopf{background:var(--nacht);color:var(--elfenbein);padding:46px 0 0;overflow:hidden}
.u-kopf h1{color:#fff;max-width:14ch;text-wrap:balance}
.u-kopf .lead{color:#d9d3dc}
.u-kopf .u-bild{margin:34px calc(-1*var(--rand)) 0;aspect-ratio:4/3;position:relative}
.u-kopf .u-bild img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%)}
.u-kopf .u-bild::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,16,20,.35),rgba(18,16,20,0) 50%)}
/* Gelbe Seiten-Liste: später zu regeln */
.spaeter{columns:1;margin:26px 0 0;padding:0;list-style:none}
.spaeter li{break-inside:avoid;padding:12px 0 12px 26px;border-top:1px solid var(--linie);position:relative}
.spaeter li::before{content:'';position:absolute;left:4px;top:22px;width:8px;height:8px;border-radius:50%;background:var(--violett);transform:rotate(-20deg) scaleX(1.3)}
.spaeter b{display:block;font:500 1.12rem/1.3 var(--serif)}
.spaeter span{color:#4a444e;font-size:.98rem}
/* Galerie als Mosaik */
.mosaik{columns:2;column-gap:12px;margin-top:26px}
.mosaik figure{margin:0 0 12px;break-inside:avoid;position:relative}
.mosaik figure button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.mosaik img{width:100%}
.mosaik figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;color:#fff;font:400 15px/1.3 var(--serif);font-style:italic;background:linear-gradient(180deg,transparent,rgba(18,16,20,.85));margin:0;opacity:0;transition:opacity .3s;pointer-events:none}
.mosaik figure:hover figcaption{opacity:1}
/* Lichtkasten */
.licht{position:fixed;inset:0;z-index:70;background:rgba(18,16,20,.985);display:none;align-items:center;justify-content:center;padding:24px}
.licht.offen{display:flex}
.licht img{max-width:100%;max-height:82vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.licht p{position:absolute;left:24px;right:24px;bottom:22px;margin:0;color:#e3dde6;text-align:center;font:400 1.05rem/1.4 var(--serif);font-style:italic}
.licht-zu{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:18px;background:none;border:0;color:#fff;font:400 1.2rem/1 var(--serif);letter-spacing:.06em;cursor:pointer;min-height:46px;padding:0 6px}
.licht-pfeil{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;background:none;border:0;color:#fff;font:400 2.4rem/1 var(--serif);cursor:pointer}
.licht-pfeil.l{left:6px}.licht-pfeil.r{right:6px}
/* Formular */
.formular{display:grid;gap:16px;margin-top:26px}
.formular label{display:block}
.formular label span{display:block;font:600 15px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--violett);margin-bottom:6px}
.formular input,.formular textarea{width:100%;min-height:48px;border:0;border-bottom:1.5px solid var(--nacht);background:transparent;padding:6px 0 10px;font:400 1.08rem/1.4 var(--sans);color:var(--tinte);border-radius:0;-webkit-appearance:none}
.formular textarea{min-height:130px;resize:vertical}
.formular input:focus,.formular textarea:focus{outline:0;border-bottom-color:var(--violett);box-shadow:0 1.5px 0 var(--violett)}
.formular .zwei-f{display:grid;gap:16px}
.formular .ds{display:flex;gap:14px;align-items:flex-start;min-height:44px;cursor:pointer;font-size:.98rem;color:#4a444e}
.formular .ds span{font:400 .98rem/1.5 var(--sans);letter-spacing:0;text-transform:none;color:#4a444e;margin:0;display:block;flex:1}
.ds input{-webkit-appearance:none;appearance:none;width:28px;height:28px;min-height:0;margin:2px 0 0;padding:0;border:1.5px solid var(--nacht);background:transparent;flex:none;position:relative;cursor:pointer;border-radius:0}.ds input::before{content:'';position:absolute;inset:3px;border:1px solid var(--nacht);opacity:.35}.ds input::after{content:'';position:absolute;left:8px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--violett);transform:rotate(-20deg) scaleX(1.25) scale(0);transition:transform .2s}.ds input:checked::after{transform:rotate(-20deg) scaleX(1.25) scale(1)}.ds input:focus-visible{outline:2px solid var(--violett);outline-offset:3px}
.f-hinweis{font-size:15px;color:var(--grau)}
/* Kontaktkarten */
.kk{display:grid;gap:30px;margin-top:30px}
.kk .adresse{font-style:normal;line-height:1.7}
.kk .adresse b{font:500 1.3rem/1.2 var(--serif);display:block;margin-bottom:6px}
.kk .adresse a{text-decoration:none;color:var(--violett);font-weight:600}
/* Rechtstexte */
.recht{max-width:74ch}
.recht h2{font-size:1.9rem;margin-top:1.6em}
.recht h3{font-size:1.25rem;margin-top:1.4em;font-family:var(--sans);font-weight:600}
.recht p,.recht li{color:#3a343e}
/* Impressions */
.impressionen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.impressionen .foto{aspect-ratio:1}
.impressionen .foto:first-child{grid-column:1/3;grid-row:1/3}
/* Erscheinen */
.js .auf{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.js .auf.da{opacity:1;transform:none}
@media (min-width:720px){
  :root{--rand:44px}
  section{padding:88px 0}
  .held-bild{height:66vh;min-height:520px}
  .held-text{margin-top:-170px;padding-bottom:60px;max-width:1240px;margin-left:auto;margin-right:auto}
  .zwei{grid-template-columns:1fr 1fr;gap:50px}
  .zwei.breit-text{grid-template-columns:1.1fr .9fr}
  .takt li{grid-template-columns:90px 1fr;padding:26px 0}
  .takt b{font-size:3.2rem}
  .versprechen ol{columns:2;column-gap:50px}
  .versprechen li{break-inside:avoid;border-top:1px solid var(--linie)}
  .versprechen li:last-child{border-bottom:0}
  .blatt{padding:40px 44px 36px}.blatt-sp{columns:2;column-gap:56px}.satz{padding:18px 0 14px}.satz+.satz{border-top:0}.satz{border-top:1px solid var(--linie)}.satz:first-child{border-top:0;padding-top:0}
  .geste{margin:28px -28px -20px;padding:34px 40px 38px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}.geste h3{margin:0;white-space:nowrap}
  .art{grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;padding:40px 0}
  .art:nth-child(even) .foto{order:2}
  .strom a{flex-basis:300px}
  .kerze{grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  .haeuser{grid-template-columns:1fr 1fr;gap:40px}
  .fuss-g{grid-template-columns:1.3fr 1fr 1fr 1fr}
  .spaeter{columns:2;column-gap:40px}
  .mosaik{columns:3}
  .formular .zwei-f{grid-template-columns:1fr 1fr}
  .kk{grid-template-columns:1fr 1fr}
  .u-kopf{padding-top:70px}
  .u-kopf .u-bild{margin:44px 0 0;aspect-ratio:21/9}
  .vermerk .seele{font-size:15px}.vermerk img{width:180px}
}
@media (min-width:1180px){
  :root{--rand:clamp(56px,6.5vw,110px)}
  body{padding-bottom:0}.leiste{display:none}
  .kopf-tel{display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:44px;text-decoration:none;line-height:1;margin-left:auto;margin-right:26px}
  .kopf-tel b{font:400 1.25rem/1 var(--serif);color:#fff}
  .kopf-tel span{font:600 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--flieder);margin-top:5px}
}
@media (min-width:1480px){
  .menuknopf{display:none}
  .kopf-tel{margin-left:0;margin-right:0}
  .nav-desk{display:flex;gap:4px}
  .nav-desk a{text-decoration:none;font:500 15px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:0 10px;min-height:44px;display:inline-flex;align-items:center;color:#d7d1dc;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
  .nav-desk a:hover,.nav-desk a[aria-current]{color:#fff;border-color:var(--flieder)}
}
@media (min-width:1180px){
  .kopf-i{max-width:none;padding-left:var(--rand);padding-right:var(--rand)}
  .hof{max-width:1180px}
  .held{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 78px);max-height:900px}
  .held-bild{height:auto;min-height:0}
  .held-bild::after{background:linear-gradient(90deg,rgba(18,16,20,0) 55%,rgba(18,16,20,1) 100%),linear-gradient(180deg,rgba(18,16,20,.15),rgba(18,16,20,0) 30%)}
  .held-text{margin:0;padding:80px 70px 70px 20px;display:flex;flex-direction:column;justify-content:center}
  .held h1{font-size:clamp(3.4rem,4.4vw,5.2rem)}
  .takt.zs{grid-template-columns:1fr 1fr;column-gap:50px}
  .takt.zs li:nth-child(1),.takt.zs li:nth-child(2){border-top:1px solid var(--linie)}
  .takt.zs li:last-child,.takt.zs li:nth-last-child(2){border-bottom:1px solid var(--linie)}
  .leist .takt li{grid-template-columns:56px 1fr}
  .mosaik{columns:4}
  .strom{margin:30px calc(50% - 50vw) 0 0;padding:4px calc(50vw - 50%) 18px 0}
  .kaffee h2{font-size:clamp(2rem,3.1vw,3.1rem)}
  .kaffee .zwei{grid-template-columns:1.15fr .85fr;gap:70px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .auf{opacity:1;transform:none;transition:none}.tagnacht i,.flamme::after{animation:none}}

/* Bestattungsarten als Notenzeilen */
.noten{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0}
.noten a{display:grid;grid-template-columns:44px 64px 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid rgba(243,238,230,.14);text-decoration:none;color:inherit;min-height:84px}
.noten li:last-child a{border-bottom:1px solid rgba(243,238,230,.14)}
.noten .nr{font:400 1.25rem/1 var(--serif);font-style:italic;color:var(--flieder)}
.noten .bild{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--nacht);flex:none}
.noten .bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.noten a:hover .bild img{transform:scale(1.08)}
.noten .nm{font:400 1.35rem/1.15 var(--serif);color:#fff}
.noten .nm small{display:block;font:600 15px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--flieder);margin-top:4px}
@media (min-width:720px){.noten{grid-template-columns:1fr 1fr;column-gap:50px}.noten li:nth-child(1) a,.noten li:nth-child(2) a{border-top:1px solid rgba(243,238,230,.14)}.noten li:nth-last-child(2) a{border-bottom:1px solid rgba(243,238,230,.14)}}