/* =========================================================================
   Mode Erhard · Design F „Kompakt" — zusätzliche Auftakte zur Abstimmung
   C „Mosaik": Kachelwand bricht beim Scrollen auf und gibt das Foto frei
   D „Galerie": horizontale Fahrt durch eine Arkade aus Bogenfenstern
   ========================================================================= */

/* ---------- Auftakt E „Klar“: Kachelwand, Botschaft groß ---------- */
.d-hero--klar .d-wall{grid-template-columns:repeat(8,1fr);grid-template-rows:21svh 1fr 1fr;height:calc(100svh - 4.2rem)}
.d-hero--klar .d-hero__text{grid-column:1 / span 5;grid-row:2 / span 2;justify-content:center;gap:clamp(1rem,2.2vh,1.6rem);padding:clamp(1.6rem,4vh,3rem) var(--g)}
.d-hero--klar .d-hero__title{font-size:clamp(2.7rem,6.3vw,7.4rem);line-height:.95;max-width:none}
.d-hero--klar .d-hero__line{display:block}
.d-hero--klar .d-hero__lead{font-size:clamp(1.02rem,1.2vw,1.2rem);max-width:36rem}
.d-hero--klar .d-hero__points{display:flex;flex-wrap:wrap;gap:.6rem 0;list-style:none;margin:0;padding:0;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.d-hero--klar .d-hero__points li{display:flex;align-items:center}
.d-hero--klar .d-hero__points li+li::before{content:'';width:5px;height:5px;margin:0 1.1rem;border-radius:50%;background:var(--rosso)}
.d-hero--klar .d-hero__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:.4rem}
.d-hero--klar .d-hero__hours{opacity:.7}
.d-hero--klar .d-hero__arch{grid-column:6 / span 2;grid-row:1 / span 3}
.d-hero--klar .d-hero__arch .d-win{left:8%;right:8%;top:5%}
.d-hero--klar .d-hero__arch::after{left:calc(8% - 12px);right:calc(8% - 12px);top:calc(5% - 12px)}
@media (max-width:900px){
  .d-hero--klar .d-wall{grid-template-columns:repeat(4,1fr);grid-template-rows:24vw auto 118vw;height:auto}
  .d-hero--klar .d-hero__text{grid-column:1 / -1;grid-row:2;padding:2.2rem var(--g) 2.6rem}
  .d-hero--klar .d-hero__title{font-size:clamp(2.4rem,10.5vw,4rem)}
  .d-hero--klar .d-hero__points{font-size:.64rem;letter-spacing:.14em}
  .d-hero--klar .d-hero__points{flex-direction:column;gap:.55rem}
  .d-hero--klar .d-hero__points li::before,.d-hero--klar .d-hero__points li+li::before{content:'';width:5px;height:5px;margin:0 .8rem 0 0;border-radius:50%;background:var(--rosso)}
  .d-hero--klar .d-hero__arch{grid-column:1 / span 3;grid-row:3}
  .d-hero--klar .d-tile:nth-of-type(n+6){display:none}
  .d-hero--klar .d-tile:nth-of-type(5){grid-column:4;grid-row:3}
}

/* ---------- Gewölbe B „Bogen öffnet sich“ und C „Bogen wächst“: der Bogen wird beim Scrollen zum ganzen Foto ---------- */
.gw-pin{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--paper)}
.gw-stage{position:absolute;inset:4.2rem 0 0}
.gw-frame{position:absolute;inset:0;overflow:hidden;will-change:clip-path;z-index:1}
.gw-frame img{width:100%;height:100%;object-fit:cover;will-change:transform}
.gw-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(42,23,20,.72),rgba(42,23,20,0) 48%);opacity:var(--shade,0)}
.gw-outline{position:absolute;z-index:1;border:1px solid var(--rosso);border-bottom:0;pointer-events:none}
.gw-split{position:absolute;inset:0;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,8rem);align-items:center;z-index:2;pointer-events:none}
.gw-slot{display:block;height:calc(100svh - 4.2rem - clamp(2.4rem,9svh,5.5rem));aspect-ratio:4/5;max-width:100%;justify-self:center}
.gw-text{pointer-events:auto}
.gw-caption{position:absolute;left:var(--g);right:var(--g);bottom:clamp(1.8rem,6svh,4rem);z-index:3;color:var(--paper);display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;opacity:0}
.gw-caption__text{max-width:42rem}
.gw-caption .l-h2{color:var(--paper);font-size:clamp(2.6rem,5.2vw,6rem);margin:0 0 1rem}
.gw-caption .l-h2 em{color:#E9C9BF}
.gw-caption p{font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.55;max-width:31rem;margin:0}
.gw-caption .l-illu{width:clamp(9rem,13vw,13rem);margin:0;flex:0 0 auto}
.gw-caption .l-ink{--c:var(--paper)}
.no-motion .gw-split,.no-motion .gw-outline{display:none}
.no-motion .gw-frame{--shade:1}
.no-motion .gw-caption{opacity:1}

/* Startseite ohne Beratungs-Block (Personal Shopping hat jetzt eine eigene Unterseite): nur noch die Kundenstimmen */
body.rv-beratung-b .l-red.is-v-b{background:var(--sand);padding-top:0}
body.rv-beratung-b .l-red.is-v-b .l-voices{margin-top:0;padding-top:clamp(3.5rem,6vw,5rem)!important}

/* ---------- F2 „Kompakt rot“: Kundenstimmen auf Rot wie Personal Shopping ---------- */
body.g-rot .l-red.is-v-b{background:var(--wine);color:var(--paper)}
body.g-rot .l-red.is-v-b .l-voices{background:var(--wine)!important;color:var(--paper)}
body.g-rot .l-red.is-v-b .l-voices .l-label,body.g-rot .l-red.is-v-b .l-voices__lead .l-cap,body.g-rot .l-red.is-v-b .l-voices__rating{color:var(--paper)}
body.g-rot .l-red.is-v-b .l-voices__head .l-h2,body.g-rot .l-red.is-v-b .l-voices__lead blockquote{color:var(--paper)}
body.g-rot .l-red.is-v-b .l-voices__head .l-h2 em,body.g-rot .l-red.is-v-b .l-voices__lead em,body.g-rot .l-red.is-v-b .l-voices__lead .l-script{color:#E9C9BF}
body.g-rot .l-red.is-v-b .l-voices__head,body.g-rot .l-red.is-v-b .l-voices__rating,body.g-rot .l-red.is-v-b .l-voices__lead{border-color:rgba(244,238,228,.35)}
body.g-rot .l-red.is-v-b .l-voices__list li{color:var(--ink);box-shadow:none}
body.g-rot .l-red.is-v-b .l-voices__list li em,body.g-rot .l-red.is-v-b .l-voices__list li .l-script{color:var(--rosso)}
body.g-rot .l-red.is-v-b .l-voices__list li .l-cap{color:var(--ink)}

/* Gewölbe B/C am Handy (dort ohne Scroll-Effekt): Text, darunter das Foto im Bogen */
@media (max-width:900px){
  .gw-pin{height:auto;min-height:0;padding:clamp(3.5rem,12vw,5rem) 0;overflow:visible}
  .gw-stage{position:static;display:flex;flex-direction:column;gap:2rem}
  .gw-split{position:static;display:block;order:-1;pointer-events:auto}
  .gw-slot,.gw-outline,.gw-caption{display:none}
  .gw-frame{position:relative;inset:auto;width:min(86%,30rem);aspect-ratio:4/5;margin:0 auto;border-radius:999px 999px 0 0;outline:1px solid var(--rosso);outline-offset:10px}
  .gw-frame::after{display:none}
  .gw-text .l-haus__illu{display:none}
}

/* F2: „Alpin im Rücken“ ohne Sand-Kasten, Papierfarbe wie die Damen-&-Herren-Sektion darunter, von Kante zu Kante.
   Rückgängig: diese zwei Regeln löschen (vorher: background var(--sand) #E9E0D2, Kasten max. 1440px breit). */
body.g-rot .l-alpin{background:var(--paper)}
@media (min-width:901px){body.g-rot .l-alpin.is-v-c{max-width:none;padding-left:calc(max(0px, (100% - 1440px) / 2) + var(--g));padding-right:calc(max(0px, (100% - 1440px) / 2) + var(--g))}}

/* Stil-Slider: weniger Luft zwischen den Pfeilen und dem Kachelband darunter */
body.rv-occlayout-b .d-occ{padding-bottom:clamp(2.5rem,4vw,3.75rem)}

/* =========================================================================
   F3 · Fotos: Rundgang – die Fotos aus dem Shooting groß, im Raster aus Bogen und Rechteck
   ========================================================================= */
.f-rund__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2.6rem,4vw,4rem) clamp(1.4rem,2.6vw,2.6rem);align-items:end}
.f-rund__item figure{margin:0}
.f-rund__pic{display:block;position:relative;height:var(--h);overflow:hidden;border-radius:2px;background:var(--sand)}
.f-rund__pic.l-arch{overflow:visible;margin:14px 14px 0;border-radius:var(--arch);height:calc(var(--h) - 14px)}
.f-rund__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--out)}
.f-rund__item:hover .f-rund__pic img{scale:1.03}
.f-rund__item figcaption{margin-top:1rem;color:var(--ink)}
.f-rund__item:nth-child(1){grid-column:1/span 7;--h:clamp(360px,64vh,680px)}
.f-rund__item:nth-child(2){grid-column:8/span 5;--h:clamp(380px,70vh,740px)}
.f-rund__item:nth-child(3),.f-rund__item:nth-child(4),.f-rund__item:nth-child(5){grid-column:span 4;--h:clamp(300px,48vh,520px)}
.f-rund__item:nth-child(4){--h:clamp(340px,56vh,600px)}
.f-rund__item:nth-child(6){grid-column:1/-1;--h:clamp(320px,66vh,760px)}
@media (max-width:900px){
  .f-rund__grid{grid-template-columns:1fr;gap:2.4rem}
  .f-rund__item:nth-child(n){grid-column:1/-1;--h:auto}
  .f-rund__pic{height:auto;aspect-ratio:4/3}
  .f-rund__pic.l-arch{height:auto;aspect-ratio:4/5}
}
/* F2: Rundgang – oben 7+5, unten 5+7 (Hortensien, Hutschachtel, Wandbild ausgeblendet: "hidden" in rundgang.json) */
@media (min-width:901px){
  .f-rund--rot .f-rund__item:nth-child(1){grid-column:1/span 7;--h:clamp(360px,62vh,660px)}
  .f-rund--rot .f-rund__item:nth-child(2){grid-column:8/span 5;--h:clamp(380px,70vh,740px)}
  .f-rund--rot .f-rund__item:nth-child(3){grid-column:1/span 5;--h:clamp(320px,56vh,600px)}
  .f-rund--rot .f-rund__item:nth-child(4){grid-column:6/span 7;--h:clamp(320px,56vh,600px)}
  .f-rund--rot .f-rund__item:nth-child(4) figcaption{text-align:right}
}
/* Rundgang: weniger Luft zur nächsten Sektion (zwei Sektionsabstände übereinander wirkten wie eine Lücke) */
.f-rund{padding-bottom:clamp(2rem,3.5vw,3.5rem)}
/* Rundgang: optionaler Zoom je Foto ("zoom" in rundgang.json), Ursprung = Fokuspunkt */
.f-rund__pic img{scale:var(--z,1)}
.f-rund__item:hover .f-rund__pic img{scale:calc(var(--z,1) * 1.03)}
/* F2: Rundgang ohne Kopf, rückt direkt unter „Klein, aber fein“ */
.f-rund--rot{padding-top:clamp(1.5rem,3vw,3rem)}
/* F2/F3: Kennzahlen kompakter – Querformat statt Quadrat, Form klein rechts unten */
@media (min-width:901px){
  body.g-rot .l-manifest:not(.is-v-b) .d-facts{margin-top:clamp(3rem,5vw,4.5rem)!important}
  body.g-rot .l-manifest:not(.is-v-b) .d-facts li{aspect-ratio:auto;height:clamp(10.5rem,14vw,13.5rem);padding:clamp(1.1rem,1.6vw,1.5rem) clamp(1.1rem,1.8vw,1.7rem)}
  body.g-rot .l-manifest:not(.is-v-b) .d-facts b{font-size:clamp(2.6rem,3.6vw,3.8rem)}
  body.g-rot .l-manifest:not(.is-v-b) .d-facts span{max-width:68%;margin-top:.6rem}
  body.g-rot .l-manifest:not(.is-v-b) .d-facts svg{left:auto;right:8%;width:24%;height:46%}
}

/* ---------- F2 · Rot am Handy: kompakter, ruhiger ---------- */
@media (max-width:900px){
  body.g-rot .d-facts{margin-top:2.6rem!important}
  body.g-rot .d-facts li{padding:1rem 1rem 3.4rem;min-height:0}
  body.g-rot .d-facts b{font-size:2.3rem}
  body.g-rot .d-facts span{font-size:.92rem;line-height:1.4}
  body.g-rot .d-facts svg{width:2.6rem;height:2.6rem;right:.9rem}
  body.g-rot .f-rund{padding-top:1.4rem;padding-bottom:.5rem}
  body.g-rot .f-rund__grid{gap:1.8rem}
  body.g-rot .f-rund__item figcaption{margin-top:.7rem;font-size:.7rem}
  body.g-rot .d-occ{padding-top:clamp(3rem,10vw,4rem)}
  body.g-rot .l-brands .d-brands{grid-template-columns:repeat(3,1fr)}
  body.g-rot .l-brands.is-v-c .d-brands li{aspect-ratio:auto;height:4.6rem;padding:.4rem}
  body.g-rot .d-duo.is-v-b .l-cap{font-size:.68rem;letter-spacing:.12em;line-height:1.6}
}

/* ---------- F2 am Handy: kürzer und verkaufsstärker (16 → ~12 Bildschirme) ---------- */
.m-cta{display:none}
@media (max-width:900px){
  /* Auftakt: Bogenfoto etwas niedriger */
  body.g-rot .d-hero--klar .d-wall{grid-template-rows:22vw auto 100vw}
  /* Boutique: Zeichnung von Petra & Franz kleiner */
  body.g-rot .l-manifest__illu.l-manifest__couple{max-width:17rem;margin-bottom:-2.2rem}
  body.g-rot .l-manifest{padding-bottom:2.5rem}
  /* Rundgang: groß – zwei nebeneinander (Bogen + Fassade) – groß */
  body.g-rot .f-rund--rot .f-rund__grid{grid-template-columns:1fr 1fr;gap:1.4rem .9rem}
  body.g-rot .f-rund--rot .f-rund__item:nth-child(n){grid-column:1 / -1}
  body.g-rot .f-rund--rot .f-rund__item:nth-child(2),body.g-rot .f-rund--rot .f-rund__item:nth-child(3){grid-column:auto}
  body.g-rot .f-rund--rot .f-rund__pic{aspect-ratio:3/2}
  body.g-rot .f-rund--rot .f-rund__item:nth-child(2) .f-rund__pic,body.g-rot .f-rund--rot .f-rund__item:nth-child(3) .f-rund__pic{aspect-ratio:4/5}
  body.g-rot .f-rund--rot .f-rund__item:nth-child(2) .f-rund__pic.l-arch{margin:10px 10px 0}
  body.g-rot .f-rund--rot .f-rund__pic.l-arch::before{inset:-10px}
  body.g-rot .f-rund--rot .f-rund__item:nth-child(3){align-self:end}
  body.g-rot .f-rund--rot .f-rund__item:nth-child(4) figcaption{text-align:left}
  /* Kundenstimmen: Hauptstimme bleibt groß, die Bogen-Karten kompakter, zwei statt drei */
  body.g-rot .l-red.is-v-b{padding-bottom:3rem}
  body.g-rot .l-red.is-v-b .l-voices__lead p{font-size:1.32rem;line-height:1.32}
  body.g-rot .l-red.is-v-b .l-voices__list{gap:1rem}
  body.g-rot .l-red.is-v-b .l-voices__list li{padding:3.4rem 1.2rem 1.4rem;border-radius:130px 130px 0 0}
  body.g-rot .l-red.is-v-b .l-voices__list li::before{top:.9rem;font-size:2.6rem}
  body.g-rot .l-red.is-v-b .l-voices__list blockquote p{font-size:1.06rem;line-height:1.38}
  body.g-rot .l-red.is-v-b .l-voices__list li:nth-child(n+3){display:none}
  /* Marken: weniger Luft um den Kopf */
  body.g-rot .l-brands{padding-top:3.2rem;padding-bottom:3rem}
  body.g-rot .l-brands .l-lead{font-size:1rem}
  /* Brixen: Zeichnung kleiner, Zitronen weg */
  body.g-rot .f-alpin .l-alpin__dom{width:72%;margin:1.4rem auto}
  body.g-rot .f-alpin .l-alpin__illu{display:none}
  body.g-rot .f-alpin{padding-top:3rem;padding-bottom:3rem}
  /* Besuch: Foto niedriger */
  body.g-rot .l-visit.is-v-c .v-photo{min-height:0;aspect-ratio:1/1}
  /* FAQ: dichter, Lauben-Zeichnung weg */
  body.g-rot .l-faq__illu{display:none}
  body.g-rot .l-faq summary{padding-top:1rem;padding-bottom:1rem;font-size:1.08rem}
  body.g-rot .l-faq{padding-bottom:2.5rem}
  /* Leiste Anrufen · Route */
  body.g-rot .m-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;gap:8px;padding:6px;background:var(--wine);border-radius:999px;box-shadow:0 18px 40px -18px rgba(42,23,20,.7);transform:translateY(calc(100% + 120px));transition:transform .5s var(--out)}
  body.g-rot .m-cta.is-on{transform:none}
  body.g-rot .m-cta__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.55rem;height:48px;border-radius:999px;color:var(--paper);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
  body.g-rot .m-cta__btn--call{background:var(--paper);color:var(--wine)}
  body.g-rot .m-cta__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
}

/* Fotos: weiches Einblenden, bis dahin ruhiger Sand-Ton statt Lücke */
main img.is-loading{opacity:0}
main img{transition:opacity .7s var(--ease),scale 1.4s var(--out)}
.d-win,.f-rund__pic,.gw-frame,.v-photo,.d-tilewin .d-win{background-color:var(--sand)}
/* Damen & Herren: Spalten dürfen nicht breiter als der Inhalt werden (Tablet quer lief seitlich über) */
body.g-rot .d-duo .l-duo__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html:has(body.g-rot){overflow-x:clip}
body.g-rot .d-duo .l-duo__panel .l-cap{white-space:normal;max-width:100%;text-wrap:balance}
/* Brixen: Überschrift bündig mit den Spalten darunter (als Gitterelement wurde sie per margin:auto zentriert) */
@media (min-width:901px){body.g-rot .l-alpin.is-v-c > .l-wrap:first-of-type{margin:0;justify-self:stretch}}

/* Gewölbe-Bildunterschrift: Überschrift ist ein <p> und erbte Zeilenhöhe 1.55 und 31rem Breite des Fließtexts
   (große Lücke, Umbruch). Dazu ein ruhiger dunkler Verlauf von unten links, damit Schrift auf hellem Foto lesbar bleibt. */
.gw-caption p.l-h2{line-height:1;max-width:none;text-wrap:balance;text-shadow:0 2px 24px rgba(42,23,20,.35)}
.gw-caption__text{max-width:min(58rem,70vw)}
.gw-caption p:not(.l-h2){text-shadow:0 1px 14px rgba(42,23,20,.45)}
.gw-frame::after{background:
  radial-gradient(ellipse 75% 70% at 0% 100%,rgba(42,23,20,.55),rgba(42,23,20,0) 70%),
  linear-gradient(to top,rgba(42,23,20,.78) 0%,rgba(42,23,20,.45) 28%,rgba(42,23,20,0) 58%)}
/* Abschluss: nur noch die Kachelreihe, ohne „Grazie, a presto.“ */
body.g-rot .l-outro{padding-top:0;padding-bottom:0}
@media (max-width:900px){body.g-rot .d-band2 i:nth-child(n+6){display:none}}

/* Kundenstimmen auf dem Handy: alle vier wie die Hauptstimme, zum Wischen (Wunsch 02.11.2026) */
.l-voices__track{display:contents}
.l-voices__dots{display:none}
@media (max-width:900px){
  body.g-rot .l-red.is-v-b .l-voices__track{display:flex;align-items:flex-start;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:2rem calc(-1 * var(--g)) 0!important;padding:0 var(--g);scroll-padding:0 var(--g);max-width:none}
  body.g-rot .l-red.is-v-b .l-voices__track::-webkit-scrollbar{display:none}
  body.g-rot .l-red.is-v-b .l-voices__list{display:contents}
  body.g-rot .l-red.is-v-b .l-voices__lead,body.g-rot .l-red.is-v-b .l-voices__list li{flex:0 0 88%;margin:0;scroll-snap-align:start}
  body.g-rot .l-red.is-v-b .l-voices__list li,body.g-rot .l-red.is-v-b .l-voices__list li:nth-child(n+3){display:block;background:none;padding:0 0 0 1.6rem;border-left:1px solid rgba(244,238,228,.35);border-radius:0;color:var(--paper);text-align:left}
  body.g-rot .l-red.is-v-b .l-voices__list li::before{display:none}
  body.g-rot .l-red.is-v-b .l-voices__lead p,body.g-rot .l-red.is-v-b .l-voices__list blockquote p{font-size:1.2rem;line-height:1.34}
  body.g-rot .l-red.is-v-b .l-voices__list li em,body.g-rot .l-red.is-v-b .l-voices__list li .l-script{color:#E9C9BF}
  body.g-rot .l-red.is-v-b .l-voices__list li .l-cap{color:var(--paper)}
  body.g-rot .l-red.is-v-b .l-voices__from{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:1rem}
  body.g-rot .l-red.is-v-b .l-voices__dots{display:flex;gap:.5rem;margin-top:1.8rem}
  body.g-rot .l-red.is-v-b .l-voices__dots i{width:7px;height:7px;border-radius:4px;background:rgba(244,238,228,.35);transition:width .3s,background-color .3s}
  body.g-rot .l-red.is-v-b .l-voices__dots i.is-on{width:22px;background:var(--paper)}
}