/* Gruselnacht in der Villa Hollerbach – Beispiel-Entwurf. Stil: dunkel, körnig, wie ein alter Horrorfilm. */
@font-face{font-family:"Creepster";src:url("/beispiele/_shared/fonts/creepster.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Special Elite";src:url("/beispiele/_shared/fonts/specialelite.woff2") format("woff2");font-display:swap}
:root{--bg:#050507;--bg2:#0b0a10;--ink:#d9d2c0;--muted:#8d877a;--bone:#efe8d6;--slime:#9fcf2f;--slime2:#5d8a12;--blood:#8f0f14;--blood2:#d41a22;--line:rgba(217,210,192,.12);
  --head:"Creepster",Impact,"Arial Black",sans-serif;--type:"Special Elite","Courier New",monospace;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(18px,4vw,56px);--bar:48px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
[hidden]{display:none !important}
p,h1,h2,h3,ul,ol{margin:0}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.wrap--c{text-align:center}
.kick{font:400 12px/1.4 var(--type);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.h2{font:400 clamp(40px,6.4vw,92px)/.98 var(--head);letter-spacing:.03em;color:var(--bone);text-shadow:0 0 28px rgba(159,207,47,.12),0 6px 0 #000;margin-bottom:18px}
.lead{max-width:62ch;color:var(--muted);font-size:clamp(16px,1.3vw,18px);margin-bottom:34px}
.blood{color:var(--blood2);text-shadow:0 0 24px rgba(212,26,34,.45),0 6px 0 #000}

/* Filmkorn, Vignette, Blitz */
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.09;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .6s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(4%,4%)}}
.vig{position:fixed;inset:0;z-index:59;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 100%)}
.flash{position:fixed;inset:0;z-index:58;pointer-events:none;background:#e9eef5;opacity:0}
.flash.is-on{animation:flash .5s steps(1)}
@keyframes flash{0%{opacity:.75}18%{opacity:0}30%{opacity:.4}42%{opacity:0}60%{opacity:.9}100%{opacity:0}}

/* Kopf */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--bar);padding:0 var(--pad);background:linear-gradient(rgba(5,5,7,.92),rgba(5,5,7,.6));border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.is-solid{background:rgba(5,5,7,.94);border-color:var(--line)}
.nav__logo{font:400 15px/1 var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--bone);text-decoration:none}
.nav__logo span{color:var(--blood2)}
.nav__l{display:flex;gap:22px}
.nav__l a{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.nav__l a:hover,.nav__l a.is-on{color:var(--bone)}
.nav__r{display:flex;align-items:center;gap:10px}
.snd{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.snd[aria-pressed="true"]{border-color:var(--blood2);color:var(--bone)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--bone);text-decoration:none;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
.btn--blood{background:var(--blood);border-color:var(--blood2);color:#fff}
.btn--blood:hover{background:var(--blood2)}
.btn--glow{box-shadow:0 0 0 rgba(212,26,34,0);animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 34px rgba(212,26,34,.45)}}
.btn--ghost:hover{border-color:var(--bone)}
.btn--s{min-height:30px;padding:0 14px;font-size:11px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Hero */
.hero{position:relative;min-height:max(680px,calc(100svh - var(--bar)));display:grid;align-items:end;padding:120px var(--pad) 80px;overflow:hidden;isolation:isolate}
.hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2;filter:contrast(1.1) saturate(.8)}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,7,.55),rgba(5,5,7,.15) 35%,rgba(5,5,7,.35) 70%,var(--bg) 100%),radial-gradient(60% 50% at 50% 60%,rgba(0,0,0,0),rgba(0,0,0,.55))}
.hero__in{max-width:980px}
.type{min-height:1.4em}
.type::after{content:"";display:inline-block;width:.6em;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--muted);animation:blink 1s steps(1) infinite}
.type.is-done::after{display:none}
@keyframes blink{50%{opacity:0}}
.title{display:grid;font:400 clamp(84px,17vw,250px)/.84 var(--head);letter-spacing:.02em;color:var(--blood2);text-shadow:0 0 18px rgba(212,26,34,.4),0 0 60px rgba(212,26,34,.2),0 8px 0 #3a0407,0 10px 24px rgba(0,0,0,.8);margin:0 0 22px;padding-bottom:.1em}
.title__w{display:block;width:max-content;max-width:100%;white-space:nowrap;position:relative}
/* Tropfen laufen aus dem Titel heraus */
.title__w::after{content:"";position:absolute;left:.08em;right:.2em;top:.78em;height:.42em;pointer-events:none;background:radial-gradient(ellipse 3.5% 60% at 6% 0,var(--blood2) 50%,transparent 52%),radial-gradient(ellipse 3% 90% at 23% 0,var(--blood2) 50%,transparent 52%),radial-gradient(ellipse 4% 45% at 41% 0,var(--blood2) 50%,transparent 52%),radial-gradient(ellipse 3% 100% at 58% 0,var(--blood2) 50%,transparent 52%),radial-gradient(ellipse 3.5% 70% at 77% 0,var(--blood2) 50%,transparent 52%),radial-gradient(ellipse 3% 55% at 93% 0,var(--blood2) 50%,transparent 52%);filter:drop-shadow(0 6px 0 #3a0407)}
.title__w .drop{position:absolute;top:1.1em;width:.05em;height:.14em;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:var(--blood2);box-shadow:0 0 8px rgba(212,26,34,.5);animation:drop 3.4s ease-in infinite;animation-delay:var(--dd)}
@keyframes drop{0%,20%{transform:translateY(0) scaleY(.6);opacity:0}25%{opacity:1}100%{transform:translateY(5.5em) scaleY(1.4);opacity:0}}
.title__w .ch{display:inline-block;animation:flick 7s steps(1) infinite;animation-delay:calc(var(--i) * -1.37s)}
@keyframes flick{0%,94%{opacity:1}95%{opacity:.25}96%{opacity:1}97.5%{opacity:.4}98%{opacity:1}}
.hero__sub{max-width:52ch;color:var(--ink);font-size:clamp(16px,1.35vw,19px);margin-bottom:28px;text-shadow:0 2px 12px #000}
.count{display:flex;gap:10px;margin-bottom:28px}
.count div{min-width:84px;padding:10px 12px;border:1px solid var(--line);background:rgba(5,5,7,.6);text-align:center;backdrop-filter:blur(2px)}
.count b{display:block;font:400 34px/1 var(--type);color:var(--bone)}
.count span{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero__hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:400 12px/1 var(--type);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:hint 2.4s ease-in-out infinite}
@keyframes hint{50%{transform:translate(-50%,6px);opacity:.5}}
/* Zwei Augen im Dunkel, erscheinen nur kurz */
.eyes{position:absolute;right:12%;top:38%;display:flex;gap:14px;opacity:0;transition:opacity 1.2s}
.eyes.is-on{opacity:1}
.eyes i{width:9px;height:9px;border-radius:50%;background:#ffd9a8;box-shadow:0 0 12px #ffb15c,0 0 30px rgba(255,120,40,.6);animation:eblink 5s steps(1) infinite}
@keyframes eblink{0%,88%{transform:scaleY(1)}90%,93%{transform:scaleY(.1)}}

/* Die Warnung */
.warn{position:relative;padding:clamp(80px,10vw,150px) 0;overflow:hidden;isolation:isolate;background:var(--bg)}
.warn__v{position:absolute;right:-6%;top:0;width:min(64vw,900px);height:100%;object-fit:cover;z-index:-2;opacity:.42;filter:grayscale(1) contrast(1.25) brightness(.7)}
.warn__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 35%,rgba(5,5,7,.4) 70%,rgba(5,5,7,.75)),linear-gradient(180deg,var(--bg),transparent 18%,transparent 82%,var(--bg))}
.letter{position:relative;max-width:620px;padding:46px 44px 40px;background:#e9e1cc;color:#1f1a14;font:400 16px/1.75 var(--type);transform:rotate(-1.2deg);box-shadow:0 30px 60px rgba(0,0,0,.7),inset 0 0 90px rgba(90,60,20,.25);background-image:radial-gradient(circle at 20% 10%,rgba(120,80,30,.14),transparent 40%),radial-gradient(circle at 80% 90%,rgba(60,30,10,.18),transparent 40%)}
.letter::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.6;pointer-events:none}
.letter__stamp{position:absolute;right:26px;top:22px;padding:4px 10px;border:3px double var(--blood);color:var(--blood);font:400 14px/1 var(--type);letter-spacing:.3em;text-transform:uppercase;transform:rotate(8deg);opacity:.85}
.letter__head{margin-bottom:18px;font-size:18px}
.letter__body p{margin-bottom:14px;min-height:1.75em}
.letter__body p span{opacity:0}
.letter__body p span.is-on{opacity:1}
.letter__sign{margin-top:22px;font-style:italic;color:#4a3a2a}
.letter.is-done .letter__sign{animation:sign .8s both}
@keyframes sign{from{opacity:0;transform:translateY(6px)}}

/* Das Grab: Film beim Scrollen */
.grave{position:relative;height:300vh;background:#000}
.grave__pin{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));overflow:hidden;background:#000}
.grave__c{position:absolute;inset:0;width:100%;height:100%}
.grave__still{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:100%;width:auto;filter:grayscale(1)}
.grave__txt{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(50px,9vh,110px);pointer-events:none}
.grave__t{position:absolute;left:0;bottom:0;max-width:22ch;font:400 clamp(28px,4.4vw,64px)/1.05 var(--head);letter-spacing:.03em;color:var(--bone);text-shadow:0 4px 0 #000,0 0 30px rgba(0,0,0,.9);opacity:0;transform:translateY(16px);transition:opacity .7s,transform .9s var(--ease)}
.grave__t.is-on{opacity:1;transform:none}
.grave__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;height:2px;background:rgba(217,210,192,.12)}
.grave__bar i{display:block;height:100%;background:var(--blood2);transform-origin:left;transform:scaleX(0)}

/* Die Bewohner */
.res{position:relative;padding:clamp(80px,10vw,150px) 0;overflow:hidden;isolation:isolate}
.res__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2;opacity:.5;filter:saturate(.5) contrast(1.15)}
.res__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(5,5,7,.78) 20%,rgba(5,5,7,.82) 80%,var(--bg))}
.files{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.file{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);background:rgba(8,8,11,.86);cursor:pointer;transition:transform .35s var(--ease),border-color .3s;overflow:hidden;outline:none}
.file:hover,.file:focus-visible,.file.is-on{transform:translateY(-6px);border-color:rgba(212,26,34,.6)}
.file__m{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.file__m video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.75);transition:filter .6s,transform 4s var(--ease)}
.file:hover .file__m video,.file:focus-visible .file__m video,.file.is-on .file__m video{filter:grayscale(.3) contrast(1.15) brightness(.95);transform:scale(1.06)}
.file__m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,8,11,1));pointer-events:none}
.file__t{padding:16px 18px 20px}
.file__n{display:block;font:400 11px/1 var(--type);letter-spacing:.22em;text-transform:uppercase;color:var(--blood2);margin-bottom:8px}
.file h3{font:400 30px/1 var(--head);letter-spacing:.03em;color:var(--bone);margin-bottom:8px}
.file p{color:var(--muted);font-size:14px;margin-bottom:12px}
.file__last{font:400 12px/1.4 var(--type);color:var(--slime);opacity:.85}
.file.is-on{animation:jolt .5s}
@keyframes jolt{0%,100%{transform:translateY(-6px)}20%{transform:translate(-3px,-5px)}40%{transform:translate(3px,-7px)}60%{transform:translate(-2px,-6px)}80%{transform:translate(2px,-6px)}}

/* Taschenlampe */
.torch{position:relative;height:clamp(560px,92svh,860px);overflow:hidden;background:#000;cursor:none;isolation:isolate}
.torch__room{position:absolute;inset:0;background:url("/beispiele/halloween/media/zimmer.webp") center/cover no-repeat;filter:brightness(.85) saturate(.6)}
.torch__who{position:absolute;left:var(--wx,62%);top:var(--wy,38%);width:clamp(150px,18vw,260px);height:auto;filter:contrast(1.3) brightness(.9);opacity:.95;mix-blend-mode:screen;transform:translate(-50%,-50%)}
.torch__dark{position:absolute;inset:0;background:rgba(0,0,0,.985);--tx:50%;--ty:50%;--r:0px;-webkit-mask:radial-gradient(circle var(--r) at var(--tx) var(--ty),transparent 0,transparent 55%,rgba(0,0,0,.55) 80%,#000 100%);mask:radial-gradient(circle var(--r) at var(--tx) var(--ty),transparent 0,transparent 55%,rgba(0,0,0,.55) 80%,#000 100%)}
.torch.is-lit .torch__dark{--r:clamp(150px,20vw,260px)}
.torch__txt{position:absolute;left:var(--pad);right:var(--pad);top:clamp(40px,8vh,80px);pointer-events:none;max-width:560px}
.torch__txt .h2{font-size:clamp(36px,5vw,72px)}
.torch__found{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:400 clamp(30px,6vw,80px)/1 var(--head);color:var(--blood2);text-shadow:0 0 30px rgba(212,26,34,.6),0 4px 0 #000;opacity:0;pointer-events:none}
.torch.is-found .torch__found{animation:found 2.6s both}
.torch.is-found .torch__who{animation:who .4s steps(2) 3}
@keyframes found{0%{opacity:0;transform:scale(1.4)}10%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes who{50%{transform:translate(-50%,-50%) scale(1.25)}}

/* Der Knopf */
.nope{position:relative;padding:clamp(90px,12vw,170px) 0;background:radial-gradient(60% 60% at 50% 60%,#14080a,var(--bg) 70%)}
.nope__btn{position:relative;width:170px;height:170px;margin:10px auto 26px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 40% 35%,#ff3a42,#8f0f14 55%,#3b0508);box-shadow:0 18px 0 #2a0406,0 30px 60px rgba(0,0,0,.8),inset 0 -10px 20px rgba(0,0,0,.5),0 0 60px rgba(212,26,34,.35);transition:transform .08s,box-shadow .08s;display:grid;place-items:center}
.nope__btn span{font:400 22px/1 var(--head);letter-spacing:.06em;color:#fff;text-shadow:0 2px 0 #000}
.nope__btn:active{transform:translateY(12px);box-shadow:0 6px 0 #2a0406,0 14px 30px rgba(0,0,0,.8),inset 0 -6px 14px rgba(0,0,0,.5)}
.nope__after{min-height:1.6em;font:400 18px/1.5 var(--type);color:var(--muted)}

/* Schreckmoment */
.scare{position:fixed;inset:0;z-index:100;background:#000;display:none;overflow:hidden}
.scare.is-on{display:block;animation:scare 1.9s steps(1) both}
.scare video{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:contrast(1.25) saturate(.6);animation:scarez 1.9s linear both}
@keyframes scare{0%{opacity:1}6%{opacity:0}8%{opacity:1}11%{opacity:0}13%{opacity:1}100%{opacity:1}}
@keyframes scarez{0%{transform:scale(1.08)}100%{transform:scale(1.32)}}
body.is-shaking{animation:shake .35s linear 4}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-8px,5px)}50%{transform:translate(7px,-6px)}75%{transform:translate(-5px,-4px)}}

/* Programm */
.prog{position:relative;padding:clamp(80px,10vw,150px) 0;overflow:hidden;isolation:isolate}
.prog__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55;filter:saturate(.4) contrast(1.2)}
.prog__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(5,5,7,.7) 25%,rgba(5,5,7,.8) 75%,var(--bg))}
.tl{list-style:none;padding:0;max-width:760px;display:grid;gap:4px}
.tl li{display:grid;grid-template-columns:64px 76px 1fr;gap:18px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.tl__c{width:64px;aspect-ratio:1;overflow:hidden;border-radius:50%;background:#000;box-shadow:0 0 30px rgba(255,150,60,.15)}
.tl__c video{width:100%;height:100%;object-fit:cover;transform:scale(1.9);transform-origin:50% 42%}
.tl time{font:400 22px/1.2 var(--type);color:var(--bone);padding-top:8px}
.tl h3{font:400 28px/1 var(--head);letter-spacing:.03em;color:var(--bone);margin:6px 0 8px}
.tl p{color:var(--muted);font-size:15px;max-width:48ch}

/* Eintritt: Zehenanhänger */
.tix{position:relative;padding:clamp(80px,10vw,150px) 0;background:linear-gradient(180deg,var(--bg),#0a0607 50%,var(--bg))}
.tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.tag{position:relative;padding:38px 26px 26px;background:#d8cfb6;color:#1f1a14;font-family:var(--type);clip-path:polygon(0 18px,18px 0,100% 0,100% 100%,0 100%);box-shadow:0 30px 60px rgba(0,0,0,.6);transform:rotate(-.6deg)}
.tag:nth-child(2){transform:rotate(.5deg)}.tag:nth-child(3){transform:rotate(-1deg)}
.tag--hot{background:#c9b99a}
.tag__hole{position:absolute;left:50%;top:12px;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.8);transform:translateX(-50%)}
.tag__n{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#6a5a44;margin:4px 0 8px}
.tag h3{font:400 40px/1 var(--head);letter-spacing:.03em;color:#2a1210;margin-bottom:4px}
.tag__p{display:block;font-size:34px;margin-bottom:14px;color:var(--blood)}
.tag ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:6px;font-size:14px;line-height:1.45}
.tag li::before{content:"— ";color:var(--blood)}
.tag .btn{width:100%;font-family:var(--sans)}
.tag .btn--ghost{border-color:#2a1210;color:#2a1210}
.tag .btn--ghost:hover{background:#2a1210;color:#d8cfb6}

/* Friedhof / Fuß */
.yard{position:relative;min-height:70svh;display:grid;align-items:end;padding:clamp(90px,12vw,170px) var(--pad) 36px;overflow:hidden;isolation:isolate}
.yard__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:brightness(.7)}
.yard__fog{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;mix-blend-mode:screen;opacity:.45}
.yard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(5,5,7,.2) 40%,rgba(5,5,7,.85))}
.yard__in{max-width:1180px;margin:0 auto;width:100%}
.yard__t{font-size:clamp(48px,8vw,120px);margin-bottom:28px}
.yard__a{font:400 14px/1.7 var(--type);color:var(--ink);margin-bottom:26px}
.yard__c{font-size:11px;color:var(--muted);max-width:70ch}

/* Dialog */
.tdlg{margin:auto;width:min(440px,calc(100vw - 32px));padding:0;border:0;background:#e9e1cc;color:#1f1a14;border-radius:3px;overflow:hidden;font-family:var(--type)}
.tdlg::backdrop{background:rgba(0,0,0,.85)}
.tdlg__in{position:relative;padding:34px 30px 28px}
.tdlg__x{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;background:transparent;cursor:pointer;font-size:18px}
.tdlg .kick{color:#6a5a44}
.tdlg h2{font:400 44px/1 var(--head);letter-spacing:.03em;color:var(--blood);margin-bottom:18px}
.qty{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.qty button{width:38px;height:38px;border:1px solid #2a1210;background:transparent;cursor:pointer;font-size:20px}
.qty b{min-width:30px;text-align:center;font-size:22px}
.qty span{color:#6a5a44;font-size:14px}
.fld{display:grid;gap:6px;margin-bottom:16px;font-size:13px;color:#6a5a44}
.fld input{width:100%;padding:12px 12px;border:1px solid #2a1210;background:#f5efe0;color:#1f1a14;font:400 16px/1 var(--type);border-radius:0}
.tdlg__sum{display:flex;justify-content:space-between;font-size:15px;margin-bottom:16px}
.tdlg__sum b{font-size:22px}
.tdlg .btn{width:100%;font-family:var(--sans)}
.tdlg__demo{margin-top:12px;font-size:12px;color:#6a5a44}
.tdlg__done h2{color:#1f1a14;font-size:34px}
.tdlg__done p{margin-bottom:18px}
.tdlg__done .btn--ghost{border-color:#2a1210;color:#2a1210}

/* Handy */
@media (max-width:860px){
  .nav__l{display:none}
  .snd__t{display:none}
  .hero{padding-top:100px;padding-bottom:70px;align-items:end}
  .hero__v{object-position:50% 30%}
  .title{font-size:clamp(72px,24vw,120px)}
  .count{flex-wrap:wrap}
  .count div{min-width:0;flex:1 1 60px;padding:8px 6px}
  .count b{font-size:26px}
  .eyes{right:14%;top:30%}
  .warn__v{width:100%;right:0;opacity:.28}
  .warn__shade{background:linear-gradient(180deg,var(--bg),rgba(5,5,7,.5) 30%,rgba(5,5,7,.7) 80%,var(--bg))}
  .letter{padding:30px 22px 26px;font-size:15px;transform:rotate(-.6deg)}
  .letter__stamp{right:14px;top:12px;font-size:11px}
  .grave{height:260vh}
  .grave__t{font-size:clamp(26px,8vw,40px);max-width:none}
  .files{grid-template-columns:1fr 1fr;gap:10px}
  .file__t{padding:12px 12px 14px}
  .file h3{font-size:24px}
  .file p{font-size:13px}
  .torch{height:78svh;cursor:auto}
  .torch__txt{top:28px}
  .torch__who{width:40vw}
  .tl li{grid-template-columns:48px 1fr;gap:12px 14px}
  .tl__c{width:48px}
  .tl time{grid-column:2;padding-top:0}
  .tl li > div{grid-column:2}
  .tags{grid-template-columns:1fr}
  .tag,.tag:nth-child(2),.tag:nth-child(3){transform:none}
  .yard{min-height:60svh}
}
@media (prefers-reduced-motion:reduce){
  .grain,.title__w .ch,.btn--glow,.hero__hint,.eyes i,.flash{animation:none}
  .grave__c,.grave__bar{display:none}
  .grave__still{display:block}
  .grave__t{opacity:1;transform:none;position:static;margin-bottom:10px}
  body.is-shaking{animation:none}
}

/* Blut: Spritzer, Tropfkanten, Handabdrücke */
.splat{position:absolute;color:var(--blood);fill:currentColor;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));opacity:.92}
.splat--hero{left:-40px;top:14%;width:clamp(180px,24vw,360px);height:auto;aspect-ratio:100/110;transform:rotate(-18deg);opacity:.85;mix-blend-mode:multiply;color:#7a0a10}
.splat--hero2{right:-60px;bottom:12%;width:clamp(140px,18vw,280px);aspect-ratio:100/110;transform:rotate(130deg);color:#8f0f14;opacity:.8}
.splat--letter{right:-30px;bottom:-40px;width:170px;aspect-ratio:100/110;transform:rotate(20deg);color:#8a0b10;mix-blend-mode:multiply;opacity:.9}
.hand{position:absolute;fill:var(--blood);pointer-events:none;opacity:.8;filter:blur(.3px)}
.hand--letter{left:-26px;top:120px;width:70px;aspect-ratio:100/120;transform:rotate(-28deg);mix-blend-mode:multiply;opacity:.55}
.hand--torch{left:8%;top:22%;width:120px;aspect-ratio:100/120;transform:rotate(18deg);opacity:.75}
.hand--torch2{left:12%;top:36%;width:110px;aspect-ratio:100/120;transform:rotate(-40deg) scaleX(-1);opacity:.6}
.splat--res{right:0;top:-40px;width:clamp(160px,20vw,300px);aspect-ratio:100/110;transform:rotate(60deg);opacity:.7}
.splat--tag{right:-30px;top:-30px;width:140px;aspect-ratio:100/110;transform:rotate(35deg);color:#8a0b10;mix-blend-mode:multiply}
.splat--tag2{left:-40px;bottom:-30px;width:150px;aspect-ratio:100/110;transform:rotate(-120deg);color:#8a0b10;mix-blend-mode:multiply}
.nope__wrap{position:relative;display:inline-block}
.splat--nope{left:50%;top:50%;width:360px;aspect-ratio:100/110;transform:translate(-50%,-46%) rotate(12deg);color:#5c070b;opacity:.55;z-index:0}
.nope__btn{z-index:1}
.dripedge{display:block;width:100%;height:clamp(28px,5vw,60px);fill:var(--blood);position:relative;z-index:3;margin-bottom:calc(-1 * clamp(28px,5vw,60px));filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
/* Nach dem Schreck: Spritzer auf der Scheibe und Blut, das von oben läuft */
.splats{position:fixed;inset:0;z-index:57;pointer-events:none}
.splats svg{position:absolute;width:var(--s);aspect-ratio:100/110;color:var(--blood2);fill:currentColor;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));animation:splatin .25s steps(2) both,splatout 2.5s ease-in 6s both;transform:rotate(var(--r))}
@keyframes splatin{from{opacity:0;transform:rotate(var(--r)) scale(.4)}to{opacity:.92}}
@keyframes splatout{to{opacity:0;transform:rotate(var(--r)) translateY(40px)}}
.bloodtop{position:fixed;left:0;right:0;top:0;height:0;z-index:57;pointer-events:none;overflow:visible;fill:var(--blood2);filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.bloodtop svg{position:absolute;left:0;top:0;width:100%;height:0;transform-origin:top;transition:height 3.5s cubic-bezier(.2,.6,.3,1)}
.bloodtop.is-on svg{height:clamp(120px,22vh,260px)}
.bloodtop.is-off svg{transition:height 2s ease-in,opacity 1.5s;height:0;opacity:0}
@media (max-width:860px){
  .splat--hero{left:-30px;top:10%;width:180px}
  .splat--hero2{right:-40px;bottom:16%;width:150px}
  .splat--letter{width:120px;right:-20px;bottom:-26px}
  .hand--letter{left:-16px;top:80px;width:50px}
  .hand--torch{left:4%;top:14%;width:80px}.hand--torch2{left:10%;top:26%;width:70px}
  .splat--res{top:-20px;width:140px}
  .splat--nope{width:260px}
}
@media (prefers-reduced-motion:reduce){.title__w .drop{display:none}.splats svg{animation:none;opacity:.9}}