/* =========================================================
   MOERDERISCH · THE HARVEST – Stylesheet
   Schriften lokal eingebunden (keine externen Anfragen)
   ========================================================= */

@font-face{font-family:"Bonum";src:url(../fonts/texgyrebonum-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bonum";src:url(../fonts/texgyrebonum-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bonum";src:url(../fonts/texgyrebonum-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Schreibmaschine";src:url(../fonts/texgyrecursor-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Schreibmaschine";src:url(../fonts/texgyrecursor-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Plakat";src:url(../fonts/texgyreheroscn-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Plakat";src:url(../fonts/texgyreheroscn-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Hand";src:url(../fonts/texgyrechorus-mediumitalic.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/Inter-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/Inter-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/Inter-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:#ece2c6;
  --papier-dunkel:#d9cba5;
  --tinte:#2b3322;
  --gruen:#3d4a2c;
  --ziegel:#8e3420;
  --erde:#1a140f;
  --nacht:#0d0c0a;
  --knochen:#e6dfcd;
  --rost:#b4371c;
  --grau:#8a8476;
  --rot:0; /* wird per JS beim Scrollen gesetzt (0 … 1) */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Papierkorn – als SVG-Rauschen, liegt über allem */
.korn::after{
  content:"";position:fixed;inset:0;will-change:transform;pointer-events:none;z-index:50;opacity:.14;
  background-image: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   1) STARTSEITE – Gärtnerei Krämer
   ========================================================= */
.garten{
  background:var(--papier);
  color:var(--tinte);
  font-family:"Bonum",Georgia,serif;
  font-size:18px;line-height:1.55;
  overflow-x:hidden;
}
.garten ::selection{background:var(--ziegel);color:var(--papier)}

/* Fäulnis: Vignette wächst mit --rot von den Rändern her */
.faeule{
  position:fixed;inset:0;pointer-events:none;z-index:20;opacity:0;will-change:opacity;
  background:radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(26,20,15,.5) 72%, rgba(13,12,10,.95) 112%);
}
.hinweisband{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--nacht);color:var(--knochen);text-decoration:none;
  font-family:"Plakat",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;
  padding:.6rem 1.1rem;position:relative;z-index:30;
}
.hinweisband b{color:var(--rost);font-weight:700}
.hinweisband .pfeil{white-space:nowrap;border-bottom:1px solid #5a5249}
.hinweisband:hover .pfeil,.hinweisband:focus-visible .pfeil{border-color:var(--knochen)}
#wurzeln{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:21;will-change:transform}

.schild{
  border-bottom:2px solid var(--tinte);
  font-family:"Plakat",sans-serif;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  font-size:12px;display:flex;justify-content:space-between;gap:1rem;padding:.55rem 1.1rem;
}
.schild b{font-weight:700}

.kopf{
  max-width:1060px;margin:0 auto;padding:3.2rem 1.25rem 1rem;
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;
}
.stempel{width:132px;height:132px;color:var(--gruen);transform:rotate(-8deg)}
.kopf h1{
  margin:0;font-weight:700;font-size:clamp(2.4rem,7.4vw,5.2rem);line-height:.92;letter-spacing:-.01em;
}
.kopf h1 span{display:block;font-weight:400;font-style:italic;font-size:.38em;letter-spacing:.01em;margin-top:.5rem;color:var(--ziegel)}

.band{
  margin:1.6rem 0 0;border-top:1px solid var(--tinte);border-bottom:1px solid var(--tinte);
  overflow:hidden;white-space:nowrap;font-style:italic;padding:.35rem 0;font-size:1.05rem;
}
.band span{display:inline-block;padding-left:100%;animation:laufband 38s linear infinite}
@keyframes laufband{to{transform:translateX(-100%)}}

.abschnitt{max-width:1060px;margin:0 auto;padding:4.2rem 1.25rem;position:relative}
.abschnitt h2{
  font-weight:700;font-size:clamp(1.8rem,4.4vw,2.7rem);line-height:1.05;margin:0 0 1.4rem;
}
.marke{
  font-family:"Plakat",sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:inline-block;border:1.5px solid currentColor;padding:.2rem .5rem;margin-bottom:1rem;
}

/* Brief von Jonas */
.brief{display:grid;grid-template-columns:1.25fr .9fr;gap:3rem;align-items:start}
.brief p{margin:0 0 1rem}
.brief .anrede{font-style:italic}
.unterschrift{font-family:"Hand",cursive;font-size:2.2rem;line-height:1;color:#22314f;margin-top:1.4rem;transform:rotate(-3deg);transform-origin:left}
.unterschrift small{display:block;font-family:"Bonum",serif;font-style:italic;font-size:.95rem;color:var(--tinte);transform:none;margin-top:.4rem}
.foto{
  background:var(--papier-dunkel);padding:.7rem .7rem 2.4rem;box-shadow:0 1px 0 rgba(0,0,0,.15),0 12px 24px -14px rgba(0,0,0,.45);
  transform:rotate(2.2deg);position:relative;
}
.foto svg{width:100%;height:auto;background:#2a2a22}
.foto figcaption{position:absolute;bottom:.55rem;left:.9rem;right:.9rem;font-family:"Hand",cursive;font-size:1.3rem;color:#3a3a32}
.foto::before{ /* Klebestreifen */
  content:"";position:absolute;top:-12px;left:50%;width:86px;height:24px;margin-left:-43px;
  background:rgba(236,226,198,.72);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.15)
}

/* Sortiment als Preisschilder */
.sortiment{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2rem}
.schildchen{
  background:#f4ecd6;border:1.5px solid var(--tinte);padding:1rem 1rem 1.2rem;position:relative;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 14%);
}
.schildchen::before{content:"";position:absolute;top:9px;left:9px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--tinte)}
.schildchen svg{width:64px;height:64px;margin:0 0 .6rem auto;color:var(--gruen)}
.schildchen h3{margin:0;font-size:1.15rem;line-height:1.15}
.schildchen p{margin:.35rem 0 .8rem;font-size:.92rem;font-style:italic}
.preis{font-family:"Plakat",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.02em}
.preis s{font-weight:400;font-size:.9rem;color:var(--ziegel);margin-right:.4rem}
.schildchen.selten{background:var(--tinte);color:var(--papier)}
.schildchen.selten::before{border-color:var(--papier)}
.schildchen.selten svg{color:var(--papier)}

/* Chronik */
.chronik{list-style:none;margin:0;padding:0;border-top:1px solid var(--tinte)}
.chronik li{display:grid;grid-template-columns:7.5rem 1fr;gap:1.5rem;padding:1rem 0;border-bottom:1px solid var(--tinte);align-items:baseline}
.chronik .jahr{font-family:"Plakat",sans-serif;font-weight:700;font-size:1.7rem;letter-spacing:.02em}
.chronik .loch .jahr{color:var(--ziegel)}
.chronik .loch a{text-decoration:none;display:block;color:transparent;
  background:repeating-linear-gradient(-2deg,var(--tinte) 0 3px,transparent 3px 7px);
  height:1.4rem;max-width:22rem;opacity:.85;position:relative}
.chronik .loch a:hover,.chronik .loch a:focus-visible{outline:2px dashed var(--ziegel);outline-offset:4px}
.chronik .loch a span{position:absolute;inset:0;color:transparent}

/* Wechsel-Texte */
.kipp{transition:opacity .15s}
.kipp.zuckt{animation:zucken .5s steps(2) 2}
@keyframes zucken{0%{opacity:1;filter:none}50%{opacity:.2;filter:blur(1px)}100%{opacity:1}}
.kipp.gekippt{color:var(--ziegel)}

.fluestern{font-style:italic;opacity:0;color:#5a1c10;margin:.2rem 0;letter-spacing:.02em}

/* Zerfall-Abschnitt */
.zerfall{text-align:left}
.zerfall .gross{font-size:clamp(1.6rem,4.6vw,2.9rem);line-height:1.15;font-weight:700;max-width:22ch}
.zerfall .klein{max-width:40ch}

/* Die Ernte – dunkles Ende */
.ernte{
  position:relative;z-index:30;background:var(--nacht);color:var(--knochen);
  font-family:"Inter",system-ui,sans-serif;
  padding:7rem 1.25rem 5rem;margin-top:4rem;
}
.ernte::before{ /* ausgefranste Kante */
  content:"";position:absolute;left:0;right:0;top:-38px;height:40px;background:var(--nacht);
  clip-path:polygon(0 70%,4% 40%,7% 75%,12% 30%,16% 62%,21% 18%,25% 55%,30% 35%,34% 80%,39% 22%,44% 60%,48% 40%,53% 85%,58% 28%,62% 58%,67% 15%,71% 52%,76% 33%,80% 75%,85% 26%,89% 63%,94% 38%,97% 70%,100% 45%,100% 100%,0 100%);
}
.ernte-innen{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:3.2rem}
.praesentiert{font-family:"Plakat",sans-serif;letter-spacing:.32em;text-transform:uppercase;font-size:13px;color:var(--grau);margin:0 0 1.2rem}
.praesentiert img{display:block;height:36px;width:auto;margin:0 0 .7rem}
.praesentiert span{display:block}
.titel{
  font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;line-height:.82;margin:0;
  font-size:clamp(4.2rem,15vw,10.5rem);letter-spacing:-.01em;
}
.titel .the{display:block;font-size:.32em;letter-spacing:.5em;font-weight:400;margin-bottom:.25em;color:var(--rost)}
.untertitel{font-family:"Bonum",serif;font-style:italic;font-size:clamp(1.4rem,3vw,2rem);margin:.6rem 0 2rem;color:var(--knochen)}
.fakten{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-family:"Plakat",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:14px;margin:0 0 2.4rem;padding:0;list-style:none}
.fakten li::before{content:"✕";color:var(--rost);margin-right:.5rem;font-family:"Inter"}
.knopf{
  display:inline-block;text-decoration:none;font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:15px;padding:1rem 1.4rem;border:2px solid var(--knochen);margin:0 .6rem .8rem 0;
  transition:background .15s,color .15s;
}
.knopf.voll{background:var(--rost);border-color:var(--rost);color:#fff}
.knopf:hover,.knopf:focus-visible{background:var(--knochen);color:var(--nacht);border-color:var(--knochen)}
.knopf.voll:hover,.knopf.voll:focus-visible{background:#fff;border-color:#fff;color:var(--nacht)}
.film{position:relative;margin:0}
.film video{width:100%;height:auto;aspect-ratio:16/9;background:#000;object-fit:cover;border:1px solid #2a2724}
.film figcaption{font-size:12px;color:var(--grau);letter-spacing:.1em;text-transform:uppercase;margin-top:.6rem;font-family:"Plakat",sans-serif}
.slogan{font-family:"Bonum",serif;font-style:italic;color:var(--grau);margin:2.4rem 0 0;font-size:1.1rem;max-width:30ch}

/* Ton-Schalter */
.ton{
  position:fixed;right:12px;bottom:12px;z-index:60;background:var(--papier);color:var(--tinte);opacity:.92;
  border:1.5px solid var(--tinte);font-family:"Plakat",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  padding:.55rem .8rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;
}
.ton[aria-pressed="true"]{background:var(--nacht);color:var(--knochen);border-color:var(--knochen)}
.ton svg{width:16px;height:16px}

/* Fußzeile (für alle Seiten) */
.fuss{
  background:var(--nacht);color:var(--grau);font-family:"Inter",system-ui,sans-serif;font-size:13px;
  padding:2.2rem 1.25rem 4.5rem;position:relative;z-index:30;border-top:1px solid #24211d;
}
.fuss-innen{max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.fuss a{color:var(--knochen);text-decoration:none;margin-right:1.2rem;border-bottom:1px solid #4a453e}
.fuss a:hover{border-color:var(--knochen)}
.fuss p{margin:0}

/* =========================================================
   2) ARCHIV – Akte Krämer 1987
   ========================================================= */
.akte{
  background:#201c17;color:var(--knochen);font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.6;
  background-image:
    radial-gradient(ellipse at 30% 0%,rgba(255,220,160,.07),transparent 60%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 140px);
}
.akte-kopf{max-width:1100px;margin:0 auto;padding:1.4rem 1.25rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:"Plakat",sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--grau)}
.akte-kopf a{color:var(--knochen);text-decoration:none;border-bottom:1px solid #5a5249}
.deckel{
  max-width:1100px;margin:2.5rem auto 0;padding:0 1.25rem;
}
.deckel-innen{
  background:#b59a6a;color:#2a2013;padding:2.4rem 2rem 2.2rem;position:relative;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 4px);
}
.deckel-innen::before{ /* Reiter */
  content:"";position:absolute;top:-26px;left:2rem;width:180px;height:28px;background:#b59a6a;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
}
.deckel h1{font-family:"Schreibmaschine",monospace;font-weight:700;font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.05;margin:0 0 .6rem;letter-spacing:-.01em}
.deckel .az{font-family:"Schreibmaschine",monospace;font-size:15px;margin:0}
.deckel .az a{text-decoration:none;border-bottom:1px dotted rgba(42,32,19,.5)}
.stempel-rot{
  position:absolute;right:1.6rem;top:1.4rem;transform:rotate(9deg);
  font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(150,28,18,.82);border:3px solid rgba(150,28,18,.82);padding:.35rem .7rem;font-size:15px;line-height:1.15;text-align:center;
  mix-blend-mode:multiply;
}

.tisch{max-width:1100px;margin:0 auto;padding:3rem 1.25rem 5rem;display:grid;grid-template-columns:repeat(12,1fr);gap:2.4rem 1.8rem}
.blatt{
  background:#f1ead7;color:#1f1b14;padding:2rem 2rem 2.2rem;position:relative;
  box-shadow:0 2px 0 rgba(0,0,0,.2),0 26px 40px -24px rgba(0,0,0,.85);
}
.blatt.schief-l{transform:rotate(-1.2deg)}
.blatt.schief-r{transform:rotate(1.4deg)}

/* Vorgeschichte */
.vorgeschichte{grid-column:1 / -1;font-family:"Bonum",Georgia,serif;font-size:19px;line-height:1.65;padding:3rem clamp(1.4rem,6vw,5rem) 3.4rem}
.vorgeschichte h2{font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(2rem,5.5vw,3.6rem);line-height:.95;margin:0 0 .4rem}
.vorgeschichte .vorspann{font-style:italic;color:#5a4a36;margin:0 0 2.4rem;font-size:1.05em}
.vorgeschichte h3{font-family:"Plakat",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.28em;font-size:13px;color:var(--ziegel);margin:2.6rem 0 .8rem}
.vorgeschichte p{margin:0 0 1.05rem;max-width:62ch}
.vorgeschichte p.anfang::first-letter{float:left;font-family:"Plakat",sans-serif;font-weight:700;font-size:4.1em;line-height:.8;margin:.08em .1em 0 0;color:var(--ziegel)}
.vorgeschichte .ende{font-style:italic;margin-top:2.2rem}
.vorgeschichte .spalten{max-width:64ch;margin:0 auto}
.vorgeschichte > h2,.vorgeschichte > .vorspann,.vorgeschichte > .ende{max-width:64ch;margin-left:auto;margin-right:auto}

/* Zeitung */
.zeitung{grid-column:1 / 8;background:#e8e1cc;font-family:"Bonum",Georgia,serif;padding:1.6rem 1.6rem 2rem;filter:sepia(.25)}
.zeitung .blattkopf{display:flex;justify-content:space-between;border-bottom:3px double #1f1b14;font-size:12px;font-family:"Plakat",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding-bottom:.3rem}
.zeitung .name{font-family:"Bonum",serif;font-weight:700;font-size:2.4rem;text-align:center;margin:.3rem 0 .2rem;letter-spacing:.02em}
.zeitung h2{font-family:"Plakat",sans-serif;font-weight:700;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;margin:1.1rem 0 .4rem;letter-spacing:-.01em}
.zeitung .dach{font-style:italic;margin:0 0 1rem;font-size:1.05rem}
.zeitung .text{columns:2 14rem;column-gap:1.4rem;font-size:15px;line-height:1.45;text-align:justify;hyphens:auto;column-rule:1px solid rgba(0,0,0,.25)}
.zeitung .text p{margin:0 0 .6rem}
.zeitung .text p:first-child::first-line{font-weight:700}

/* Notiz von Elias */
.notiz{grid-column:8 / -1;align-self:start;background:#fbf6dc;font-family:"Hand",cursive;font-size:1.65rem;line-height:1.25;color:#22314f;padding:2rem 1.6rem 1.8rem;
  background-image:repeating-linear-gradient(0deg,transparent 0 33px,rgba(70,110,170,.25) 33px 34px);
  transform:rotate(3deg);margin-top:2.5rem}
.notiz p{margin:0 0 .5rem}
.notiz .zeichen{text-align:right;margin-top:1rem}
.beschriftung{font-family:"Schreibmaschine",monospace;font-size:13px;color:var(--grau);grid-column:1/-1;margin:-1rem 0 0;text-transform:uppercase;letter-spacing:.06em}

/* Vermisstenplakate */
.plakate{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.vermisst{background:#efe9d8;color:#141210;padding:1.2rem 1.2rem 1.4rem;font-family:"Plakat",sans-serif;text-align:center;
  box-shadow:0 22px 34px -22px rgba(0,0,0,.9);position:relative}
.vermisst:nth-child(1){transform:rotate(-2deg)}
.vermisst:nth-child(2){transform:rotate(1.5deg) translateY(1.2rem)}
.vermisst:nth-child(3){transform:rotate(-.6deg)}
.vermisst::before{content:"";position:absolute;top:8px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#7d1d12;box-shadow:0 2px 2px rgba(0,0,0,.4)}
.vermisst h3{font-weight:700;font-size:2.6rem;letter-spacing:.06em;margin:.5rem 0 .6rem;line-height:1}
.vermisst svg{width:100%;height:auto;border:1.5px solid #141210}
.vermisst .wer{font-weight:700;font-size:1.25rem;margin:.8rem 0 .2rem;text-transform:uppercase;letter-spacing:.04em}
.vermisst p{font-family:"Bonum",serif;font-size:.95rem;line-height:1.4;margin:.2rem 0}
.vermisst .merkmal{display:inline-block;background:#141210;color:#efe9d8;padding:.1rem .45rem;margin-top:.5rem;font-family:"Plakat",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
.vermisst .zahl{font-family:"Schreibmaschine",monospace;font-size:12px;margin-top:.7rem;color:#555}

/* Polizeiprotokoll */
.protokoll{grid-column:1 / 9;font-family:"Schreibmaschine",monospace;font-size:15.5px;line-height:1.55;background:#f3efe3;
  background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(0,0,0,.05) 23px 24px)}
.protokoll h2{font-family:"Schreibmaschine",monospace;font-weight:700;font-size:1.15rem;margin:0 0 1rem;text-decoration:underline;text-underline-offset:4px}
.protokoll p{margin:0 0 .85rem}
.protokoll .geschwaerzt{background:#141210;color:#141210;padding:0 .2em;user-select:none}
.protokoll dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:0 0 1.2rem}
.protokoll dt{font-weight:700}
.protokoll dd{margin:0}
.protokoll .vermerk{font-family:"Hand",cursive;color:#a1281a;font-size:1.5rem;transform:rotate(-2deg);margin-top:1.2rem}

/* Laborbuch-Fetzen */
.fetzen{grid-column:9 / -1;align-self:center;background:#e9e1c4;color:#2a2013;font-family:"Hand",cursive;font-size:1.45rem;line-height:1.3;padding:1.8rem 1.4rem;
  clip-path:polygon(0 3%,9% 0,22% 4%,38% 1%,51% 5%,66% 0,79% 3%,92% 0,100% 4%,98% 30%,100% 58%,97% 81%,100% 100%,82% 97%,61% 100%,44% 96%,27% 100%,10% 96%,0 100%,3% 72%,0 47%,3% 22%);
  transform:rotate(-2.5deg)}
.fetzen .kopfzeile{font-family:"Schreibmaschine",monospace;font-size:12px;letter-spacing:.06em;color:#6b5a3e;margin-bottom:.6rem}
.fetzen a{text-decoration:none;color:#7d1d12;border-bottom:1px solid rgba(125,29,18,.4)}
.fetzen p{margin:0 0 .3rem}

.akte-schluss{grid-column:1/-1;text-align:center;padding:2rem 0 0}
.akte-schluss p{font-family:"Bonum",serif;font-style:italic;font-size:1.3rem;margin:0 0 1.6rem;color:var(--knochen)}

/* =========================================================
   3) VERSUCH 47 – geheime Seite
   ========================================================= */
.versuch{background:#050505;color:#c9c2b2;font-family:"Schreibmaschine",monospace;font-size:17px;line-height:1.7;min-height:100vh}
.versuch main{max-width:720px;margin:0 auto;padding:4rem 1.25rem 6rem}
.versuch h1{font-weight:700;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:#6d675c;margin:0 0 3rem}
.eintrag{margin:0 0 2.2rem;opacity:0;transform:translateY(8px);transition:opacity 1.2s,transform 1.2s}
.eintrag.da{opacity:1;transform:none}
.eintrag .datum{color:#6d675c;font-size:14px;display:block}
.eintrag p{margin:.2rem 0 0}
.eintrag.wirr p{letter-spacing:.04em}
.eintrag.letzt p{color:#e8dcc4;font-size:1.25rem}
.eintrag.letzt .ihr{color:var(--rost)}
.hoeren{background:none;border:1px solid #3a3630;color:#c9c2b2;font-family:"Schreibmaschine",monospace;padding:.9rem 1.2rem;cursor:pointer;margin-top:1.5rem;font-size:15px;letter-spacing:.08em}
.hoeren:hover,.hoeren[aria-pressed="true"]{border-color:var(--rost);color:#fff}
.zurueck{display:inline-block;margin-top:3.5rem;color:#6d675c;text-decoration:none;border-bottom:1px solid #3a3630;font-size:14px}

/* =========================================================
   4) INFO & RECHT – MOERDERISCH
   ========================================================= */
.mord{background:var(--nacht);color:var(--knochen);font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.6}
.mord ::selection{background:var(--rost);color:#fff}
.leiste{border-bottom:1px solid #2a2622}
.leiste-innen{max-width:1100px;margin:0 auto;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.wortmarke{font-family:"Plakat",sans-serif;font-weight:700;letter-spacing:.3em;font-size:18px;text-decoration:none;text-transform:uppercase}
.wortmarke img{display:block;height:28px;width:auto}
.fuss-logo img{display:block;height:36px;width:auto;opacity:.85}
.leiste nav a{font-family:"Plakat",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:13px;text-decoration:none;margin-left:1.2rem;color:var(--grau)}
.leiste nav a:hover,.leiste nav a[aria-current]{color:var(--knochen)}

.programm-kopf{max-width:1100px;margin:0 auto;padding:4.5rem 1.25rem 3rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;border-bottom:1px solid #2a2622}
.programm-kopf h1{font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(3rem,10vw,7.2rem);line-height:.85;margin:0;letter-spacing:-.01em}
.programm-kopf h1 small{display:block;font-size:.2em;letter-spacing:.4em;color:var(--rost);font-weight:400;margin-bottom:.8rem}
.programm-kopf .unter{font-family:"Bonum",serif;font-style:italic;font-size:1.5rem;margin:.8rem 0 0;color:var(--knochen)}
.datum-block{font-family:"Plakat",sans-serif;text-transform:uppercase;text-align:right;line-height:1}
.datum-block .gross{font-size:clamp(2.4rem,6vw,4rem);font-weight:700;display:block}
.datum-block .klein{letter-spacing:.24em;font-size:13px;color:var(--grau)}

.reihe{max-width:1100px;margin:0 auto;padding:2.8rem 1.25rem;display:grid;grid-template-columns:15rem 1fr;gap:2rem;border-bottom:1px solid #2a2622}
.reihe > h2{font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:15px;margin:.3rem 0 0;color:var(--rost)}
.reihe > h2 span{display:block;color:var(--grau);font-weight:400;letter-spacing:.2em;font-size:12px;margin-top:.3rem}
.reihe p{margin:0 0 1rem;max-width:62ch}
.reihe .lead{font-family:"Bonum",serif;font-size:1.4rem;line-height:1.4;max-width:34ch}
.tabelle{width:100%;border-collapse:collapse;font-size:16px}
.tabelle th,.tabelle td{text-align:left;padding:.8rem .6rem .8rem 0;border-bottom:1px solid #2a2622;vertical-align:top}
.tabelle th{font-family:"Plakat",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--grau);font-weight:400}
.tabelle td:first-child{font-family:"Plakat",sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:.04em;white-space:nowrap}
.hinweisliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.hinweisliste li{padding:.9rem 0;border-bottom:1px solid #2a2622}
.hinweisliste b{display:block;font-family:"Plakat",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:15px;margin-bottom:.15rem}
.stopp{border:2px solid var(--rost);padding:1.2rem 1.4rem;margin:1.6rem 0 0;max-width:62ch}
.stopp b{font-family:"Plakat",sans-serif;font-size:1.6rem;letter-spacing:.08em;color:var(--rost);display:block}
details{border-bottom:1px solid #2a2622;padding:.9rem 0}
details:first-of-type{border-top:1px solid #2a2622}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"Plakat",sans-serif;font-size:1.4rem;line-height:1;color:var(--rost)}
details[open] summary::after{content:"–"}
details p{margin:.6rem 0 .2rem;color:#cfc8b6}
.folgt{color:var(--grau);font-style:italic}
.platzhalter{background:#3a1910;color:#ffb39f;padding:0 .3em;font-family:"Schreibmaschine",monospace;font-size:.92em}
.ticket-box{border:1px dashed #4a453e;padding:1.4rem;max-width:62ch}
.ticket-box .knopf{margin-top:.6rem}
.knopf[aria-disabled="true"]{opacity:.45;pointer-events:none}

.recht{max-width:780px;margin:0 auto;padding:3.5rem 1.25rem 5rem}
.recht h1{font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,7vw,4rem);line-height:.9;margin:0 0 2rem}
.recht h2{font-family:"Plakat",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;margin:2.4rem 0 .6rem;color:var(--rost)}
.recht p,.recht li{color:#d7d0bf;max-width:68ch}
.recht a{color:var(--knochen)}
.recht .anmerkung{border-left:3px solid var(--rost);padding:.6rem 1rem;background:#17130f;font-size:15px}

/* 404 */
.leer{min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem}
.leer h1{font-family:"Bonum",serif;font-weight:700;font-size:clamp(2rem,6vw,3.6rem);margin:0 0 .6rem}
.leer p{font-style:italic;margin:0 0 2rem}

/* =========================================================
   Responsiv
   ========================================================= */
@media (max-width:900px){
  .brief{grid-template-columns:1fr;gap:2.4rem}
  .foto{max-width:420px}
  .sortiment{grid-template-columns:1fr 1fr}
  .ernte-innen{grid-template-columns:1fr;gap:2.6rem}
  .zeitung,.notiz,.protokoll,.fetzen{grid-column:1/-1}
  .notiz{margin:0 .6rem;max-width:460px}
  .fetzen{max-width:460px;margin-left:auto}
  .plakate{grid-template-columns:1fr 1fr}
  .reihe{grid-template-columns:1fr;gap:.8rem}
  .hinweisliste{grid-template-columns:1fr}
  .programm-kopf{grid-template-columns:1fr}
  .datum-block{text-align:left}
}
@media (max-width:560px){
  .garten{font-size:17px}
  .schild{font-size:10.5px;letter-spacing:.1em}
  .schild span:last-child{display:none}
  .hinweisband{flex-direction:column;align-items:flex-start;gap:.3rem;font-size:11.5px;letter-spacing:.1em;line-height:1.35}
  .kopf{grid-template-columns:1fr;gap:1rem;padding-top:2.2rem}
  .stempel{width:96px;height:96px}
  .abschnitt{padding:3.2rem 1.1rem}
  .sortiment{gap:1rem}
  .schildchen{padding:.8rem .8rem 1rem}
  .schildchen svg{width:48px;height:48px}
  .preis{font-size:1.25rem}
  .chronik li{grid-template-columns:4.6rem 1fr;gap:1rem}
  .chronik .jahr{font-size:1.35rem}
  .plakate{grid-template-columns:1fr}
  .vermisst:nth-child(2){transform:rotate(1.5deg)}
  .blatt{padding:1.5rem 1.2rem 1.7rem}
  .vorgeschichte{font-size:17.5px;padding:2.2rem 1.3rem 2.6rem}
  .zeitung .name{font-size:1.75rem}
  .stempel-rot{position:static;display:inline-block;margin-top:1.2rem;transform:rotate(-3deg)}
  .tisch{gap:2rem 1rem;padding-top:2rem}
  .leiste nav a{margin:0 1rem 0 0}
  .titel .the{letter-spacing:.35em}
}

@media (prefers-reduced-motion:reduce){
  .band span{animation:none;padding-left:0}
  .kipp.zuckt{animation:none}
  .eintrag{transition:none}
}