.vp-neu{--rand:max(24px,5vw,calc((100% - 1760px) / 2));--champ:#f3eae2;--sand:#e5d1c4;--lime:#c6b4a0;--gold:#b4a082;--terra:#ab6949;--esp:#473b2d;--nacht:#1a1511;--text:#2f271e}
:where(.vp-neu,.vp-neu *){box-sizing:border-box;margin:0;padding:0}
.vp-neu{-webkit-font-smoothing:antialiased}
.vp-neu{background:var(--champ);color:var(--text);font:300 16px/1.75 Poppins,sans-serif}
.vp-neu img{display:block;max-width:100%}
.vp-neu a{color:inherit}
.vp-neu .serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;letter-spacing:-.015em}
.vp-neu .s{font-family:"EB Garamond",Georgia,serif}
.vp-neu .wrap{padding:0 var(--rand)}
.vp-neu .kap{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--terra)}
.vp-neu .kap i{font:italic 400 20px "Cormorant Garamond",serif;letter-spacing:0;text-transform:none}
.vp-neu .kap::after{content:"";width:40px;height:1px;background:currentColor;opacity:.5}
.vp-neu .hero{position:relative;height:100svh;min-height:680px;color:var(--champ);overflow:hidden;background:var(--nacht)}
.vp-neu .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp-neu .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,21,17,.5) 0%,rgba(26,21,17,0) 30%,rgba(26,21,17,.15) 55%,rgba(26,21,17,.85) 100%)}
.vp-neu .kopf{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px var(--rand)}
.vp-neu .kopf img{height:62px}
.vp-neu .kopf nav{display:flex;align-items:center;gap:36px;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.vp-neu .kopf nav a{text-decoration:none;opacity:.85}
.vp-neu .kopf nav .pille{opacity:1;border:1px solid rgba(243,234,226,.5);border-radius:999px;padding:12px 24px}
.vp-neu .hero-text{position:absolute;z-index:2;left:var(--rand);right:var(--rand);bottom:150px}
.vp-neu .hero-text p{font-size:11px;letter-spacing:.34em;text-transform:uppercase;opacity:.85}
.vp-neu .hero-text h1{font-size:clamp(64px,10vw,168px);line-height:.88;margin-top:20px}
.vp-neu .hero-text h1 em{font-style:italic;color:#dccaa8}
.vp-neu .leiste{position:absolute;z-index:2;left:var(--rand);right:var(--rand);bottom:40px;display:grid;grid-template-columns:1fr 1fr 1fr auto;border-top:1px solid rgba(243,234,226,.3)}
.vp-neu .leiste .feld{text-decoration:none;color:inherit;padding:18px 0 0}
.vp-neu .leiste small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.vp-neu .leiste span{font-size:15px}
.vp-neu .leiste a.los{align-self:end;background:var(--champ);color:var(--esp);text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:16px 34px;border-radius:999px}
.vp-neu .intro{padding:clamp(100px,13vw,200px) var(--rand) clamp(80px,10vw,150px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.vp-neu .intro .kap{grid-column:1/-1}
.vp-neu .intro h2{grid-column:1/9;font-size:clamp(44px,5.6vw,92px);line-height:1;margin-top:32px}
.vp-neu .intro h2 em{font-style:italic;color:var(--terra)}
.vp-neu .intro .text{grid-column:8/12;margin-top:48px;font-size:17px}
.vp-neu .fakten{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);column-gap:24px;margin-top:90px;border-top:1px solid rgba(47,39,30,.15)}
.vp-neu .fakten div{padding:26px 0 0}
.vp-neu .fakten b{display:block;font:400 64px/1 "Cormorant Garamond",serif;color:var(--esp)}
.vp-neu .fakten b small{font-size:.5em}
.vp-neu .fakten span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.vp-neu .paar{display:grid;grid-template-columns:7fr 4fr;gap:24px;padding:0 var(--rand);align-items:end}
.vp-neu .paar img{width:100%;object-fit:cover}
.vp-neu .paar .a{height:78vh;max-height:820px}
.vp-neu .paar .b{height:52vh;max-height:560px}
.vp-neu .paar figcaption{font-size:13px;opacity:.7;margin-top:14px}
.vp-neu .raeume{padding:clamp(110px,12vw,190px) var(--rand) 40px}
.vp-neu .raeume-kopf{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:64px}
.vp-neu .raeume-kopf .kap{grid-column:1/-1;margin-bottom:28px}
.vp-neu .raeume-kopf h2{grid-column:1/8;font-size:clamp(40px,4.8vw,78px);line-height:1}
.vp-neu .raeume-kopf p{grid-column:9/13}
.vp-neu .raster{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.vp-neu .raum img{width:100%;height:100%;object-fit:cover}
.vp-neu .raum{position:relative}
.vp-neu .raum .bild{overflow:hidden}
.vp-neu .raum h3{font:400 28px/1.1 "Cormorant Garamond",serif;margin-top:18px}
.vp-neu .raum p{font-size:14px;opacity:.75;margin-top:6px;max-width:28em}
.vp-neu .r1{grid-column:1/8}
.vp-neu .r1 .bild{height:600px}
.vp-neu .r2{grid-column:8/13;margin-top:140px}
.vp-neu .r2 .bild{height:460px}
.vp-neu .r3{grid-column:1/5}
.vp-neu .r3 .bild{height:420px}
.vp-neu .r4{grid-column:5/9;margin-top:90px}
.vp-neu .r4 .bild{height:420px}
.vp-neu .r5{grid-column:9/13}
.vp-neu .r5 .bild{height:420px}
.vp-neu .alle{display:inline-flex;align-items:center;gap:14px;margin-top:64px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px}
.vp-neu .abend{position:relative;height:110vh;min-height:720px;margin-top:clamp(110px,12vw,190px);color:var(--champ);overflow:hidden;background:var(--nacht)}
.vp-neu .abend img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp-neu .abend::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,21,17,.1),rgba(26,21,17,.7))}
.vp-neu .abend blockquote{position:absolute;z-index:2;left:var(--rand);right:var(--rand);bottom:12vh;font-size:clamp(40px,5vw,84px);line-height:1.04;max-width:16em}
.vp-neu .abend blockquote em{font-style:italic;color:#dccaa8}
.vp-neu .draussen{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto 1fr;column-gap:24px;row-gap:0;padding:clamp(110px,12vw,190px) var(--rand)}
.vp-neu .draussen .kap{grid-column:1/6}
.vp-neu .draussen h2{grid-column:1/6;align-self:start;font-size:clamp(40px,4.4vw,72px);line-height:1;margin-top:28px}
.vp-neu .draussen .t{grid-column:1/5;margin-top:32px}
.vp-neu .draussen .bilder{grid-column:7/13;grid-row:1/5;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vp-neu .draussen .bilder img{width:100%;height:420px;object-fit:cover}
.vp-neu .draussen .bilder img:first-child{grid-column:1/-1;height:480px}
/* Raster statt Spalten: beide Spalten teilen sich die Zeilenhöhe, die Trennlinien bleiben auf einer Höhe */
.vp-neu .ausst{grid-column:1/6;margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;font-size:15px;list-style:none;padding:0}
.vp-neu .ausst li{padding:12px 0;border-top:1px solid rgba(47,39,30,.14);display:flex;align-items:center}
.vp-neu .lage{background:var(--sand);padding:clamp(110px,12vw,190px) var(--rand);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.vp-neu .lage .kap{grid-column:1/6}
.vp-neu .lage h2{grid-column:1/6;font-size:clamp(40px,4.4vw,72px);line-height:1;margin-top:28px}
.vp-neu .lage .t{grid-column:1/5;margin-top:32px}
.vp-neu .wege{grid-column:1/6;margin-top:48px;list-style:none}
.vp-neu .wege li{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-top:1px solid rgba(47,39,30,.18)}
.vp-neu .wege b{font:400 34px/1 "Cormorant Garamond",serif;color:var(--terra)}
.vp-neu .wege svg.weg{width:22px;height:22px;margin-right:14px;vertical-align:-5px;fill:none;stroke:var(--terra);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vp-neu .lage .karte{grid-column:7/13;grid-row:1/6;align-self:start}
.vp-neu .lage .karte img{width:100%;height:100%;object-fit:cover}
.vp-neu .buchung{background:var(--nacht);color:var(--champ);padding:clamp(110px,12vw,190px) var(--rand)}
.vp-neu .buchung .kap{color:var(--gold)}
.vp-neu .buchung h2{font-size:clamp(44px,5.4vw,92px);line-height:1;margin-top:28px;max-width:12em}
.vp-neu .buchung h2 em{font-style:italic;color:#dccaa8}
.vp-neu .b-raster{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:64px}
.vp-neu .kal{border:1px solid rgba(243,234,226,.16);border-radius:6px;padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.vp-neu .kal h4{font:400 24px "Cormorant Garamond",serif;text-align:center;margin-bottom:20px}
.vp-neu .tage{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:14px}
.vp-neu .tage span{padding:9px 0;border-radius:50%}
.vp-neu .tage .k{font-size:10px;letter-spacing:.15em;opacity:.45}
.vp-neu .tage .x{opacity:.25;text-decoration:line-through}
.vp-neu .tage .w{background:var(--champ);color:var(--esp)}
.vp-neu .tage .z{background:rgba(243,234,226,.12);border-radius:0}
.vp-neu .preis{border:1px solid rgba(243,234,226,.16);border-radius:6px;padding:36px;display:flex;flex-direction:column;gap:18px}
.vp-neu .preis .reihe{display:flex;justify-content:space-between;font-size:14px;opacity:.85}
.vp-neu .preis .summe{border-top:1px solid rgba(243,234,226,.16);padding-top:18px;display:flex;justify-content:space-between;align-items:baseline}
.vp-neu .preis .summe b{font:400 40px "Cormorant Garamond",serif}
.vp-neu .preis a{margin-top:auto;text-align:center;background:var(--gold);color:var(--nacht);text-decoration:none;padding:18px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.vp-neu .preis small{font-size:12px;opacity:.6;text-align:center}
.vp-neu .kontakt{padding:clamp(110px,12vw,190px) var(--rand);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.vp-neu .kontakt .kap{grid-column:1/-1}
.vp-neu .kontakt h2{grid-column:1/7;font-size:clamp(40px,4.6vw,76px);line-height:1;margin-top:28px}
.vp-neu .kontakt .wege2{grid-column:8/13;margin-top:40px;list-style:none}
.vp-neu .kontakt .wege2 li{border-top:1px solid rgba(47,39,30,.15)}
.vp-neu .kontakt .wege2 a{display:flex;justify-content:space-between;padding:22px 0;text-decoration:none;font-size:18px}
.vp-neu .kontakt .wege2 small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;align-self:center}
.vp-neu footer{background:var(--esp);color:var(--sand);padding:90px var(--rand) 40px}
.vp-neu .f-oben{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.vp-neu .f-oben img{height:110px}
.vp-neu .f-oben nav{display:flex;gap:32px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.vp-neu .f-oben nav a{text-decoration:none}
.vp-neu .f-unten{margin-top:70px;padding-top:26px;border-top:1px solid rgba(229,209,196,.2);display:flex;flex-direction:column;align-items:center;gap:18px;font-size:12px;opacity:.7;text-align:center;line-height:1.6}
.vp-neu .f-unten a{text-decoration:none}
.vp-neu .f-unten a:hover{text-decoration:underline;text-underline-offset:3px}
/* Signatur „made by Mundara“ (Web-Komponente /mundara-signatur.js): letzte Zeile als zentrierter Block, © darüber */
.vp-neu .f-unten mundara-signatur{color:var(--sand);line-height:0}
@media(max-width:900px){.vp-neu .kopf nav a:not(.pille){display:none}
.vp-neu .kopf img{height:46px}
.vp-neu .hero-text{bottom:190px}
.vp-neu .leiste{grid-template-columns:1fr 1fr}
.vp-neu .leiste .feld:nth-child(3){display:none}
.vp-neu .leiste a.los{grid-column:1/-1;text-align:center;margin-top:18px}
.vp-neu .intro,.vp-neu .raeume-kopf,.vp-neu .raster,.vp-neu .draussen,.vp-neu .lage,.vp-neu .kontakt{grid-template-columns:1fr}
.vp-neu .intro>*,.vp-neu .raeume-kopf>*,.vp-neu .raster>*,.vp-neu .draussen>*,.vp-neu .lage>*,.vp-neu .kontakt>*{grid-column:1/-1!important;grid-row:auto!important;margin-top:0}
.vp-neu .intro h2{margin-top:28px}
.vp-neu .intro .text{margin-top:28px}
.vp-neu .fakten{grid-template-columns:1fr 1fr;margin-top:56px}
.vp-neu .fakten b{font-size:48px}
.vp-neu .fakten div:last-child{grid-column:1/-1}
.vp-neu .paar{grid-template-columns:1fr}
.vp-neu .paar .a{height:60vh}
.vp-neu .paar .b{display:none}
.vp-neu .raeume-kopf p{margin-top:18px}
.vp-neu .raster{gap:48px}
.vp-neu .raum .bild{height:360px!important}
.vp-neu .r2,.vp-neu .r4{margin-top:0}
.vp-neu .abend{height:90vh}
.vp-neu .draussen h2,.vp-neu .lage h2,.vp-neu .kontakt h2{margin-top:24px}
.vp-neu .draussen .t,.vp-neu .lage .t{margin-top:24px}
.vp-neu .draussen .bilder{margin-top:40px}
.vp-neu .draussen .bilder img{height:240px!important}
.vp-neu .ausst{margin-top:40px}
.vp-neu .wege{margin-top:32px}
.vp-neu .lage .karte{margin-top:40px}
.vp-neu .b-raster{grid-template-columns:1fr}
.vp-neu .kal{grid-template-columns:1fr;padding:24px}
.vp-neu .kal>div:last-child{display:none}}
/* Webflow-Standards zurücksetzen (Zitat-Rahmen, Listen) */
.vp-neu blockquote{border:0;margin:0;padding:0}
.vp-neu ul,.vp-neu ol{list-style:none}
/* Webflow-Reste sicher ausblenden, falls sie noch auf der Seite sind */
.cursor,.bottom-nav,[data-loading-container]{display:none!important}
html,body{margin:0;background:#f3eae2;overflow-x:clip}
.vp-neu{font:300 16px/1.75 Poppins,sans-serif;color:var(--text);background:var(--champ)}
.vp-neu h1,.vp-neu h2,.vp-neu h3,.vp-neu h4{color:inherit;margin:0;font-weight:400}
.vp-neu .kopf a{color:inherit}
/* Buchungsbereich (live, kommt vom Skript) */
.vp-neu .buchung{background:var(--champ);color:var(--text)}
.vp-neu .buchung .kap{color:var(--terra)}
.vp-neu .buchung h2 em{color:var(--terra)}
.vp-neu #vp-booking{padding:0!important;background:transparent!important;margin-top:56px}
.vp-neu .vpb-wrap{margin:0;max-width:1480px}   /* linksbündig wie die Überschrift, nicht zentriert */
.vp-neu #vp-booking .vpb-kopf{display:none}
.vp-neu .slot-leer{margin-top:56px;padding:48px;border:1px solid rgba(47,39,30,.15);border-radius:6px;text-align:center}
.vp-neu .slot-leer a{color:var(--terra)}
/* Kontakt dunkel als ruhiger Abschluss */
.vp-neu .kontakt{background:var(--nacht);color:var(--champ)}
.vp-neu .kontakt .kap{color:var(--gold)}
.vp-neu .kontakt .wege2 li{border-color:rgba(243,234,226,.18)}
.vp-neu footer{background:var(--nacht);border-top:1px solid rgba(243,234,226,.12)}
/* Galerie-Knopf */
.vp-neu .alle{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;color:inherit;font-family:inherit}
.vp-neu .raum .bild{cursor:zoom-in}
.vp-neu .raum img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.vp-neu .raum:hover img{transform:scale(1.04)}
/* sanftes Erscheinen beim Scrollen (nur mit JS, nicht bei reduzierter Bewegung) */
@media (prefers-reduced-motion:no-preference){
 .js-vp .vp-neu [data-auf]{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1.2s cubic-bezier(.2,.8,.2,1)}
 .js-vp .vp-neu [data-auf].da{opacity:1;transform:none}
}
/* Großansicht */
.vp-lb{position:fixed;inset:0;z-index:10000;background:#14100c;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s}
.vp-lb.offen{opacity:1;pointer-events:auto}
.vp-lb img{max-width:92vw;max-height:80vh;object-fit:contain}
.vp-lb button{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,234,226,.35);background:none;color:#f3eae2;font:300 24px/1 Poppins,sans-serif;cursor:pointer}
.vp-lb .zu{top:20px;right:20px}.vp-lb .zurueck{left:20px;top:50%;margin-top:-26px}.vp-lb .vor{right:20px;top:50%;margin-top:-26px}
.vp-lb .zahl{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#e5d1c4;font:400 13px Poppins,sans-serif;letter-spacing:.15em}
@media(max-width:767px){.vp-lb .zurueck,.vp-lb .vor{top:auto;bottom:60px;margin:0}}
/* Sprachumschalter EN · DE (auch auf dem Handy sichtbar) */
.vp-neu .kopf .sprache{display:inline-flex;gap:14px}
.vp-neu .kopf nav .sprache a{display:inline!important;opacity:.55}
.vp-neu .kopf nav .sprache a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){.vp-neu .kopf nav{gap:14px}.vp-neu .kopf .sprache{gap:10px}.vp-neu .kopf nav .pille{white-space:nowrap;padding:10px 14px;letter-spacing:.14em}}
@media(max-width:400px){.vp-neu .kopf img{height:52px}}
/* Fußzeile: längere deutsche Bezeichnungen (Buchungsbedingungen) dürfen umbrechen */
.vp-neu footer .f-oben nav{flex-wrap:wrap;row-gap:14px}
/* ---------- Upgrades (9. Oktober 2026): Live verfügbar, Ein Tag in der Villa, Gut zu wissen, Saisonpreise ---------- */
/* 1 · Live-Verfügbarkeit im Hero */
.vp-neu .live{text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:12px 20px 12px 16px;border-radius:999px;background:rgba(26,21,17,.38);border:1px solid rgba(243,234,226,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:14px;letter-spacing:.02em}
.vp-neu .live[hidden]{display:none}
.vp-neu .live i{width:8px;height:8px;border-radius:50%;background:#9fd3a8;box-shadow:0 0 0 4px rgba(159,211,168,.22);flex:none}
.vp-neu .live b{font-weight:500}
.vp-neu .live span{opacity:.75}

/* 2 · Ein Tag in der Villa */
/* Text und Zeitleiste stehen im Fluss übereinander (unten bündig) – so überlappen sie auch bei langen Zeilen oder zwei Zeilen Zeitleiste nicht */
.vp-neu .tag{position:relative;min-height:max(min(92svh,900px),560px);overflow:hidden;color:var(--champ);background:var(--nacht);display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(40px,5vw,80px);padding:clamp(96px,12vw,140px) var(--rand) 36px}
.vp-neu .tag figure{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.vp-neu .tag figure.an{opacity:1}
.vp-neu .tag figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease-out}
.vp-neu .tag figure.an img{transform:scale(1)}
/* Unten und links hinter dem Text abdunkeln – lesbar auch über hellem Pool oder weißem Tisch */
.vp-neu .tag::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 8% 80%,rgba(26,21,17,.5),rgba(26,21,17,0) 70%),linear-gradient(180deg,rgba(26,21,17,.35),rgba(26,21,17,0) 30%,rgba(26,21,17,.3) 55%,rgba(26,21,17,.9));pointer-events:none}
.vp-neu .tag-text{position:relative;z-index:2;display:grid;gap:18px;max-width:900px}
.vp-neu .tag-text .kap{color:#dccaa8}
.vp-neu .tag-text blockquote{font-size:clamp(34px,4.4vw,64px);line-height:1.05;text-wrap:balance;text-shadow:0 1px 28px rgba(26,21,17,.35)}
.vp-neu .tag-text blockquote em{font-style:italic;color:#dccaa8}
.vp-neu .zeiten{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(243,234,226,.3)}
.vp-neu .zeiten button{all:unset;cursor:pointer;padding:16px 0 4px;display:grid;gap:4px;position:relative;opacity:.6;transition:opacity .4s}
.vp-neu .zeiten button::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--champ);transition:width .4s}
.vp-neu .zeiten button[aria-selected="true"]{opacity:1}
.vp-neu .zeiten button[aria-selected="true"]::before{width:100%;transition:width 6s linear}
.vp-neu .zeiten button:focus-visible{outline:2px solid var(--champ);outline-offset:4px}
.vp-neu .zeiten small{font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.vp-neu .zeiten span{font:400 22px/1 "Cormorant Garamond",serif}

/* 3 · Gut zu wissen */
.vp-neu .wissen{position:relative;padding:clamp(90px,11vw,170px) var(--rand);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.vp-neu .wissen .kap{grid-column:1/-1}
.vp-neu .wissen h2{grid-column:1/8;font-size:clamp(40px,4.6vw,76px);line-height:1;margin-top:24px}
.vp-neu .wissen h2 em{font-style:italic;color:var(--terra)}
.vp-neu .wissen .t{grid-column:9/13;align-self:end;font-size:15px}
.vp-neu .regeln{grid-column:1/-1;margin-top:64px;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(47,39,30,.15)}
.vp-neu .regeln li{display:grid;grid-template-columns:28px 1fr;gap:4px 16px;align-content:start;padding:26px 24px 26px 0;border-bottom:1px solid rgba(47,39,30,.1)}
.vp-neu .regeln svg{grid-row:1/span 2;width:24px;height:24px;margin-top:4px;color:var(--terra);fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.vp-neu .regeln b{font:400 26px/1.15 "Cormorant Garamond",serif;color:var(--esp)}
.vp-neu .regeln span{font-size:13px;line-height:1.5;opacity:.75}
.vp-neu .wissen .mehr{grid-column:1/-1;margin-top:28px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);text-decoration:none}

/* 4 · Saisonpreise */
.vp-neu .saison{margin:56px 0 48px}
.vp-neu .saison[hidden]{display:none}
.vp-neu .saison-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.vp-neu .saison-kopf p{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra)}
.vp-neu .saison-kopf small{font-size:12px;opacity:.65;display:inline-flex;align-items:center;gap:8px}
.vp-neu .saison-kopf small i{width:7px;height:7px;border-radius:50%;background:#7fb38a}
.vp-neu .sp-monate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end}
.vp-neu .sp-monat{display:flex;flex-direction:column;gap:8px;text-align:center;min-width:0}
.vp-neu .sp-monat .sp-preis{font:400 17px/1 "Cormorant Garamond",serif;color:var(--esp);white-space:nowrap}
.vp-neu .sp-monat .sp-saeule{display:block;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#c48a6a,#e2c2ac)}
.vp-neu .sp-monat.sp-hoch .sp-saeule{background:linear-gradient(180deg,#8f4f33,var(--terra))}
.vp-neu .sp-monat .sp-name{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.65;white-space:nowrap}
.vp-neu .sp-monat.sp-leer .sp-saeule{background:repeating-linear-gradient(135deg,rgba(47,39,30,.14) 0 4px,transparent 4px 8px)}
.vp-neu .saison-fuss{margin-top:14px;font-size:12px;opacity:.65}

@media (max-width:1200px){
  .vp-neu .regeln{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .vp-neu .regeln{grid-template-columns:1fr 1fr}
  /* Zwei Reihen: jede Tageszeit mit eigener Linie – sonst hängt die obere Reihe in der Trennlinie, die untere nicht */
  .vp-neu .zeiten{grid-template-columns:repeat(2,1fr);border-top:0;column-gap:16px;row-gap:20px}
  .vp-neu .zeiten button{border-top:1px solid rgba(243,234,226,.3)}
  .vp-neu .wissen h2,.vp-neu .wissen .t{grid-column:1/-1}
  .vp-neu .sp-monate{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:22px}
}
@media (max-width:560px){
  .vp-neu .regeln{grid-template-columns:1fr}
  .vp-neu .regeln li{padding-right:0}
  .vp-neu .live{font-size:12.5px;gap:10px;padding:10px 16px 10px 14px}
  .vp-neu .live span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vp-neu .tag figure,.vp-neu .tag figure img,.vp-neu .zeiten button::before{transition:none}
}

@media (max-width:560px){.vp-neu .zeiten span{font-size:17px}}
@media (max-width:380px){.vp-neu .zeiten span{font-size:16.5px}}
/* Handy: Text steht höher im Bild – Verlauf früher abdunkeln, damit er auch über hellem Pool lesbar bleibt */
@media (max-width:900px){.vp-neu .tag::after{background:linear-gradient(180deg,rgba(26,21,17,.3),rgba(26,21,17,0) 20%,rgba(26,21,17,.55) 45%,rgba(26,21,17,.92))}}
/* Sonnenuntergang: die dunkle Dachkante oben im Foto abschneiden (Bild nach oben verschoben, .tag schneidet ab) */
.vp-neu .tag figure[data-bild="2"]{top:-12%}
@media (max-width:900px){.vp-neu .tag figure[data-bild="2"]{top:-14%}}
/* ---------- Bilder und Überschriften (10. Oktober 2026) ---------- */
/* Logo hat Breite/Höhe im HTML (kein Springen beim Laden) – die Breite folgt der Höhe aus dem CSS */
.vp-neu .kopf img,.vp-neu .f-oben img{width:auto}
/* Lange Wörter in Überschriften umbrechen statt abschneiden (z. B. Deutsch auf schmalen Handys) */
.vp-neu h1,.vp-neu h2,.vp-neu h3,.vp-neu blockquote{overflow-wrap:break-word}
/* Handy: das zweite Foto im Paar ist ausgeblendet – seine Bildunterschrift auch (stand sonst ohne Foto da) */
@media(max-width:900px){.vp-neu .paar>div:has(>.b){display:none}}

/* === Feinschliff-Animationen (ruhig, hochwertig) – nur wenn Bewegung erwünscht === */
@media (prefers-reduced-motion:no-preference){
  /* Hero-Bild zoomt beim Laden ganz langsam auf */
  .js-vp .vp-neu .hero>img{animation:vpHeroZoom 9s cubic-bezier(.2,.8,.2,1) both}
  @keyframes vpHeroZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
  /* Hero-Text und Buchungsleiste steigen nacheinander weich ein */
  .js-vp .vp-neu .hero-text p,
  .js-vp .vp-neu .hero-text h1,
  .js-vp .vp-neu .leiste{opacity:0;transform:translateY(24px);animation:vpHeroRise 1.1s cubic-bezier(.2,.8,.2,1) both}
  .js-vp .vp-neu .hero-text p{animation-delay:.25s}
  .js-vp .vp-neu .hero-text h1{animation-delay:.42s}
  .js-vp .vp-neu .leiste{animation-delay:.62s}
  @keyframes vpHeroRise{to{opacity:1;transform:none}}
  /* Raum-Karten blenden leicht versetzt nacheinander ein (statt alle gleichzeitig) */
  .js-vp .vp-neu .raster .raum[data-auf]:nth-child(2){transition-delay:.1s}
  .js-vp .vp-neu .raster .raum[data-auf]:nth-child(3){transition-delay:.2s}
}


/* Buchung: unter 1180px nur ein Monat zeigen, damit der Kalender nicht quetscht */
@media (max-width:1180px){
  #vp-booking .vpb-monate{grid-template-columns:minmax(0,1fr)}
  #vp-booking .vpb-monat+.vpb-monat{display:none}
}