/* Fuss aller Seiten, Fassung 5 «Hell am Mittag» (Robert 19.10.2026). Baut auf haus.css (Farben, Schriften, Knöpfe).
   Bewegung beim Hinscrollen nur über transform, deckend (assets/js/fuss.js setzt .da). Inhalt: fuss_bau.py */
.fz{--sand:#AD8A5A;--akz:#8A6A3B;--lin:rgba(173,138,90,.7);--lin2:rgba(10,37,82,.12);--fg:var(--titel-h);--fg2:#3B4A60;--sch:#7D433A;--sch-h:#D3B794;--sch-t:#301916;
  position:relative;background:var(--papier);color:var(--tinte);overflow:hidden}
.fz a{color:inherit}
.fz p,.fz dd,.fz dt{margin:0}
.fz h3{font:400 11px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--akz);margin:0 0 16px}
.fz .knopf{white-space:nowrap}
.fz .knopf--dunkel{color:#F2F7F8}
.fz .knopf:not(.knopf--dunkel){color:var(--tinte)}
.fz .k-sch{background:linear-gradient(180deg,#9a5549,var(--sch) 45%,#5a2c25)}
.fz .k-sch .kn{background:linear-gradient(180deg,#F5F3EF,#E6DDD0 60%,var(--sch-h));color:var(--sch-t)}
.fz .pfl{width:16px;height:10px;stroke:currentColor;fill:none;stroke-width:1.3;flex:none;transition:transform .5s var(--e1)}
.fz a:hover>.pfl{transform:translateX(4px)}

/* Bewegung: ans Scrollen gekoppelt (Robert 19.10.2026: «direkt richtig geil reingeschwebt», nicht warten und hochhüpfen).
   assets/js/fuss.js setzt je Stück nur transform, abhängig davon, wie weit es im Bild ist. Ohne Skript steht alles still an seinem Platz. */
.fz [data-a="zoom"]{overflow:hidden}
.fz .slit .sz{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.fz .slit .si{display:inline-block}
.fz [data-a="linie"]{transform-origin:inherit}

/* Kopf: Terrasse links, Willkommen und Zeiten rechts */
.fz__kopf{display:grid;grid-template-columns:1.1fr 1fr;min-height:clamp(520px,46vw,700px)}
.fz__bild{margin:clamp(16px,1.6vw,24px) 0;border-radius:0 var(--rund) var(--rund) 0;overflow:hidden;isolation:isolate}   /* läuft links in den Rand, die sichtbaren Ecken rechts rund (Robert 19.10.2026) */
.fz__bild img{width:100%;height:100%;object-fit:cover;object-position:30% 60%}
.fz__kt{padding:clamp(64px,7vw,112px) clamp(28px,5vw,90px);display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.fz__lg{display:block;width:clamp(110px,10vw,150px);height:auto}
.fz__claim{font:300 clamp(2.2rem,5.4vw,5.2rem)/1.02 var(--titel);text-transform:uppercase;letter-spacing:.06em;color:var(--fg)}
.fz__lauf{font-size:17px;color:var(--fg2);max-width:40ch}
.fz__zt{display:grid;margin:0;min-width:min(100%,380px)}
.fz__zt div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--lin2);font-size:15px}
.fz__zt dt{color:var(--fg2)}
.fz__zt dd{color:var(--fg);text-align:right}
.fz__kz{font-size:15px;color:var(--fg2)}
.fz__kz a{text-decoration:none;border-bottom:1px solid var(--lin2)}

/* Alle Bereiche, je mit Bild */
.fz__nav{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px);padding:clamp(48px,5vw,80px) 0;border-bottom:1px solid var(--lin2)}
.fz__nb{display:block;aspect-ratio:4/3;border-radius:var(--rund-k);margin-bottom:22px}
.fz__nb img{width:100%;height:100%;object-fit:cover}
.fz__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fz__nav li a{text-decoration:none;font-size:15px;color:var(--fg2);display:inline-block;transition:transform .5s var(--e1),color .3s}
.fz__nav li a:hover{color:var(--fg);transform:translateY(-2px)}

/* Auszeichnungen als grosse Zahlen */
.fz__az{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(44px,4.6vw,72px) 0;border-top:1px solid var(--lin);border-bottom:1px solid var(--lin);padding:clamp(28px,3vw,44px) 0}
.fz__az>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 12px;border-left:1px solid var(--lin2)}
.fz__az>div:first-child{border-left:0}
.fz__aw{font:400 10.5px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--akz)}
.fz__az b{font:200 clamp(2.6rem,5vw,4.6rem)/1 var(--titel);color:var(--fg);letter-spacing:.02em}
.fz__ae{font:400 clamp(.8rem,1vw,.95rem)/1.3 var(--titel);text-transform:uppercase;letter-spacing:.12em;color:var(--fg)}
.fz__az small{font-size:13px;color:var(--fg2)}

/* Die zwei Häuser auf einer Grundlinie */
.fz__fam{padding-bottom:clamp(56px,6vw,96px)}
.fz__fk{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-bottom:clamp(30px,3vw,48px)}
.fz__fk i{height:1px;background:var(--lin)}
.fz__fk i:first-child{transform-origin:right}
.fz__fk i:last-child{transform-origin:left}
.fz__fk p{font:400 11.5px/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--akz)}
.fz__zwei{position:relative;display:grid;grid-template-columns:1fr 1fr;height:clamp(320px,32vw,480px);margin-bottom:24px;border-radius:var(--rund);overflow:hidden;isolation:isolate}   /* alle Ecken rund (Robert 19.10.2026, 22:36) */
.fz__fb{display:block;position:relative}
.fz__fb img{width:100%;height:100%;object-fit:cover}
.fz__fb.a img{object-position:62% 74%}
.fz__fb.b img{object-position:50% 76%}
.fz__boden{position:absolute;left:14%;right:14%;top:78%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85) 30%,rgba(255,255,255,.85) 70%,rgba(255,255,255,0))}   /* läuft vom Namen aus und endet weich vor den Bildrändern (22:36) */
.fz__ck{position:absolute;left:50%;top:78%;translate:-50% -50%;background:var(--papier);color:var(--fg);border:1px solid var(--lin);padding:12px 18px;font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.fz__hg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);position:relative;z-index:1;margin:calc(-1 * clamp(40px,5vw,84px)) clamp(16px,2.4vw,40px) 0}
/* Hauskacheln: ohne Rahmen, heben sich mit weichem Schatten ab (Farblinie oben entfernt, Robert 19.10.2026) */
.fz__h{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(26px,3vw,44px) clamp(24px,3vw,44px) clamp(26px,3vw,40px);background:#fff;border-radius:var(--rund);box-shadow:0 1px 0 rgba(10,37,82,.04),0 30px 60px -34px rgba(10,37,82,.32),0 10px 24px -18px rgba(10,37,82,.18);transition:translate .6s var(--e1),box-shadow .6s var(--e1)}
.fz__h:hover{translate:0 -4px;box-shadow:0 1px 0 rgba(10,37,82,.04),0 40px 70px -34px rgba(10,37,82,.38),0 14px 28px -18px rgba(10,37,82,.2)}
.fz__hkopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.fz__hier{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;background:var(--nacht);color:#fff;padding:9px 12px;border-radius:3px}
.fz__hier.b{background:var(--sch)}
.fz__ho{font:400 10.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--akz)}
.fz__h.b .fz__ho{color:var(--sch)}
.fz__hn{font:300 clamp(1.25rem,2vw,1.85rem)/1.15 var(--titel);text-transform:uppercase;letter-spacing:.1em;color:var(--fg)}
.fz__h.b .fz__hn{color:#4a2620}
.fz__hl{font-size:15.5px;line-height:1.55;color:var(--fg2);max-width:44ch}
.fz__hd{margin:14px 0 0;width:100%;display:grid}
.fz__hd div{display:grid;grid-template-columns:minmax(96px,30%) 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--lin2);font-size:14.5px}
.fz__hd dt{font:400 10.5px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--akz)}
.fz__h.b .fz__hd dt{color:#9a6a5f}
.fz__hd dd{margin:0;color:var(--fg)}
.fz__hd a{text-decoration:none;border-bottom:1px solid var(--lin2)}
.fz__hk{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:auto;padding-top:24px}
.fz__zu{display:inline-flex;gap:10px;align-items:center;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--stuhl)}
.fz__zu.b{color:var(--sch)}

/* Grund */
.fz__un{border-top:1px solid var(--lin2);padding:26px 0 30px}
.fz__ug{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;font:400 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.fz__ug nav{display:flex;gap:22px}
.fz__ug a{text-decoration:none}
.fz__st{margin-left:auto;opacity:.7}
.fz__ul{width:34px;height:auto}
.fz__hoch{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--lin);border-radius:50%;transition:transform .5s var(--e1)}
.fz__hoch:hover{transform:translateY(-4px)}
.fz__hoch svg{width:10px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}

@media (max-width:900px){
  .fz__kopf,.fz__hg{grid-template-columns:1fr}
  .fz__hg{margin:-28px 12px 0}
  .fz__bild{aspect-ratio:4/3;margin:16px 16px 0 0}
  .fz__nav,.fz__az{grid-template-columns:1fr 1fr;row-gap:36px}
  .fz__az>div:nth-child(3){border-left:0}
  .fz__zwei{height:clamp(220px,52vw,360px)}
}
@media (max-width:520px){.fz__st{margin-left:0}.fz__ck{font-size:10px;padding:10px 12px}}
@media print{.fz{display:none!important}}
