/* SEBALD Raumdesign, Richtung A: Stoff zum Greifen */

@font-face{font-family:"Bodoni Moda";src:url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

@property --akzent{syntax:"<color>";inherits:true;initial-value:#8cc7ab}

:root{
  --grund:#0d0c0a;
  --grund-2:#14120f;
  --tinte:#f2ecdf;
  --leise:#b8ae9d;
  --linie:rgba(242,236,223,.14);
  --akzent:#8cc7ab;
  --stoff-bild:url("../bilder/stoff-samt-tanne.webp");
  --stoff-tief:#061a13;
  --e-tinte:#f5efe2;
  --e-leise:rgba(245,239,226,.82);
  --e-knopf:var(--akzent);
  --e-knopf-tinte:#11100c;
  --strich:.85;
  --lichtkraft:.78;
  --randkraft:1;
  --kachel:460px;
  --schleier:rgba(2,8,6,.34);
  --serif:"Bodoni Moda","Didot","Bodoni MT","Times New Roman",serif;
  --sans:"Instrument Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
  --weich:cubic-bezier(.32,.72,0,1);
  --zug:cubic-bezier(.72,0,.18,1);
  --r:28px;
  --rand:clamp(20px,5vw,72px);
  transition:--akzent 1.2s var(--weich);
}
html:has(#s2:checked){--akzent:#e696a6;--stoff-bild:url("../bilder/stoff-samt-bordeaux.webp");--stoff-tief:#1c060c;--schleier:rgba(10,2,4,.34)}
html:has(#s3:checked){--akzent:#dccaa6;--stoff-bild:url("../bilder/stoff-leinen-natur.webp");--stoff-tief:#6f6350;--e-tinte:#17130d;--e-leise:rgba(23,19,13,.86);--e-knopf:#17130d;--e-knopf-tinte:#f5efe2;--strich:.22;--lichtkraft:.5;--randkraft:.45;--kachel:380px;--schleier:rgba(214,200,172,.5)}
html:has(#s4:checked){--akzent:#efe5d1;--stoff-bild:url("../bilder/stoff-boucle-elfenbein.webp");--stoff-tief:#7d7361;--e-tinte:#17130d;--e-leise:rgba(23,19,13,.86);--e-knopf:#17130d;--e-knopf-tinte:#f5efe2;--strich:.2;--lichtkraft:.45;--randkraft:.4;--kachel:420px;--schleier:rgba(226,216,196,.5)}
html:has(#s5:checked){--akzent:#f0a273;--stoff-bild:url("../bilder/stoff-tweed-rost.webp");--stoff-tief:#3a160b;--strich:.35;--lichtkraft:.55;--randkraft:.8;--kachel:400px;--schleier:rgba(20,6,2,.42)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--sans);font-size:clamp(1.0625rem,.35vw + 1rem,1.25rem);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit}
::selection{background:var(--akzent);color:#11100c}
:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--tinte);color:#11100c;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:16px}
.innen{width:min(100% - 2*var(--rand),1320px);margin-inline:auto}

h1,h2,.satz{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;letter-spacing:-.022em;text-wrap:balance}
h1,h2,h3,.satz,.stimme p,.hersteller,.polster-liste li,.eintrag button,.zusagen strong,.ablauf h3,.name,.telefon,.marke b,.fuss-marke b{font-optical-sizing:none;font-variation-settings:"opsz" 17}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--akzent)}
h2{font-size:clamp(2.6rem,6.2vw,6rem);line-height:1.02}
.lauf{color:var(--leise);max-width:34em;font-size:clamp(1.125rem,.5vw + 1rem,1.375rem);line-height:1.6}
.textlink{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:.28em;transition:color .5s var(--weich)}
.textlink:hover{color:var(--akzent)}

/* Knopf */
.knopf{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:6px 6px 6px 28px;border-radius:999px;background:var(--akzent);color:#11100c;font-weight:600;font-size:1.0625rem;letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:transform .6s var(--weich),background-color 1.2s var(--weich)}
.knopf i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(17,16,12,.12);transition:transform .6s var(--weich)}
.knopf:hover i{transform:translate(3px,-2px) scale(1.05)}
.knopf:active{transform:scale(.98)}
.knopf-klein{min-height:44px;padding:0 20px;font-size:.9375rem}
.handlung{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.telefon{font-family:var(--serif);font-size:1.5rem;letter-spacing:.01em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:border-color .5s var(--weich)}
.telefon:hover{border-bottom-color:currentColor}

/* Kopfzeile: schwebende Insel */
.kopf{position:fixed;inset:14px 0 auto 0;z-index:40;display:flex;justify-content:center;padding-inline:12px;pointer-events:none}
.kopf-insel{pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,3vw,40px);padding:7px 7px 7px 22px;border-radius:999px;background:rgba(13,12,10,.62);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(242,236,223,.12),inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px -20px rgba(0,0,0,.6);max-width:100%}
.marke{min-height:44px}
.marke,.fuss-marke{display:inline-flex;align-items:baseline;gap:.6em;text-decoration:none;white-space:nowrap;color:var(--tinte)}
.marke b,.fuss-marke b{font-family:var(--serif);font-weight:500;font-size:1.3rem;letter-spacing:.2em;line-height:1}
.marke span,.fuss-marke span{font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--leise)}
.kopf-nav{display:flex;gap:clamp(14px,2vw,30px)}
.kopf-nav a{font-size:.9375rem;text-decoration:none;color:var(--leise);min-height:44px;display:inline-flex;align-items:center;transition:color .5s var(--weich)}
.kopf-nav a:hover{color:var(--tinte)}
@media (max-width:900px){.kopf-nav{display:none}}
@media (max-width:520px){
  .kopf{inset:10px 0 auto 0;padding-inline:10px}
  .kopf-insel{width:100%;justify-content:space-between;padding:6px 6px 6px 16px;gap:8px}
  .marke{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
  .marke b{font-size:1.02rem;letter-spacing:.18em}
  .marke span{font-size:.5625rem;letter-spacing:.26em}
  .knopf-klein{padding:0 14px;font-size:.8125rem}
}

/* Einstieg: bildschirmfüllend Stoff */
.einstieg{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:var(--e-tinte);isolation:isolate;overflow:hidden;background:var(--stoff-tief)}
.stoffe{position:absolute;inset:0;z-index:-1;overflow:hidden}
.stoff{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1s var(--weich)}
.stoff-innen{position:absolute;inset:0;background-size:460px 460px;background-position:50% 0}
.stoff-3 .stoff-innen{background-size:380px 380px}.stoff-4 .stoff-innen{background-size:420px 420px}.stoff-5 .stoff-innen{background-size:400px 400px}
.stoff-1 .stoff-innen{background-image:url("../bilder/stoff-samt-tanne.webp")}
.stoff-2 .stoff-innen{background-image:url("../bilder/stoff-samt-bordeaux.webp")}
.stoff-3 .stoff-innen{background-image:url("../bilder/stoff-leinen-natur.webp")}
.stoff-4 .stoff-innen{background-image:url("../bilder/stoff-boucle-elfenbein.webp")}
.stoff-5 .stoff-innen{background-image:url("../bilder/stoff-tweed-rost.webp")}
html:has(#s1:checked) .stoff-1,html:has(#s2:checked) .stoff-2,html:has(#s3:checked) .stoff-3,html:has(#s4:checked) .stoff-4,html:has(#s5:checked) .stoff-5{opacity:1}
/* Kante des Stoffs, der darübergezogen wird */
.stoff::after{content:"";position:absolute;top:0;bottom:0;right:0;width:min(22vw,260px);opacity:0;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 38%,rgba(255,255,255,.2) 72%,rgba(255,255,255,.06) 86%,rgba(0,0,0,.55) 100%)}
html.js .stoff{transition:none}
html.js .stoff.vorher{opacity:1}
html.js .stoff.zieht{opacity:1;z-index:2;animation:zieh-aussen 1.35s var(--zug) both}
html.js .stoff.zieht .stoff-innen{animation:zieh-innen 1.35s var(--zug) both}
html.js .stoff.zieht::after{animation:zieh-kante 1.35s var(--zug) both}
@keyframes zieh-aussen{from{transform:translate3d(-101%,0,0)}to{transform:none}}
@keyframes zieh-innen{from{transform:translate3d(101%,0,0)}to{transform:none}}
@keyframes zieh-kante{0%{opacity:1}80%{opacity:1}100%{opacity:0}}

.strich{position:absolute;inset:-4%;z-index:3;background:url("../bilder/strich.webp") center/cover;mix-blend-mode:overlay;opacity:var(--strich);transition:opacity 1.2s var(--weich)}
.licht{position:absolute;z-index:4;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,246,226,.85) 0%,rgba(255,240,214,.38) 22%,rgba(255,240,214,.1) 46%,rgba(255,240,214,0) 68%);mix-blend-mode:soft-light;opacity:var(--lichtkraft);transform:translate3d(-16vw,-14vh,0);will-change:transform;animation:licht-wandern 16s ease-in-out infinite alternate}
.licht.folgt{animation:none}
@keyframes licht-wandern{from{transform:translate3d(-28vw,-20vh,0)}to{transform:translate3d(26vw,12vh,0)}}
.schleier{position:absolute;z-index:5;left:-10%;bottom:-20%;width:90%;height:95%;background:radial-gradient(closest-side,var(--schleier) 0%,var(--schleier) 35%,transparent 100%);transition:background 1s}
.rand{position:absolute;inset:0;z-index:6;opacity:var(--randkraft);transition:opacity 1s var(--weich);background:radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 45%,rgba(0,0,0,.42) 100%),linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.3) 100%)}

.einstieg-innen{width:min(100% - 2*var(--rand),1320px);margin-inline:auto;padding:120px 0 clamp(56px,9vh,104px);display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:end}
h1{font-size:clamp(3rem,8.4vw,9rem);line-height:.96;font-variation-settings:"opsz" 20;color:var(--e-tinte);transition:color 1s var(--weich);text-shadow:0 1px 0 rgba(255,255,255,.08),0 -1px 1px rgba(0,0,0,.25)}
h1 span,h1 em{display:block;white-space:nowrap}
h1 em{color:inherit;padding-left:.06em}
.unterzeile{margin-top:clamp(20px,3vh,36px);max-width:30em;font-size:clamp(1.125rem,.6vw + 1rem,1.4375rem);line-height:1.5;color:var(--e-leise);transition:color 1s var(--weich)}
.einstieg .handlung{margin-top:clamp(22px,3.4vh,40px)}
.einstieg .knopf{background:var(--e-knopf);color:var(--e-knopf-tinte)}
.einstieg .knopf i{background:color-mix(in srgb,var(--e-knopf-tinte) 14%,transparent)}
.einstieg .telefon{color:var(--e-tinte);transition:color 1s var(--weich)}
.einstieg :focus-visible{outline-color:var(--e-tinte)}

/* Musterbuch: Stofffahnen am Bügel */
.musterbuch{position:absolute;top:clamp(104px,15vh,150px);right:max(var(--rand),calc((100% - 1320px)/2));padding-bottom:56px;color:var(--e-tinte)}
.musterbuch legend{float:left;width:100%;font-size:.8125rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px;color:var(--e-leise);transition:color 1s var(--weich)}
.stange{clear:both;height:7px;border-radius:4px;margin-inline:-14px;background:linear-gradient(180deg,#f3dfae 0%,#b89653 38%,#6d5326 100%);box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.fahnen{display:flex;gap:clamp(8px,1vw,14px);padding-top:0}
.fahnen{position:relative}
.fahne{display:grid;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fahne input{grid-area:1/1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.lappen{grid-area:1/1;display:block;position:relative;width:clamp(74px,6.6vw,104px);padding-top:16px;transform-origin:50% 0;transition:transform .9s var(--weich);filter:drop-shadow(0 16px 14px rgba(0,0,0,.45))}
.lappen::before{content:"";position:absolute;left:50%;top:-9px;width:14px;height:27px;margin-left:-7px;border:2px solid #cdb074;border-bottom-color:transparent;border-radius:9px 9px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.karte{display:block;position:relative;height:26px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#2a2620,#15130f);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.karte::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:1px;background:#cdb074;opacity:.8}
.tuch{display:block;height:clamp(128px,12vw,188px);background-size:230px 230px;background-position:50% 50%;clip-path:polygon(0 0,100% 0,100.00% calc(100% - 8px),94.44% 100%,88.89% calc(100% - 8px),83.33% 100%,77.78% calc(100% - 8px),72.22% 100%,66.67% calc(100% - 8px),61.11% 100%,55.56% calc(100% - 8px),50.00% 100%,44.44% calc(100% - 8px),38.89% 100%,33.33% calc(100% - 8px),27.78% 100%,22.22% calc(100% - 8px),16.67% 100%,11.11% calc(100% - 8px),5.56% 100%,0.00% calc(100% - 8px));position:relative}
.tuch::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 34%,rgba(0,0,0,.26) 100%),linear-gradient(180deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 14px)}
.f1 .tuch{background-image:url("../bilder/stoff-samt-tanne.webp")}
.f2 .tuch{background-image:url("../bilder/stoff-samt-bordeaux.webp")}
.f3 .tuch{background-image:url("../bilder/stoff-leinen-natur.webp")}
.f4 .tuch{background-image:url("../bilder/stoff-boucle-elfenbein.webp")}
.f5 .tuch{background-image:url("../bilder/stoff-tweed-rost.webp")}
.f1 .lappen{transform:rotate(-1.4deg)}.f2 .lappen{transform:rotate(.8deg)}.f3 .lappen{transform:rotate(-.5deg)}.f4 .lappen{transform:rotate(1.2deg)}.f5 .lappen{transform:rotate(-.9deg)}
.fahne:hover .lappen{transform:rotate(3deg) translateY(4px)}
.fahne input:checked + .lappen{transform:scale(1.09)}
.fahne input:checked + .lappen .karte::after{height:3px;margin-top:-1px;background:#f3dfae;opacity:1}
.fahne input:focus-visible + .lappen{outline:2px solid var(--e-tinte);outline-offset:5px;border-radius:4px}
.name{position:absolute;left:0;bottom:-58px;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.625rem;line-height:1;opacity:0;transform:translateY(8px);transition:opacity .7s var(--weich),transform .7s var(--weich);pointer-events:none}
.fahne input:checked ~ .name{opacity:1;transform:none}


@media (max-width:900px){
  .schleier{left:-30%;width:160%;height:70%;bottom:-12%}
  .einstieg-innen{grid-template-columns:minmax(0,1fr);align-content:space-between;align-items:start;min-height:100vh;min-height:100svh;padding:84px 0 44px;gap:20px}
  .musterbuch{position:relative;top:auto;right:auto;order:-1;padding-bottom:46px}
  .musterbuch legend{margin-bottom:12px;font-size:.75rem}
  .stange{margin-inline:-8px;height:6px}
  .fahnen{justify-content:space-between;gap:6px}
  .lappen{width:clamp(52px,15.2vw,96px);padding-top:13px}
  .tuch{height:clamp(74px,19vw,150px);background-size:170px 170px}
  .karte{height:18px}
  .name{font-size:1.3125rem;bottom:-46px}
  h1{font-size:clamp(2.6rem,12.6vw,5.5rem)}
  .unterzeile{font-size:1.0625rem;margin-top:16px}
  .einstieg .handlung{margin-top:20px;gap:6px 22px}
  .einstieg .knopf{min-height:56px;padding-left:22px;font-size:1rem;gap:10px}
  .einstieg .knopf i{width:44px;height:44px}
  }
@media (max-width:900px) and (max-height:700px){
  .einstieg .telefon{display:none}
}

/* Haus */
.haus{padding:clamp(110px,16vw,220px) 0 clamp(90px,12vw,180px);background:radial-gradient(60% 50% at 85% 0%,color-mix(in srgb,var(--akzent) 13%,transparent),transparent 70%)}
.satz{font-size:clamp(2.5rem,6.6vw,6.5rem);line-height:1.02;max-width:15em}
.haus-raster{margin-top:clamp(48px,7vw,110px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:start}
.zusagen li{display:grid;grid-template-columns:minmax(0,7.2em) minmax(0,1fr);gap:8px 28px;align-items:baseline;padding:22px 0;border-top:1px solid var(--linie)}
.zusagen li:last-child{border-bottom:1px solid var(--linie)}
.zusagen strong{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(1.9rem,2.8vw,2.75rem);line-height:1;color:var(--akzent)}
.zusagen span{font-size:clamp(1.125rem,.5vw + 1rem,1.375rem);line-height:1.35}
@media (max-width:860px){.haus-raster{grid-template-columns:1fr}.zusagen li{grid-template-columns:1fr;gap:6px}}

/* Vorhang */
.vorhang{position:relative;background:#000}
.buehne{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.buehne-schatten{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 45%,rgba(8,6,4,.86) 100%)}
.buehne-text{position:absolute;left:0;right:0;bottom:clamp(36px,8vh,90px);width:min(100% - 2*var(--rand) - 16vw,1100px);margin-inline:auto;text-align:center}
.buehne-text p{margin:18px auto 0;max-width:32em;font-size:clamp(1.0625rem,.5vw + 1rem,1.3125rem);line-height:1.5;color:rgba(242,236,223,.9)}
.falten{position:absolute;top:0;bottom:0;width:50.5%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 78%,rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.12) 26%,rgba(255,255,255,.17) 47%,rgba(255,255,255,.05) 62%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.58) 100%) 0 0/13.7% 100%,
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.34) 46%,rgba(255,255,255,.07) 70%,rgba(0,0,0,0) 100%) 0 0/31% 100%,
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 50%,rgba(0,0,0,0) 100%) 0 0/5.3% 100%,
    var(--stoff-bild) 0 0/var(--kachel) var(--kachel),var(--stoff-tief);
  box-shadow:0 0 60px rgba(0,0,0,.8);will-change:transform;transform:scaleX(.15)}
.falten-l{left:0;transform-origin:0 50%}
.falten-r{right:0;transform-origin:100% 50%;background-position:0 0,100% 0,100% 0,100% 0,100% 0}
@keyframes vorhang-auf{from{transform:scaleX(1)}to{transform:scaleX(.15)}}
@keyframes text-da{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .vorhang{height:240vh;view-timeline:--vorhang block}
    .buehne{position:sticky;top:0}
    .falten{animation:vorhang-auf cubic-bezier(.5,0,.25,1) both;animation-timeline:--vorhang;animation-range:contain 2% contain 78%}
    .buehne-text{animation:text-da linear both;animation-timeline:--vorhang;animation-range:contain 48% contain 86%}
  }
  @supports not (animation-timeline:view()){
    html.js .vorhang:not(.auf) .falten{transform:scaleX(1)}
    html.js .falten{transition:transform 2.6s cubic-bezier(.6,0,.2,1)}
    html.js .vorhang:not(.auf) .buehne-text{opacity:0;transform:translateY(30px)}
    html.js .buehne-text{transition:opacity 1.4s var(--weich) 1.2s,transform 1.4s var(--weich) 1.2s}
  }
}
@media (max-width:700px){.buehne-text{width:calc(100% - 2*var(--rand) - 22vw)}.buehne-schatten{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%,rgba(8,6,4,.5) 46%,rgba(8,6,4,.92) 100%)}}

/* Abschnitte allgemein */
.abschnitt-kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:end}
.abschnitt-kopf h2{max-width:11em}
@media (max-width:860px){.abschnitt-kopf{grid-template-columns:1fr}}

/* Rahmen: doppelte Fassung */
.rahmen{padding:8px;border-radius:var(--r);background:rgba(242,236,223,.045);box-shadow:inset 0 0 0 1px rgba(242,236,223,.1)}
.rahmen span{display:block;overflow:hidden;border-radius:calc(var(--r) - 8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.rahmen img{width:100%;transition:transform 1.6s var(--weich)}
.rahmen:hover img{transform:scale(1.03)}
.rahmen figcaption{padding:14px 14px 8px;font-size:1rem;color:var(--leise)}

/* Polsterei */
.polsterei{padding:clamp(110px,15vw,220px) 0 clamp(100px,13vw,200px)}
.breit{margin-top:clamp(56px,8vw,120px)}
.breit img{width:100%;height:min(92vh,62vw);min-height:340px;object-fit:cover;object-position:50% 58%}
.polster-raster{margin-top:clamp(64px,9vw,140px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3.6fr) minmax(0,3.6fr);gap:clamp(18px,2.6vw,44px);align-items:start}
.polster-liste h3,.besuch-daten h3{font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--akzent);margin-bottom:18px}
.polster-liste li{font-family:var(--serif);font-size:clamp(1.3125rem,1.55vw,1.625rem);line-height:1.22;padding:14px 0;text-wrap:balance;border-top:1px solid var(--linie)}
.polster-liste li:last-child{border-bottom:1px solid var(--linie)}
.versetzt{margin-top:clamp(40px,7vw,120px)}
.werk-raster{margin-top:clamp(64px,9vw,140px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:center}
.ablauf li{padding:26px 0;border-top:1px solid var(--linie)}
.ablauf li:last-child{border-bottom:1px solid var(--linie)}
.ablauf h3{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(1.9rem,2.8vw,2.75rem);line-height:1.05;color:var(--akzent)}
.ablauf p{margin-top:8px;color:var(--leise);max-width:26em}
.quer{margin-top:clamp(64px,9vw,140px);margin-left:auto;width:min(100%,980px)}
.quer img{aspect-ratio:16/10;object-fit:cover}
@media (max-width:980px){
  .polster-raster{grid-template-columns:1fr 1fr}
  .polster-liste{grid-column:1/-1}
  .werk-raster{grid-template-columns:1fr}
}

/* Register */
.leistungen{padding:clamp(100px,13vw,200px) 0;background:var(--grund-2);border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0}
.register{position:relative;margin-top:clamp(48px,7vw,110px)}
.eintrag{border-top:1px solid var(--linie);padding:clamp(18px,2.2vw,30px) 0}
.eintrag:last-child{border-bottom:1px solid var(--linie)}
.eintrag h3{font:inherit}
.eintrag button{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.4vw,4.25rem);line-height:1.06;letter-spacing:-.02em;color:var(--tinte);min-height:44px;transition:color .7s var(--weich),transform .9s var(--weich)}
.eintrag p{color:var(--leise);max-width:30em;margin-top:8px}
.gaze{width:100%;height:100%;min-height:220px;background:
  repeating-linear-gradient(0deg,rgba(20,20,18,.55) 0 1px,transparent 1px 4px),
  repeating-linear-gradient(90deg,rgba(20,20,18,.55) 0 1px,transparent 1px 4px),
  radial-gradient(70% 50% at 30% 30%,#f4efe2 0%,rgba(244,239,226,0) 70%),
  linear-gradient(160deg,#cdd6c4 0%,#9fb39a 40%,#6f8770 70%,#3d4a3f 100%)}
@media (min-width:981px){
  .eintrag{position:relative;padding-right:46%}
  .eintrag figure{position:absolute;right:0;width:40%;aspect-ratio:5/6;padding:8px;border-radius:var(--r);background:rgba(242,236,223,.05);box-shadow:inset 0 0 0 1px rgba(242,236,223,.1),0 40px 80px -30px rgba(0,0,0,.7);opacity:0;z-index:1;transition:opacity .8s var(--weich);pointer-events:none}
  .eintrag:nth-child(-n+2) figure{top:0}
  .eintrag:nth-child(3) figure,.eintrag:nth-child(4) figure{top:50%;margin-top:calc(-24% * 1.2)}
  .eintrag:nth-last-child(-n+2) figure{bottom:0}
  .eintrag figure img,.eintrag figure .gaze{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 8px);transform:scale(1.04);transition:transform 1.6s var(--weich)}
  .eintrag.aktiv figure,html:not(.js) .eintrag:hover figure,html:not(.js) .eintrag:focus-within figure{opacity:1;z-index:2}
  .eintrag.aktiv figure img,.eintrag.aktiv figure .gaze{transform:none}
  .eintrag button{transition:color .7s var(--weich),transform .9s var(--weich)}
  .eintrag.aktiv button{color:var(--akzent);font-style:italic;transform:translateX(18px)}
  .eintrag:not(.aktiv) button{color:rgba(242,236,223,.62)}
}
@media (max-width:980px){
  .eintrag{padding:30px 0 34px}
  .eintrag figure{margin-top:20px;border-radius:22px;overflow:hidden}
  .eintrag figure img,.eintrag figure .gaze{width:100%;aspect-ratio:5/4;object-fit:cover}
  .gaze{min-height:0}
}

/* Stoffbibliothek */
.bibliothek{position:relative;min-height:115vh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.bibliothek>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bibliothek::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,12,10,.25) 0%,rgba(13,12,10,0) 14%,rgba(13,12,10,.1) 48%,rgba(13,12,10,.9) 82%,var(--grund) 100%)}
.bibliothek-text{width:100%;padding:clamp(340px,66vh,700px) 0 clamp(60px,8vw,120px)}
.hersteller{margin-top:clamp(20px,3vw,36px);font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.9vw,2.75rem);line-height:1.2;max-width:24em;color:var(--akzent)}
.bibliothek .lauf{margin-top:20px;color:rgba(242,236,223,.88)}

/* Kundenstimmen */
.stimmen{padding:clamp(110px,15vw,220px) 0}
.stimmen h2{font-size:clamp(1.5rem,2.4vw,2.25rem);font-style:italic;color:var(--akzent);letter-spacing:0}
.stimmen-liste{margin-top:clamp(40px,6vw,90px);display:grid;gap:clamp(64px,9vw,140px)}
.stimme{max-width:min(100%,1040px)}
.stimme.rechts{margin-left:auto}
.stimme p{font-family:var(--serif);font-size:clamp(1.75rem,3.9vw,3.75rem);line-height:1.16;letter-spacing:-.015em;text-wrap:pretty;hanging-punctuation:first}
.stimme:nth-child(n+3) p{font-size:clamp(1.5rem,2.9vw,2.75rem);line-height:1.22}
.stimme figcaption{margin-top:22px;display:flex;align-items:center;gap:16px;font-size:1.0625rem;color:var(--leise)}
.stimme figcaption::before{content:"";width:48px;height:1px;background:var(--akzent)}

/* Besuch */
.besuch{padding:clamp(100px,13vw,200px) 0;background:var(--grund-2);border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0}
.besuch-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,110px);align-items:start}
.besuch-daten{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(28px,4vw,64px)}
.besuch-daten p{font-size:clamp(1.125rem,.5vw + 1rem,1.3125rem);line-height:1.55}
.besuch-daten p + p{margin-top:12px}
.besuch-daten .textlink{display:inline-flex;align-items:center;min-height:44px}
.zeiten div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-top:1px solid var(--linie);font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem)}
.zeiten div:last-child{border-bottom:1px solid var(--linie)}
.zeiten dd{white-space:nowrap;color:var(--tinte)}
.zeiten dt{color:var(--leise)}
@media (max-width:980px){.besuch-raster{grid-template-columns:1fr}.familie{max-width:460px}}
@media (max-width:620px){.besuch-daten{grid-template-columns:1fr}}

/* Schluss */
.schluss{position:relative;isolation:isolate;overflow:hidden;padding:clamp(120px,17vw,260px) 0;text-align:center;background:var(--stoff-tief)}
.schluss-stoff{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 50% 0%,rgba(255,244,220,.16),rgba(0,0,0,0) 60%),radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%),var(--stoff-bild) 50% 0/var(--kachel) var(--kachel)}
.schluss{color:var(--e-tinte)}
.schluss h2{max-width:12em;margin-inline:auto}
.schluss h2 em{color:inherit}
.schluss .lauf{margin:24px auto 0;color:var(--e-leise)}
.schluss .handlung{margin-top:clamp(30px,4vw,48px);justify-content:center}
.schluss .knopf{background:var(--e-knopf);color:var(--e-knopf-tinte)}
.schluss .knopf i{background:color-mix(in srgb,var(--e-knopf-tinte) 14%,transparent)}
.schluss :focus-visible{outline-color:var(--e-tinte)}

/* Fuß */
.fuss{padding:48px 0 40px;font-size:1rem;color:var(--leise)}
.fuss-raster{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px}
.fuss ul{display:flex;gap:28px;margin-left:auto}
.fuss a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:.28em}
.fuss a:hover{color:var(--tinte)}
.vorschau{width:100%;padding-top:20px;border-top:1px solid var(--linie);font-size:.9375rem}
@media (max-width:620px){.fuss ul{margin-left:0;width:100%}}

/* Rechtstexte */
.recht{padding:clamp(130px,16vw,200px) 0 clamp(80px,10vw,140px)}
.recht .innen{max-width:760px}
.recht h1{font-size:clamp(2.75rem,7vw,5rem);color:var(--tinte);text-shadow:none;margin-bottom:28px}
.recht h2{font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--akzent);margin:44px 0 12px;line-height:1.4}
.recht p{margin-bottom:14px;color:var(--tinte)}
.recht ul{list-style:disc;padding-left:1.2em;margin-bottom:14px}
.hinweis{display:inline-block;padding:10px 18px;border-radius:999px;background:rgba(242,236,223,.07);box-shadow:inset 0 0 0 1px var(--linie);font-size:1rem;margin-bottom:36px!important}
.offen{background:color-mix(in srgb,var(--akzent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--akzent) 55%,transparent);padding:1px 8px;border-radius:6px;white-space:nowrap}

/* Einblenden beim Scrollen: nur mit Skript, sonst steht alles da */
@media (prefers-reduced-motion:no-preference){
  html.js .zeig{opacity:0;transform:translateY(34px);transition:opacity 1s var(--weich),transform 1.1s var(--weich)}
  html.js .zeig.da{opacity:1;transform:none}
  html.js .zusagen .zeig:nth-child(2),html.js .ablauf .zeig:nth-child(2){transition-delay:.12s}
  html.js .zusagen .zeig:nth-child(3),html.js .ablauf .zeig:nth-child(3){transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}