:root{--kohle:#1d1511;--kohle2:#2b1d16;--creme:#f5ebd9;--creme2:#eadcc2;--glut:#e5501b;--senf:#eab04a;--braun:#6b3a22;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:"Avenir Next",-apple-system,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--kohle);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--kohle);color:var(--creme);padding:.6rem 1rem;z-index:50}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--glut);outline-offset:3px}
.hinweisleiste{background:var(--kohle);color:var(--creme2);font-size:.82rem;text-align:center;padding:.5rem 1rem;letter-spacing:.02em}
.hinweisleiste a{color:var(--senf);text-underline-offset:3px}
.kopf{position:sticky;top:0;z-index:20;background:rgba(245,235,217,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--kohle)}
.kopf-zeile{display:flex;align-items:center;gap:2rem;padding-block:.8rem}
.marke{font:700 1.7rem/1 var(--serif);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
.marke span{color:var(--glut)}
.marke-bohne{width:1.2rem;height:1.45rem;fill:var(--kohle);stroke:none}
.marke-bohne path:last-child{fill:none;stroke:var(--creme);stroke-width:3;stroke-linecap:round}
.menue{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.95rem}
.menue a{text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
.menue a:hover{border-color:var(--glut)}
.knopf{display:inline-block;background:var(--glut);color:#fff;font-weight:700;text-decoration:none;padding:.95rem 1.7rem;border:2px solid var(--kohle);border-radius:999px;box-shadow:4px 4px 0 var(--kohle);transition:transform .15s,box-shadow .15s}
.knopf:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--kohle)}
.knopf.leer{background:transparent;color:var(--kohle)}
.knopf.klein{padding:.55rem 1.1rem;font-size:.9rem;box-shadow:3px 3px 0 var(--kohle)}
.etikett{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--braun)}
.held{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5rem);overflow-x:clip}
.held-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
h1{font:700 clamp(3rem,8vw,6.8rem)/.94 var(--serif);letter-spacing:-.035em;margin:1rem 0 2.2rem}
h1 em{color:var(--glut);font-style:italic;text-decoration:underline wavy var(--senf);text-decoration-thickness:.07em;text-underline-offset:.12em}
.vorspann{font-size:1.2rem;max-width:34rem;color:#3d2c22}
.knopfreihe{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.held-bild{position:relative;aspect-ratio:4/5;max-height:640px;justify-self:center;width:min(100%,520px)}
.sonne{position:absolute;inset:10% 2% 6% 6%;border-radius:50%;background:var(--glut);border:3px solid var(--kohle);box-shadow:10px 10px 0 var(--kohle)}
.kern{position:relative;width:88%;height:100%;margin-inline:auto;display:block;overflow:visible;animation:schweben 5s ease-in-out infinite}
.kern .bohne{fill:#6b3a22;stroke:var(--kohle);stroke-width:7}
.kern .glanz{fill:none;stroke:#9a5a37;stroke-width:12;stroke-linecap:round}
.kern .spalt{fill:none;stroke:var(--kohle);stroke-width:12;stroke-linecap:round}
.kern .auge-w{fill:#fff;stroke:var(--kohle);stroke-width:5}
.kern .auge-p{fill:var(--kohle)}
.kern .auge-l{fill:#fff}
.kern .wange{fill:var(--glut);opacity:.85}
.kern .mund{fill:#fff;stroke:var(--kohle);stroke-width:6;stroke-linejoin:round}
.kern .arm,.kern .bein{fill:none;stroke:var(--kohle);stroke-width:12;stroke-linecap:round}
.kern .fuss{fill:var(--kohle)}
.kern .schatten{fill:rgba(29,21,17,.22)}
.kern .f1,.kern .f2,.kern .f3{stroke:var(--kohle);stroke-width:5;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 100%;animation:flackern 1.1s ease-in-out infinite}
.kern .f1{fill:var(--senf)}.kern .f2{fill:#ffd46b;animation-delay:.25s}.kern .f3{fill:var(--senf);animation-delay:.5s}
.siegel{position:absolute;right:-2%;bottom:6%;width:28%;animation:drehen 22s linear infinite}
.siegel circle{fill:var(--senf);stroke:var(--kohle);stroke-width:3}
.siegel text{font:700 14px var(--sans);text-transform:uppercase;fill:var(--kohle)}
.siegel-bohne{fill:var(--kohle)}.siegel-spalt{fill:none;stroke:var(--senf);stroke-width:4;stroke-linecap:round}
@keyframes schweben{50%{transform:translateY(-14px) rotate(-1.5deg)}}
@keyframes flackern{50%{transform:scaleY(1.18) scaleX(.9)}}
@keyframes drehen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
@media (max-width:820px){.menue{display:none}.kopf-zeile{justify-content:space-between}.held-raster{grid-template-columns:1fr}.held-bild{order:-1;width:min(100%,360px)}.siegel{right:0}}

h2{font:700 clamp(2.2rem,5vw,4rem)/1 var(--serif);letter-spacing:-.03em}
h2 em{color:var(--glut);font-style:italic}
.abschnitt-kopf{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem 3rem;align-items:end;margin-bottom:3.5rem}
.abschnitt-kopf .etikett{grid-column:1/-1}
.abschnitt-text{font-size:1.1rem;color:#3d2c22;max-width:30rem}
.tueten{background:var(--creme2);border-block:2px solid var(--kohle);padding-block:clamp(3.5rem,8vw,6.5rem)}
.tueten-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
.tuete{background:var(--creme);border:2px solid var(--kohle);border-radius:1.4rem;box-shadow:8px 8px 0 var(--kohle);padding:1.6rem;display:flex;flex-direction:column;gap:1.2rem;transition:transform .2s}
.tuete:hover{transform:translateY(-6px) rotate(-.6deg)}
.tuete.t2{margin-top:3rem}.tuete.t3{margin-top:1.5rem}
.tuete-bild{width:62%;align-self:center;filter:drop-shadow(5px 5px 0 rgba(29,21,17,.18))}
.tuete-bild .t-koerper{stroke:var(--kohle);stroke-width:4;stroke-linejoin:round}
.tuete-bild .t-falz{stroke:var(--kohle);stroke-width:4;stroke-linejoin:round}
.tuete-bild .t-knick{stroke:var(--kohle);stroke-width:3;stroke-dasharray:5 7}
.tuete-bild .t-fenster{stroke:var(--kohle);stroke-width:4}
.tuete-bild .t-spalt{fill:none;stroke:var(--creme);stroke-width:5;stroke-linecap:round}
.tuete-bild.hell .t-koerper{fill:var(--senf)}.tuete-bild.hell .t-falz{fill:#d9972b}.tuete-bild.hell .t-fenster{fill:var(--creme)}.tuete-bild.hell .t-bohne{fill:#b8763e}.tuete-bild.hell .t-spalt{stroke:var(--creme)}
.tuete-bild.mittel .t-koerper{fill:var(--glut)}.tuete-bild.mittel .t-falz{fill:#c43e10}.tuete-bild.mittel .t-fenster{fill:var(--creme)}.tuete-bild.mittel .t-bohne{fill:#6b3a22}
.tuete-bild.dunkel .t-koerper{fill:var(--kohle2)}.tuete-bild.dunkel .t-falz{fill:#000}.tuete-bild.dunkel .t-fenster{fill:var(--senf)}.tuete-bild.dunkel .t-bohne{fill:var(--kohle)}.tuete-bild.dunkel .t-spalt{stroke:var(--senf)}
.tuete h3{font:700 2rem/1.05 var(--serif);letter-spacing:-.02em;margin-top:.2rem}
.unterzeile{font-weight:700;color:var(--glut);margin:.3rem 0 .7rem}
.tuete-text>p:not(.etikett):not(.unterzeile){color:#3d2c22;font-size:.98rem}
.tuete-fuss{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem;padding-top:1rem;border-top:2px dashed var(--kohle)}
.stufen{display:flex;gap:.35rem}
.stufen i{width:1rem;height:1.3rem;border:2px solid var(--kohle);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:transparent}
.stufen i.an{background:var(--kohle)}
.preis{font:700 1.6rem var(--serif)}.preis small{font:600 .8rem var(--sans);color:var(--braun)}
.fussnote{margin-top:2.5rem;font-size:.85rem;color:var(--braun)}
@media (max-width:900px){.abschnitt-kopf{grid-template-columns:1fr}.tueten-raster{grid-template-columns:1fr;max-width:460px;margin-inline:auto}.tuete.t2,.tuete.t3{margin-top:0}}

.roestung{background:var(--kohle);color:var(--creme);padding-block:clamp(3.5rem,8vw,6.5rem);overflow-x:clip}
.roestung .etikett{color:var(--senf)}
.roestung h2 em{color:var(--senf)}
.roestung .abschnitt-text{color:var(--creme2)}
.skala{margin:1rem 0 5rem}
.skala-balken{height:3.2rem;border-radius:999px;border:3px solid var(--creme);background:linear-gradient(90deg,#e9c27c 0%,#c98a4b 30%,#8a4e2a 55%,#4a2815 78%,#1a0e08 100%)}
.skala-marken{position:relative;height:5.5rem;margin-top:.4rem}
.skala-marken span{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:.85rem;color:var(--creme2);padding-top:1.3rem;white-space:nowrap}
.skala-marken span::before{content:"";position:absolute;top:0;left:50%;width:3px;height:1.1rem;background:var(--senf)}
.skala-marken b{display:block;font:700 1.15rem var(--serif);color:var(--creme)}
.skala-marken .m1{left:14%}.skala-marken .m2{left:50%}.skala-marken .m3{left:86%}
.skala-enden{display:flex;justify-content:space-between;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--senf)}
.ablauf{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 4rem;counter-reset:x}
.ablauf li{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.ablauf .nr{font:italic 700 4.6rem/.8 var(--serif);color:var(--glut);min-width:3.4rem}
.ablauf h3{font:700 1.7rem/1.1 var(--serif);margin-bottom:.5rem}
.ablauf p{color:var(--creme2);font-size:.98rem}
.ablauf li:nth-child(even){transform:translateY(2.2rem)}
@media (max-width:900px){.ablauf{grid-template-columns:1fr}.ablauf li:nth-child(even){transform:none}.skala-marken span{font-size:.75rem}.skala-marken .m1{left:20%}.skala-marken .m3{left:80%}.skala-marken{height:6rem}}
@media (max-width:520px){.skala-marken b{font-size:.95rem}.skala-enden{font-size:.7rem;gap:1rem}}

.ablauf li:nth-child(even){transform:none}
.abo{background:var(--glut);border-block:2px solid var(--kohle);padding-block:clamp(3.5rem,8vw,6.5rem);color:var(--kohle)}
.abo .etikett{color:var(--kohle)}
.abo h2 em{color:var(--creme)}
.abo-raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem 5rem;align-items:center}
.abo-text p:not(.etikett){font-size:1.12rem;margin:1.4rem 0 2rem;max-width:30rem}
.knopf.dunkel{background:var(--kohle);color:var(--creme);box-shadow:4px 4px 0 var(--creme)}
.knopf.dunkel:hover{box-shadow:2px 2px 0 var(--creme)}
.karte{background:var(--creme);border:3px solid var(--kohle);border-radius:1.2rem;padding:2rem 2rem 1.6rem;box-shadow:10px 10px 0 var(--kohle);transform:rotate(1.2deg)}
.karte-titel{font:italic 700 2.4rem/1 var(--serif);text-align:center;padding-bottom:1.2rem;border-bottom:3px double var(--kohle);margin-bottom:1.2rem}
.karte ul{list-style:none}
.karte li{display:flex;align-items:baseline;gap:.6rem;padding:.7rem 0}
.k-name{font:700 1.2rem var(--serif)}
.k-name small{display:block;font:500 .82rem var(--sans);color:var(--braun)}
.k-punkte{flex:1;border-bottom:3px dotted var(--kohle);transform:translateY(-.3rem);min-width:1rem}
.k-preis{font:700 1.4rem var(--serif);white-space:nowrap}
.karte-fuss{font-size:.8rem;color:var(--braun);text-align:center;margin-top:1rem}
.laden{padding-block:clamp(3.5rem,8vw,6.5rem);background:var(--creme)}
.laden-raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem 5rem;align-items:center}
address{font:normal 700 1.3rem/1.5 var(--serif);margin:1.6rem 0}
.zeiten{border-collapse:collapse;width:100%;max-width:30rem}
.zeiten th,.zeiten td{text-align:left;padding:.7rem 0;border-top:2px solid var(--kohle);font-size:.98rem}
.zeiten th{font-weight:700;padding-right:1rem;width:45%}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:2px solid var(--kohle)}
.nur-vorlesen{position:absolute;left:-999px}
.stadtplan{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center;background:#e4d3b0;border:3px solid var(--kohle);border-radius:1.4rem;box-shadow:10px 10px 0 var(--kohle);overflow:hidden}
.stadtplan .str{position:absolute;background:var(--creme);border:2px solid var(--kohle)}
.stadtplan .s1{left:-5%;right:-5%;top:34%;height:9%;transform:rotate(-8deg)}
.stadtplan .s2{top:-5%;bottom:-5%;left:58%;width:8%;transform:rotate(6deg)}
.stadtplan .s3{left:-5%;right:-5%;top:70%;height:6%;transform:rotate(4deg)}
.stadtplan .s4{top:-5%;bottom:-5%;left:18%;width:6%;transform:rotate(-3deg)}
.stadtplan .park{position:absolute;left:70%;top:50%;width:26%;height:36%;background:#a9c27a;border:2px solid var(--kohle);border-radius:40% 60% 50% 50%}
.stadtplan .fluss{position:absolute;left:-10%;top:82%;width:130%;height:10%;background:#7fb3c4;border-block:2px solid var(--kohle);transform:rotate(-4deg)}
.nadel{position:absolute;left:52%;top:20%;width:15%;animation:huepfen 2.4s ease-in-out infinite}
.nadel svg{display:block;width:100%;overflow:visible}
.nadel path{fill:var(--glut);stroke:var(--kohle);stroke-width:3}
.nadel .n-bohne{fill:var(--kohle);stroke:none}
.plan-name{position:absolute;left:40%;top:41%;font:700 1.05rem var(--serif);background:var(--creme);border:2px solid var(--kohle);border-radius:999px;padding:.1rem .8rem}
@keyframes huepfen{50%{transform:translateY(-10px)}}
.fragen{background:var(--creme2);border-top:2px solid var(--kohle);padding-block:clamp(3.5rem,8vw,6rem)}
.fragen-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem 5rem;align-items:start}
.fragen-liste details{border-top:2px solid var(--kohle)}
.fragen-liste details:last-child{border-bottom:2px solid var(--kohle)}
.fragen-liste summary{list-style:none;cursor:pointer;font:700 1.25rem/1.3 var(--serif);padding:1.1rem 2.6rem 1.1rem 0;position:relative}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:2px solid var(--kohle);border-radius:50%;display:grid;place-items:center;font:700 1.2rem/1 var(--sans);background:var(--creme);transition:transform .2s,background .2s}
.fragen-liste details[open] summary::after{content:"–";background:var(--glut);color:#fff}
.fragen-liste details p{padding:0 3rem 1.3rem 0;color:#3d2c22}
.fuss{background:var(--kohle);color:var(--creme2);padding-block:1.6rem;font-size:.88rem}
.fuss-zeile{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.fuss nav{display:flex;gap:1.4rem}
.fuss a{color:var(--senf);text-underline-offset:3px}
@media (max-width:900px){.abo-raster,.laden-raster,.fragen-raster{grid-template-columns:1fr}.karte{transform:none}.fragen-liste details p{padding-right:0}}
@media (max-width:520px){.karte{padding:1.4rem 1.1rem}.k-name{font-size:1.05rem}.k-preis{font-size:1.2rem}.zeiten th{width:50%}}