/*
Theme Name: VINEA Rooms & Suites
Theme URI: https://www.vinea-maienfeld.ch
Author: VINEA Rooms & Suites, Maienfeld
Description: Design-Boutique-Hotel in der Bündner Herrschaft. Variante D «Material am Abend». Alle Texte und Bilder werden unter Design → Customizer gepflegt (Panel «VINEA · Inhalte»). Bilder wechseln automatisch, Texte erscheinen sanft beim Scrollen. Englische Version unter /en/.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vinea
*/

:root{
  --weiss:#FFFFFF;--kalk:#F1ECE3;--stein:#B3AA9B;--rebholz:#6B4E36;--schiefer:#534F48;--tinte:#1C1A17;
  --gold:#B7A23C;--goldtext:#766416;--linie:#E4DFD4;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',Helvetica,Arial,sans-serif;
  --claim:'Archivo',var(--sans);
  --reb:repeating-linear-gradient(-62deg,#B7A23C 0 1.5px,transparent 1.5px 16px);
  --reb-soft:repeating-linear-gradient(-62deg,rgba(183,162,60,.8) 0 1.5px,transparent 1.5px 16px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--tinte);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body.v-menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Raster */
.v-wrap{width:min(1240px,100% - 40px);margin-inline:auto}

/* Typografie */
.v-eyebrow{display:block;font:600 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--goldtext)}
.v-eyebrow--light{color:var(--kalk)}
.v-claim{font-family:var(--claim);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:40px;line-height:1.05;max-width:480px}
.v-h1{font:400 32px/1.2 var(--serif);margin-top:24px}
.v-h1-page{font:400 64px/1.05 var(--serif);margin-top:16px;max-width:880px;text-wrap:pretty}
.v-h1-page em{font-style:italic;color:var(--stein)}
.v-h2{font:400 48px/1.1 var(--serif);margin-top:16px;text-wrap:pretty}
.v-h2--xl{font-size:56px}
.v-h2--md{font-size:40px;line-height:1.15}
.v-h2 em{font-style:italic;color:var(--stein)}
.v-h3{font:400 32px/1.15 var(--serif)}
.v-h3--sm{font-size:26px;line-height:1.2}
.v-text{font:400 16px/1.6 var(--sans);color:var(--schiefer);text-wrap:pretty}
.v-text--lg{font-size:17px}
.v-small{font:400 14px/1.6 var(--sans);color:var(--schiefer)}
.v-caption{font:400 14px/1.6 var(--sans);color:var(--schiefer)}
.v-mono{font:500 11px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--schiefer)}
.v-sign{font:italic 400 24px/1.3 var(--serif);margin-top:16px}
.v-price-tag{font:400 15px/1.6 var(--sans);color:var(--tinte);margin-top:8px}
.v-line{display:block;width:40px;height:2px;background:var(--gold);margin-top:28px}
.v-link{display:inline-block;font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:inherit;border-bottom:1px solid currentColor;padding-bottom:4px;transition:color .3s}
.v-link:hover{color:var(--rebholz)}

/* Buttons */
.v-btn{display:inline-block;background:var(--tinte);color:#fff;padding:16px 28px;font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--tinte);transition:background .3s,color .3s,border-color .3s}
.v-btn:hover{background:var(--rebholz);border-color:var(--rebholz);color:#fff}
.v-btn--ghost{background:transparent;color:var(--tinte)}
.v-btn--ghost:hover{background:transparent;color:var(--rebholz);border-color:var(--rebholz)}
.v-btn--light{background:#fff;color:var(--tinte);border-color:#fff}
.v-btn--light:hover{background:var(--rebholz);border-color:var(--rebholz);color:#fff}
.v-btn--nav{padding:15px 24px;font-size:12px}
.v-btn--sm{padding:12px 14px;font-size:11px}
.v-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Header */
.v-header{position:sticky;top:0;z-index:50;background:var(--kalk);border-bottom:1px solid var(--linie)}
.v-header__in{display:flex;align-items:center;justify-content:space-between;height:88px}
.v-logo{display:block;width:150px;text-decoration:none}
.v-logo__word{display:block;font:600 24px/1 var(--sans);letter-spacing:.22em;color:var(--gold)}
.v-logo__sub{display:block;font:600 9px/1 var(--sans);letter-spacing:.3em;color:var(--tinte);margin-top:5px}
.v-logo__img{width:150px;height:auto}
.v-nav{display:flex;gap:36px;align-items:center;font:500 15px/1 var(--sans)}
.v-nav>a{text-decoration:none;transition:color .3s}
.v-nav>a:hover{color:var(--rebholz)}
.v-lang{display:inline-flex;gap:6px;color:var(--schiefer)}
.v-lang a{text-decoration:none;color:var(--schiefer)}
.v-lang a[aria-current="true"]{color:var(--tinte)}
.v-lang span{color:var(--stein)}
.v-header__mobile{display:none;align-items:center;gap:12px}
.v-burger{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.v-burger span{display:block;width:22px;height:9px;border-top:1.5px solid var(--tinte);border-bottom:1.5px solid var(--tinte);transition:border-color .3s}
.v-burger[aria-expanded="true"] span{border-bottom-color:transparent}

/* Bildwechsel */
.v-slides{position:relative;overflow:hidden;background:var(--kalk) var(--reb-soft)}
.v-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.v-slides img.is-active{opacity:1}
.v-ph{position:absolute;left:16px;bottom:14px;font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--schiefer)}
.v-cap{position:absolute;left:16px;bottom:14px;background:var(--kalk);color:var(--tinte);padding:8px 10px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;z-index:1}
.v-r43{aspect-ratio:4/3}
.v-r45{aspect-ratio:4/5}
.v-r11{aspect-ratio:1/1}
.v-r169{aspect-ratio:16/9}

/* Rebzeilen-Band */
.v-band{position:absolute;top:0;bottom:0;width:56px;background:var(--reb);pointer-events:none}
.v-band--r{right:-20px}
.v-band--l{left:-20px}

/* 1 Hero */
.v-hero{display:grid;grid-template-columns:1fr 1fr}
.v-hero__img{display:grid}
.v-hero__img .v-slides{min-height:720px}
.v-hero__panel{background:var(--kalk);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:80px 100px 80px 80px}

/* 2 Einordnung */
.v-intro{background:var(--stein);padding:96px 0}
.v-intro p{max-width:880px;margin:0 auto;font:400 40px/1.3 var(--serif);color:var(--tinte);text-align:center;text-wrap:pretty}

/* 3 Preis */
.v-price{padding:48px 0;border-bottom:1px solid var(--linie)}
.v-price .v-wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.v-price p{font-size:17px}

/* 4 Gründe */
.v-reasons{padding-top:120px}
.v-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.v-card{background:var(--kalk);border-top:2px solid var(--gold);padding:48px 40px 56px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.v-card .v-h3{margin-bottom:12px}

/* 5 Zimmer */
.v-rooms{padding-top:160px}
.v-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.v-roomgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.v-room__meta{border-top:1px solid var(--linie);margin-top:16px;padding-top:14px}
.v-room__meta .v-small{margin-top:4px}

/* 6 Ankommen */
.v-arrive{margin-top:160px;background:var(--schiefer);color:#fff;padding:112px 0;position:relative;overflow:hidden}
.v-arrive .v-wrap{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.v-arrive .v-h2{color:#fff}
.v-arrive .v-text{color:var(--kalk);max-width:480px;margin-top:28px}
.v-steps{list-style:none;margin:0;padding:0}
.v-steps li{border-top:1px solid var(--stein);padding:24px 0;display:grid;grid-template-columns:64px 1fr}
.v-step__n{font:600 12px/1.6 var(--sans);letter-spacing:.3em;color:var(--kalk)}
.v-steps .v-h3{font-size:26px;line-height:1.2;margin-bottom:6px;color:#fff}
.v-steps .v-text{font-size:15px;color:var(--kalk);margin-top:0;max-width:none}
.v-steps--light li{border-top-color:var(--linie)}
.v-steps--light .v-step__n{color:var(--goldtext)}
.v-steps--light .v-h3{color:var(--tinte)}
.v-steps--light .v-text{color:var(--schiefer)}
.v-steps--grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.v-steps--grid li{display:block;border-top:2px solid var(--gold);padding:20px 0 0}
.v-steps--grid .v-h3{margin-top:16px}

/* 6b Über uns */
.v-about{padding-top:160px}
.v-about .v-wrap{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.v-about__text{padding-top:16px}
.v-about__text .v-text{max-width:560px;margin-top:16px}
.v-about__text .v-h2+.v-text{margin-top:28px}
.v-about__text .v-link{margin-top:28px}
.v-detail{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:end;margin-top:64px}
.v-detail .v-caption{max-width:240px;margin-bottom:4px}

/* 7 Restaurant & Region */
.v-region{margin-top:160px;display:grid;grid-template-columns:1fr 1fr}
.v-panel{padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.v-panel--kalk{background:var(--kalk)}
.v-panel--stein{background:var(--stein)}
.v-panel--stein .v-eyebrow,.v-panel--stein .v-text,.v-panel--stein .v-small,.v-panel--stein .v-caption,.v-panel--stein .v-h2,.v-panel--stein .v-price-tag{color:var(--tinte)}
.v-panel .v-text{margin-top:20px;max-width:480px}
.v-panel .v-caption{margin-top:12px}
.v-panel .v-link,.v-panel .v-btn{margin-top:28px}

/* 8 Lage */
.v-location{padding-top:140px}
.v-location .v-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.v-card--loc{padding:64px;min-height:0;justify-content:center;gap:0;align-items:flex-start}
.v-card--loc .v-text{margin-top:20px}
.v-card--loc .v-link{margin-top:28px}

/* 9 FAQ */
.v-faq{padding-top:140px}
.v-faq .v-wrap{display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:start}
.v-faq .v-h2{margin-top:0}
.v-faq__list{border-bottom:1px solid var(--linie)}
details{border-top:1px solid var(--linie)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:400 22px/1.3 var(--serif);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 24px/1 var(--sans);color:var(--stein);flex:none}
details[open] summary::after{content:"–"}
details .v-text{padding-bottom:24px;max-width:680px}

/* 10 Bewertungen + Abschluss */
.v-reviews{padding-top:140px}
.v-reviews__box{background:var(--kalk);border:1px dashed var(--stein);padding:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.v-closing{margin-top:160px;background:var(--tinte);color:#fff;padding:140px 0;text-align:center;position:relative;overflow:hidden}
.v-closing h2{font:400 80px/1.05 var(--serif)}
.v-closing .v-btn{margin-top:40px}

/* Footer */
.v-footer{background:var(--schiefer);color:var(--kalk);padding:72px 0 40px;font:400 15px/1.6 var(--sans)}
.v-footer .v-wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.v-footer a{color:var(--kalk);text-decoration:none;transition:color .3s}
.v-footer a:hover{color:#fff}
.v-footer .v-logo__sub{color:#fff}
.v-footer p{margin-top:24px}
.v-footer p+p{margin-top:16px}
.v-footer__head{font:600 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.v-footer li+li{margin-top:8px}
.v-footer__bottom{grid-column:1/-1;border-top:1px solid var(--stein);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.v-footer__v{font:600 20px/1 var(--sans);color:var(--gold)}

/* Unterseiten */
.v-page-hero{padding:96px 0 64px;border-bottom:1px solid var(--linie)}
.v-page-hero__in{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.v-page-hero .v-text{margin-top:24px;max-width:680px}
.v-rows{margin-top:96px}
.v-roomrow{display:grid;grid-template-columns:1fr 1fr;margin-top:2px}
.v-roomrow__img{display:grid}
.v-roomrow--rev .v-roomrow__img{order:2}
.v-roomrow .v-panel .v-small{margin-top:8px}
.v-roomrow .v-panel .v-price-tag{margin-top:20px}
.v-section{padding-top:96px}
.v-detailrow__in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.v-content{padding:64px 0 120px}
.v-content__in{max-width:680px}
.v-content__in p{margin:0 0 1em;color:var(--schiefer)}
.v-content__in h2{font:400 32px/1.15 var(--serif);margin:1.5em 0 .5em}
.v-content__in h3{font:400 24px/1.2 var(--serif);margin:1.5em 0 .5em}

/* Erscheinen beim Scrollen */
.js .v-reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1),letter-spacing 1.2s cubic-bezier(.2,.65,.2,1);transition-delay:var(--d,0ms)}
.js .v-reveal.is-in{opacity:1;transform:none}
.js .v-reveal--claim{letter-spacing:.08em}
.js .v-reveal--claim.is-in{letter-spacing:0}
.js .v-line.v-reveal{transform:scaleX(0);transform-origin:left center}
.js .v-line.v-reveal.is-in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .v-reveal,.js .v-reveal--claim,.js .v-line.v-reveal{opacity:1;transform:none;letter-spacing:inherit;transition:none}
  .v-slides img{transition:none}
}

/* Mobil */
@media (max-width:900px){
  .v-header__in{height:64px}
  .v-logo{width:118px}.v-logo__word{font-size:19px}.v-logo__sub{font-size:7px;margin-top:4px}.v-logo__img{width:118px}
  .v-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--kalk);flex-direction:column;align-items:flex-start;gap:28px;padding:40px 20px;font-size:24px;overflow:auto;border-top:1px solid var(--linie)}
  .v-nav.is-open{display:flex}
  .v-nav .v-btn--nav{font-size:13px}
  .v-header__mobile{display:flex}
  .v-hero{grid-template-columns:1fr}
  .v-hero__img .v-slides{min-height:0;aspect-ratio:4/5}
  .v-hero__panel{padding:36px 20px 40px}
  .v-band{width:40px}.v-band--r{right:-10px}.v-band--l{left:-10px}
  .v-claim{font-size:24px;max-width:280px}.v-h1{font-size:24px;margin-top:14px}.v-line{width:32px;margin-top:20px}
  .v-intro{padding:48px 0}.v-intro p{font-size:26px;text-align:left}
  .v-price{padding:32px 0}.v-price p{font-size:15px}
  .v-actions{width:100%;display:grid;gap:10px}.v-actions .v-btn{text-align:center}
  .v-reasons{padding-top:64px}.v-grid3{grid-template-columns:1fr}
  .v-card{padding:28px 24px 32px;min-height:0}
  .v-h2{font-size:34px}.v-h2--xl{font-size:36px}.v-h2--md{font-size:30px}.v-h3{font-size:26px}.v-h1-page{font-size:40px}
  .v-rooms{padding-top:88px}.v-roomgrid{grid-template-columns:1fr 1fr;gap:28px 16px}.v-h3--sm{font-size:22px}
  .v-arrive{margin-top:88px;padding:56px 0}.v-arrive .v-wrap{grid-template-columns:1fr;gap:32px}
  .v-steps li{grid-template-columns:44px 1fr;padding:16px 0 20px}.v-steps .v-h3{font-size:22px}
  .v-about{padding-top:88px}.v-about .v-wrap{grid-template-columns:1fr;gap:28px}.v-detail{grid-template-columns:1fr;margin-top:40px}
  .v-region{margin-top:88px;grid-template-columns:1fr}.v-region>:nth-child(3){order:4}.v-region>:nth-child(4){order:3}
  .v-panel{padding:40px 20px}
  .v-location{padding-top:80px}.v-location .v-wrap{grid-template-columns:1fr}.v-card--loc{padding:32px 24px}
  .v-faq{padding-top:80px}.v-faq .v-wrap{grid-template-columns:1fr;gap:20px}summary{font-size:19px;padding:18px 0}
  .v-reviews{padding-top:80px}.v-reviews__box{padding:28px 20px}
  .v-closing{margin-top:88px;padding:88px 0}.v-closing h2{font-size:48px}.v-closing .v-btn{margin-top:28px}
  .v-footer{padding:48px 0 28px}.v-footer .v-wrap{grid-template-columns:1fr 1fr;gap:28px 24px}.v-footer .v-wrap>div:first-child{grid-column:1/-1}
  .v-page-hero{padding:56px 0 40px}
  .v-rows{margin-top:56px}
  .v-roomrow{grid-template-columns:1fr}.v-roomrow--rev .v-roomrow__img{order:0}.v-roomrow .v-slides{aspect-ratio:4/3}
  .v-steps--grid{grid-template-columns:1fr;gap:24px}
  .v-section{padding-top:56px}
  .v-detailrow__in{grid-template-columns:1fr;gap:24px}
  .v-content{padding:40px 0 80px}
}