/* Werkbank Waldhotel Doldenhorn. Aufbau aus dem Werkbank-Kit (Vorlage Carlton-Europe), Farben, Schrift, Muster und Auftakt vom Haus.
   Bewegt wird nur über transform und opacity, der Scroll bleibt nativ. */
@font-face{font-family:'Caslon WD';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/librecaslon-700.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/InstrumentSans-normal-400_600.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/DMMono-normal-400.woff2') format('woff2')}
@font-face{font-family:'Titel Ersatz';src:local('Georgia Bold'),local('Georgia-Bold'),local('Georgia');size-adjust:104%}
@font-face{font-family:'Sans Ersatz';src:local('Arial');size-adjust:99%}
:root{
  --nacht:#0d1621; --tief:#070c14; --navy:#101c2c; --blau:#142235; --papier:#f1ece2; --creme:#e3dbcb; --weiss:#fbf8f1; --gold:#e3d2a6; --messing:#b89850; --taupe:#8a7036; --tinte:#0f1620; --punkt:#b89850; --rot:#b89850;
  --serif:'Caslon WD','Titel Ersatz',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Sans Ersatz',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --e1:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.32,.72,0,1); --e3:cubic-bezier(.34,1.3,.5,1);
  --rand:clamp(20px,4.6vw,76px); --max:1480px; --abschnitt:clamp(92px,10.6vw,172px); --rund:clamp(26px,3.4vw,52px);
  --muster:url(muster.webp?v=7d77203c-dh1410); --musterb:150px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;overflow-x:clip}
body{margin:0;background:var(--nacht);color:#ffffff;font-family:var(--sans);font-size:17.5px;line-height:1.64;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
/* Bilder: hinter jedem Foto liegt ein kleines echtes Abbild (40 px), nie ein dunkler Kasten; das Foto blendet ein, sobald es da ist */
img.ld{background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.js img.ld:not(.da){opacity:0}
.js img.ld.da{animation:einblend .6s var(--e1) both}
@keyframes einblend{from{opacity:0}to{opacity:1}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--tinte)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px;border-radius:6px}

/* ---------- Flächen: jedes Blatt schiebt sich mit runder Kante über das vorige ---------- */
.fl{position:relative;padding:var(--abschnitt) var(--rand)}
.blatt{border-radius:var(--rund) var(--rund) 0 0;margin-top:calc(var(--rund)*-1);padding-bottom:calc(var(--abschnitt) + var(--rund))}
.fl--nacht{background:var(--nacht)} .fl--tief{background:var(--tief)} .fl--navy{background:var(--navy)} .fl--blau{background:#142337}
.fl--papier{background:var(--papier);color:var(--tinte)} .fl--creme{background:var(--creme);color:var(--tinte)}
.tapete{background-image:var(--muster);background-size:var(--musterb) auto;background-position:50% 0}
.in{max-width:var(--max);margin:0 auto;position:relative}

/* ---------- Schrift: Titel in normaler Schreibung, Betonung über Farbe ---------- */
.t1,.t2,.t3{font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.07;text-wrap:balance}
.t1{font-size:clamp(3rem,7.4vw,7.9rem);line-height:1.04}
.t2{font-size:clamp(2.2rem,4.9vw,5.1rem)}
.t3{font-size:clamp(1.36rem,1.9vw,1.9rem);line-height:1.16}
.t1 em,.t2 em,.t3 em{font-style:normal;color:var(--gold)}
.fl--papier em,.fl--creme em{color:var(--taupe)}
.z{display:block;overflow:hidden;padding:.16em .04em .14em;margin:-.16em -.04em -.14em}
.z>span{display:block;transform:translateY(112%);transition:transform 1.3s var(--e1);transition-delay:calc(var(--vz,0ms) + var(--n,0)*120ms)}
.da .z>span,.z.da>span{transform:none}
.z:nth-child(2)>span{--n:1}.z:nth-child(3)>span{--n:2}
@media(min-width:640px){.zt .z{white-space:nowrap}.zt .z>span{width:max-content}.mitte .zt .z>span{margin-inline:auto}}
/* Kapitelzeile wie auf der Seite: Zahl in der Titelschrift, Messingstrich, Wort */
.kap{display:flex;align-items:center;gap:16px;font-family:var(--serif);font-size:clamp(1rem,1.14vw,1.16rem);color:var(--gold);margin-bottom:clamp(20px,2.3vw,34px)}
.kap i{flex:none;width:clamp(40px,5vw,84px);height:1px;background:currentColor;opacity:.75;transform-origin:left}
.kap[data-a] i{transform:scaleX(0);transition:transform 1.2s var(--e1) .25s}
.kap[data-a].da i{transform:none}
.fl--papier .kap,.fl--creme .kap{color:var(--taupe)}
.lauf{font-size:clamp(1.06rem,1.22vw,1.24rem);line-height:1.68;max-width:56ch;color:rgba(255,255,255,.8)}
.fl--papier .lauf,.fl--creme .lauf{color:rgba(16,22,30,.84)}
.lauf p+p{margin-top:1.05em}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase}
.kopfzeile{display:grid;gap:clamp(22px,3vw,48px);align-items:end;margin-bottom:clamp(44px,5.2vw,88px)}
@media(min-width:960px){.kopfzeile{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.kopfzeile .lauf{padding-bottom:.4em}

/* ---------- Bewegung beim Hereinkommen ---------- */
[data-a]{transition:opacity .9s var(--e1),transform 1.25s var(--e1);transition-delay:calc(var(--vz,0ms) + var(--i,0)*90ms)}
[data-a="auf"]{opacity:0;transform:translateY(42px)}
[data-a="kipp"]{opacity:0;transform:perspective(1300px) rotateX(14deg) translateY(64px) scale(.975);transform-origin:50% 100%}
[data-a="schweb"]{opacity:0;transform:translateY(120px) rotate(var(--r0,0deg)) scale(.93);transition-duration:1.05s,1.7s}
[data-a="gross"]{opacity:0;transform:scale(.92)}
[data-a].da{opacity:1;transform:none}
[data-a="schweb"].da{transform:rotate(var(--r,0deg))}
[data-a="worte"] .wt{display:inline-block;opacity:0;transform:translateY(.75em);transition:opacity .8s var(--e1),transform 1s var(--e1);transition-delay:calc(var(--vz,0ms) + var(--w)*17ms)}
[data-a="worte"].da .wt{opacity:1;transform:none}
[data-a="worte"]{transition:none}
[data-drift]{will-change:transform}

/* ---------- Auftakt: die Türflügel des Hauses gehen auf ---------- */
/* Kein Tor mehr am Anfang (Robert 10.10.2026): die Werkbank steht sofort da. */
.auftakt{--vz:120ms}

/* ---------- Knöpfe mit Tiefe (wie auf der Seite) ---------- */
.kn{--o:#f7f2e8;--m:#e3dbca;--u:#d8ccac;--t:var(--tinte);--licht:rgba(255,255,255,.92);--kante:rgba(119,99,48,.38);--tf:rgba(0,0,0,.6);
  --ko:#233650;--ku:#0a111a;--kt:var(--weiss);--klicht:rgba(255,255,255,.24);
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 8px 0 27px;border-radius:999px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--t);
  background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 1px rgba(0,0,0,.3),0 16px 26px -14px var(--tf);
  transition:transform .55s var(--e2),box-shadow .55s var(--e2)}
.kn:hover{transform:translateY(-2px);animation:knpuls .45s var(--e2);box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(255,255,255,.08),0 2px 2px rgba(0,0,0,.25),0 26px 34px -16px var(--tf)}
.kn:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 5px rgba(0,0,0,.28),inset 0 -1px 0 var(--kante),0 1px 1px rgba(0,0,0,.3),0 6px 12px -8px var(--tf)}
.kn::after{content:'';position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-180%) skewX(-18deg);transition:transform 0s}
.kn:hover::after{transform:translateX(360%) skewX(-18deg);transition:transform 1s var(--e1)}
.kn i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--ko),var(--ku));color:var(--kt);
  box-shadow:inset 0 1px 0 var(--klicht),inset 0 -2px 0 rgba(0,0,0,.28),0 3px 6px rgba(0,0,0,.35);transition:transform .6s var(--e2)}
.kn:hover i{transform:translateX(2px) scale(1.05)}
.kn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2;transition:transform .6s var(--e2)}
.kn:hover svg{transform:translate(2px,-2px)}
.kn--nacht,.fl--papier .kn,.fl--creme .kn,.hell .kn{--o:#253953;--m:#101c2c;--u:#090f17;--t:#ffffff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tf:rgba(13,22,33,.6);--ko:#f7f2e8;--ku:#d8ccac;--kt:var(--tinte);--klicht:rgba(255,255,255,.9)}
.kn--nacht::after,.fl--papier .kn::after,.fl--creme .kn::after,.hell .kn::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}
.kn--linie{--o:#293e59;--m:#192a41;--u:#0f1a29;--t:#ffffff;--licht:rgba(255,255,255,.24);--kante:rgba(0,0,0,.45);--tf:rgba(0,0,0,.55);--ko:#f7f2e8;--ku:#d8ccac;--kt:var(--tinte);--klicht:rgba(255,255,255,.9)}
.kn--linie::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.16) 50%,transparent 100%)}
.fl--papier .kn--linie,.fl--creme .kn--linie,.hell .kn--linie{--o:#fefcf9;--m:#f3eee3;--u:#eae2ce;--t:var(--tinte);--licht:#ffffff;--kante:rgba(119,99,48,.28);--tf:rgba(80,66,28,.42);--ko:#233650;--ku:#0a111a;--kt:var(--weiss);--klicht:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(119,99,48,.16),0 1px 1px rgba(80,66,28,.2),0 16px 26px -14px var(--tf)}
.fl--papier .kn--linie::after,.fl--creme .kn--linie::after,.hell .kn--linie::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%)}
.kn--klein{height:44px;padding-left:20px;font-size:11px;gap:10px}
.kn--klein i{width:32px;height:32px}
.kn-reihe{display:flex;flex-wrap:wrap;gap:12px}
.rund{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--tinte);
  background:linear-gradient(180deg,#f7f2e8,#d8ccac);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(119,99,48,.38),0 14px 22px -12px rgba(0,0,0,.6);transition:transform .5s var(--e2),opacity .3s}
.rund:hover{transform:translateY(-2px) scale(1.04)} .rund:active{transform:translateY(1px) scale(.96)}
.rund[disabled]{opacity:.3;pointer-events:none}
.rund svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.3}
.rund--nacht,.fl--papier .rund,.fl--creme .rund{color:#ffffff;background:linear-gradient(180deg,#293e59,#192a41 50%,#0f1a29);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -3px 0 rgba(0,0,0,.5),0 14px 22px -12px rgba(13,22,33,.6)}
.pfeil{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 0;position:relative}
.pfeil::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;opacity:.4;transform-origin:left;transition:transform .6s var(--e1)}
.pfeil:hover::after{transform:scaleX(.35)}
.pfeil svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3;transition:transform .5s var(--e2)}
.pfeil:hover svg{transform:translate(2px,-2px)}

/* ---------- Glanzkante: nur am Knopf in der Leiste ---------- */
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gp{syntax:"<percentage>";initial-value:6%;inherits:false}
.glanz{isolation:isolate;position:relative;overflow:hidden;border:1px solid transparent;border-radius:999px;color:var(--papier);display:inline-flex;align-items:center;gap:11px;height:44px;padding:0 20px 0 22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#213652,#101d2f) padding-box,conic-gradient(from var(--ga),transparent,var(--gold) var(--gp),#ffffff calc(var(--gp)*2),var(--taupe) calc(var(--gp)*3),transparent calc(var(--gp)*4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 26px -16px rgba(0,0,0,.8);animation:ga 4s linear infinite;transition:--gp .8s cubic-bezier(.25,1,.5,1),transform .5s var(--e2)}
.glanz:hover{--gp:18%}
.glanz:active{transform:translateY(1px)}
.glanz svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;transition:transform .5s var(--e2)}
.glanz:hover svg{transform:translate(3px,-3px)}
@keyframes ga{to{--ga:360deg}}

/* ---------- Leiste ---------- */
.leiste{position:fixed;z-index:50;top:18px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;padding:0 12px;transform:translateY(-150%);animation:leiste 1.1s var(--e1) .35s forwards}
@keyframes leiste{to{transform:none}}
/* Weg beim Runterscrollen, zurück beim Hochscrollen (werkbank.js, wie die Website). Auf der Insel, weil die Einflug-Animation die Leiste selbst festhält. */
.insel{transition:transform .8s var(--e2)}
.leiste.weg .insel{transform:translateY(calc(-100% - 30px))}
.insel{pointer-events:auto;display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);height:62px;padding:0 9px 0 22px;border-radius:999px;color:#ffffff;max-width:100%;
  border:1px solid rgba(227,210,166,.28);background:linear-gradient(180deg,#192a41,#0d1826);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -18px rgba(0,0,0,.85)}
.insel__m{display:flex;align-items:center;gap:12px;flex:none}
.insel__m svg{height:25px;width:auto;color:var(--gold)}
.insel__m b{font-family:var(--serif);font-weight:700;font-size:1.02rem;letter-spacing:.07em;white-space:nowrap}
.insel__m span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-left:12px;border-left:1px solid rgba(227,210,166,.35)}
.insel nav{display:flex;gap:clamp(12px,1.5vw,24px)}
.insel nav a{font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.72);padding:10px 0;position:relative;transition:color .4s;white-space:nowrap}
.insel nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e1)}
.insel nav a:hover,.insel nav a.an{color:#ffffff}
.insel nav a:hover::after,.insel nav a.an::after{transform:scaleX(1);transform-origin:left}
@media(max-width:1240px){.insel nav{display:none}.insel{padding-left:18px}}
@media(max-width:620px){.insel__m b{display:none}.insel__m span{border-left:0;padding-left:0;font-size:11.5px}.insel{height:56px;gap:16px;padding-left:18px}.glanz{height:40px;padding:0 15px 0 17px;font-size:10.5px}}
.gang-linie{position:fixed;z-index:49;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;will-change:transform}

/* ---------- Rahmen: Fenster, Handy, Abzug ---------- */
.fen{border-radius:16px;overflow:hidden;background:var(--tief);box-shadow:0 0 0 1px rgba(227,210,166,.22),0 50px 70px -40px rgba(0,0,0,.9)}
.fen__k{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#122032}
.fen__k i{width:8px;height:8px;border-radius:50%;background:rgba(227,210,166,.42)}
.fen__k span{margin-left:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fen img{width:100%}
.tel{border-radius:34px;padding:7px;background:#070b12;box-shadow:0 0 0 1px rgba(227,210,166,.3),0 40px 50px -30px rgba(0,0,0,.95)}
.tel img{border-radius:27px;width:100%}
/* Abzug: ein Foto auf Karton mit feiner Innenlinie, wie eine alte Ansichtskarte */
.abzug{position:relative;background:#f3eee3;padding:9px 9px 36px;box-shadow:0 26px 34px -22px rgba(0,0,0,.85),inset 0 0 0 1px rgba(119,99,48,.16);color:var(--tinte)}
.abzug img{width:100%;aspect-ratio:1;object-fit:cover}
.abzug span{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--serif);font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}

/* ---------- Auftakt ---------- */
.auftakt{position:relative;min-height:100svh;padding:clamp(112px,13vh,164px) var(--rand) calc(clamp(34px,5vh,60px) + var(--rund));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:var(--nacht) var(--muster) 50% 0/var(--musterb) auto}
.auftakt .in{width:100%;display:grid;gap:clamp(30px,4vw,60px);align-items:end}
@media(min-width:1080px){.auftakt .in{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}}
.auftakt .in.auftakt__fuss{display:flex}
.auftakt__t{position:relative;z-index:2}
.auftakt h1{font-size:clamp(2.9rem,5.5vw,5.9rem)}
.auftakt .gruss{font-family:var(--serif);font-size:clamp(1.08rem,1.3vw,1.34rem);color:var(--gold);margin-bottom:clamp(16px,2vw,28px);display:flex;align-items:center;gap:16px}
.auftakt .gruss::before{content:'';width:clamp(40px,5vw,84px);height:1px;background:currentColor;opacity:.75}
.auftakt .lauf{margin-top:clamp(22px,2.6vw,36px);max-width:43ch;font-size:clamp(1.1rem,1.34vw,1.36rem)}
.auftakt .kn-reihe{margin-top:clamp(26px,3vw,42px)}
.stapel{position:relative;aspect-ratio:1/.8;width:100%;max-width:900px;justify-self:end}
.stapel>*{position:absolute;will-change:transform}
.stapel .fen{left:0;top:9%;width:86%;--r:-2deg;--r0:-6deg}
.stapel .tel{right:-1%;bottom:-3%;width:23.5%;--r:4deg;--r0:12deg;--i:4;animation:wieg 7s ease-in-out 4.4s infinite alternate}
@keyframes wieg{to{translate:0 -12px}}
.stapel .abzug--1{left:-4%;top:-6%;width:24%;--r:-6deg;--r0:-15deg;--i:6}
.stapel .abzug--1 img{aspect-ratio:3/2}
.stapel .abzug--2{left:35%;bottom:-3%;width:18%;--r:4deg;--r0:11deg;--i:8}
.stapel .abzug--3{right:2%;top:-9%;width:17%;--r:6deg;--r0:15deg;--i:7}
.auftakt__fuss{margin-top:clamp(40px,6vh,76px);padding-top:18px;border-top:1px solid rgba(227,210,166,.3);flex-wrap:wrap;gap:8px 30px;justify-content:space-between;color:rgba(255,255,255,.6)}
.runter{display:inline-flex;align-items:center;gap:10px}
.runter i{width:1px;height:26px;background:var(--gold);transform-origin:top;animation:runter 2.4s var(--e2) infinite}
@keyframes runter{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1) translateY(26px);opacity:0}}
@media(max-width:1079px){.stapel{max-width:640px;justify-self:center;margin-top:26px}}
@media(max-width:860px){.stapel .abzug--3{right:0;top:-12%;width:24%}.stapel .abzug--1{width:30%}}
@media(max-width:560px){.stapel .abzug--2{display:none}.stapel .tel{width:29%}.auftakt__fuss span:nth-child(2){display:none}.abzug span{font-size:10px;bottom:8px}.abzug{padding:6px 6px 28px}}

/* ---------- Brief ---------- */
.brief{display:grid;gap:clamp(40px,6vw,110px)}
@media(min-width:1000px){.brief{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}}
.brief .lauf{font-size:clamp(1.12rem,1.38vw,1.4rem);line-height:1.64;max-width:43ch;margin-top:clamp(28px,3.2vw,48px)}
.gruss-u{margin-top:40px;display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 22px}
.gruss-u b{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,3.8vw,3.9rem);line-height:1}
.gruss-u small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);padding-bottom:7px}
.brief__r{position:relative;display:grid;gap:18px}
@media(min-width:1000px){.brief__r{position:sticky;top:112px}}
.brief__haus{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:var(--sv,1.5);box-shadow:0 34px 44px -30px rgba(80,66,28,.7)}
.brief__haus img{width:100%;height:100%;object-fit:cover}
.schild{position:absolute;left:0;bottom:0;padding:13px 24px 12px 20px;border-radius:0 22px 0 0;background:var(--papier);font-family:var(--serif);font-size:1.1rem;line-height:1.2;color:var(--tinte)}
.schild small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-top:3px}
.werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.werte li{position:relative}
.werte .b{display:block;border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#dddddd;box-shadow:0 24px 30px -22px rgba(80,66,28,.7)}
.werte img{width:100%;height:100%;object-fit:cover}
.werte span{display:block;text-align:center;font-family:var(--serif);font-size:1.02rem;margin-top:10px}
.karte3{border-radius:28px;padding:clamp(24px,2.6vw,36px);background:linear-gradient(180deg,#192a41,#0c1726);color:#ffffff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(227,210,166,.2),0 30px 40px -26px rgba(13,22,33,.8)}
.karte3 h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.14;margin-bottom:6px}
.karte3 p{color:rgba(255,255,255,.76);font-size:1rem}
.kurs{width:100%;height:auto;margin-top:14px;color:#ffffff;overflow:visible}
.kurs text{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;fill:rgba(255,255,255,.72)}
.kurs .ort{font-family:var(--serif);font-size:16.5px;letter-spacing:.01em;text-transform:none;fill:#ffffff}
.kurs .weg{stroke:var(--gold);stroke-width:1.2;fill:none;stroke-dasharray:3 6}
.kurs .pkt{fill:var(--creme)} .kurs .da0{fill:var(--gold)}
.kurs .welle{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:welle 3s ease-out infinite}
@keyframes welle{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(3.2)}}

/* ---------- Mitgebracht ---------- */
.gaben{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.gabe{position:relative;display:flex;flex-direction:column;min-height:clamp(400px,35vw,500px);border-radius:30px;overflow:hidden;padding:26px;color:#ffffff;background:var(--tief);box-shadow:inset 0 0 0 1px rgba(227,210,166,.24),0 40px 50px -36px rgba(0,0,0,.9)}
.gabe__b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--e2)}
.gabe:hover .gabe__b{transform:scale(1.1)}
.gabe>*:not(.gabe__b){position:relative}
.gabe b{font-family:var(--serif);font-weight:400;font-size:clamp(3.8rem,5.8vw,5.9rem);line-height:1;color:var(--gold);white-space:nowrap}
.gabe h3{font-family:var(--serif);font-weight:400;font-size:1.62rem;line-height:1.14;margin:auto 0 8px;padding-top:30px}
.gabe p{color:rgba(255,255,255,.88);font-size:1.02rem;line-height:1.5;max-width:30ch}
.gabe .pfeil{margin-top:16px;align-self:flex-start}
.odo{display:inline-flex;align-items:flex-start;overflow:hidden;height:1.16em;line-height:1.16;vertical-align:top}
.odo i{display:block;font-style:normal;height:1.16em;overflow:hidden}
.odo .od{display:block;width:var(--b,auto);text-align:center;transition:transform 2.2s var(--e1);transition-delay:calc(var(--i)*130ms + 250ms)}

/* ---------- Laufzeile: schmal, läuft von selbst ---------- */
.zeile{position:relative;overflow:hidden;padding:clamp(9px,.9vw,13px) 0 calc(clamp(9px,.9vw,13px) + var(--rund));box-shadow:inset 0 1px 0 rgba(227,210,166,.22);margin-top:calc(var(--rund)*-1);border-radius:var(--rund) var(--rund) 0 0;background:var(--tief)}
.zeile__z{display:flex;align-items:center;width:max-content;gap:1.1em;font-family:var(--serif);font-size:clamp(.95rem,1.15vw,1.2rem);letter-spacing:.06em;line-height:1.2;color:rgba(241,236,226,.5);white-space:nowrap;animation:zug 80s linear infinite;animation-play-state:paused;will-change:transform}
.zeile.sichtbar .zeile__z{animation-play-state:running}
.zeile__z b{font-weight:400;color:var(--gold)}
.zeile__z svg{flex:none;height:.7em;width:auto;color:var(--messing);opacity:.8}
@keyframes zug{to{transform:translateX(-50%)}}

/* ---------- Vorher / Nachher ---------- */
.vgl{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1440/900;background:#000000;box-shadow:0 0 0 1px rgba(227,210,166,.24),0 60px 80px -50px rgba(0,0,0,.9);--x:50%;touch-action:pan-y}
.vgl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.vgl .neu{clip-path:inset(0 0 0 var(--x))}
.vgl__g{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--gold);pointer-events:none}
.vgl__g i{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);
  background:linear-gradient(180deg,#f7f2e8,#d8ccac);box-shadow:inset 0 1px 0 #ffffff,inset 0 -3px 0 rgba(119,99,48,.38),0 14px 22px -10px rgba(0,0,0,.8)}
.vgl__g svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4}
.vgl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vgl__e{position:absolute;bottom:16px;padding:10px 18px;border-radius:999px;background:var(--navy);color:var(--papier);font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(227,210,166,.4)}
.vgl__e--l{left:16px} .vgl__e--r{right:16px}
@media(max-width:700px){.vgl{aspect-ratio:4/3;border-radius:18px}.vgl img{object-position:left top}}

/* ---------- Band zum Blättern ---------- */
.gang{position:relative}
.band{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px var(--rand) 44px;margin:0 calc(var(--rand)*-1);scroll-padding-inline:var(--rand);overscroll-behavior-x:contain}
.band::-webkit-scrollbar{display:none}
.band>*{flex:none;scroll-snap-align:start}
.gang__f{display:flex;align-items:center;gap:18px;margin-top:4px}
.gang__b{flex:1;height:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden;border-radius:2px}
.fl--papier .gang__b,.fl--creme .gang__b{background:rgba(16,22,30,.14)}
.gang__b i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(.1);transition:transform .3s var(--e2)}
.fl--papier .gang__b i,.fl--creme .gang__b i{background:var(--navy)}
.gang__z{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;opacity:.7;min-width:5.5em;text-align:right}

/* ---------- Ideen ---------- */
.idee{width:min(84vw,580px);color:#ffffff}
.idee__b{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10.4;background:var(--tief);box-shadow:0 0 0 1px rgba(227,210,166,.2),0 40px 50px -34px rgba(0,0,0,.95)}
.idee__b img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transform:scale(1.14);transition:transform 1.9s var(--e1)}
.idee.da .idee__b img{transform:none}
.idee.da:hover .idee__b img{transform:scale(1.045)}
.idee__n{position:absolute;right:0;bottom:0;padding:12px 20px 9px 24px;border-radius:24px 0 0 0;background:var(--navy);font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--gold)}
.idee h3{font-family:var(--serif);font-weight:400;font-size:1.66rem;line-height:1.14;margin:22px 0 8px}
.idee p{color:rgba(255,255,255,.76);font-size:1.04rem;line-height:1.56;max-width:44ch}

/* ---------- Gefüge ---------- */
.brett-scroll{overflow-x:auto;margin:0 calc(var(--rand)*-1);padding:0 var(--rand) 6px;scrollbar-width:thin}
.brett-box{min-width:1160px;border-radius:28px;background:var(--tief);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(227,210,166,.2),0 40px 60px -40px rgba(0,0,0,.95);overflow:hidden}
.brett-k{position:relative;height:50px;border-bottom:1px solid rgba(227,210,166,.18)}
.brett-k span{position:absolute;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.56);white-space:nowrap;transition:color .4s}
.brett-k span i{font-style:normal;color:var(--gold);margin-right:10px}
.brett{position:relative;width:100%;min-height:0;background-image:linear-gradient(rgba(227,210,166,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(227,210,166,.045) 1px,transparent 1px);background-size:38px 38px}
.brett svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bl{fill:none;stroke:#756949;stroke-width:1.2;transition:opacity .45s,stroke .45s}
.bk{fill:none;stroke:#9b8a5e;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:opacity .45s,stroke .45s}
.brett.leise .bl:not(.heiss),.brett.leise .bk:not(.heiss){opacity:.12}
.bl.heiss{stroke:var(--gold);stroke-width:1.8} .bk.heiss{stroke:var(--gold)}
.bn{position:absolute;transform:translate(-50%,0);width:206px;transition:opacity .5s var(--e1),transform .7s var(--e1)}
.brett.vor .bn{opacity:0;transform:translate(-50%,22px)}
.brett.vor .bk{opacity:0}
/* Linien als vier Ebenen je Spaltenpaar, die als Ganzes aufblenden; kalt = ohne Übergang zurück auf Anfang, baut = während des Aufbaus (Salt & Silver 10.10.2026, Robert: «schleppend und flackernd») */
.bs{transition:opacity .6s var(--e1)}
.brett.vor .bs{opacity:0}
.brett.baut .bn,.brett.baut .bs{will-change:transform,opacity}
/* Solange das Brett wartet oder sich aufbaut, reagieren die Kacheln nicht auf die Maus: liegt der Zeiger im Brett, wählte sonst die erste Kachel, die unter ihm ankommt, ihren Weg, alle anderen wurden blass, und der Aufbau sah aus wie angehalten (Robert 12.10.2026 ~19:07). Scharf erst, wenn alle stehen. */
.brett.vor .bn,.brett.baut .bn{pointer-events:none}
.brett.kalt .bn,.brett.kalt .bs{transition:none!important}
.brett.leise .bn:not(.heiss){opacity:.26}
.bn button{display:block;width:100%;text-align:left;border-radius:18px;overflow:hidden;border:1px solid transparent;color:#ffffff;
  background:linear-gradient(180deg,#1a2b42 0%,#121f31 50%,#0d1726 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.06) 60%,rgba(255,255,255,.12)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -10px 18px -12px rgba(0,0,0,.9),0 18px 30px -18px rgba(0,0,0,.95);transition:transform .5s var(--e2),box-shadow .5s var(--e2)}
.bn button:hover{transform:translateY(-4px) scale(1.02)}
.bn button:active{transform:translateY(1px) scale(.99)}
.bn .hd{display:block;padding:11px 14px 10px;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.bn b{display:block;font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.16}
.bn small{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:.85}
.bn .lv{display:none}
.bn .lv span{display:flex;align-items:baseline;gap:9px;padding:3px 16px;font-size:13px;color:rgba(255,255,255,.66);line-height:1.35;transition:color .3s}
.bn .lv span::before{content:'';flex:none;width:4px;height:4px;border-radius:50%;background:var(--messing);transform:translateY(-2px)}
.brett.vor .bn .lv{opacity:0}
.bn button:hover .lv span,.bn.heiss .lv span{color:rgba(255,255,255,.92)}
.bn--ein button{color:var(--tinte);background:linear-gradient(180deg,#f7f2e8,#ebe2ca) padding-box,linear-gradient(180deg,#ffffff,#d2c49f) border-box;box-shadow:inset 0 1px 0 #ffffff,inset 0 -3px 0 rgba(119,99,48,.3),0 18px 30px -18px rgba(0,0,0,.95)}
.bn--ein .hd{background:none}
.bn--ein small{color:var(--taupe);opacity:1}
.bn--ein .lv{border-color:rgba(16,22,30,.12)}
.bn--ein .lv span,.bn--ein button:hover .lv span,.bn--ein.heiss .lv span{color:rgba(16,22,30,.78)}
.bn--seite button{background:linear-gradient(180deg,#233a59,#15263c) padding-box,linear-gradient(120deg,var(--gold),#756949 55%,var(--gold)) border-box}
.bn--seite .lv span::before{background:var(--gold)}
.bn--sys button{background:linear-gradient(var(--tief),var(--tief)) padding-box,linear-gradient(180deg,rgba(227,210,166,.75),rgba(227,210,166,.25)) border-box}
.bn.gewaehlt button{background:linear-gradient(180deg,#284061,#16283f) padding-box,linear-gradient(120deg,#ffffff,var(--gold)) border-box;transform:translateY(-4px) scale(1.03)}
.bn--ein.gewaehlt button{background:linear-gradient(180deg,#fdfaf3,#e4dbc9) padding-box,linear-gradient(120deg,var(--messing),#ffffff) border-box}
/* klares Brett: flache Kacheln ohne Unterpunkte, weiche Linien, in Ruhe zurückhaltend */
.brett--klar{min-height:0}
.brett--klar .bn{width:240px}
.brett--klar .bn .lv{display:none}
.brett--klar .bn .hd{padding:13px 16px 13px}
.brett--klar .bn small{letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brett--klar .bl{stroke-width:1.3;opacity:.62}
.brett--klar .bk{opacity:.8}
.brett--klar.leise .bl:not(.heiss),.brett--klar.leise .bk:not(.heiss){opacity:.07}
.brett--klar .bl.heiss{stroke-width:2.2;opacity:1} .brett--klar .bk.heiss{opacity:1}
.brett-f{padding:16px 20px;border-top:1px solid rgba(227,210,166,.18);font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center}
.brett-p{position:relative;display:grid;gap:14px 34px;margin-top:20px;padding:clamp(22px,2.4vw,34px);border-radius:26px;background:linear-gradient(180deg,#192a41,#101e31);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(227,210,166,.18);align-items:center;overflow:hidden}
@media(min-width:900px){.brett-p{grid-template-columns:300px minmax(0,1fr) auto}}
.brett-p .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.brett-p .t{font-family:var(--serif);font-size:1.7rem;line-height:1.14}
.brett-p p{color:rgba(255,255,255,.82)}
.brett-p .weg{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);opacity:.85}
.brett-p .wechsel{transition:opacity .35s,transform .5s var(--e1)}
.brett-p.neu .wechsel{opacity:0;transform:translateY(10px);transition:none}
.brett-p__k{display:flex;flex-wrap:wrap;gap:10px}
.brett-uhr{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.brett-uhr.laeuft{transition:transform var(--dauer,3.6s) linear;transform:scaleX(1)}
.brett-h{margin-top:14px;font-size:14px;color:rgba(255,255,255,.55)}
@media(min-width:1260px){.brett-h{display:none}}

/* ---------- Seiten: Bühne zum Durchklicken ---------- */
.wahl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand)*-1) clamp(22px,2.6vw,36px);padding:6px var(--rand) 14px}
.wahl::-webkit-scrollbar{display:none}
.wahl button{flex:none;height:46px;padding:0 20px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte);white-space:nowrap;
  background:linear-gradient(180deg,#fefcf9,#ebe5d8);box-shadow:inset 0 1px 0 #ffffff,inset 0 -2px 0 rgba(119,99,48,.22),inset 0 0 0 1px rgba(119,99,48,.16),0 8px 14px -10px rgba(80,66,28,.45);transition:transform .45s var(--e2)}
.wahl button:hover{transform:translateY(-1px)} .wahl button:active{transform:translateY(1px)}
.wahl button[aria-pressed="true"]{color:#ffffff;background:linear-gradient(180deg,#253953,#101c2c 50%,#090f17);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(227,210,166,.5),0 10px 16px -10px rgba(13,22,33,.7)}
.schau{display:grid;gap:clamp(22px,3vw,44px);align-items:center}
@media(min-width:1100px){.schau{grid-template-columns:minmax(0,1fr) 300px}}
.schau__f{position:relative}
.schau .fen{box-shadow:0 0 0 1px rgba(16,22,30,.16),0 50px 60px -40px rgba(80,66,28,.75)}
.schau__s{position:relative;aspect-ratio:1440/900;overflow:hidden;background:var(--tief);touch-action:pan-y}
.schau__s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(var(--von,6%)) scale(1.02);transition:opacity .6s var(--e1),transform 1s var(--e1)}
.schau__s img.an{opacity:1;transform:none}
.schau__s img.weg{opacity:0;transform:translateX(var(--nach,-6%)) scale(1.02)}
.schau__p{position:absolute;top:50%;z-index:3;margin-top:-28px}
.schau__p--l{left:-18px} .schau__p--r{right:-18px}
@media(max-width:700px){.schau__p--l{left:6px}.schau__p--r{right:6px}.schau__p{width:46px;height:46px;margin-top:-23px}}
.schau__u{display:flex;align-items:center;gap:16px;margin-top:18px;color:rgba(16,22,30,.66)}
.schau__pk{display:flex;gap:6px}
.schau__pk i{width:22px;height:3px;border-radius:2px;background:rgba(16,22,30,.18);transition:background .3s,transform .4s var(--e2);transform-origin:left}
.schau__pk i.an{background:var(--navy);transform:scaleX(1.5);margin-right:11px}
.schau__r{display:grid;gap:22px;justify-items:start}
.schau__r .tel{width:min(100%,250px);justify-self:center;box-shadow:0 0 0 1px rgba(16,22,30,.3),0 40px 50px -30px rgba(80,66,28,.8)}
.schau__r .tel div{position:relative;aspect-ratio:390/844;border-radius:27px;overflow:hidden;background:var(--tief)}
.schau__r .tel img{position:absolute;inset:0;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .6s var(--e1)}
.schau__r .tel img.an{opacity:1}
.schau__t h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.2vw,2.2rem);line-height:1.12}
.schau__t p{margin:8px 0 18px;color:rgba(16,22,30,.78);font-size:1.04rem;line-height:1.5}
@media(max-width:1099px){.schau__r{grid-template-columns:120px 1fr;align-items:center}.schau__r .tel{width:120px;border-radius:22px;padding:5px}.schau__r .tel div{border-radius:18px}}

/* ---------- Unterlagen: Fächer ---------- */
.karten{display:grid;gap:clamp(40px,5vw,90px);align-items:center}
.karten .t2{font-size:clamp(2.1rem,3.9vw,4.1rem)}
@media(min-width:1000px){.karten{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.faecher{position:relative;aspect-ratio:1/.74;max-width:820px;width:100%;justify-self:center}
.blattk{position:absolute;top:10%;width:36%;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 36px 44px -26px rgba(0,0,0,.8);background:transparent;transition:transform 1s var(--e3),opacity 1s var(--e1);transition-delay:calc(var(--j)*130ms);opacity:0;transform:translateY(150px) rotate(0deg)}
.blattk img{width:100%}
.blattk span{position:absolute;left:0;right:0;bottom:0;padding:11px 13px;background:var(--navy);color:#ffffff;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.blattk span b{font-weight:400;color:var(--gold)}
.blattk--1{left:0}.blattk--2{left:21.5%;top:5%;z-index:1}.blattk--3{left:43%;top:2%;z-index:2}.blattk--4{left:64%;top:6%;z-index:1}
.da .blattk{opacity:1}
.da .blattk--1{transform:rotate(-9deg)} .da .blattk--2{transform:rotate(-3.5deg)} .da .blattk--3{transform:rotate(2.5deg)} .da .blattk--4{transform:rotate(8deg)}
.da .blattk--1:hover{transform:rotate(-9deg) translateY(-22px);transition-delay:0s} .da .blattk--2:hover{transform:rotate(-3.5deg) translateY(-22px);transition-delay:0s} .da .blattk--3:hover{transform:rotate(2.5deg) translateY(-22px);transition-delay:0s} .da .blattk--4:hover{transform:rotate(8deg) translateY(-22px);transition-delay:0s}
.namenzug{margin-top:clamp(34px,4vw,60px);overflow:hidden;border-top:1px solid rgba(227,210,166,.24);border-bottom:1px solid rgba(227,210,166,.24);padding:16px 0}
.namenzug div{display:flex;width:max-content;gap:2.2em;font-family:var(--serif);font-size:clamp(1.05rem,1.4vw,1.4rem);color:rgba(255,255,255,.74);white-space:nowrap;animation:zug 90s linear infinite;animation-play-state:paused;will-change:transform}
.namenzug.sichtbar div{animation-play-state:running}
.namenzug span::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--messing);margin-left:2.2em;vertical-align:.2em}

/* ---------- Handschrift ---------- */
.bogen{border-radius:34px;background:#f9f5ee;color:var(--tinte);box-shadow:inset 0 1px 0 #ffffff,0 50px 70px -50px rgba(0,0,0,.9);overflow:hidden}
.bogen__z{border-top:1px solid rgba(16,22,30,.12)}
.bogen__z:first-child{border-top:0}
.bogen__zl{padding:clamp(26px,3.2vw,52px)}
.etik{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);display:flex;justify-content:space-between;gap:20px;margin-bottom:clamp(18px,2.2vw,32px)}
.marke{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.marke{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.marke__w{color:var(--navy);max-width:440px}
.marke__w svg{width:100%;height:auto;display:block}
.marke__w .mono-ce{color:var(--messing)}
.marke p{color:rgba(16,22,30,.8);max-width:40ch}
.schriften{display:grid}
@media(min-width:900px){.schriften{grid-template-columns:1.25fr 1fr 1fr}.schriften>div+div{border-left:1px solid rgba(16,22,30,.12)}}
@media(max-width:899px){.schriften>div+div{border-top:1px solid rgba(16,22,30,.12)}}
.schrift__g{font-size:clamp(5.2rem,9.4vw,9.8rem);line-height:1;color:var(--navy)}
.schrift__g--a{font-family:var(--serif)}
.schrift__g--s{font-family:var(--sans);font-weight:400;letter-spacing:-.04em}
.schrift__g--m{font-family:var(--mono);font-weight:400;letter-spacing:-.06em}
.schrift__n{font-family:var(--serif);font-size:1.4rem;margin-top:18px}
.schrift__p{margin-top:8px;color:rgba(16,22,30,.78);font-size:1rem;line-height:1.5}
.schrift__b{margin-top:16px;padding-top:14px;border-top:1px solid rgba(16,22,30,.12);color:var(--tinte)}
.farbkarten{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
@media(max-width:640px){.farbkarten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.farbkarte{border-radius:14px;overflow:hidden;background:#ffffff;box-shadow:0 0 0 1px rgba(16,22,30,.1),0 22px 26px -20px rgba(80,66,28,.6)}
.farbkarte i{display:block;aspect-ratio:1/1.25;transition:transform .7s var(--e3);transform-origin:50% 100%}
.farbkarte:hover i{transform:scaleY(1.06)}
.farbkarte span{display:block;padding:12px 12px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);line-height:1.6;position:relative;background:#ffffff}
.farbkarte b{display:block;font-family:var(--serif);font-weight:400;font-size:1.1rem;letter-spacing:0;text-transform:none;color:var(--tinte)}
.tapetenband{position:relative;background:var(--navy) var(--muster) 50% 50%/900px auto;padding:clamp(34px,4.4vw,70px) clamp(26px,3.2vw,52px);display:grid;gap:26px;align-items:center;color:#ffffff}
@media(min-width:900px){.tapetenband{grid-template-columns:auto minmax(0,1fr)}}
.tapetenband svg{height:clamp(76px,9vw,128px);width:auto;color:var(--gold)}
.tapetenband p{max-width:46ch;color:rgba(255,255,255,.84)}
.tapetenband .etik{color:var(--gold);margin-bottom:10px}
.probe-kn{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.probe-kn{grid-template-columns:1fr auto}}
.probe-kn p{color:rgba(16,22,30,.8);max-width:46ch}

/* ---------- Papier ---------- */
.papier{display:grid;gap:16px}
@media(min-width:1000px){.papier{grid-template-columns:1fr 1fr}}
.pk{position:relative;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;padding:clamp(24px,2.6vw,38px);color:#ffffff;background:linear-gradient(180deg,#192a41,#101e31);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(227,210,166,.2)}
.pk--hell{background:#bcaf8c;color:var(--tinte);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.pk__b{position:relative;flex:none;aspect-ratio:1/.8;margin:0 -6px 22px}
.pk__b>*{position:absolute;will-change:transform}
.pk__b img{width:100%;height:auto}
.kleb img{transition:transform .7s var(--e3)}
.kleb:hover img{transform:scale(1.14) rotate(-4deg)}
.bogenb img{border-radius:4px;box-shadow:0 26px 30px -20px rgba(43,34,11,.7);transition:transform .7s var(--e3)}
.bogenb:hover img{transform:translateY(-14px) scale(1.03)}
/* Türkarten hängen an einem Messingknauf und pendeln einmal aus */
.haengt{transform-origin:50% -6%}
.haengt.da img{animation:pendel 3.4s var(--e2) calc(var(--i,0)*120ms + .5s) both}
@keyframes pendel{0%{transform:rotate(7deg)}22%{transform:rotate(-5deg)}44%{transform:rotate(3.2deg)}64%{transform:rotate(-1.8deg)}82%{transform:rotate(.8deg)}100%{transform:none}}
.haengt img{transform-origin:50% 0}
.pk h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.9vw,2.9rem);line-height:1.1}
.pk p{margin:10px 0 22px;max-width:44ch;color:rgba(255,255,255,.82)}
.pk--hell p{color:rgba(16,22,30,.86)}
.pk .kn{align-self:flex-start;margin-top:auto}
.pk--hell .kn{--o:#253953;--m:#101c2c;--u:#090f17;--t:#ffffff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tf:rgba(13,22,33,.6);--ko:#f7f2e8;--ku:#d8ccac;--kt:var(--tinte);--klicht:rgba(255,255,255,.9)}
.pk--hell .kn::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}

/* ---------- Material ---------- */
.streu{display:flex;justify-content:center;align-items:flex-start;margin:0 0 clamp(44px,5.4vw,90px);padding:0 2%}
.streu .abzug{flex:1;max-width:260px;margin:0 -1.2%}
.streu .abzug:nth-child(odd){margin-top:30px}
.streu .abzug img{aspect-ratio:4/5}
@media(max-width:700px){.streu .abzug:nth-child(n+4){display:none}.streu .abzug{margin:0 -3%}}
.mitte{text-align:center}
.mitte .lauf{margin-inline:auto}

/* ---------- Ausblick und Schluss ---------- */
.dazu{display:grid;gap:clamp(22px,3.4vw,60px)}
@media(min-width:900px){.dazu{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:stretch}}
.dazu__gross{position:relative;display:flex;flex-direction:column;min-height:clamp(320px,30vw,430px);border-radius:30px;padding:clamp(28px,3.2vw,48px);color:#ffffff;background:var(--navy) var(--muster) 50% 0/900px auto;box-shadow:inset 0 0 0 1px rgba(227,210,166,.28),0 34px 40px -30px rgba(13,22,33,.7)}
.dazu__gross svg{height:clamp(40px,4.4vw,58px);width:auto;align-self:flex-start;color:var(--gold);margin-bottom:auto}
.dazu__gross small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:34px 0 10px}
.dazu__gross h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1.1;margin-bottom:12px}
.dazu__gross p{color:rgba(255,255,255,.86);max-width:42ch}
.dazu__z li{padding:clamp(20px,2.2vw,30px) 0;border-top:1px solid rgba(16,22,30,.2)}
.dazu__z li:last-child{border-bottom:1px solid rgba(16,22,30,.2)}
.dazu__z h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1.16;margin-bottom:8px}
.dazu__z p{color:rgba(16,22,30,.84);max-width:56ch}
.schluss{position:relative;min-height:100svh;display:flex;align-items:center;padding:var(--abschnitt) var(--rand);clip-path:inset(0 round var(--rund) var(--rund) 0 0);margin-top:calc(var(--rund)*-1);color:#ffffff;background:var(--nacht)}
.schluss__b{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}
.schluss .in{width:100%}
.schluss .t1{font-size:clamp(2.6rem,6.3vw,6.8rem)}
.schluss .lauf{font-size:clamp(1.14rem,1.42vw,1.44rem);color:rgba(255,255,255,.94);margin-top:clamp(22px,2.6vw,38px);max-width:46ch}
.schluss .kn-reihe{margin-top:clamp(28px,3vw,44px)}
.schluss .gruss-u small{color:var(--gold)}
.schluss .gruss-u b{font-size:clamp(1.7rem,2.5vw,2.6rem)}
@media(max-width:900px){.schluss__b{position:absolute}}

/* ---------- Fuss ---------- */
.fuss{position:relative;background:var(--tief);padding:clamp(40px,5vw,70px) var(--rand);color:rgba(255,255,255,.62);font-size:.95rem}
.fuss .in{display:grid;gap:24px}
@media(min-width:860px){.fuss .fuss__u{grid-template-columns:1fr 1fr;align-items:end}}
.fuss b{display:block;font-family:var(--serif);font-weight:400;font-size:1.4rem;color:#ffffff;margin-bottom:6px}
.fuss p{max-width:58ch}
.fuss .r{display:flex;flex-wrap:wrap;gap:8px 26px}
.fuss .r a:hover{color:#ffffff}
@media(min-width:860px){.fuss .r{justify-content:flex-end}}
.fuss .wege{display:block;padding-bottom:clamp(34px,4vw,60px);margin-bottom:clamp(30px,3.6vw,54px);border-bottom:1px solid rgba(227,210,166,.22)}
.fuss .wege__t{font-size:clamp(1.7rem,2.4vw,2.4rem);margin-bottom:clamp(18px,2vw,28px)}
.wege__r{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.zielk{display:block;color:#ffffff}
.zielk__b{display:block;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#122032;box-shadow:inset 0 0 0 1px rgba(227,210,166,.22);transition:transform .7s var(--e2)}
.zielk__b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e2)}
.zielk:hover .zielk__b{transform:translateY(-6px)}
.zielk:hover .zielk__b img{transform:scale(1.05)}
.zielk__z{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.fuss .zielk__z b{margin:0;font-size:clamp(1rem,1.25vw,1.3rem);line-height:1.1;min-width:0;overflow-wrap:anywhere}
.zielk__z i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#f7f2e8,#d8ccac);color:var(--tinte);box-shadow:0 6px 10px -6px rgba(0,0,0,.8);transition:transform .5s var(--e2)}
.zielk__z i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5}
.zielk:hover .zielk__z i{transform:translate(2px,-2px)}
@media(min-width:1101px){.wege__r:has(> :nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr))}}   /* acht Ziele (mit Studio und Anleitung): zwei Reihen zu vier */
@media(max-width:1100px){.wege__r{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}}
@media(max-width:560px){.wege__r{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-a],.z>span,[data-a="worte"] .wt,.blattk,.kap[data-a] i{opacity:1!important;transform:none!important}
  .tor{display:none}.leiste{transform:none}
}
@media print{[data-a],.z>span,[data-a="worte"] .wt{opacity:1!important;transform:none!important}.leiste,.gang-linie,.tor{display:none}}

/* ---------- Feed: das Handy in der Mitte, acht Beiträge als Abzüge rundherum (keiner verdeckt einen anderen) ---------- */
.feedb{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
@media(min-width:1000px){.feedb{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr)}}
.feedb .t2{font-size:clamp(2.1rem,3.9vw,4.1rem)}
.feedb__r{position:relative;aspect-ratio:1/.88;width:100%;max-width:920px;justify-self:center}
.feedb__r>*{position:absolute;will-change:transform}
.feedb__h{left:33.5%;top:5%;width:33%}
.feedb__h img{width:100%;height:auto;filter:drop-shadow(0 40px 40px rgba(0,0,0,.55))}
.feedb__k{width:15%;padding:5px 5px 26px}
.feedb__k img{aspect-ratio:3/4;width:100%;height:auto}
.feedb__k span{font-size:10.5px;bottom:7px}
.feedb__k--1{left:0;top:3%}.feedb__k--2{left:16.5%;top:20%}.feedb__k--3{left:1%;top:53%}.feedb__k--4{left:17%;top:66%}
.feedb__k--5{left:68.5%;top:12%}.feedb__k--6{left:85%;top:0}.feedb__k--7{left:68%;top:61%}.feedb__k--8{left:84.5%;top:47%}
@media(max-width:700px){
  .feedb__r{aspect-ratio:1/1.2}
  .feedb__h{left:26%;width:48%;top:3%}
  .feedb__k{width:22%;padding:4px 4px 20px}.feedb__k span{font-size:9px;bottom:5px}
  .feedb__k--1{left:0;top:2%}.feedb__k--2{left:1%;top:35%}.feedb__k--3{left:0;top:68%}
  .feedb__k--5{left:78%;top:6%}.feedb__k--6{left:77%;top:39%}.feedb__k--7{left:78%;top:71%}
  .feedb__k--4,.feedb__k--8{display:none}
}
/* weniger Luft zwischen «Alles liegt für Sie bereit» und «Was noch dazukommt» */
#material{padding-bottom:calc(clamp(56px,5.6vw,92px) + var(--rund))}
#dazu{padding-top:clamp(56px,5.6vw,92px)}

/* ---------- Unterschrift im Brief: wie der Gastgeber-Block der Website (rundes Bild im hellen Ring, Text, Linie, Name) ---------- */
.gastgeber{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"b t" "b n";column-gap:clamp(22px,2.4vw,36px);row-gap:14px;align-items:center;margin-top:clamp(28px,3vw,44px);max-width:660px}
.gastgeber__b{grid-area:b;align-self:center;flex:none;width:clamp(104px,8.6vw,134px);height:clamp(104px,8.6vw,134px);margin-left:7px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,28,44,.17),0 0 0 6px #fdfaf3,0 0 0 7px rgba(16,28,44,.17),0 22px 28px -16px rgba(80,66,28,.62)}
.gastgeber__b img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.gastgeber__t{grid-area:t;align-self:end;margin:0;font-size:clamp(1.12rem,1.38vw,1.4rem);line-height:1.64;color:rgba(16,22,30,.84)}
.gastgeber__n{grid-area:n;align-self:start;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding-top:14px;border-top:1px solid rgba(16,28,44,.17)}
.gastgeber__n b{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2vw,2rem);line-height:1.2}
.gastgeber__n span{font-size:1.04rem;color:rgba(16,22,30,.72)}
@media(max-width:600px){
  .gastgeber{grid-template-areas:"t t" "b n";column-gap:18px;row-gap:22px}
  .gastgeber__b{width:92px;height:92px}
  .gastgeber__n{display:grid;border-top:0;padding-top:0;align-self:center}
}

/* ---------- Werkbank-Kit: Fächer mit zwei oder drei Blättern ---------- */
.faecher--2 .blattk--1{left:13%}.faecher--2 .blattk--2{left:45%;top:3%}
.da .faecher--2 .blattk--1,.faecher--2.da .blattk--1{transform:rotate(-6deg)}.da .faecher--2 .blattk--2,.faecher--2.da .blattk--2{transform:rotate(4deg)}
.faecher--2.da .blattk--1:hover{transform:rotate(-6deg) translateY(-22px)}.faecher--2.da .blattk--2:hover{transform:rotate(4deg) translateY(-22px)}
.faecher--3 .blattk--1{left:4%}.faecher--3 .blattk--2{left:31%;top:3%}.faecher--3 .blattk--3{left:58%;top:5%}
.faecher--3.da .blattk--1{transform:rotate(-8deg)}.faecher--3.da .blattk--2{transform:rotate(-1deg)}.faecher--3.da .blattk--3{transform:rotate(7deg)}
.faecher--3.da .blattk--1:hover{transform:rotate(-8deg) translateY(-22px)}.faecher--3.da .blattk--2:hover{transform:rotate(-1deg) translateY(-22px)}.faecher--3.da .blattk--3:hover{transform:rotate(7deg) translateY(-22px)}
.zeile__z .tr{flex:none;width:.34em;height:.34em;border-radius:50%;background:var(--messing)}

/* ================================================================ Je Haus eine eigene Werkbank (09.10.2026) ================================================================
   Vier Bühnen für den Auftakt (stapel steht oben), ein kurzer Brief, drei Auslagen für den Feed. Bewegt wird weiter nur über transform und opacity. */

/* ---------- Auftakt «titelblatt»: ein Foto über die ganze Fläche, Kopfzeile, Inhaltsverzeichnis wie in einem Hausmagazin ---------- */
.auftakt--titelblatt{background:var(--nacht)}
.tb__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.auftakt--titelblatt>.in{z-index:1}
.auftakt .in.tb__kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:auto;padding-bottom:16px;border-bottom:1px solid rgba(227,210,166,.45);color:rgba(255,255,255,.82);font-size:11.5px}
.tb__kopf svg{flex:none;height:30px;width:auto;color:var(--gold)}
.tb__kopf span:last-child{text-align:right}
.auftakt .in.tb{margin-top:clamp(44px,8vh,96px);align-items:end}
@media(min-width:1080px){.auftakt .in.tb{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}}
.tb__r{position:relative;justify-self:end;width:100%;max-width:640px;padding-right:28%}
.tb__inhalt{position:relative;display:block;background:var(--papier);color:var(--tinte);padding:clamp(20px,2vw,30px) clamp(20px,2.2vw,32px) clamp(10px,1vw,16px);border-radius:3px;box-shadow:0 40px 50px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(119,99,48,.16)}
.tb__it{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);padding-bottom:13px;border-bottom:2px solid var(--tinte)}
.tb__inhalt a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(16,22,30,.16)}
.tb__inhalt a:last-child{border-bottom:0}
.tb__inhalt a b{font-family:var(--serif);font-weight:400;font-size:clamp(1.16rem,1.42vw,1.42rem);line-height:1.15}
.tb__inhalt a small{grid-column:1;font-size:.92rem;line-height:1.35;color:rgba(16,22,30,.72)}
.tb__inhalt a svg{grid-column:2;grid-row:1/3;width:15px;height:15px;stroke:currentColor;stroke-width:1.2;fill:none;transition:transform .5s var(--e1)}
.tb__inhalt a:hover svg{transform:translate(3px,-3px)}
.tb__r>.abzug,.tb__r>.tel{position:absolute;will-change:transform}
.tb__a--1{right:-2%;top:-19%;width:29%;--r:6deg;--r0:16deg;--i:9;z-index:2}
.tb__a--2{left:-17%;top:34%;width:21%;--r:-6deg;--r0:-16deg;--i:7}
.tb__r>.tel{right:1%;bottom:-3%;width:24.5%;--r:4deg;--r0:12deg;--i:8;border-radius:26px;padding:5px}
.tb__r>.tel img{border-radius:21px}
@media(max-width:1079px){.tb__r{justify-self:center;margin-top:60px}.tb__a--2{display:none}.tb__bild{object-position:14% 50%}}
@media(max-width:560px){.tb__r{padding-right:0;margin-top:26px}.tb__r>.abzug,.tb__r>.tel{display:none}.tb__kopf svg{display:none}.auftakt .in.tb__kopf{font-size:10px;letter-spacing:.1em}}

/* ---------- Auftakt «karte»: was es gibt, als Karte auf dem Tisch, mit Punktlinie und Zahl ---------- */
.auftakt .in.kt{align-items:center}
@media(min-width:1080px){.auftakt .in.kt{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.kt__tisch{position:relative;container-type:inline-size;width:100%;max-width:760px;justify-self:end;aspect-ratio:1/.92}
.kt__tisch>*{position:absolute;will-change:transform}
.kt__karte{left:24.5%;top:3%;width:51%;min-height:92%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8.5cqw 5.4cqw 5.4cqw;font-size:clamp(10.5px,2.16cqw,16.5px);
  background:var(--papier);color:var(--tinte);box-shadow:0 44px 50px -30px rgba(0,0,0,.92)}
.kt__karte::before{content:'';position:absolute;inset:1.5cqw;border:1px solid rgba(149,129,75,.55);pointer-events:none}
.kt__karte>svg{height:7.4cqw;width:auto;color:var(--taupe);flex:none}
.kt__t{font-family:var(--serif);font-size:2.3em;line-height:1.05;margin-top:.5em}
.kt__u{font-size:.62em!important;letter-spacing:.2em;color:var(--taupe);margin-top:.9em;padding-bottom:1.5em;border-bottom:3px double rgba(149,129,75,.7);width:100%}
.kt__karte a{display:flex;align-items:baseline;gap:.5em;width:100%;text-align:left;padding:.62em 0;line-height:1.2}
.kt__karte a:first-of-type{margin-top:.8em}
.kt__karte a i{flex:1;min-width:1em;border-bottom:1.5px dotted rgba(16,22,30,.45);transform:translateY(-.24em)}
.kt__karte a b{font-family:var(--serif);font-weight:400;font-size:1.36em;line-height:1}
.kt__karte a span{transition:color .4s}
.kt__karte a:hover span{color:var(--taupe)}
.kt__f{margin-top:auto;padding-top:1.3em;font-size:.86em;line-height:1.4;color:rgba(16,22,30,.7);max-width:24ch}
.kt__a--1{left:0;top:0;width:27%;--r:-8deg;--r0:-20deg;--i:4}
.kt__a--2{right:0;top:5%;width:25.5%;--r:7deg;--r0:18deg;--i:5}
.kt__a--3{left:2.5%;bottom:2%;width:24.5%;--r:5deg;--r0:14deg;--i:6}
.kt__tisch>.tel{right:4%;bottom:-2%;width:19.5%;--r:-4deg;--r0:-12deg;--i:7;border-radius:26px;padding:5px;animation:wieg 7s ease-in-out 4.4s infinite alternate}
.kt__tisch>.tel img{border-radius:21px}
@media(max-width:1079px){.kt__tisch{max-width:620px;justify-self:center;margin-top:26px}}
@media(max-width:560px){.kt__tisch{aspect-ratio:1/1.24}.kt__karte{left:15%;width:70%;font-size:11.5px;padding:30px 18px 18px}.kt__karte>svg{height:30px}.kt__a--1{width:25%}.kt__a--2{width:24%;top:9%}.kt__a--3{width:23%}.kt__tisch>.tel{width:19%;right:-1%;bottom:-7%}}

/* ---------- Auftakt «weg»: vier Abzüge steigen von links unten an, oben rechts steht die neue Seite ---------- */
.auftakt--weg h1{font-size:clamp(2.7rem,4.9vw,5.2rem)}
.auftakt .in.wg__kopf{align-items:end}
@media(min-width:1080px){.auftakt .in.wg__kopf{grid-template-columns:minmax(0,1fr) minmax(0,.74fr)}}
.wg__t .lauf{margin-top:0}
.auftakt .in.wg{display:block;position:relative;margin-top:clamp(30px,4.6vh,58px);aspect-ratio:1/.3}
.wg>*{position:absolute;will-change:transform}
.wg__linie{left:0;top:0;width:100%;height:100%;overflow:visible}
.wg__linie path{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.75}
.wg__s{width:11.4%}
.wg__s--1{left:0;bottom:0;--r:-5deg;--r0:-14deg;--i:2}
.wg__s--2{left:15%;bottom:15%;--r:4deg;--r0:12deg;--i:3}
.wg__s--3{left:30.5%;bottom:31%;--r:-3deg;--r0:-10deg;--i:4}
.wg__s--4{left:46%;bottom:47%;--r:5deg;--r0:14deg;--i:5}
.wg__ziel{right:0;top:0;width:36.5%}
.wg__ziel .tel{position:absolute;right:-2.5%;bottom:-14%;width:24%;--r:4deg;--r0:12deg;--i:8;border-radius:24px;padding:5px;animation:wieg 7s ease-in-out 4.4s infinite alternate}
.wg__ziel .tel img{border-radius:19px}
@media(max-width:1079px){.auftakt .in.wg{aspect-ratio:1/.36}.wg__s{width:13%}.wg__ziel{width:40%}}
@media(max-width:760px){
  .auftakt .in.wg{aspect-ratio:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:34px}
  .wg>*{position:relative}.wg__linie{display:none}
  .wg__s{width:auto;left:auto;bottom:auto}
  .wg__ziel{grid-column:1/-1;order:-1;width:100%;margin-bottom:34px}
  .wg__ziel .tel{bottom:-9%;right:1%}
}

/* ---------- Brief «kurz»: nur, was dieses Haus betrifft, daneben das Haus und zwei Abzüge ---------- */
.brief--kurz .brief__r{display:block}
.brief__a{position:absolute;will-change:transform}
.brief__a--1{right:-6%;bottom:-9%;width:31%}
.brief__a--2{left:-8%;top:-8%;width:26%}
@media(min-width:1000px){.brief--links{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.brief--links>div:first-child{order:2}.brief--links .brief__a--1{right:auto;left:-7%}.brief--links .brief__a--2{left:auto;right:-6%}.brief--links .schild{left:auto;right:0;border-radius:22px 0 0 0}}
@media(max-width:700px){.brief__a--1{right:-1%;bottom:-7%}.brief__a--2{left:-1%;top:-6%}}

/* ---------- Unterlagen gespiegelt ---------- */
@media(min-width:1000px){.karten--r{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}.karten--r>div:first-child{order:2}}

/* ---------- Feed, drei weitere Auslagen neben dem Handy ---------- */
.fst span,.fbo span{font-size:10.5px}
.feedb--spalten .feedb__r{aspect-ratio:auto;max-width:none;display:grid;place-items:center;min-height:clamp(540px,50vw,860px)}
.feedb--spalten .feedb__h{position:relative;left:auto;top:auto;width:min(48%,410px);z-index:1}
.feedb--spalten .feedb__h img{filter:drop-shadow(0 46px 44px rgba(0,0,0,.7))}
.feedb--spalten .feedb__r::before{content:'';position:absolute;z-index:0;left:50%;top:50%;width:min(96%,820px);aspect-ratio:1/1.25;translate:-50% -50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,.26) 55%,rgba(0,0,0,0));pointer-events:none}
.fsp{z-index:0;will-change:auto;overflow:hidden;opacity:.34;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,16px);align-items:start;align-content:center;
  left:-9%;right:calc(max(var(--rand),(100vw - var(--max))/2)*-1);top:calc(var(--abschnitt)*-1);bottom:calc((var(--abschnitt) + var(--rund))*-1);padding:0 clamp(8px,1vw,16px) 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000000 34%),linear-gradient(180deg,transparent 0,#000000 16%,#000000 80%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000000 34%),linear-gradient(180deg,transparent 0,#000000 16%,#000000 80%,transparent 100%);mask-composite:intersect}
.fsp__s{display:grid;gap:clamp(8px,1vw,16px)}
.fsp__s:nth-child(1){margin-top:9%}.fsp__s:nth-child(2){margin-top:-12%}.fsp__s:nth-child(3){margin-top:3%}
.fsp__s img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:clamp(6px,.7vw,12px)}
@media(min-width:1000px){.feedb--spalten{align-items:stretch;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.feedb--spalten>div:first-child{align-self:center}}
@media(max-width:999px){
  .feedb--spalten .feedb__r{min-height:0;padding:clamp(30px,8vw,70px) 0 0}
  .feedb--spalten .feedb__h{width:min(64%,330px)}
  .fsp{left:calc(var(--rand)*-1);right:calc(var(--rand)*-1);top:-10px;padding:0;opacity:.3;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000000 22%,#000000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000000 22%,#000000 78%,transparent 100%)}
}
.feedb--streifen .feedb__h{left:auto;right:0;top:5%;width:36%}
.fst{left:0;top:2%;width:53%;display:grid;gap:clamp(16px,2.2vw,30px)}
.fst__s{background:#f3eee3;color:var(--tinte);padding:7px 7px 0;box-shadow:0 26px 34px -22px rgba(0,0,0,.85),inset 0 0 0 1px rgba(119,99,48,.16);will-change:transform}
.fst__s>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.fst__s img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.fst__s span{display:block;padding:9px 3px 10px}
.fst__s:nth-child(2){margin-left:9%;margin-right:-9%}
.feedb--bogen .feedb__h{left:1%;top:5%;width:36%}
.fbo{right:0;top:3%;width:56%;background:#f3eee3;color:var(--tinte);padding:11px 11px 0;box-shadow:0 30px 40px -24px rgba(0,0,0,.9),inset 0 0 0 1px rgba(119,99,48,.16)}
.fbo__r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.fbo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.fbo span{display:block;padding:11px 3px 12px}
@media(min-width:1000px){.feedb--bogen,.feedb--streifen{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.feedb--bogen>div:first-child,.feedb--streifen>div:first-child{order:2}}
@media(max-width:700px){
  .feedb--streifen .feedb__r,.feedb--bogen .feedb__r{aspect-ratio:auto;display:grid;gap:30px;justify-items:center}
  .feedb--streifen .feedb__r>*,.feedb--bogen .feedb__r>*{position:relative;left:auto;right:auto;top:auto;width:100%}
  .feedb--streifen .feedb__h,.feedb--bogen .feedb__h{width:62%!important}
  .fst__s:nth-child(2){margin:0}
}

/* ---------- Studio (Kontrollpanel): Schritte links, Film rechts; Klick macht den Film gross ---------- */
.studio{display:grid;gap:clamp(26px,3.4vw,60px);align-items:start}
@media(min-width:1100px){.studio{grid-template-columns:340px minmax(0,1fr)}}
.schritte{display:grid;gap:10px}
.schritt{position:relative;text-align:left;border-radius:22px;padding:18px 20px 20px;overflow:hidden;background:#f9f7f2;color:var(--tinte);box-shadow:inset 0 1px 0 #ffffff,inset 0 0 0 1px rgba(112,99,63,.16);transition:transform .5s var(--e2),background-color .4s,color .4s}
.schritt:hover{transform:translateX(4px)}
.schritt i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#78715e}
.schritt b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;margin:4px 0 4px}
.schritt span{display:block;font-size:.95rem;line-height:1.5;color:rgba(11,12,14,.72)}
.schritt[aria-pressed="true"]{background:var(--navy);color:#ffffff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 30px -24px rgba(19,23,28,.9)}
.schritt[aria-pressed="true"] i{color:var(--gold)} .schritt[aria-pressed="true"] span{color:rgba(255,255,255,.76)}
.schritt u{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--gold);transform:scaleX(var(--f,0));transform-origin:left;text-decoration:none}
@media(max-width:1099px){.schritte{display:flex;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand)*-1);padding:4px var(--rand) 10px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand)}.schritte::-webkit-scrollbar{display:none}.schritt{flex:none;width:min(78vw,300px);scroll-snap-align:start}}
.kino{border-radius:18px;overflow:hidden;background:var(--tief);box-shadow:0 0 0 1px rgba(11,12,14,.2),0 50px 60px -40px rgba(43,37,22,.7)}
.kino__s{position:relative;aspect-ratio:1440/900;background:var(--tief);cursor:pointer}
.kino video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kino__k{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;gap:8px}
.kino__k button{height:38px;padding:0 14px;border-radius:999px;background:var(--navy);color:var(--papier);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);opacity:.86;transition:opacity .3s}
.kino__k button:hover{opacity:1}
.kino__play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#f7f2e8,#d8ccac);box-shadow:inset 0 1px 0 #ffffff,inset 0 -3px 0 rgba(119,99,48,.38),0 20px 30px -14px rgba(0,0,0,.8);transition:transform .5s var(--e2),opacity .3s;pointer-events:none}
.kino__play svg{width:28px;height:28px;fill:currentColor;margin-left:4px}
.kino__play::after{content:attr(data-wort);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.kino--laeuft .kino__play,.kino--gross .kino__play{opacity:0}
.kino__hin{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.kino--gross .kino__hin{opacity:1}
.kino--gross{position:fixed;left:50%;top:50%;z-index:90;width:min(92vw,calc((100vh - 80px)*1.6));transform:translate(-50%,-50%);box-shadow:0 60px 120px -40px #000000}
.kino--gross .kino__k{display:none}
.kinoplatz{display:block}
.kinodunkel{position:fixed;inset:0;z-index:89;background:rgba(13,22,33,.88);opacity:0;pointer-events:none;transition:opacity .5s var(--e1)}
body.kino-offen{overflow:hidden}
@media(max-width:860px){.kino--gross{width:96vw}}
.kinodunkel.an{opacity:1;pointer-events:auto}
.bereiche{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin-top:clamp(26px,3vw,44px)}
.bereiche li{border-radius:18px;padding:16px 18px;background:#f9f7f2;box-shadow:inset 0 1px 0 #ffffff,inset 0 0 0 1px rgba(112,99,63,.14)}
.bereiche b{display:block;font-family:var(--serif);font-weight:400;font-size:1.22rem;line-height:1.15;margin-bottom:4px;color:var(--tinte)}
.bereiche span{font-size:.92rem;line-height:1.45;color:rgba(11,12,14,.72)}
#studio .hinweis{margin-top:clamp(30px,4vw,54px);padding-top:18px;border-top:1px solid rgba(11,12,14,.2);font-size:1rem;color:rgba(11,12,14,.74);max-width:68ch}
/* Studio (14.10.2026, Robert): die Knöpfe sitzen mittig unter dem Film, der Hinweis läuft mittig über die ganze Breite */
.studio__r{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.6vw,40px);min-width:0;align-content:start}
.kn-reihe--mitte{justify-content:center}
#studio .hinweis--breit{max-width:none;text-align:center}
.dazu__z--breit{grid-column:1/-1}

/* Fünf Gaben (mit Studio): eine Reihe am Rechner, darunter zwei Spalten mit der fünften über die ganze Breite, nie eine halb leere Reihe */
@media(min-width:1100px){.gaben--5{grid-template-columns:repeat(5,minmax(0,1fr))}.gaben--5 .gabe{padding:22px}.gaben--5 .gabe b{font-size:clamp(3rem,4.4vw,4.6rem)}.gaben--5 .gabe h3{font-size:1.4rem}}
@media(min-width:700px) and (max-width:1099px){.gaben--5{grid-template-columns:repeat(2,minmax(0,1fr))}.gaben--5 .gabe:last-child{grid-column:1/-1}}
/* Sieben Ziele (mit Studio): am Rechner eine Reihe, dazwischen 4 + 3 mit der letzten Reihe mittig, nie ein einzelnes Stück allein */
@media(min-width:1180px){.wege__r--7{grid-template-columns:repeat(7,minmax(0,1fr))}.wege__r--7 .zielk__z b{font-size:1.1rem}}
@media(min-width:760px) and (max-width:1179px){.wege__r--7{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Sechs Gaben (mit Gästen und Studio): drei Spalten am Rechner, darunter zwei */
@media(min-width:1100px){.gaben--6{grid-template-columns:repeat(3,minmax(0,1fr))}.gaben--6 .gabe{min-height:clamp(380px,28vw,440px)}}
@media(min-width:700px) and (max-width:1099px){.gaben--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Acht bis zehn Ziele in der Link-Galerie: nie eine halb leere Reihe */
@media(min-width:1180px){.wege__r--8{grid-template-columns:repeat(4,minmax(0,1fr))}.wege__r--9{grid-template-columns:repeat(3,minmax(0,1fr))}.wege__r--10{grid-template-columns:repeat(5,minmax(0,1fr))}.wege__r--10 .zielk__z b{font-size:1.05rem}}
@media(min-width:760px) and (max-width:1179px){.wege__r--8,.wege__r--10{grid-template-columns:repeat(4,minmax(0,1fr))}.wege__r--9{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Studio: Standbilder unter den Filmen ---------- */
.studio__bilder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(26px,3vw,44px)}
.studio__bilder figure{margin:0;border-radius:16px;overflow:hidden;background:var(--tief);box-shadow:0 0 0 1px rgba(227,210,166,.25),0 30px 40px -30px rgba(13,22,33,.8)}
.studio__bilder img{width:100%;height:auto;display:block}
.studio__bilder figcaption{padding:12px 16px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);background:var(--navy)}
.studio__bilder--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.studio__bilder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.studio__bilder{grid-template-columns:1fr}}

/* ---------- Für Ihre Gäste: Band wie bei den Ideen, darunter drei Handys nebeneinander, in jedem lässt sich die Seite scrollen ---------- */
.gf .idee__b{aspect-ratio:16/10}
.gf .idee__b img{object-position:var(--op,50% 0);transform:none;transition:none}  /* viele grosse Bilder ohne Dauer-Zoom: schont schwache Geräte */
.gf__tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,40px);justify-items:center;align-items:start;margin-top:clamp(34px,4vw,60px);max-width:900px;margin-inline:auto}
.gf__tel figure{margin:0;text-align:center;color:rgba(255,255,255,.72);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.gf__tel figcaption{margin-top:14px}
.gf__tel .tel{width:min(100%,250px);--i:0}
.gf__tel .tel+.tel{--i:1}.gf__tel .tel+.tel+.tel{--i:2}
.gf__tel .tel>div{height:470px;overflow-y:auto;overflow-x:hidden;border-radius:27px;background:var(--tief);scrollbar-width:none;overscroll-behavior:contain}
.gf__tel .tel>div::-webkit-scrollbar{display:none}
.gf__tel .tel>div img{border-radius:0;width:100%;height:auto}
.gf__tel .scroll{display:block;margin:10px auto 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
@media(max-width:700px){.gf__tel{grid-template-columns:1fr}.gf__tel .tel{width:min(100%,260px)}}

/* ---------- Rezeption im Chat: dunkle Bühne, der Film links, die Punkte rechts in Gold ---------- */
.chatb{display:grid;gap:clamp(30px,4vw,70px);align-items:start}
@media(min-width:1000px){.chatb{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.chatb .kino__s{aspect-ratio:1200/900}
.chatb .kino--gross{width:min(94vw,calc((100vh - 110px)*1.333))}
.chatb .kino--gross .kino__s{aspect-ratio:1200/900}
.chatb .kino{box-shadow:0 0 0 1px rgba(227,210,166,.35),0 0 0 7px rgba(227,210,166,.06),0 70px 90px -50px #000000}
.punkte{display:grid;gap:2px}
.punkte li{padding:clamp(16px,1.8vw,24px) 0;border-top:1px solid rgba(227,210,166,.22);display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:start}
.punkte li:last-child{border-bottom:1px solid rgba(227,210,166,.22)}
.punkte i{font-style:normal;font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--gold);padding-top:2px}
.punkte b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.8vw,1.75rem);line-height:1.12;margin-bottom:6px;color:#ffffff}
.punkte p{color:rgba(255,255,255,.76);font-size:1rem;line-height:1.5;max-width:46ch}
.chatb__gross{display:grid;gap:14px;margin-top:clamp(22px,2.6vw,36px)}
.chatb__gross .kn{justify-self:start}
.chatb__dazu{display:grid;gap:clamp(14px,1.8vw,24px);margin-top:clamp(34px,4vw,64px)}
@media(min-width:900px){.chatb__dazu{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cz{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--tief);color:#ffffff;box-shadow:inset 0 0 0 1px rgba(227,210,166,.26),0 34px 40px -30px #000000}
.cz__b{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tief);display:grid;place-items:center}
.cz__b img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cz__b--tel{padding:22px 0 0}
.cz__b--tel img{width:46%;height:auto;object-fit:contain;border-radius:20px;box-shadow:0 0 0 6px #070b12,0 0 0 7px rgba(227,210,166,.3),0 30px 40px -24px #000000}
.cz__b--qr{background:var(--creme)}
.cz__b--qr img{width:62%;height:auto;object-fit:contain;box-shadow:0 26px 30px -20px rgba(43,34,11,.6)}
.cz__t{padding:22px 24px 26px;display:grid;gap:8px}
.cz__t small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cz__t h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1.12}
.cz__t p{color:rgba(255,255,255,.84);font-size:.98rem;line-height:1.5}
.cz .pfeil{margin-top:auto}
.qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:18px 20px;border-radius:18px;background:#ffffff;color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(16,22,30,.12)}
.qr svg{width:88px;height:88px;display:block}
.qr b{display:block;font-family:var(--serif);font-weight:400;font-size:1.1rem;line-height:1.15}
.qr span{display:block;font-size:.9rem;color:rgba(16,22,30,.7);margin-top:4px}
#rezeption .hinweis--dunkel{margin-top:clamp(30px,4vw,54px);padding-top:18px;border-top:1px solid rgba(227,210,166,.22);font-size:1rem;color:rgba(255,255,255,.7);max-width:68ch}

/* ---------- Geprüft ---------- */
.gepr{display:grid;gap:clamp(14px,1.8vw,24px)}
@media(min-width:900px){.gepr{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gk{position:relative;display:flex;flex-direction:column;border-radius:26px;padding:clamp(24px,2.6vw,36px);background:rgba(13,22,33,.55);color:#ffffff;box-shadow:inset 0 0 0 1px rgba(227,210,166,.28),0 34px 40px -30px rgba(0,0,0,.7)}
.gk svg{height:34px;width:auto;color:var(--gold);margin-bottom:22px}
.gk h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.12;margin-bottom:14px}
.gk ul{display:grid;gap:10px;margin-top:auto}
.gk li{position:relative;padding-left:26px;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.45}
.gk li::before{content:'';position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.gepr__f{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:clamp(26px,3vw,44px)}
.gepr__f p{max-width:62ch;color:rgba(255,255,255,.76)}
/* Seite zum Prüfbericht */
.gpk{min-height:62svh;display:flex;align-items:flex-end;padding:clamp(120px,16vh,180px) var(--rand) clamp(40px,6vh,70px);background:var(--nacht) var(--muster) 50% 0/var(--musterb) auto}
.gpk .in{width:100%}
.gpk h1{font-size:clamp(2.7rem,5.4vw,5.6rem)}
.gpk .lauf{margin-top:clamp(22px,2.6vw,36px);max-width:62ch;font-size:clamp(1.08rem,1.3vw,1.3rem)}
.gpk .mono{margin-top:clamp(28px,3vw,44px);color:rgba(255,255,255,.6);display:flex;gap:28px;flex-wrap:wrap}
.gpl{background:var(--papier);color:var(--tinte);padding:clamp(50px,6vw,90px) var(--rand) clamp(80px,9vw,130px)}
.gpl .in{display:grid;gap:clamp(36px,4.6vw,76px);max-width:960px}
.gp{padding-top:clamp(22px,2.6vw,36px);border-top:1px solid rgba(16,22,30,.14)}
.gp__k{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.gp__k svg{width:30px;height:30px;color:var(--taupe);flex:none}
.gp__k .kap{margin:0;color:var(--taupe)}
.gp h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3vw,3rem);line-height:1.1}
.gp__e{margin:10px 0 18px;color:rgba(16,22,30,.7);font-size:1.05rem}
.gp ul{display:grid;gap:12px}
.gp li{position:relative;padding:14px 18px 14px 50px;border-radius:14px;background:#f9f5ee;box-shadow:inset 0 0 0 1px rgba(16,22,30,.1);line-height:1.5;color:rgba(16,22,30,.86)}
.gp li::before{content:'';position:absolute;left:20px;top:22px;width:13px;height:7px;border-left:1.5px solid var(--taupe);border-bottom:1.5px solid var(--taupe);transform:rotate(-45deg)}
.gpf{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-top:clamp(26px,3vw,44px);border-top:1px solid rgba(16,22,30,.14);color:rgba(16,22,30,.7)}
.gpf p{max-width:60ch}
/* heller Knopf auf dunkler Fläche (Rezeption im Chat) */
.kn--hell{background:linear-gradient(180deg,#f7f2e8,#ebe0c5);color:var(--tinte);box-shadow:inset 0 1px 0 #ffffff,inset 0 -3px 0 rgba(119,99,48,.35),0 18px 26px -16px rgba(0,0,0,.7)}
.kn--hell i{color:var(--tinte)}

/* ---------- Knöpfe: kurzer Puls beim Überfahren statt Zug zur Maus (Robert 10.10.2026, Salt & Silver) ---------- */
@keyframes knpuls{0%{scale:1}35%{scale:1.045}100%{scale:1}}
@media (prefers-reduced-motion:reduce){.kn:hover{animation:none}}

/* ---------- Geprüft als Collage: drei echte Fotos des Hauses links, vier Zeilen mit Nummer und Haken rechts, das Wort gross im Hintergrund (Salt & Silver 10.10.2026, Robert: «komplett neu gedacht», keine Bildschirmfotos, keine internen Zahlen) ---------- */
.gp2{overflow:clip}
.gp2__wort{position:absolute;left:50%;top:clamp(40px,6vw,100px);translate:-50% 0;font-family:var(--serif);font-weight:400;font-size:clamp(7rem,17vw,21rem);line-height:.8;letter-spacing:.01em;color:transparent;-webkit-text-stroke:1px rgba(227,210,166,.09);white-space:nowrap;pointer-events:none}
.gp3{display:grid;gap:clamp(40px,5vw,90px);align-items:center}
@media(min-width:1000px){.gp3{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.gt{position:relative;aspect-ratio:1/1.02;min-width:0}
.gt__d{position:absolute}
.gt__d:nth-child(1){left:0;top:4%;width:70%;z-index:1}
.gt__d:nth-child(2){right:0;top:0;width:40%;z-index:2}
.gt__d:nth-child(3){right:4%;bottom:0;width:50%;z-index:3}
.gt__b{position:relative;margin:0;border-radius:30px;padding:7px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(227,210,166,.22),0 50px 70px -40px #000000}
.gt__b img{display:block;width:100%;height:auto;object-fit:cover;border-radius:23px}
.gt__d:nth-child(1) .gt__b img{aspect-ratio:4/5}
.gt__d:nth-child(2) .gt__b img{aspect-ratio:1}
.gt__d:nth-child(3) .gt__b img{aspect-ratio:3/2}
.gt .kerbe{--f:var(--nacht);--e:clamp(16px,1.6vw,24px);position:absolute;z-index:2;left:6px;bottom:6px;padding:clamp(11px,1.1vw,15px) clamp(20px,1.8vw,28px) clamp(9px,.9vw,12px) clamp(14px,1.4vw,20px);border-radius:0 var(--e) 0 0;background:var(--f);color:var(--papier);font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.3vw,1.4rem);line-height:1.1;white-space:nowrap}
.gt .kerbe::before,.gt .kerbe::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),var(--f) var(--e))}
.gt .kerbe::before{left:0;bottom:100%}
.gt .kerbe::after{left:100%;bottom:0}
.gt .gst{position:absolute;right:-9%;bottom:-13%;width:clamp(110px,10vw,160px);height:auto;color:var(--rot);z-index:3;opacity:0;transform:scale(1.8) rotate(4deg)}
.gt__b.da .gst{opacity:.94;transform:scale(1) rotate(-12deg);transition:opacity .18s linear 1.1s,transform .5s cubic-bezier(.3,1.6,.5,1) 1.1s}
.pzl{display:grid;margin-top:clamp(28px,3vw,44px);border-top:1px solid rgba(227,210,166,.18)}
.pz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 clamp(16px,2vw,28px);align-items:start;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid rgba(227,210,166,.18)}
.pz b{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:.9;color:var(--gold);min-width:2.2ch}
.pz h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.8vw,1.8rem);line-height:1.12}
.pz p{margin-top:8px;color:rgba(255,255,255,.78);font-size:.98rem;line-height:1.55;max-width:48ch}
.pz__ok{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#f1ece2,#e3d2a6);display:grid;place-items:center;box-shadow:0 8px 14px -8px rgba(0,0,0,.9);margin-top:4px}
.pz__ok svg{width:16px;height:16px;fill:none;stroke:var(--tinte);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .7s var(--e1) calc(.5s + var(--i)*140ms)}
.pz.da .pz__ok svg{stroke-dashoffset:0}
.gp3__t .t2{font-size:clamp(2.4rem,4.1vw,4.3rem)}
.gp3 .gepr__f{margin-top:clamp(24px,2.6vw,36px);padding-top:0;border-top:0;gap:14px 24px}
@media(max-width:999px){.gt{max-width:560px;margin:0 auto;width:100%} .gt__b{border-radius:22px} .gt__b img{border-radius:16px} .gp2__wort{font-size:clamp(6rem,30vw,12rem)} .gt .gst{bottom:auto;top:-16%;right:-5%;width:clamp(96px,26vw,130px)}}

/* ---------- Schluss: rundes Profilbild vor dem Gruss (Salt & Silver 10.10.2026) ---------- */
.gruss-u--bild{align-items:center;flex-wrap:wrap;row-gap:10px}
.gruss-u--bild small{align-self:center;padding-bottom:0;padding-top:.9em}
.gruss-u__b{flex:none;width:clamp(64px,6.4vw,104px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #e3d2a6,0 18px 30px -16px rgba(0,0,0,.8)}
.gruss-u__b img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.gruss-u--bild .gruss-u__n{display:block}}

/* ---------- Blätterband: nur waagrecht scrollen, sonst fängt es das Mausrad ab (Fund GBR-Werkbank 10.10.2026: 18 px senkrechter Überlauf, Seite blieb stehen) ---------- */
.band{overflow-y:hidden;overscroll-behavior-y:auto}

/* Mails (11.10.2026, Grand Beau-Rivage): hochkante Karten im Band, oberer Teil jeder Mail; darunter die Sprachen */
.ml .idee{width:min(72vw,340px)}
.ml .idee__b{aspect-ratio:3/4}
.ml .idee__b img{object-position:50% 0}
.ml__sprachen{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:clamp(26px,3vw,40px) 0 0}
.ml__sprachen span{padding:8px 15px;border-radius:99px;font-size:13px;line-height:1;color:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(227,210,166,.32)}
.fl--papier .ml__sprachen span,.fl--creme .ml__sprachen span{color:inherit;box-shadow:inset 0 0 0 1px rgba(162,136,70,.4)}

/* Brett «still» (Robert 11.10.2026): ruhiges Raster ohne Linien, erst die gewählte Kachel zeigt ihre Verbindungen */
.brett--still .bl:not(.heiss),.brett--still .bk:not(.heiss),.brett--still.leise .bl:not(.heiss),.brett--still.leise .bk:not(.heiss){opacity:0}
.brett--still .bl.heiss{opacity:1;stroke-width:2} .brett--still .bk.heiss{opacity:1}
.brett--still.leise .bn:not(.heiss){opacity:.38;transition:opacity .35s}
.brett-k__pf{position:absolute;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:15px;color:rgba(237,223,188,.55);pointer-events:none}

/* ---------- Vorher, nachher: Seite für Seite (Robert 11.10.2026) ---------- */
.vh-wahl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand)*-1) clamp(22px,2.6vw,34px);padding:6px var(--rand) 14px}
.vh-wahl::-webkit-scrollbar{display:none}
.vh-wahl button{flex:none;height:46px;padding:0 20px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte);white-space:nowrap;
  background:linear-gradient(180deg,#fefcf9,#ebe5d8);box-shadow:inset 0 1px 0 #ffffff,inset 0 -2px 0 rgba(119,99,48,.22),inset 0 0 0 1px rgba(119,99,48,.16),0 8px 14px -10px rgba(80,66,28,.45);transition:transform .45s var(--e2)}
.vh-wahl button:hover{transform:translateY(-1px)} .vh-wahl button:active{transform:translateY(1px)}
.vh-wahl button[aria-pressed="true"]{color:#ffffff;background:linear-gradient(180deg,#253953,#101c2c 50%,#090f17);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(227,210,166,.5),0 10px 16px -10px rgba(13,22,33,.7)}
.vh-feld{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(28px,3.4vw,56px);align-items:center}
.vh-feld[hidden]{display:none}
.vh-was__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.vh-was h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.1vw,2.1rem);line-height:1.12;margin:0 0 18px}
.vh-was ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.vh-was li{position:relative;padding-left:22px;font-size:1rem;line-height:1.55;opacity:.84}
.vh-was li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
@media(max-width:980px){.vh-feld{grid-template-columns:minmax(0,1fr)}}

/* Freigestellte Bilder (Untersetzer, Aufkleber): Schatten folgt der Form statt einem Rechteck (12.10.2026) */
.bogenb img.frei{box-shadow:none;border-radius:0;filter:drop-shadow(0 14px 12px rgba(39,32,15,.45))}

/* ---------- Eigenes des Hauses ---------- */

.t1,.t2,.t3{font-weight:700;letter-spacing:-.005em}
.insel__m svg{height:26px}
.tapetenband svg{height:clamp(90px,10vw,140px)}
.dazu__gross svg{height:clamp(52px,5.6vw,76px)}
.marke__w{color:var(--blau);max-width:520px}
.zeile__z svg{height:1em}

/* ================= Werkbank Waldhotel Doldenhorn: Grundlage (wb_grund.py, 12.10.2026) ================= */
:root{--schiefer:#384858;--hellgold:#e3d2a6}
/* ---------- Abschnittsköpfe: die drei Tannen in Gold über der Überschrift, alles mittig ---------- */
.kap--z{flex-direction:column;justify-content:center;gap:clamp(14px,1.4vw,20px);text-align:center;margin:0 0 clamp(16px,1.8vw,26px)}
.kap--z span{font-family:var(--mono);font-size:clamp(11px,.82vw,12.5px);letter-spacing:.24em;text-transform:uppercase;margin-right:-.24em}
.kap__z{display:block;flex:none;width:clamp(38px,3.7vw,58px);height:auto;fill:url(#dhgold);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.fl--papier .kap__z,.fl--creme .kap__z{fill:url(#dhgold-t);filter:drop-shadow(0 1px 0 rgba(255,255,255,.8)) drop-shadow(0 6px 9px rgba(110,84,30,.2))}
.fl--papier .kap--z,.fl--creme .kap--z{color:var(--taupe)}
#oben .kap.kap--z~.zt.zt{font-size:clamp(2.1rem,5.3vw,5.7rem);line-height:1.04;text-align:center}
/* Unterseiten (Unterlagen, Drucksachen, Siegel, Material, Feed): ihr Kopf steht links neben den Stücken, dort stehen auch die Tannen links und der Titel behält seine Grösse */
main:not(#oben) :not(.kopfzeile)>:not(.kopfzeile *)>.kap--z,main:not(#oben) .in>.kap--z{align-items:flex-start;text-align:left}
main:not(#oben) .kap--z~.zt .z>span{margin-inline:0}
main:not(#oben) .kopfzeile .kap--z{align-items:center;text-align:center}
main:not(#oben) .kopfzeile .kap.kap--z~.zt.zt{font-size:clamp(2.1rem,4.6vw,4.9rem);line-height:1.04;text-align:center}
main:not(#oben) .kopfzeile .kap--z~.zt .z>span{margin-inline:auto}
/* Prüfbericht: über jeder Überschrift steht nur das Zeichen, nicht noch einmal dasselbe Wort */
.gp__k .kap{display:none}
/* Anleitung zum Studio: der Kopf hat nur eine Spalte, der Titel wurde sonst rechts abgeschnitten */
.auftakt--kurz .in{grid-template-columns:minmax(0,1fr)}
.kopfzeile{display:block;text-align:center;margin-bottom:clamp(52px,6.4vw,104px)}
.kopfzeile .zt .z>span,.kap--z~.zt .z>span{margin-inline:auto}
.kopfzeile .lauf{max-width:60ch;margin:clamp(20px,2.3vw,34px) auto 0;padding-bottom:0}
.fl>.in>.kopfzeile:first-child{padding-top:clamp(6px,1.2vw,20px)}
/* Abschnitte mit Text- und Bildspalte (Unterlagen): der Kopf steht mittig über beiden Spalten */
@media(min-width:1000px){
  .karten{row-gap:0;align-items:start}
  .karten>div:first-child{display:contents}
  .karten>div:first-child>.kap,.karten>div:first-child>.zt{grid-column:1/-1}
  .karten>div:first-child>.zt{margin-bottom:clamp(52px,6.4vw,104px)}
  .karten>div:first-child>.lauf{margin-top:0!important;align-self:end;grid-column:1;grid-row:3}
  .karten>div:first-child>.kn-reihe{align-self:start;grid-column:1;grid-row:4}
  .karten>div:nth-child(2){grid-column:2;grid-row:3/span 2;align-self:center}
}
@media(max-width:999px){.karten>div:first-child{text-align:center}.karten>div:first-child .lauf{margin-inline:auto}.karten>div:first-child .kn-reihe{justify-content:center}}
/* ---------- Tapeten: die Tannen leise auf den ruhigen Flächen, keine Fläche steht ganz ohne Muster neben einer mit ---------- */
.fl--papier.fl--weiss{background-color:var(--weiss)}
.tapete-leicht{background-image:linear-gradient(var(--tl),var(--tl)),var(--muster);background-size:auto,var(--musterb) auto;background-position:0 0,50% 0}
.fl--nacht.tapete-leicht{--tl:rgba(13,22,33,.46)}
.fl--blau.tapete-leicht{--tl:rgba(20,35,55,.42)}
.fl--tief.tapete-leicht{--tl:rgba(7,12,20,.44)}
.fl--navy.tapete-leicht{--tl:rgba(16,28,44,.42)}
.tapete-hell{background-image:linear-gradient(var(--th),var(--th)),url(../assets/img/tapete-stahl-085.png?v=9b3f1e49-dh1410);background-size:auto,150px 170px;background-position:0 0,50% 0}
.fl--papier.tapete-hell{--th:rgba(241,236,226,.42)}
.fl--creme.tapete-hell{--th:rgba(227,219,203,.4)}
.fl--papier.fl--weiss.tapete-hell{--th:rgba(251,248,241,.56)}
/* ---------- Seiten zum Durchblättern am schmalen Handy: die Striche unter dem Bild dürfen umbrechen, sonst wird der Betrachter breiter als der Bildschirm (320 px) ---------- */
@media(max-width:480px){.schau{grid-template-columns:minmax(0,1fr)}.schau__f,.schau__r{min-width:0}.schau__u{flex-wrap:wrap;row-gap:8px}.schau__pk{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:6px}.schau__r{grid-template-columns:110px minmax(0,1fr)}}
/* ---------- Schmale Handys (320 bis 480 px): lange Knöpfe dürfen umbrechen, Spalten werden nie breiter als der Bildschirm ---------- */
@media(max-width:480px){
  .kn{max-width:100%;height:auto;min-height:54px;padding-top:9px;padding-bottom:9px;white-space:normal;line-height:1.3;text-align:left}
  .kn i{flex:none}
  .karten{grid-template-columns:minmax(0,1fr)}.karten>div{min-width:0}
  .gg-fuss .kn{flex:0 1 auto}
}
@media(max-width:380px){#oben .kap.kap--z~.zt.zt,#oben .gg-links .t2{font-size:1.84rem;line-height:1.12}}
/* ---------- Blätterband rollt nur seitlich (es hielt sonst das Mausrad fest) ---------- */
.band{overflow-y:hidden;overscroll-behavior-y:auto}
/* ---------- Auftritte: länger, weicher, von unten; Text, den das Skript erst in Worte zerlegt, bleibt bis dahin unsichtbar ---------- */
[data-a]{transition:opacity 1.05s var(--e1),transform 1.4s var(--e1);transition-delay:calc(var(--vz,0ms) + var(--i,0)*95ms)}
[data-a="kipp"]{transform:perspective(1300px) rotateX(16deg) translateY(70px)}
[data-a="kipp"].da{transform:none}
[data-a="schweb"]{transition-duration:1s,1.7s}
[data-a="hoch"]{opacity:1;transform:translate3d(0,140px,0) scale(.968);transition:transform 2.1s var(--e1);transition-delay:var(--vz,0ms)}   /* grosse Blätter und Geräte kommen deckend herauf, ohne Einblenden */
[data-a="hoch"].da{opacity:1;transform:none}
[data-a="worte"]:not(:has(.wt)){visibility:hidden;animation:wb-worte-doch 0s 6s forwards}
@keyframes wb-worte-doch{to{visibility:visible}}
@media print{[data-a="worte"]{visibility:visible!important;animation:none!important}}
@media (prefers-reduced-motion:reduce){[data-a="hoch"]{opacity:1!important;transform:none!important;transition:none}}
/* ---------- Bei Maus bewegt sich nur das Bild im Rahmen, lang und weich; nichts hebt sich an ---------- */
.zielk:hover .zielk__b{transform:none}
@media (hover:hover){
  .gf .idee .idee__b img,#ideen .idee .idee__b img{transform-origin:50% 30%;transition:transform 2.2s var(--e1)}
  .gf .idee.da:hover .idee__b img,#ideen .idee.da:hover .idee__b img{transform:scale(1.06);transition-duration:2.8s}
}
@media (hover:none){.idee.da:hover .idee__b img{transform:none}}
@media (prefers-reduced-motion:reduce){.idee .idee__b img{transition:none;transform:none!important}}
/* «Für Ihre Gäste» und «Ideen»: Text unter den Bildern mittig und ruhig */
.gf .idee,#ideen .idee{text-align:center}
.gf .idee h3,#ideen .idee h3{margin:28px auto 0;max-width:24ch}
.gf .idee h3::after,#ideen .idee h3::after{content:"";display:block;width:44px;height:1px;margin:16px auto 14px;background:linear-gradient(90deg,transparent,var(--hellgold),transparent)}
.gf .idee p,#ideen .idee p{margin:0 auto;max-width:40ch}
/* ---------- Brett «Wie alles zusammenhängt»: jede Kachel kommt einzeln, weicher und mit längerem Weg ---------- */
#gefuege .bn{transition:opacity .9s var(--e1),transform 1.25s var(--e1)}
#gefuege .brett.vor .bn{opacity:0;transform:translate(-50%,30px)}
#gefuege .bs{transition:opacity .9s var(--e1)}
#gefuege .brett-p{text-align:center}#gefuege .brett-p__k{justify-content:center}
/* ---------- Auftakt: Kacheln statt Abzüge ---------- */
.stapel{container-type:inline-size}
.stapel .tel{z-index:3}
.akz{margin:0;perspective:800px;z-index:2;--f:1;--rad:clamp(12px,2.9cqw,22px)}
.akz__b{display:block;position:relative;aspect-ratio:var(--f);overflow:hidden;border-radius:var(--rad);background:#0f1b2a;
  box-shadow:0 0 0 1px rgba(227,210,166,.2),0 3px 0 #060a11,0 40px 56px -26px rgba(0,0,0,.82),0 14px 22px -12px rgba(0,0,0,.55);
  transform:translateZ(0) rotateX(var(--rx,0deg)) rotateY(calc(var(--by,0deg) + var(--ry,0deg)));transition:transform .8s var(--e2)}
.akz.kipp .akz__b{transition:transform .2s ease-out}
.akz__b>img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.akz__b::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(227,210,166,.2)}
.stapel .akz--a{left:-5%;top:-8%;width:28%;--f:3/2;--r:-3deg;--r0:-12deg;--by:10deg}
.stapel .akz--b{right:4.5%;top:-8%;width:17%;--f:4/5;--r:3deg;--r0:12deg;--by:-10deg}
.stapel .akz--c{left:33%;bottom:1%;width:21%;--f:5/4;--r:2deg;--r0:9deg;--by:8deg}
@media(max-width:560px){.stapel .akz--c{display:none}}
.js .auftakt:not(.sichtbar) .stapel .tel,.js .auftakt:not(.sichtbar) .runter i{animation-play-state:paused}
.leiste.weg .glanz{animation-play-state:paused}
/* ---------- Schluss: alles mittig, das Hausbild steht still, links und rechts ruhig abgedunkelt ---------- */
.schluss::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(7,12,20,.72) 0%,rgba(7,12,20,.56) 42%,rgba(7,12,20,.3) 78%,rgba(7,12,20,.2) 100%)}
.schluss .in{position:relative;z-index:2;text-align:center}
.schluss .lauf{margin-inline:auto}
.schluss .gruss-u,.schluss .kn-reihe{justify-content:center}
.schluss .t1,.schluss .lauf,.schluss .gruss-u{text-shadow:0 2px 18px rgba(0,0,0,.45)}
#oben .schluss .kap--z~.zt.zt{font-size:clamp(2.4rem,6vw,6.4rem)}
/* ---------- Laufband zwischen Schluss und Fuss: Worte des Hauses, läuft nur im Bild, nur transform ---------- */
.wb-band{position:relative;z-index:3;overflow:hidden;background:var(--tief);color:rgba(227,210,166,.78)}
.wb-band::before,.wb-band::after{content:'';position:absolute;left:0;right:0;height:1px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(184,152,80,.5) 14%,rgba(184,152,80,.5) 86%,transparent)}
.wb-band::before{top:0}.wb-band::after{bottom:0}
.wb-band__zug{display:flex;align-items:center;width:max-content;margin:0;padding:0;list-style:none;animation:wbband 90s linear infinite reverse;animation-play-state:paused}
.wb-band.laeuft .wb-band__zug{animation-play-state:running;will-change:transform}
.wb-band li{flex:none;display:flex;align-items:center;height:54px;margin:0;padding:0 30px;font-family:var(--serif);font-weight:700;font-size:clamp(.92rem,1.06vw,1.08rem);line-height:1;letter-spacing:.05em;white-space:nowrap}
.wb-band li.wb-band__z{padding:0 4px;color:var(--messing)}
.wb-band__z svg{display:block;width:auto;height:17px;fill:currentColor}
@keyframes wbband{to{transform:translate3d(-50%,0,0)}}
@media(max-width:860px){.wb-band li{height:46px;padding:0 20px}.wb-band__z svg{height:14px}}
@media(prefers-reduced-motion:reduce){.wb-band__zug{animation:none}}

/* ================= Brief, Mitgebracht, Rund um den Aufenthalt, Ausblick, Geprüft, Fenster (wb_blaetter.py, 12.10.2026) ================= */
/* ---------- Brief: das Haus im Tal über die ganze Breite, der Brief als helles Blatt darüber ---------- */
.bf .in{max-width:1560px}
.bf .kap--z~.zt{margin-bottom:clamp(44px,5.2vw,84px)}
.bf-bild{position:relative;margin:0;border-radius:clamp(22px,2.6vw,38px);overflow:hidden;aspect-ratio:2.05;background:var(--navy);box-shadow:0 50px 70px -52px rgba(15,22,32,.7)}
.bf-bild img{display:block;width:100%;height:100%;object-fit:cover}
.bf-kerbe{position:absolute;right:0;top:0;padding:14px 22px 16px 26px;border-radius:0 0 0 24px;background:var(--papier);font-family:var(--serif);font-weight:700;font-size:clamp(1.02rem,1.3vw,1.36rem);line-height:1.15;color:var(--tinte);text-align:right}
.bf-kerbe::before,.bf-kerbe::after{content:'';position:absolute;width:24px;height:24px;background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--papier) 24px)}
.bf-kerbe::before{left:-24px;top:0}.bf-kerbe::after{right:0;bottom:-24px}
.bf-kerbe small{display:block;margin-top:5px;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.bf-blatt{position:relative;z-index:2;width:min(1120px,calc(100% - clamp(0px,6vw,120px)));margin:calc(clamp(60px,11vw,190px)*-1) auto 0;padding:clamp(30px,4.4vw,72px) clamp(24px,5vw,84px) clamp(26px,3.4vw,54px);
  border-radius:clamp(18px,2vw,28px);background:var(--weiss);color:var(--tinte);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(138,112,54,.2),0 60px 80px -54px rgba(15,22,32,.6),0 22px 34px -26px rgba(15,22,32,.3)}
.bf-gross{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.34rem,2.05vw,2.05rem);line-height:1.34;letter-spacing:-.003em;color:var(--tinte);text-wrap:pretty}
.bf-zier{display:flex;align-items:center;gap:18px;margin:clamp(24px,2.8vw,42px) 0}
.bf-zier i{flex:1;height:1px;background:linear-gradient(90deg,rgba(138,112,54,0),rgba(138,112,54,.5))}
.bf-zier i:last-child{background:linear-gradient(90deg,rgba(138,112,54,.5),rgba(138,112,54,0))}
.bf-zz{display:block;width:22px;height:auto;fill:url(#dhgold-t)}
.bf-text{columns:2;column-gap:clamp(30px,4.4vw,72px);font-size:clamp(1.02rem,1.12vw,1.14rem);line-height:1.7;color:rgba(15,22,32,.84)}
.bf-text p{margin:0 0 1.05em;break-inside:avoid}
.bf-text p:last-child{margin-bottom:0}
.bf-fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:clamp(26px,3vw,44px);padding-top:clamp(20px,2.2vw,30px);border-top:1px solid rgba(138,112,54,.3)}
.bf-gruss{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.8rem);line-height:1.15;color:var(--tinte)}
.bf-name{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.bf-name img.bf-sig{display:block;width:clamp(150px,15vw,214px);height:auto;background:none!important}
.bf-name span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
/* das Blatt steigt mit dem Scrollen herauf und ist dabei immer ganz zu sehen; ohne Scroll-Zeitachse fährt es einmal hoch */
.bf .bf-blatt[data-a="hoch"]{opacity:1;transition-delay:0s}
@supports (animation-timeline: view()){
  .bf .bf-blatt[data-a="hoch"],.bf .bf-blatt[data-a="hoch"].da{transition:none;animation:bfBlattHoch cubic-bezier(.3,.25,.4,1) both;animation-timeline:view();animation-range:entry 0% cover 34%}
  @keyframes bfBlattHoch{from{transform:translate3d(0,150px,0) scale(.975)}to{transform:none}}
}
@media(max-width:820px){.bf-text{columns:1}.bf-bild{aspect-ratio:1.5}.bf-blatt{margin-top:-44px;width:calc(100% - 20px)}.bf-fuss{flex-direction:column;align-items:flex-start}.bf-name{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.bf .bf-blatt[data-a="hoch"]{animation:none;transform:none}}

/* ---------- «Mitgebracht»: Kacheln mit Kuhle. Das Foto bleibt hell, die Zahl sitzt in einer Einkerbung, der Text hat seine eigene Fläche ---------- */
.gaben--kuhle{gap:clamp(12px,1.3vw,18px)}
.gku{display:flex;flex-direction:column;border-radius:30px;padding:7px;color:#fff;background:#16263b;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(227,210,166,.15),0 40px 50px -36px rgba(0,0,0,.9)}
.gku__f{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3}
.gku__f img{display:block;width:100%;height:100%;object-fit:cover}
.gku__kerbe{position:absolute;left:0;bottom:0;padding:10px 20px 4px 16px;border-radius:0 22px 0 0;background:#16263b;display:flex;align-items:baseline;gap:10px}
.gku__kerbe::before,.gku__kerbe::after{content:'';position:absolute;width:22px;height:22px;background:radial-gradient(circle at 100% 0,transparent 21.5px,#16263b 22px)}
.gku__kerbe::before{left:0;top:-22px}.gku__kerbe::after{right:-22px;bottom:0}
.gku__kerbe b{font-family:var(--serif);font-weight:700;font-size:clamp(2.5rem,3.3vw,3.5rem);line-height:.92;color:var(--gold);white-space:nowrap}
.gku__ein{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(227,210,166,.82)}
.gku__kuhle{flex:1;display:flex;flex-direction:column;margin-top:7px;border-radius:22px;padding:22px 20px 18px;background:#0b1522;box-shadow:inset 0 2px 6px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.05)}
.gku__kuhle h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,1.55vw,1.56rem);line-height:1.14;margin:0 0 10px}
.gku__kuhle p{font-size:.98rem;line-height:1.58;color:rgba(255,255,255,.84);margin:0 0 18px}
.gku__kuhle .pfeil{margin-top:auto;align-self:flex-start;color:var(--gold)}
@media (hover:hover){.gku__f img{transition:transform 2.2s var(--e1)}.gku:hover .gku__f img{transform:scale(1.05);transition-duration:2.8s}}
.gaben--kuhle.gaben--6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1060px){.gaben--kuhle.gaben--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gaben--kuhle.gaben--6{grid-template-columns:1fr}.gku__f{aspect-ratio:16/10}}
#mitgebracht .kopfzeile{margin-bottom:clamp(40px,4.6vw,72px)}
/* Vergleich: die Wahl der Seite steht mittig unter dem Kopf */
.vh-wahl button:first-child{margin-left:auto}.vh-wahl button:last-child{margin-right:auto}

/* ---------- Rund um den Aufenthalt: drei kleine Seiten auf Papier, Bild, Titel, Goldlinie, ein Satz, der Weg zur Seite ---------- */
.ru-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,4.6vw,76px) clamp(22px,2.8vw,48px)}
.ru-k{display:flex;flex-direction:column;text-align:center}
.ru-k__b{display:block;border-radius:clamp(14px,1.4vw,20px);overflow:hidden;aspect-ratio:16/10;background:var(--navy);box-shadow:0 0 0 1px rgba(138,112,54,.3),0 30px 40px -28px rgba(15,22,32,.6),0 10px 18px -12px rgba(15,22,32,.3)}
.ru-k__b img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (hover:hover){.ru-k__b img{transition:transform 2.2s var(--e1)}.ru-k:hover .ru-k__b img{transform:scale(1.05);transition-duration:2.8s}}
.ru-k__w{margin:clamp(22px,2.2vw,30px) 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.ru-k h3{margin:8px auto 0;font-family:var(--serif);font-weight:700;font-size:clamp(1.42rem,1.75vw,1.76rem);line-height:1.14;color:var(--tinte)}
.ru-k h3::after{content:'';display:block;width:44px;height:1px;margin:16px auto 14px;background:linear-gradient(90deg,transparent,var(--taupe),transparent)}
.ru-k p{margin:0 auto;max-width:37ch;font-size:clamp(.96rem,1vw,1.02rem);line-height:1.64;color:rgba(15,22,32,.8)}
.ru-k .ru-k__l{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 24px;margin-top:auto;padding-top:14px;max-width:none}
.ru-k__l .pfeil{color:var(--tinte);white-space:nowrap;margin-top:0}
@media(max-width:900px){.ru-g{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---------- «Was noch dazukommt» als Tafel: Nachtblau mit den Tannen, doppelter Goldrand, oben der Empfang des Hauses und der nächste Schritt ---------- */
.ab .kopfzeile{margin-bottom:clamp(40px,4.6vw,76px)}
.ab-tafel{position:relative;border-radius:clamp(26px,2.6vw,38px);padding:clamp(30px,4.4vw,76px) clamp(22px,4.4vw,76px) clamp(26px,3.6vw,60px);color:#fff;
  background:var(--navy) var(--muster) 50% 0/var(--musterb) auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(138,112,54,.5),0 70px 90px -56px rgba(13,22,33,.85),0 26px 40px -30px rgba(13,22,33,.5)}
.ab-tafel::before,.ab-tafel::after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(227,210,166,.44);border-radius:clamp(16px,1.8vw,26px);inset:clamp(10px,1.1vw,16px)}
.ab-tafel::after{inset:clamp(15px,1.5vw,22px);border-color:rgba(227,210,166,.18);border-radius:clamp(12px,1.5vw,21px)}
.ab .ab-tafel[data-a="hoch"]{opacity:1}
.ab-oben{display:grid;gap:clamp(28px,4.4vw,84px);align-items:center}
@media(min-width:900px){.ab-oben{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}}
.ab-bild{margin:0;border-radius:clamp(16px,1.7vw,24px);overflow:hidden;aspect-ratio:1.3;background:var(--tief);
  box-shadow:0 0 0 1px rgba(227,210,166,.5),0 0 0 7px rgba(16,28,44,.92),0 0 0 8px rgba(227,210,166,.24),0 40px 50px -30px rgba(0,0,0,.95)}
.ab-bild img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover){.ab-bild img{transition:transform 2.2s var(--e1)}.ab-bild:hover img{transform:scale(1.05);transition-duration:2.8s}}
.ab-z{display:block;width:clamp(34px,3vw,46px);height:auto;fill:url(#dhgold);margin-bottom:clamp(16px,1.8vw,26px)}
.ab-schritt small{display:block;font-family:var(--mono);font-size:clamp(11px,.84vw,12.5px);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ab-schritt h3{margin:clamp(12px,1.3vw,20px) 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.02;color:#fbf8f1}
.ab-linie{display:block;width:clamp(56px,5vw,84px);height:1px;margin:clamp(20px,2.2vw,32px) 0;background:linear-gradient(90deg,var(--gold),rgba(227,210,166,0))}
.ab-schritt p{margin:0;max-width:46ch;font-size:clamp(1.02rem,1.12vw,1.14rem);line-height:1.66;color:rgba(255,255,255,.84)}
.ab-trenn{display:flex;align-items:center;justify-content:center;gap:16px;margin:clamp(34px,4.4vw,72px) 0 clamp(8px,1vw,16px)}
.ab-trenn i{flex:1;height:1px;background:linear-gradient(90deg,rgba(227,210,166,0),rgba(227,210,166,.5))}
.ab-trenn i:last-child{background:linear-gradient(90deg,rgba(227,210,166,.5),rgba(227,210,166,0))}
.ab-trenn svg{flex:none;width:16px;height:auto;fill:var(--messing)}
.ab-liste{list-style:none;margin:0;padding:0;display:grid}
.ab-liste li{padding:clamp(22px,2.4vw,36px) 0}
.ab-liste li+li{border-top:1px solid rgba(227,210,166,.18)}
.ab-liste h3{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,1.6vw,1.62rem);line-height:1.16;color:#ecdcb4}
.ab-liste h3::after{content:"";display:block;width:34px;height:1px;margin:14px 0;background:linear-gradient(90deg,var(--gold),rgba(227,210,166,0))}
.ab-liste p{margin:0;max-width:50ch;font-size:clamp(.96rem,1vw,1.02rem);line-height:1.66;color:rgba(255,255,255,.76)}
@media(min-width:760px){
  .ab-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-liste li{padding-inline:clamp(22px,2.8vw,48px)}
  .ab-liste li:nth-child(2n+1){padding-inline-start:0}.ab-liste li:nth-child(2n){padding-inline-end:0;border-inline-start:1px solid rgba(227,210,166,.18)}
  .ab-liste li:nth-child(2){border-top:0}
  .ab-liste li:last-child:nth-child(2n+1){grid-column:1/-1}      /* ein letzter einzelner Punkt läuft über beide Spalten (14.10.2026) */
  .ab-liste li:last-child:nth-child(2n+1) p{max-width:78ch}
}

/* ---------- Geprüft: links Titel und drei Fotos, rechts der Prüfbericht als Blatt mit Goldrahmen, unten rechts das Siegel ---------- */
.gg-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px,5vw,96px);align-items:center}
.gg-links,.gg-rechts{min-width:0}
@media(min-width:1060px){.gg-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.gg-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,24px);max-width:600px;margin-inline:auto}
.gg-f{margin:0}
.gg-f:nth-child(2){translate:0 -18px}
.gg-f__b{position:relative;border-radius:clamp(14px,1.3vw,20px);overflow:hidden;box-shadow:0 0 0 1px rgba(227,210,166,.16),0 30px 40px -22px rgba(0,0,0,.8),0 10px 18px -10px rgba(0,0,0,.5)}
.gg-f__b img{display:block;width:100%;height:auto}
.gg-f__b::after{content:'';position:absolute;inset:6px;border:1px solid rgba(236,220,182,.5);border-radius:clamp(9px,.9vw,14px);pointer-events:none}
.gg-f figcaption{margin-top:12px;text-align:center;font-family:var(--serif);font-weight:700;font-size:clamp(.96rem,1.04vw,1.08rem);line-height:1.2;color:rgba(251,248,241,.92)}
.gg-rechts{position:relative}
.gg-urk{position:relative;padding:clamp(34px,3.4vw,52px) clamp(28px,3.4vw,56px) clamp(28px,2.8vw,40px);border-radius:clamp(18px,1.8vw,26px);color:var(--tinte);
  background:linear-gradient(rgba(251,248,241,.74),rgba(251,248,241,.74)),url(../assets/img/tapete-stahl-085.png?v=9b3f1e49-dh1410) 50% 0/150px 170px,var(--weiss);
  box-shadow:0 0 0 1px rgba(138,112,54,.35),0 50px 70px -34px rgba(0,0,0,.85),0 16px 26px -14px rgba(0,0,0,.5)}
.gg-urk::after{content:'';position:absolute;inset:12px;border:1px solid rgba(138,112,54,.55);border-radius:clamp(10px,1.1vw,16px);box-shadow:inset 0 0 0 3px var(--weiss),inset 0 0 0 4px rgba(138,112,54,.3);pointer-events:none}
.gg .gg-urk[data-a="hoch"]{opacity:1}
.gg-urk>*{position:relative;z-index:1}
.gg-urk__k{text-align:center}
.gg-urk__z{display:block;width:clamp(26px,2.2vw,32px);height:auto;margin:0 auto 12px;fill:url(#dhgold-t)}
.gg-urk__k h3{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2vw,2.05rem);line-height:1.1;color:var(--tinte)}
.gg-urk__k p{margin:8px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.gg-urk__l{list-style:none;margin:clamp(22px,2.2vw,32px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,3vw,48px)}
.gg-p{padding:clamp(16px,1.6vw,22px) 0;border-top:1px solid rgba(138,112,54,.32)}
.gg-p h3{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.14rem,1.3vw,1.34rem);line-height:1.14;color:var(--tinte)}
.gg-haken{flex:none;width:24px;height:24px;color:var(--taupe);overflow:visible}
.gg-haken circle{fill:none;stroke:currentColor;stroke-width:1.6}
.gg-haken path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .9s var(--e1) calc(.5s + var(--i)*160ms)}
.gg-p.da .gg-haken path{stroke-dashoffset:0}
.gg-p p{margin:8px 0 0;font-size:clamp(.92rem,.98vw,1rem);line-height:1.62;color:rgba(15,22,32,.8)}
.gg-urk__f{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:clamp(8px,1vw,14px);padding-top:clamp(18px,1.8vw,24px);border-top:1px solid rgba(138,112,54,.32);font-size:clamp(.94rem,1vw,1.02rem);color:rgba(15,22,32,.74)}
.gg-urk__u{padding-right:clamp(96px,8.4vw,136px);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.gg .gsg{position:absolute;z-index:2;right:clamp(-36px,-2.4vw,-20px);bottom:clamp(-46px,-3vw,-30px);width:clamp(124px,10vw,158px);height:auto;opacity:0;transform:scale(1.5) rotate(6deg);filter:drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.gg-urk.da .gsg{opacity:1;transform:scale(1) rotate(-9deg);transition:opacity .2s linear 1.1s,transform .55s cubic-bezier(.3,1.5,.5,1) 1.1s}
.gg-fuss{display:flex;align-items:center;gap:16px clamp(20px,2.4vw,34px);margin-top:clamp(44px,4.4vw,62px)}
.gg-fuss p{flex:1;min-width:0;max-width:46ch;margin:0;font-size:clamp(1rem,1.06vw,1.1rem);line-height:1.56;color:rgba(251,248,241,.8)}
.gg-fuss .kn{flex:none;margin:0}
@media(max-width:1059px){.gg-links{max-width:640px;margin-inline:auto;width:100%}}
@media(max-width:700px){
  .gg-urk__l{grid-template-columns:1fr}.gg-urk{padding:34px 24px 28px}.gg-urk__u{padding-right:0}
  .gg .gsg{width:104px;right:-6px;bottom:-34px}
  .gg-urk__f{padding-bottom:44px}
  .gg-fuss{flex-direction:column;align-items:flex-start}.gg-f:nth-child(2){translate:0 -10px}
}
@media (prefers-reduced-motion:reduce){.gg .gsg{opacity:1;transform:rotate(-9deg);transition:none}.gg-haken path{stroke-dashoffset:0;transition:none}}

/* ---------- Fenster: stehendes Bild, stehender Satz, der Ausschnitt wandert. Niemand beschneidet (Safari zieht Ausschnitte einen Takt nach):
   Bild und Satz liegen unter den Abschnitten, die deckenden Nachbarn mit ihren runden Ecken geben den Blick frei ---------- */
.wfen{position:relative;min-height:min(84vh,800px);margin-top:calc(var(--rund)*-1);color:#fff}
.wfen::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nacht)}
.wfen__f{position:absolute;left:0;right:0;top:-100vh;top:-100lvh;bottom:-100vh;bottom:-100lvh;pointer-events:none}
.wfen__f>img{position:sticky;top:0;z-index:-1;display:block;width:100%;height:100vh;height:100lvh;object-fit:cover;margin-bottom:-100vh;margin-bottom:-100lvh}
.wfen__in{position:sticky;top:50%;z-index:-1;transform:translateY(-50%);padding:0 var(--rand);text-align:center}
.wfen.weg .wfen__in{visibility:hidden}
.wfen__z{display:block;width:clamp(38px,3.7vw,58px);height:auto;margin:0 auto clamp(18px,2vw,30px);fill:var(--gold)}
.wfen__t{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,5.3vw,5.7rem);line-height:1.05;color:#fff;
  text-shadow:0 .02em .04em rgba(3,8,14,.82),0 .06em .16em rgba(3,8,14,.7),0 .14em .42em rgba(3,8,14,.5)}
.wfen__t span{display:block}
.wfen__t em{font-style:normal;color:var(--gold)}
.wfen__k{margin:clamp(16px,1.8vw,26px) auto 0;max-width:46ch;font-size:clamp(1.08rem,1.4vw,1.44rem);line-height:1.5;color:#fff;text-shadow:0 1px 2px rgba(3,8,14,.92),0 2px 10px rgba(3,8,14,.78)}
.wfen__z,.wfen__t span,.wfen__k{opacity:0;transform:translateY(34px);transition:opacity 1.3s var(--e1),transform 1.7s var(--e1)}
.wfen__t span:nth-child(1){transition-delay:.12s}.wfen__t span:nth-child(2){transition-delay:.24s}.wfen__k{transition-delay:.42s}
.wfen.da .wfen__z,.wfen.da .wfen__t span,.wfen.da .wfen__k{opacity:1;transform:none}
#handschrift,#material{border-radius:var(--rund)}
@media(max-width:860px){.wfen{min-height:62svh}}
@media (prefers-reduced-motion:reduce){.wfen__z,.wfen__t span,.wfen__k{opacity:1;transform:none;transition:none}}

/* ================= Studio im Laptop (wb_studio.py, 12.10.2026) ================= */
.lp-leiste{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(8px,1.2vw,20px)}
.lp-reiter{display:flex;flex-wrap:wrap;gap:10px}
.lp-r{flex:none;padding:13px 22px 14px;border:0;border-radius:999px;cursor:pointer;font-family:var(--serif);font-weight:700;font-size:clamp(.96rem,1.08vw,1.1rem);line-height:1.1;white-space:nowrap;
  color:#fbf8f1;background:linear-gradient(180deg,#1f3350 0%,#101c2c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 1px rgba(227,210,166,.3),0 14px 24px -14px rgba(0,0,0,.85);transition:box-shadow .4s,background .5s,color .4s}
.lp-r:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 1px rgba(227,210,166,.62),0 16px 26px -14px rgba(0,0,0,.9)}
.lp-r[aria-selected="true"]{color:var(--tinte);background:linear-gradient(180deg,#fbf6ea 0%,#e3d2a6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(110,88,44,.35),0 0 0 1px rgba(227,210,166,.9),0 16px 30px -14px rgba(0,0,0,.9)}
.lp-pf{flex:none;display:flex;gap:10px}
.lp-pf button{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--tinte);background:radial-gradient(circle at 35% 30%,#fbf6ea,#cbb98d);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 18px -8px rgba(0,0,0,.6)}
.lp-pf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.lp-buehne{display:grid;gap:clamp(30px,4vw,72px);align-items:center;margin-top:clamp(26px,3vw,48px);touch-action:pan-y}
@media(min-width:1000px){.lp-buehne{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.lp-g{margin-left:clamp(-40px,-2vw,0px)}}
.lp-dev{position:relative;width:100%;opacity:0;transform:translate3d(0,160px,0) scale(.94)}
.lp-dev.da{opacity:1;transform:none;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),transform 2.2s var(--e1)}
.lp-dev__g{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;background:none!important}
.lp-dev__e{position:absolute;z-index:1;overflow:hidden;background:#070c14;outline:0}
.lp-sc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;z-index:1;transition:opacity .38s cubic-bezier(.4,0,.2,1);background:none!important}
.lp-sc.an{opacity:1}
.lp-sc.bleibt{opacity:1!important;transition:none}
.lp-live{position:absolute;left:0;top:0;width:1440px;height:932px;max-width:none;border:0;background:#070c14;transform-origin:0 0;opacity:0;pointer-events:none;z-index:4;transition:opacity .3s linear}
.lp-live.da{opacity:1;pointer-events:auto}
html.lp-ruhe :is(.stapel .tel,.runter i,.zeile__z,.namenzug div,.glanz,.wb-band__zug){animation-play-state:paused!important}
.lp-klick{display:none}
@media(hover:hover) and (pointer:fine){
  .lp-dev__e{cursor:pointer}.lp-dev__e.laedt{cursor:progress}.lp-dev__e.live{cursor:auto}
  .lp-klick{position:absolute;right:2.6%;bottom:4.2%;z-index:3;display:flex;align-items:center;gap:11px;padding:4px 4px 4px 17px;border-radius:999px;pointer-events:none;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--tinte);
    background:linear-gradient(180deg,#fbf6ea 0%,#e3d2a6 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(110,88,44,.35),0 0 0 1px rgba(227,210,166,.9),0 16px 28px -10px rgba(0,0,0,.8),0 3px 9px rgba(0,0,0,.4);transition:opacity .3s,box-shadow .3s}
  .lp-klick i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#1f3350 0%,#101c2c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 5px rgba(0,0,0,.45)}
  .lp-klick svg{width:15px;height:15px;fill:none;stroke:#f0e3c2;stroke-width:1.7;stroke-linejoin:round}
  .lp-klick__b{display:none}
  .lp-dev__e.laedt .lp-klick__a{display:none}.lp-dev__e.laedt .lp-klick__b{display:inline}
  .lp-dev__e:hover .lp-klick,.lp-dev__e:focus-visible .lp-klick{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(110,88,44,.35),0 0 0 2px var(--gold),0 18px 30px -10px rgba(0,0,0,.85),0 3px 9px rgba(0,0,0,.45)}
  .lp-dev__e.live .lp-klick{opacity:0}
}
.lp-hinweis{display:none;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;font-size:.98rem;color:rgba(251,248,241,.72)}
@media(hover:hover) and (pointer:fine){.lp-hinweis{display:flex}}
.lp-hinweis svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linejoin:round}
.lp-texte{display:grid}
.lp-t{grid-area:1/1;width:100%;max-width:33rem;margin-inline:auto;text-align:center;opacity:0;visibility:hidden;transition:opacity .16s linear,visibility 0s .16s}
.lp-t.an{opacity:1;visibility:visible;transition:opacity .3s linear .16s,visibility 0s .16s}
.lp-t>*{translate:0 10px;opacity:0;transition:opacity .16s linear,translate .16s ease}
.lp-t.an>*{translate:0 0;opacity:1;transition:opacity .4s cubic-bezier(.22,.61,.36,1),translate .55s cubic-bezier(.22,.61,.36,1)}
.lp-t.an>:nth-child(1){transition-delay:.16s}.lp-t.an>:nth-child(2){transition-delay:.2s}.lp-t.an>:nth-child(3){transition-delay:.24s}.lp-t.an>:nth-child(4){transition-delay:.28s}.lp-t.an>:nth-child(5){transition-delay:.32s}
.lp-t__r{margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.4vw,20px);font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.lp-t__r::before,.lp-t__r::after{content:'';flex:none;width:clamp(26px,3vw,46px);height:1px;background:rgba(227,210,166,.55)}
.lp-t h3{margin:clamp(16px,1.6vw,22px) 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,3.6vw,3.7rem);line-height:1.02;color:#fbf8f1}
.lp-t h3::after{content:'';display:block;width:clamp(54px,5vw,78px);height:1px;margin:clamp(20px,2vw,28px) auto 0;background:rgba(227,210,166,.7)}
.lp-t__s{margin:clamp(20px,2vw,28px) auto 0;max-width:37ch;font-size:clamp(1.06rem,1.2vw,1.22rem);line-height:1.6;color:rgba(251,248,241,.9);text-wrap:balance}
.lp-t__l{list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;text-align:left;border-bottom:1px solid rgba(227,210,166,.22)}
.lp-t__l li{display:flex;align-items:center;gap:16px;padding:13px 6px;border-top:1px solid rgba(227,210,166,.22);font-size:.98rem;line-height:1.45;color:rgba(251,248,241,.86)}
.lp-h{flex:none;width:22px;height:22px;color:var(--gold)}
.lp-h circle{fill:none;stroke:currentColor;stroke-width:1.6}.lp-h path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lp .lp-t .kn-reihe{justify-content:center;margin-top:clamp(26px,2.8vw,40px)}
.lp-dazu{margin:clamp(40px,4.4vw,70px) auto 0;max-width:74ch;text-align:center;font-size:clamp(1rem,1.08vw,1.1rem);line-height:1.7;color:rgba(251,248,241,.74)}
.lp-dazu b{font-family:var(--serif);font-weight:700;color:var(--gold)}
/* die fünf Filme: eigener kleiner Kopf, darunter der Baustein des Kits */
.lp-filme{margin-top:clamp(64px,7vw,112px)}
.lp-filme__t{margin:0 0 clamp(24px,2.8vw,40px);text-align:center;font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,2.5vw,2.6rem);line-height:1.1;color:#fbf8f1}
.lp-filme__t em{font-style:normal;color:var(--gold)}
/* der Kit setzt den Hinweis im Studio dunkel (dort war der Abschnitt hell); hier steht er auf Nachtblau */
.studio__r{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.6vw,40px);min-width:0;align-content:start}
.kn-reihe--mitte{justify-content:center}
#studio.lp .hinweis{margin-inline:auto;text-align:center;max-width:none;color:rgba(251,248,241,.74);border-top-color:rgba(227,210,166,.22)}
#studio.lp .hinweis a{color:inherit}
.lp>.in>.kn-reihe{justify-content:center}
@media(max-width:700px){.lp-leiste{flex-direction:column;align-items:stretch}.lp-pf{justify-content:flex-end}.lp-reiter{gap:8px}.lp-r{padding:11px 16px 12px}}
@media(prefers-reduced-motion:reduce){.lp-t,.lp-t>*,.lp-sc,.lp-dev{transition:none!important;translate:none!important}.lp-dev{opacity:1;transform:none}}

/* ================= Rezeption im Chat: helle Fläche, links das Handy in 3D, rechts vier Punkte, darunter drei freie Stücke (wb_rezeption.py, 12.10.2026) ================= */
.rzh-b{position:relative;max-width:1560px;margin:0 auto;height:clamp(620px,90svh,880px)}
.rzh-b .tel-pin{position:absolute;inset:0;z-index:0}
.rzh-sch{position:absolute;z-index:-1;left:29.5%;top:91%;width:min(340px,27%);height:44px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(13,22,33,.34),rgba(13,22,33,.13) 56%,rgba(13,22,33,0));opacity:0;transition:opacity 1.6s .15s}
.rzh-b.laeuft .rzh-sch{opacity:1;transition:opacity 1.6s 1.5s}
#rezeption .kopfzeile{margin-bottom:clamp(6px,1.6vw,26px)}
.rzh-b canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.rzh-b.laeuft canvas{opacity:1}
#rezeption #telefon3d-text{position:absolute;z-index:3;top:50%;left:53%;right:max(0px,calc((100% - var(--max))/2));transform:translateY(-50%);max-width:620px}
.rzh-p{list-style:none;margin:0;padding:0}
.rzh-p li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:clamp(14px,1.5vw,22px);align-items:start;padding:clamp(16px,1.7vw,24px) 0;border-top:1px solid rgba(138,112,54,.32)}
.rzh-p li:last-child{border-bottom:1px solid rgba(138,112,54,.32)}
.rzh-z{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#23395a 0%,#101c2c 52%,#070c14 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -3px 0 rgba(0,0,0,.5),0 14px 20px -12px rgba(13,22,33,.6)}
.rzh-z svg{width:25px;height:25px;fill:none;stroke:#e9d9b4;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.rzh-p b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.22rem,1.55vw,1.6rem);line-height:1.14;color:var(--tinte);margin:2px 0 7px}
.rzh-p p{margin:0;font-size:clamp(.98rem,1.04vw,1.06rem);line-height:1.52;color:rgba(15,22,32,.78);max-width:46ch}
.rzh-kn{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(22px,2.4vw,34px)}
@media (max-width:700px){.rzh-kn .kn{max-width:100%;white-space:normal;line-height:1.35;text-align:left}.rzh-kn .kn i{flex:none}}
/* die Zeilen schweben von rechts herein, eine nach der anderen, sobald das Handy steht */
.js #telefon3d-text .rzh-p li,.js #telefon3d-text .rzh-kn{opacity:0;transform:translateX(34px);transition:opacity .9s var(--e1),transform 1.2s var(--e1);transition-delay:calc(var(--i,0)*120ms)}
.js #telefon3d-text.steht .rzh-p li,.js #telefon3d-text.steht .rzh-kn{opacity:1;transform:none}
/* der flache Rahmen mit dem Film: am Handy, und am Rechner als Ausweg, wenn das 3D-Modell nicht kommt. Es steht immer ein Handy da */
.rzh-b .m-telefon{display:none;margin:0}
.rzh-b.rzh--flach canvas,.rzh-b.rzh--flach .rzh-sch{display:none}
.rzh-b.rzh--flach .m-telefon{display:block;position:absolute;left:30%;top:50%;width:min(270px,22vw);transform:translate(-50%,-50%);animation:rzh-flach 1.2s var(--e1) both}
@keyframes rzh-flach{from{transform:translate(-50%,-38%)}to{transform:translate(-50%,-50%)}}
.rzh-b .m-tel-rahmen{padding:10px;border-radius:44px;background:linear-gradient(160deg,#2b2d33,#0d0e11 45%,#1b1c20);box-shadow:0 0 0 1.5px #3a3c42,0 40px 60px -34px rgba(13,22,33,.6)}
.rzh-b .m-tel-film{display:block;width:100%;height:auto;border-radius:34px;background:#0d1621}
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  .rzh-b{height:auto;display:block}
  .rzh-b .tel-pin{position:static;display:flex;flex-direction:column;gap:clamp(30px,7vw,44px)}
  .rzh-b canvas,.rzh-sch{display:none}
  #rezeption .kopfzeile{margin-bottom:clamp(34px,8vw,56px)}
  #rezeption #telefon3d-text{position:static;transform:none;max-width:none;order:2}
  .rzh-b .m-telefon{display:block;order:1;margin:0 auto;width:min(292px,74vw)}
  .rzh-p li{grid-template-columns:46px minmax(0,1fr)}.rzh-z{width:46px;height:46px}.rzh-z svg{width:21px;height:21px}
}
/* drei freie Stücke: Handy, Karte und Seite liegen ohne Fläche auf dem Grund, jedes leicht gedreht, darunter der Text. Unter der Maus bleibt alles liegen */
.rzh-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4.6vw,90px);margin-top:clamp(64px,8vw,136px);align-items:start}
.rzh-s{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--tinte)}
.rzh-s__o{width:100%;height:clamp(300px,31vw,480px);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(30px,3.4vw,54px)}
.rzh-s__h{height:118%;aspect-ratio:890/1560;flex:none}
.rzh-s__h img{display:block;width:100%;height:100%;background:none!important}
.rzh-s__k{height:86%;aspect-ratio:var(--sv,640/902);border-radius:3px;overflow:hidden;box-shadow:0 1px 1px rgba(15,22,32,.1),0 34px 46px -24px rgba(15,22,32,.42),0 12px 18px -12px rgba(15,22,32,.2)}
.rzh-s__b{width:min(100%,540px);aspect-ratio:1280/800;border-radius:clamp(10px,1vw,16px);overflow:hidden;box-shadow:0 1px 1px rgba(15,22,32,.1),0 40px 54px -26px rgba(15,22,32,.46),0 14px 20px -14px rgba(15,22,32,.22)}
.rzh-s__k img,.rzh-s__b img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.rzh-s small{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.rzh-s h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,1.9vw,1.94rem);line-height:1.12;margin:12px 0}
.rzh-s p{margin:0;max-width:36ch;font-size:clamp(.98rem,1.04vw,1.06rem);line-height:1.56;color:rgba(15,22,32,.78)}
.rzh-s .pfeil{margin-top:18px;color:var(--tinte)}
@media (max-width:899px){
  .rzh-st{grid-template-columns:1fr;gap:clamp(64px,14vw,96px)}
  .rzh-s__o{height:clamp(280px,84vw,420px);margin-bottom:30px}
  .rzh-s__b{width:min(100%,440px)}
}
.rzh-hin{margin:clamp(34px,4.2vw,60px) auto 0;padding-top:20px;border-top:1px solid rgba(138,112,54,.32);max-width:70ch;text-align:center;font-size:1rem;line-height:1.58;color:rgba(15,22,32,.74)}
.rzh-hin a{color:inherit}
@media (prefers-reduced-motion:reduce){.js #telefon3d-text .rzh-p li,.js #telefon3d-text .rzh-kn{opacity:1;transform:none;transition:none}.rzh-b.rzh--flach .m-telefon{animation:none}}

/* ================= Instagram: Handy in der Mitte, die Beiträge in drei Spalten (wb_feed.py, 12.10.2026) ================= */
.fd3-b{position:relative;max-width:1400px;margin:0 auto;aspect-ratio:1400/830}
.fd3-sp{position:absolute;top:-34px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(227,210,166,.82);text-align:center;transform:translateX(-50%)}
.fd3-sp--k{left:11.5%}.fd3-sp--h{left:50%}.fd3-sp--s{left:89%}
.fd3-h{position:absolute;left:50%;top:-2%;width:31.89%;margin-left:-15.94%;z-index:3}
.fd3-h__b{position:relative;width:100%;aspect-ratio:890/1560}
.fd3-h img{position:absolute;display:block;height:auto;max-width:none;background:none!important}
.fd3-h .fd3-g{left:0;top:0;width:100%;z-index:2;pointer-events:none}
.fd3-h .fd3-s{z-index:1;left:16.769%;top:9.372%;width:66.067%}
.fd3-e{position:absolute;z-index:1;overflow:hidden;border-radius:4.5% / 2.1%;left:16.769%;top:9.372%;width:66.067%;height:81.282%}
.fd3-e iframe{position:absolute;left:0;top:0;width:393px;height:851px;max-width:none;border:0;background:#000;transform-origin:0 0;opacity:0;pointer-events:none;z-index:3;transition:opacity .3s linear}
.fd3-e iframe.da{opacity:1;pointer-events:auto}
.fd3-k{display:none}
html.fd3-ruhe :is(.stapel .tel,.runter i,.zeile__z,.namenzug div,.glanz,.wb-band__zug){animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine){
  .fd3-e{cursor:pointer}.fd3-e.laedt{cursor:progress}.fd3-e.live{cursor:auto}
  .fd3-k{position:absolute;left:50%;bottom:9.5%;z-index:2;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:3px 3px 3px 13px;border-radius:999px;pointer-events:none;
    font-family:var(--mono);font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--tinte);
    background:linear-gradient(180deg,#fbf6ea 0%,#e3d2a6 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(110,88,44,.35),0 0 0 1px rgba(227,210,166,.9),0 12px 22px -8px rgba(0,0,0,.8),0 3px 8px rgba(0,0,0,.4);transition:opacity .3s}
  .fd3-k i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#1f3350 0%,#101c2c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
  .fd3-k svg{width:12px;height:12px;fill:none;stroke:#f0e3c2;stroke-width:1.7;stroke-linejoin:round}
  .fd3-kb{display:none}.fd3-e.laedt .fd3-ka{display:none}.fd3-e.laedt .fd3-kb{display:inline}
  .fd3-e.live .fd3-k{opacity:0}
}
.fd3-a{position:absolute;width:12.5%;margin:0;z-index:2}
.fd3-a.abzug{padding:7px 7px 30px}
.fd3-a.abzug img{aspect-ratio:4/5}
.fd3-a.abzug span{font-size:11.5px;bottom:8px;font-weight:700}
.fd3-unten{max-width:1080px;margin:clamp(34px,4vw,64px) auto 0;text-align:center}
.fd3-hin{margin:0 0 clamp(22px,2.6vw,38px);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(227,210,166,.8)}
@media(hover:none),(pointer:coarse){.fd3-hin{display:none}}
.fd3-text{columns:2;column-gap:clamp(30px,4.4vw,72px);text-align:left;font-size:clamp(1.04rem,1.16vw,1.18rem);line-height:1.68;color:rgba(255,255,255,.82)}
.fd3-text p{margin:0;break-inside:avoid}
.fd3-unten .kn-reihe{justify-content:center;margin-top:clamp(26px,3vw,42px)}
#feed .kopfzeile{margin-bottom:clamp(64px,7vw,110px)}
@media(max-width:999px){
  .fd3-b{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:22px 12px;max-width:560px}
  .fd3-sp{position:static;transform:none;grid-row:2;margin-top:6px}.fd3-sp--k{grid-column:1}.fd3-sp--h{grid-column:2}.fd3-sp--s{grid-column:3}
  .fd3-h{position:relative;left:auto;top:auto;grid-column:1/-1;grid-row:1;width:min(100%,90.7%);margin:-6.7% auto -6.7%}
  .fd3-a{position:relative;left:auto!important;top:auto!important;width:100%}
  .fd3-a--k{grid-column:1}.fd3-a--h{grid-column:2}.fd3-a--s{grid-column:3}
  .fd3-a.abzug{padding:5px 5px 24px}.fd3-a.abzug span{font-size:10px;bottom:6px}
  .fd3-text{columns:1}
}

/* ================= Handschrift: eine Tafel, in der alles in Bewegung ankommt (wb_marke.py, 12.10.2026) ================= */
.hs3{--hl:rgba(15,22,32,.12)}
.hs3-bogen{border-radius:34px;background:var(--weiss);color:var(--tinte);box-shadow:inset 0 1px 0 #fff,0 50px 70px -50px rgba(0,0,0,.9);overflow:hidden}
.hs3-z{padding:clamp(28px,3.4vw,56px) clamp(22px,3.6vw,60px);border-top:1px solid var(--hl)}
.hs3-z:first-child{border-top:0}
.hs3-etik{display:flex;justify-content:space-between;gap:20px;margin:0 0 clamp(20px,2.4vw,34px);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.hs3-etik span:last-child{color:rgba(15,22,32,.46)}
.hs3-marke{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3.4vw,56px);align-items:center}
.hs3-tafel{border-radius:24px;background:var(--navy) var(--muster) 50% 0/var(--musterb) auto;color:var(--gold);min-height:clamp(260px,24vw,360px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(30px,3vw,48px) 24px;
  box-shadow:inset 0 0 0 1px rgba(227,210,166,.22),inset 0 0 0 7px var(--navy),inset 0 0 0 8px rgba(227,210,166,.14)}
.hs3-zz{display:block;width:clamp(44px,4.4vw,66px);height:auto;margin-bottom:clamp(18px,2vw,28px);fill:url(#dhgold)}
.hs3-ww{display:block;width:min(440px,84%);height:auto;color:#fbf8f1}
.hs3-tafel small{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.36em;margin-right:-.36em;text-transform:uppercase;opacity:.85}
.hs3-marke p{margin:0;font-size:1.02rem;line-height:1.66;color:rgba(15,22,32,.82)}
.hs3-marke dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--hl);font-size:.95rem}
.hs3-marke dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);line-height:2}
.hs3-marke dd{margin:0}
.hs3-schriften{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--hl)}
.hs3-schrift{padding:0 clamp(16px,2.2vw,34px);border-right:1px solid var(--hl);display:flex;flex-direction:column}
.hs3-schrift>small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.hs3-aa{font-size:clamp(4rem,6.4vw,6.6rem);line-height:1;margin:clamp(14px,1.6vw,24px) 0 clamp(10px,1.2vw,16px);color:var(--tinte)}
.hs3-schrift b{font-family:var(--serif);font-weight:700;font-size:1.3rem;line-height:1.15}
.hs3-schrift i{font-style:normal;margin-top:6px;font-size:.94rem;line-height:1.5;color:rgba(15,22,32,.66)}
.hs3-schrift span{margin-top:14px;padding-top:12px;border-top:1px solid var(--hl);font-size:1.02rem;color:rgba(15,22,32,.86)}
.hs3-f-a{font-family:var(--serif);font-weight:700}.hs3-f-s{font-family:var(--sans)}.hs3-f-m{font-family:var(--mono)}
.hs3-schrift span.hs3-f-a{font-size:1.28rem}.hs3-schrift span.hs3-f-m{font-size:.82rem;letter-spacing:.04em}
.hs3-band{display:flex;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hl)}
.hs3-chip{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff}
.hs3-chip i{display:block;height:clamp(84px,8vw,124px);background:var(--c)}
.hs3-chip b{padding:12px 12px 0;font-family:var(--serif);font-weight:700;font-size:1.06rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs3-chip small{padding:2px 12px 0;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:rgba(15,22,32,.55)}
.hs3-chip em{padding:4px 12px 12px;font-style:normal;font-size:.84rem;line-height:1.3;color:rgba(15,22,32,.66)}
.hs3-chip+.hs3-chip{border-left:1px solid var(--hl)}
.hs3-her{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.hs3-her figure{margin:0}
.hs3-bild{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--creme)}
.hs3-bild img{display:block;width:100%;height:100%;object-fit:cover}
.hs3-st{display:flex;height:12px;margin-top:10px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hl)}
.hs3-st i{display:block}
.hs3-her figcaption{margin-top:12px;font-family:var(--serif);font-weight:700;font-size:1.06rem;line-height:1.2}
.hs3-her figcaption small{display:block;margin-top:4px;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,22,32,.55)}
.hs3-unten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.hs3-unten>div{padding:clamp(28px,3.4vw,56px) clamp(22px,3.6vw,60px)}
.hs3-muster{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);background:var(--navy) var(--muster) 50% 0/var(--musterb) auto;color:#fff}
.hs3-muster svg{flex:none;width:clamp(40px,4vw,58px);height:auto;fill:url(#dhgold)}
.hs3-muster .hs3-etik{color:var(--gold);margin-bottom:10px}
.hs3-muster p{margin:0;font-size:1rem;line-height:1.62;color:rgba(255,255,255,.82)}
.hs3-knoepfe p{margin:0 0 20px;font-size:1rem;line-height:1.62;color:rgba(15,22,32,.82)}
.hs3-knoepfe .hs3-etik{margin-bottom:10px}
@media (max-width:1000px){
  .hs3-marke,.hs3-unten{grid-template-columns:1fr}
  .hs3-her{grid-template-columns:repeat(2,1fr)}
  .hs3-band{flex-wrap:wrap}.hs3-chip{flex:1 1 33.33%}.hs3-chip:nth-child(4){border-left:0}.hs3-chip:nth-child(n+4){border-top:1px solid var(--hl)}
}
@media (max-width:640px){
  .hs3-schriften{grid-template-columns:1fr;border-left:0}
  .hs3-schrift{border-right:0;padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--hl)}
  .hs3-schrift:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
  .hs3-chip{flex:1 1 50%}.hs3-chip:nth-child(4){border-left:1px solid var(--hl)}.hs3-chip:nth-child(odd){border-left:0}.hs3-chip:nth-child(n+3){border-top:1px solid var(--hl)}
  .hs3-muster{flex-direction:column;align-items:flex-start}
}
/* ---------- Auftritte: bewegt werden ganze Bausteine (Tafel, Spalte, Foto); einzeln laufen nur die Farbtöne und die Streifen. Nur transform und opacity ---------- */
.hs3.lebt .hs3-z{--fd:cubic-bezier(.28,1.42,.42,1);--ld:cubic-bezier(.2,1.12,.3,1)}
.hs3.lebt :is(.hs3-schrift,.hs3-chip,.hs3-her figure,.hs3-st i):nth-child(1){--k:0}
.hs3.lebt :is(.hs3-schrift,.hs3-chip,.hs3-her figure,.hs3-st i):nth-child(2){--k:1}
.hs3.lebt :is(.hs3-schrift,.hs3-chip,.hs3-her figure,.hs3-st i):nth-child(3){--k:2}
.hs3.lebt :is(.hs3-chip,.hs3-her figure,.hs3-st i):nth-child(4){--k:3}
.hs3.lebt :is(.hs3-chip,.hs3-st i):nth-child(5){--k:4}.hs3.lebt .hs3-chip:nth-child(6){--k:5}
.hs3.lebt .hs3-z>.hs3-etik{opacity:0;transition:opacity 1.1s var(--e2)}
.hs3.lebt .hs3-tafel{translate:0 clamp(70px,8vw,120px);scale:.94;transform-origin:50% 100%;transition:translate 2s var(--fd),scale 2s var(--fd)}
.hs3.lebt .hs3-zz{opacity:0;scale:.6;translate:0 18px;transition:opacity 1.1s var(--e2) .45s,scale 2.1s var(--fd) .45s,translate 2.1s var(--fd) .45s}
.hs3.lebt .hs3-ww{opacity:0;translate:0 22px;transition:opacity 1.1s var(--e2) .9s,translate 1.5s var(--e1) .9s}
.hs3.lebt .hs3-tafel small{opacity:0;transition:opacity 1.2s ease 1.35s}
.hs3.lebt .hs3-marke>div:last-child{opacity:0;translate:0 34px;transition:opacity 1.2s var(--e2) .6s,translate 1.6s var(--e1) .6s}
.hs3.lebt .hs3-schrift{opacity:0;translate:0 clamp(50px,5.4vw,84px);transition:opacity 1s var(--e2),translate 1.9s var(--fd);transition-delay:calc(.1s + var(--k,0)*.14s)}
.hs3.lebt .hs3-band{translate:0 clamp(50px,6vw,90px);scale:.96;transform-origin:50% 100%;transition:translate 1.9s var(--fd),scale 1.9s var(--fd)}
.hs3.lebt .hs3-chip i{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.15s var(--e1);transition-delay:calc(.5s + var(--k,0)*.11s)}
.hs3.lebt .hs3-chip :is(b,small,em){opacity:0;transition:opacity .9s ease;transition-delay:calc(.9s + var(--k,0)*.11s)}
.hs3.lebt .hs3-her figure{opacity:0;translate:var(--fx,0) clamp(90px,10vw,150px);rotate:var(--fw,5deg);scale:.94;transition:opacity .7s var(--e2),translate 1.9s var(--ld),rotate 1.9s var(--ld),scale 1.9s var(--ld);transition-delay:calc(var(--k,0)*.15s)}
.hs3.lebt .hs3-her figure:nth-child(1){--fx:-44px;--fw:-7deg;--f:0}.hs3.lebt .hs3-her figure:nth-child(2){--fx:-16px;--fw:-3deg;--f:1}
.hs3.lebt .hs3-her figure:nth-child(3){--fx:16px;--fw:3deg;--f:2}.hs3.lebt .hs3-her figure:nth-child(4){--fx:44px;--fw:7deg;--f:3}
.hs3.lebt .hs3-bild img{scale:1.14;transition:scale 2.4s var(--e1);transition-delay:calc(var(--k,0)*.15s)}
.hs3.lebt .hs3-st i{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ld);transition-delay:calc(1.2s + var(--f,0)*.15s + var(--k,0)*.11s)}
.hs3.lebt .hs3-unten>div>*{opacity:0;translate:0 30px;transition:opacity 1.2s var(--e2) .1s,translate 1.6s var(--e1) .1s}
.hs3.lebt .hs3-z.da :is(.hs3-etik,.hs3-tafel,.hs3-zz,.hs3-ww,.hs3-marke>div:last-child,.hs3-schrift,.hs3-band,.hs3-chip b,.hs3-chip small,.hs3-chip em,.hs3-her figure),.hs3.lebt .hs3-unten.da>div>*{opacity:1;translate:none;rotate:none;scale:none}
.hs3.lebt .hs3-z.da :is(.hs3-chip i,.hs3-st i){transform:none}
.hs3.lebt .hs3-z.da .hs3-bild img{scale:none}
.hs3.lebt .hs3-z.da .hs3-tafel small{opacity:.85}

/* ================= Die Familie: vier Häuser und ihre gemeinsame Startseite, nur Bilder (wb_vier.py, 12.10.2026) ================= */
.fam{max-width:1300px;margin:0 auto}
.fam-b{position:relative}
.fam-k{margin:0;--rad:clamp(12px,1.5vw,22px)}
.fam-k__b{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--rad);overflow:hidden;background:var(--tief);
  box-shadow:0 0 0 1px rgba(227,210,166,.18),0 3px 0 #060a11,0 40px 56px -28px rgba(0,0,0,.82),0 14px 22px -12px rgba(0,0,0,.55)}
.fam-k__b img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fam-k__b::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(227,210,166,.18)}
/* was eine Idee ist, liegt im Schatten: eine dunkle Fläche über dem Bild, die sich hebt (nur opacity) */
.fam-k__b::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(7,12,20,.66);opacity:0;transition:opacity 1.2s var(--e2)}
.fam.lebt .fam-k:not(.fam-k--hier) .fam-k__b::after{opacity:1}
.fam.lebt.da .fam-k:not(.fam-k--hier) .fam-k__b::after{opacity:0;transition-delay:calc(.9s + var(--w,0)*.3s)}
.fam-k--hier .fam-k__b{box-shadow:0 0 0 1px rgba(227,210,166,.7),0 0 0 6px rgba(16,28,44,.9),0 0 0 7px rgba(227,210,166,.3),0 40px 56px -28px rgba(0,0,0,.82)}
.fam-k__l{display:block;color:inherit;text-decoration:none}
.fam-k__t{display:block;margin-top:clamp(12px,1.3vw,18px);text-align:center}
.fam-k__t b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.08rem,1.4vw,1.46rem);line-height:1.14;color:#fbf8f1}
.fam-k__t span{display:block;margin-top:5px;font-size:clamp(.92rem,1vw,1.02rem);color:rgba(251,248,241,.72)}
.fam-k__t small{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(227,210,166,.7)}
.fam-k--hier .fam-k__t small{color:var(--gold)}
.fam-k--land{width:min(100%,700px);margin:0 auto}
.fam-k--land .fam-k__t b{font-size:clamp(1.3rem,1.9vw,1.96rem)}
/* die Linie: ein Stamm von der Startseite herab, eine Schiene, vier kurze Wege zu den Häusern; sie zieht sich vom Doldenhorn aus (nur transform) */
.fam-l{position:relative;height:clamp(40px,4.6vw,66px);margin:clamp(14px,1.6vw,24px) 0 0}
.fam-l i{position:absolute;background:rgba(227,210,166,.6)}
.fam-l__st{left:50%;top:0;width:1px;height:50%;transform-origin:50% 100%}
.fam-l__sch{left:12.5%;right:12.5%;top:50%;height:1px;transform-origin:0 50%}
.fam-l__w{top:50%;width:1px;height:50%;transform-origin:50% 0}
.fam-l__w:nth-of-type(3){left:12.5%}.fam-l__w:nth-of-type(4){left:37.5%}.fam-l__w:nth-of-type(5){left:62.5%}.fam-l__w:nth-of-type(6){left:87.5%}
.fam.lebt .fam-l__sch{transform:scaleX(0);transition:transform 1.5s var(--e2) .5s}
.fam.lebt .fam-l__st{transform:scaleY(0);transition:transform .7s var(--e2) 1.1s}
.fam.lebt .fam-l__w{transform:scaleY(0);transition:transform .6s var(--e2);transition-delay:calc(.2s + var(--w,0)*.3s)}
.fam.lebt.da .fam-l i{transform:none}
.fam-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,26px)}
.fam-k:nth-child(1){--w:0}.fam-k:nth-child(2){--w:1}.fam-k:nth-child(3){--w:2}.fam-k:nth-child(4){--w:3}.fam-k--land{--w:1.4}
.fam-l__w:nth-of-type(3){--w:0}.fam-l__w:nth-of-type(4){--w:1.6}.fam-l__w:nth-of-type(5){--w:2.6}.fam-l__w:nth-of-type(6){--w:3.6}
@media (hover:hover){.fam-k__l .fam-k__b img{transition:transform 2.2s var(--e1);transform-origin:50% 0}.fam-k__l:hover .fam-k__b img{transform:scale(1.04);transition-duration:2.8s}}
.fam-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,64px);max-width:1080px;margin:clamp(48px,5.4vw,88px) auto 0}
.fam-text p{margin:0;font-size:clamp(1.04rem,1.16vw,1.18rem);line-height:1.68;color:rgba(251,248,241,.84)}
#vier .kopfzeile{margin-bottom:clamp(40px,4.6vw,72px)}
@media(max-width:820px){
  .fam-r{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .fam-l{display:none}.fam-k--land{margin-bottom:28px}
  .fam-text{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fam-k__b::after{opacity:0!important;transition:none}.fam-l i{transform:none!important;transition:none}}

/* ================= Fuss «Alles auf einen Blick» als Fächer (wb_fuss.py, 12.10.2026): nur transform und opacity ================= */
.fuss:has(.wf){background:linear-gradient(rgba(7,12,20,.82),rgba(7,12,20,.82)),var(--muster) 50% 0/var(--musterb) auto,var(--tief)}
.fuss:has(.wf){overflow-x:clip}
.fuss .wf{display:block;text-align:center}
.wf__kopf{display:flex;flex-direction:column;align-items:center}
.fuss .wf .wege__t{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,5.3vw,5.7rem);line-height:1.04;margin:0;color:#fbf8f1}
.wf .wfa{position:relative;margin-top:clamp(10px,1.6vw,30px);outline:none}
.wf .wfa__b{position:relative;height:clamp(240px,34vw,500px)}
.wf .wfa__b::before{content:'';position:absolute;left:50%;top:50%;width:min(70vw,760px);height:min(52vw,560px);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(227,210,166,.1),rgba(227,210,166,.035) 55%,transparent);pointer-events:none}
.wf .fblatt{position:absolute;left:50%;top:0;height:100%;aspect-ratio:1;margin:0;display:block;cursor:pointer;
  --x:0%;--s:.5;--o:0;transform:translateX(calc(-50% + var(--x))) scale(var(--s));opacity:var(--o);pointer-events:none;
  transition:transform .95s cubic-bezier(.2,.8,.2,1),opacity .6s cubic-bezier(.2,.8,.2,1)}
.wf .fblatt img{width:100%;height:100%;object-fit:contain;display:block}
.wf .fblatt[data-p="0"]{--x:0%;--s:1;--o:1;z-index:5;pointer-events:auto}
.wf .fblatt[data-p="-1"]{--x:-74%;--s:.66;--o:.5;z-index:4;pointer-events:auto}
.wf .fblatt[data-p="1"]{--x:74%;--s:.66;--o:.5;z-index:4;pointer-events:auto}
.wf .fblatt[data-p="-2"]{--x:-128%;--s:.46;--o:.2;z-index:3;pointer-events:auto}
.wf .fblatt[data-p="2"]{--x:128%;--s:.46;--o:.2;z-index:3;pointer-events:auto}
.wf .fblatt[data-p="-3"]{--x:-170%}.wf .fblatt[data-p="3"]{--x:170%}
.wf .wfa:not(.da) .fblatt{--x:0%;--s:.7;--o:0}
.wf .wfa__fuss{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,3vw,50px);max-width:820px;margin:0 auto}
.wf .wfa__texte{display:grid;text-align:center}
.wf .wfa__texte>div{grid-area:1/1;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s ease,transform .6s ease,visibility 0s .45s}
.wf .wfa__texte>div.an{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .15s,transform .8s ease .15s}
.wf .wfa__texte h3{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.7rem);line-height:1.1;color:#fbf8f1}
.wf .wfa__texte h3::after{content:'';display:block;width:64px;height:1px;margin:clamp(14px,1.4vw,18px) auto 0;background:linear-gradient(90deg,transparent,rgba(227,210,166,.8),transparent)}
.wf .wfa__texte p{margin:clamp(12px,1.2vw,16px) auto 0;max-width:46ch;font-size:clamp(1.02rem,1.14vw,1.16rem);line-height:1.6;color:rgba(251,248,241,.8)}
.wf .wfa__texte .kn{margin-top:clamp(18px,1.8vw,26px);align-self:center}
.wf__pf{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fbf8f1;border:1px solid rgba(227,210,166,.4);
  background:radial-gradient(circle at 50% 30%,#1f3350,#101c2c 60%,#070c14);box-shadow:0 14px 22px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12);transition:border-color .4s}
.wf__pf svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wf__pf:hover{border-color:rgba(227,210,166,.9)}
.wf .wfa__zahl{max-width:none;margin-top:clamp(18px,2vw,28px);text-align:center;font-family:var(--mono);font-size:.82rem;letter-spacing:.24em;color:var(--messing)}
@media(max-width:700px){
  .wf .wfa__b{height:min(78vw,340px)}
  .wf .fblatt[data-p="-1"]{--x:-62%;--s:.55;--o:.4}.wf .fblatt[data-p="1"]{--x:62%;--s:.55;--o:.4}
  .wf .fblatt[data-p="-2"],.wf .fblatt[data-p="2"]{--o:0}
  .wf .wfa__fuss{grid-template-columns:1fr 1fr;justify-items:center;row-gap:20px}
  .wf .wfa__texte{grid-column:1/-1;grid-row:1}
  .wf .wfa__fuss>button:first-of-type{justify-self:end}.wf .wfa__fuss>button:last-of-type{justify-self:start}
}
@media(prefers-reduced-motion:reduce){.wf .fblatt,.wf .wfa__texte>div{transition:none}}

/* ================= Mails: drei Nachrichten gross und von vorn (wb_mails.py, 12.10.2026) ================= */
.mlb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,44px);max-width:1280px;margin:0 auto}
.mlb-k{display:flex;flex-direction:column;text-align:center;color:#fff}
.mlb-k__b{display:block;border-radius:clamp(12px,1.3vw,18px);overflow:hidden;aspect-ratio:3/4.3;background:var(--weiss);box-shadow:0 0 0 1px rgba(227,210,166,.24),0 50px 60px -34px rgba(0,0,0,.85),0 16px 24px -14px rgba(0,0,0,.5)}
.mlb-k__b img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (hover:hover){.mlb-k__b img{transition:transform 2.2s var(--e1);transform-origin:50% 0}.mlb-k:hover .mlb-k__b img{transform:scale(1.04);transition-duration:2.8s}}
.mlb-k h3{margin:clamp(22px,2.2vw,30px) auto 0;font-family:var(--serif);font-weight:700;font-size:clamp(1.34rem,1.7vw,1.72rem);line-height:1.14}
.mlb-k h3::after{content:'';display:block;width:44px;height:1px;margin:16px auto 14px;background:linear-gradient(90deg,transparent,var(--hellgold),transparent)}
.mlb-k p{margin:0 auto;max-width:36ch;font-size:clamp(.96rem,1vw,1.02rem);line-height:1.64;color:rgba(255,255,255,.76)}
#mails .kn-reihe{justify-content:center;margin-top:clamp(34px,3.8vw,56px)}
@media(max-width:860px){.mlb{grid-template-columns:1fr;max-width:420px}}