@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/epilogue-400.woff2) format('woff2')}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/epilogue-700.woff2) format('woff2')}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/kalam-700.woff2) format('woff2')}

*{margin:0;padding:0;box-sizing:border-box}
:root{--breite:1180px;--rand:4vw;--kopf-h:84px}
body{padding-top:var(--kopf-h);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.inner{max-width:var(--breite);margin:0 auto}
.sekt,.kopf,.fuss{padding-left:var(--rand);padding-right:var(--rand)}
.kopf{position:fixed;top:0;left:0;right:0;z-index:50}
a{color:inherit}button{font:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;border-radius:999px;padding:1.2em 1.7em 1em;font-weight:700;text-decoration:none;border:2px solid transparent;transition:background .3s,color .3s,border-color .3s}





.rv{opacity:0;translate:0 22px;transition:opacity .55s ease,translate .55s ease}
.rv.da{opacity:1;translate:none}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
p{text-wrap:pretty}
.page[hidden]{display:none}
html:not(.js) .page{display:block!important}
.k-zeile{display:flex;align-items:center;gap:2rem;padding:1.15rem 0}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem;font-weight:700;font-size:.95rem}
.nav a{position:relative;display:inline-block;line-height:1;text-decoration:none;padding:.35em .16em 0}
.nav a::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:calc(.19em - 3px);height:.4em;background:var(--gelb);z-index:-1;opacity:0;transition:opacity .3s}
@media(max-width:900px){.k-cta{display:none}}
@media(max-width:660px){.nav{gap:.9rem;font-size:.8rem}.nav a{white-space:nowrap}.marke{font-size:1.05rem}.marke small{display:none}.k-zeile{gap:1rem}}
.mcta{display:none}
@media(max-width:760px){
 .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:.7rem var(--rand);background:rgba(255,255,255,.95);backdrop-filter:blur(4px);border-top:1px solid rgba(0,0,0,.1);transform:translateY(120%);transition:transform .3s}
 .mcta.sicht{transform:none}.mcta .btn{width:100%;text-align:center}
 body{padding-bottom:70px}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:none;transition:none}*{animation:none!important;transition:none!important}}

:root{--tinte:#241E15;--grau:#82796A;--sand:#F7EFE2;--sand2:#EBDFC9;--gold:#B07E24;--gelb:#F1BF00;--terra:#B4552D}
body{background:#fff;color:var(--tinte);font-family:'Epilogue',system-ui,sans-serif;line-height:1.7}
h1,h2{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(2.8rem,6.6vw,5.2rem);line-height:1.2}
h2{font-size:clamp(1.8rem,3.8vw,2.8rem);line-height:1.2;margin-bottom:.9rem}
h3{font-weight:700;font-size:1.12rem;margin-bottom:.45rem}
.mark{background-image:linear-gradient(transparent 57%,rgba(241,191,0,.72) 57%,rgba(241,191,0,.72) 89%,transparent 89%);padding-inline:.1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.kicker{font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.btn-p{background:var(--terra);color:#fff;border-color:var(--terra)}
.btn-p:hover{background:#fff;color:var(--terra)}
.btn-s{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.btn-s:hover{background:var(--tinte);color:#fff}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marke img{height:40px;width:auto;transform:translateY(-5px)}
.marke .mtxt{font-family:'Anton',Impact,sans-serif;font-size:1.25rem;text-transform:uppercase;line-height:1}
.marke small{display:block;font-family:'Epilogue',sans-serif;font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--grau);margin-top:.25em}
.nav a:hover::after,.nav a[aria-current]::after{opacity:1}
.kopf{background:#fff;border-bottom:1px solid var(--sand2)}
@media(max-width:660px){.marke img{height:30px;transform:translateY(-4px)}.marke .mtxt{font-size:.95rem}.marke small{display:none}}
@media(max-width:470px){.marke .mtxt{display:none}}
/* POLAROID-BILDSYSTEM (Runde 5) */
.bild{--kipp:-2.2deg;background:#fff;border:1px solid #E7DECD;border-radius:2px;padding:11px 11px 0;
 box-shadow:0 16px 34px rgba(36,30,21,.16),0 3px 7px rgba(36,30,21,.10);
 transform-origin:50% 92%;transform:translateX(calc(var(--px,0px)*.8)) translateY(var(--hub,0%)) rotate(calc(var(--kipp) + var(--neig,0deg)*1.2));transition:transform .5s cubic-bezier(.2,.8,.25,1),box-shadow .35s ease}
.bild img{width:100%;object-fit:cover;border-radius:0;background:var(--sand2)}
.bild figcaption{font-family:'Kalam',ui-rounded,cursive;font-size:.94rem;line-height:1.4;color:#3A3226;padding:.6rem .25rem .95rem}
.bild figcaption>b{display:block;font-size:1.06rem;font-weight:400}
.bild 
.hero-bild{--kipp:2.6deg}
.m-bild{--kipp:2.8deg}
.o-grid .bild{--kipp:-2.4deg}
.o3-grid .bild:nth-child(1){--kipp:-3deg}
.o3-grid .bild:nth-child(2){--kipp:2.3deg}
.o3-grid .bild:nth-child(3){--kipp:-1.5deg}
@media(max-width:700px){.bild{--kipp:-1.8deg}.hero-bild{--kipp:1.8deg}.m-bild{--kipp:1.9deg}.o3-grid .bild:nth-child(2){--kipp:1.7deg}}
/* Foto-Stapel mit Bildwechsel */
.stapel{display:grid;padding:24px 28px 14px 10px}
.stapel>.bild{grid-area:1/1;transition:transform .35s ease,box-shadow .35s ease}
.stapel .bild img{height:320px;object-position:50% 40%}
.foto-a img{object-position:50% 62%}
.foto-b img{object-position:50% 50%}
.foto{cursor:default}
.pos-v{transform:rotate(-2.8deg);z-index:3}
.pos-h{transform:rotate(5deg) translate(24px,-18px) scale(.96);z-index:1;cursor:pointer}
.pos-h:focus-visible{outline:3px solid var(--terra);outline-offset:4px}
@media(hover:hover){.pos-h:hover{transform:rotate(4.4deg) translate(22px,-20px) scale(.975)}}
/* Belege in der Vertrauens-Sektion */
.belege{list-style:none;margin:1.5rem 0 0;display:grid;gap:.9rem;max-width:33em}
.belege li{position:relative;padding-left:1.6rem}
.belege li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:11px;background:var(--gelb)}
.nb{white-space:nowrap}
@media(max-width:960px){.stapel{padding-left:0;justify-self:start}}
@media(max-width:700px){.stapel{padding-right:38px}.stapel .bild img{height:272px}}
.stapel{cursor:pointer}
/* Hero: weiss, viel Luft */
.hero{padding-top:5.5rem;padding-bottom:6.5rem}
.h-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:4.5rem;align-items:start}
.h-grid h1{font-size:clamp(2.2rem,4.6vw,4rem)}
.sub{font-size:1.2rem;max-width:32em;margin:1.3rem 0 2rem;color:#4E463A}
.cta-reihe{display:flex;gap:1rem;flex-wrap:wrap}
.hero-bild img{height:min(46vh,416px);object-position:50% 12%}
@media(max-width:960px){.h-grid{grid-template-columns:1fr;gap:3rem}}
/* Felder: Karte des Hauses als Sand-AKZENT-Karten auf Weiss */
.felder{padding-top:5.5rem;padding-bottom:6.5rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:2.4rem;align-items:stretch}
.feld{display:flex;flex-direction:column;background:var(--sand);border-radius:2px;padding:2rem 1.7rem 1.6rem}
.feld .nr{font-family:'Anton',Impact,sans-serif;color:var(--gold);font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.7rem}
.feld .nr::before{content:"Gönnung "}
.feld .nutzen{font-weight:700;margin-top:auto;padding-top:.9rem;color:var(--terra)}
@media(max-width:900px){.grid3{grid-template-columns:1fr;gap:2rem}}
/* Manifest: weiss, Anton mit Gelb-Markern */
.manifest{padding-top:2.5rem;padding-bottom:7rem}
.mani{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:clamp(1.7rem,4vw,3rem);line-height:1.3;max-width:24em}
.werte{margin-top:1.4rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;color:var(--gold)}
/* Stoerer Manifest: Notizzettel (Matts Wahl, Runde 9) */
.manifest .mani .mark{padding-inline:.14em}
.zettel{position:relative;max-width:58rem;margin-inline:auto;background:var(--sand);border:1px solid var(--sand2);
 padding:3.4rem 3.2rem 3.8rem;transform:rotate(-1.3deg);
 box-shadow:0 20px 44px rgba(36,30,21,.15),0 3px 8px rgba(36,30,21,.08)}
.zettel .kicker{margin-bottom:1rem}
.stempel{position:absolute;right:-16px;bottom:-24px;background:var(--tinte);color:var(--gelb);
 font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;padding:.9em 1.35em;
 transform:rotate(3.4deg);box-shadow:0 10px 24px rgba(36,30,21,.22)}
@media(max-width:700px){
 .zettel{padding:2.4rem 1.5rem 3.2rem;transform:rotate(-1deg)}
 .stempel{right:auto;left:-4px;bottom:-20px;font-size:.7rem;letter-spacing:.16em}}
/* Polaroid-Format Runde 7: 20 Prozent kleiner */
@media(min-width:961px){
 .hero-bild,.m-bild,.o-grid .bild{max-width:80%;justify-self:center}
 .hero-bild{margin-right:5rem}
 .stapel{max-width:76%;justify-self:center}
}
@media(min-width:901px){
 .o3-grid .bild{max-width:82%;justify-self:center}
}
/* Rechtsseite */
.recht{padding-bottom:6.5rem}
.recht-block{max-width:34em;margin-bottom:2.4rem}
.recht-h{font-family:'Epilogue',system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.3em;
 text-transform:uppercase;color:var(--gold);line-height:1.2;margin-bottom:.6rem}
.recht-block p{line-height:1.75}
.recht-block a{text-decoration:underline;text-underline-offset:3px}
body.recht-seite .mcta{display:none}
/* Vertrauen */
.vertrauen{padding-bottom:6.5rem}
.v-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.v-grid p{max-width:33em}
.abstand{margin:1rem 0 1.8rem}
.v-grid .stapel{margin-top:.2rem}
@media(max-width:960px){.v-grid{grid-template-columns:1fr}}
/* Maschine */
.hero-klein{padding-top:5.5rem;padding-bottom:2.5rem}
.hero-klein h1{line-height:1.3}
.rollen-titel{font-weight:700;margin-top:-.6rem}
.hero-klein .belege{margin-top:.7rem;max-width:33em}
.maschine{padding-bottom:5rem}
.m-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;align-items:start}
.m-block{display:grid;grid-template-columns:56px 1fr;gap:1.2rem;border-top:1px solid var(--sand2);padding:1.8rem 0}
.m-block .nr{font-family:'Anton',Impact,sans-serif;font-size:1.05rem;color:var(--gold)}
.m-block p{max-width:33em}
.m-bild{position:sticky;top:6rem}
.m-bild img{height:376px;object-position:50% 10%}
@media(max-width:960px){.m-grid{grid-template-columns:1fr}}
/* Onkel */
.hero-onkel{padding-top:5.5rem;padding-bottom:5rem}
.hero-onkel h1{text-indent:-.45em}
.o-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;align-items:start}
.o-grid .bild img{height:min(46vh,416px);object-position:50% 10%}
.zitat{display:block;font-weight:700;font-size:1.25rem;margin:1.2rem 0 1.6rem}
.zitat::before{content:"";display:block;width:52px;height:6px;background:var(--gelb);margin-bottom:.7rem}
.z-quelle{display:block;font-weight:400;font-size:.78rem;color:var(--grau);margin-top:.35rem}
@media(max-width:960px){.o-grid{grid-template-columns:1fr;gap:3rem}}
.kanal{padding-top:1rem;padding-bottom:6rem}
.vid{display:flex;flex-direction:column;text-decoration:none;background:var(--sand);border-radius:2px;padding:1.6rem;transition:background .3s}
.vid:hover{background:var(--sand2)}
.vid-k{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:.7rem}
.orte{padding-bottom:6rem}
.o3-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3.4rem;margin-top:2.4rem;align-items:start}
.o3-grid img{height:320px}
.platzhalter .ph{height:184px;display:grid;align-content:start;justify-items:start;padding:1rem;border:1px solid var(--gold);color:var(--gold);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;border-radius:2px;background-image:radial-gradient(rgba(176,126,36,.2) 1px,transparent 1.2px);background-size:10px 10px}
@media(max-width:900px){.o3-grid{grid-template-columns:1fr}}
.schluss{padding-bottom:7rem;padding-top:0}
.schluss h2{margin-bottom:1.4rem}
.fuss{background:var(--tinte);color:var(--sand);padding-top:4rem;padding-bottom:3rem}
.f-grid{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:2.5rem;align-items:start}
.f-logo img{height:64px;width:auto}
.f-marke{font-family:'Anton',Impact,sans-serif;font-size:1.2rem;text-transform:uppercase}
.f-sub{opacity:.8;font-size:.9rem}
.f-h{font-weight:700;margin-bottom:.4rem;color:#D9B36A}
.fuss a{color:var(--sand)}
.f-legal{opacity:.8;font-size:.9rem;max-width:26em}
.f-werte{margin-top:3rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;color:var(--gelb)}
@media(max-width:820px){.f-grid{grid-template-columns:1fr}}

@media(max-width:560px){.hero-onkel h1{font-size:clamp(1.9rem,8.6vw,2.6rem)}.zitat{font-size:1.15rem}}
/* Mobil/Tablet: Fotos behalten ihre natuerlichen Proportionen, sobald sie einspaltig stehen */
@media(max-width:960px){
 .hero-bild img,.m-bild img,.o-grid .bild img,.stapel .bild img{height:auto}
 /* Sanfte Hoehenbremse fuer Hochformate: Polaroid wird kleiner und mittig, nie beschnitten */
 .hero-bild,.m-bild,.o-grid .bild{width:fit-content;max-width:100%;margin-inline:auto}
 .hero-bild img,.m-bild img,.o-grid .bild img{width:auto;max-width:100%;max-height:60vh}
}
@media(max-width:900px){.o3-grid img{height:auto}}

/* FAECHER (Onkel-Seite): reagiert auf Zeiger und Touch */
.hero-onkel{overflow:clip}
.faecher{position:relative;height:min(74vh,560px);--neig:0deg;--px:0px;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faecher .f-karte{position:absolute;inset:0;margin:auto;width:min(66%,300px);height:fit-content;padding-bottom:2.2rem;
 transform-origin:50% 92%;transition:transform .5s cubic-bezier(.2,.8,.25,1),box-shadow .3s ease;will-change:transform}
.faecher .bild img{width:100%;height:auto;max-height:none}
.faecher .f-karte:nth-child(1){transform:translateX(calc(-13% + var(--px)*.6)) rotate(calc(-9deg + var(--neig)))}
.faecher .f-karte:nth-child(2){transform:translateX(calc(var(--px)*.8)) rotate(calc(-1deg + var(--neig)*1.2))}
.faecher .f-karte:nth-child(3){transform:translateX(calc(13% + var(--px))) rotate(calc(8deg + var(--neig)*1.4))}
.faecher.offen .f-karte:nth-child(1){transform:translateX(calc(-46% + var(--px)*.6)) rotate(calc(-17deg + var(--neig)))}
.faecher.offen .f-karte:nth-child(2){transform:translateX(calc(var(--px)*.8)) translateY(-3%) rotate(calc(var(--neig)*1.2))}
.faecher.offen .f-karte:nth-child(3){transform:translateX(calc(46% + var(--px))) rotate(calc(16deg + var(--neig)*1.4))}
.f-unterschrift{position:absolute;left:0;right:0;bottom:-2.2rem;text-align:center;font-family:'Kalam',ui-rounded,cursive;font-size:.94rem;color:#3A3226}
@media(max-width:960px){
 .faecher{height:min(66vh,500px);width:100%;max-width:none;margin:0 0 2.6rem}
 .faecher .f-karte{width:min(52vw,230px);max-width:none;margin:auto}
 .faecher.offen .f-karte:nth-child(1){transform:translateX(calc(-30% + var(--px)*.6)) rotate(calc(-14deg + var(--neig)))}
 .faecher.offen .f-karte:nth-child(3){transform:translateX(calc(30% + var(--px))) rotate(calc(13deg + var(--neig)*1.4))}
}
@media (prefers-reduced-motion:reduce){.faecher .f-karte{transition:none}}

.sekt.orte{overflow:clip}

/* Maschinenraum: Vorspann in der linken Spalte, Foto setzt unter der Headline an */
.page[data-page="maschine"] .hero-klein{padding-bottom:1.2rem}
.m-spalte .sub{margin-top:0}
.m-spalte .m-liste{margin-top:2.8rem}
.sekt.maschine{padding-top:1.6rem}
.m-bild{top:5.5rem}