/* ============================================================
   Fallback-Fonts mit angepassten Metriken
   Verhindert den Sprung (FOUT), wenn Archivo nachgeladen wird:
   Der Ersatzschrift werden Archivos Proportionen aufgezwungen,
   dadurch ändert sich das Layout beim Tausch praktisch nicht.
   ============================================================ */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial");
  size-adjust:101%;
  ascent-override:94%;
  descent-override:24%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Archivo Black Fallback";
  src:local("Arial Bold"),local("Arial");
  size-adjust:112%;
  ascent-override:88%;
  descent-override:22%;
  line-gap-override:0%;
}

/* ============================================================
   Vayo Design-System — Tokens → Tailwind v4 @theme 1:1 übertragbar
   ============================================================ */
:root{
  --ink:#121212; --ink-70:rgba(18,18,18,.7); --ink-50:rgba(18,18,18,.5);
  --line:rgba(18,18,18,.14); --paper:#F2F0EB; --white:#fff;
  --signal:#FF4A1C; --signal-dark:#E03D12;
  --black:"Archivo Black","Archivo Black Fallback",Impact,sans-serif;
  --sans:"Archivo","Archivo Fallback",system-ui,-apple-system,sans-serif;
  --t--1:.78rem; --t-0:1rem;
  --t-1:clamp(1.05rem,.98rem + .35vw,1.2rem);
  --t-2:clamp(1.3rem,1.1rem + 1vw,1.75rem);
  --t-3:clamp(1.75rem,1.3rem + 2.2vw,3rem);
  --t-4:clamp(2.2rem,1.5rem + 3.4vw,4.5rem);
  --s-3:.25rem; --s-2:.5rem; --s-1:.75rem; --s-0:1rem;
  --s-1x:1.5rem; --s-2x:2rem; --s-3x:3rem;
  --s-4x:clamp(3.5rem,2.5rem + 3vw,5.5rem);
  --container:76rem; --gutter:clamp(1rem,.6rem + 1.6vw,2rem);
  --radius:6px; --header-h:60px;
}
*,*::before,*::after{box-sizing:border-box} *{min-width:0}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--t-0);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul{margin:0} ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* Primitive */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.flow>*+*{margin-block-start:var(--flow,var(--s-0))}
.flow-1>*+*{--flow:var(--s-1)} .flow-2>*+*{--flow:var(--s-1x)} .flow-3>*+*{--flow:var(--s-2x)}
.section{padding-block-start:var(--s-4x)} .section:last-of-type{padding-block-end:0}

/* Typo */
.eyebrow{font-size:var(--t--1);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);line-height:1.4}
.h1,.h2{font-family:var(--black);text-transform:uppercase;letter-spacing:-.03em;line-height:.98;text-wrap:balance;overflow-wrap:break-word}
.h1{font-size:var(--t-4)} .h2{font-size:var(--t-3)}
.h3{font-family:var(--black);font-size:var(--t-1);text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere;hyphens:auto}
.lead{font-size:var(--t-1);max-width:52ch} .muted{color:var(--ink-70)}

/* Header */
.header{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;height:var(--header-h);
  background:var(--paper);border-block-end:1px solid var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-1x);height:var(--header-h)}
.logo{font-family:var(--black);font-size:1.1rem;letter-spacing:-.03em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.logo i{font-style:normal;color:var(--signal)}
.nav{display:none;gap:var(--s-1x);font-size:.88rem;font-weight:500}
.nav a{color:var(--ink);text-decoration:none;padding-block:var(--s-3);border-block-end:2px solid transparent}
.nav a:hover{border-block-end-color:var(--signal)}
@media(min-width:60rem){.nav{display:flex}}

/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font-weight:700;font-size:.88rem;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;background:var(--signal);color:var(--white);
  padding:var(--s-1) var(--s-1x);border:2px solid var(--signal);border-radius:999px;min-height:44px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--signal-dark);border-color:var(--signal-dark)}
.header__cta{min-height:36px;padding:var(--s-3) var(--s-0);font-size:.78rem}

/* Kombi-Bausteine */
.crumbs{font-size:.85rem;color:var(--ink-70);display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.crumbs a{text-decoration:none;color:inherit} .crumbs a:hover{color:var(--ink)}
.byline{font-size:.85rem}
.facts{border-inline-start:4px solid var(--signal);padding-inline-start:var(--s-1x);
  display:grid;gap:var(--s-1);grid-template-columns:1fr}
@media(min-width:38rem){.facts{grid-template-columns:repeat(3,1fr);gap:var(--s-1x)}}
.facts b{font-family:var(--black);font-size:var(--t-2);display:block;line-height:1}
.facts span{color:var(--ink-70);font-size:.9rem;display:block;margin-block-start:var(--s-3)}
.hotels{border-block-start:1px solid var(--line)}
.hotel{border-block-end:1px solid var(--line);padding-block:var(--s-1x)}
.pros{font-size:.95rem} .pros li{padding-block:var(--s-3)}
.pros li::before{content:"✓";color:var(--signal);margin-inline-end:var(--s-2)}
.hint{font-size:.85rem}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:start;padding:var(--s-1) var(--s-2);border-block-end:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-70)}
.faq__item{border-block-end:1px solid var(--line)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-0);
  padding-block:var(--s-1);font-weight:600}
.faq__item summary::-webkit-details-marker{display:none}
.faq__plus{font-family:var(--black);color:var(--signal);flex:none;transition:transform .15s}
.faq__item[open] .faq__plus{transform:rotate(45deg)}
.faq__item p{padding-block-end:var(--s-1);color:var(--ink)}
.links{display:grid;gap:var(--s-2x);margin-block-start:var(--s-2x)}
@media(min-width:38rem){.links{grid-template-columns:1fr 1fr}}
.linklist li{padding-block:var(--s-3)} .linklist a{text-decoration:none;color:var(--signal)}
.linklist a:hover{text-decoration:underline}
.aff{font-size:.85rem;padding:var(--s-1) var(--s-1x);background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}

/* Footer */
.footer{margin-block-start:var(--s-4x);background:var(--ink);color:var(--paper);padding-block:var(--s-3x) var(--s-2x)}
.footer__cols{display:grid;gap:var(--s-2x);grid-template-columns:1fr}
@media(min-width:48rem){.footer__cols{grid-template-columns:2fr 1fr 1fr}}
.footer h4{font-family:var(--black);text-transform:uppercase;font-size:.95rem}
.footer__about{color:rgba(242,240,235,.72);max-width:36ch;font-size:.9rem}
.footer a{display:block;text-decoration:none;opacity:.72;font-size:.9rem;padding-block:var(--s-3)}
.footer a:hover{opacity:1;color:var(--signal)}
.footer__legal{padding-block-start:var(--s-1x);border-block-start:1px solid rgba(242,240,235,.18);font-size:.8rem;opacity:.6;max-width:62ch}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}


/* Startseite: Chips, Themen-Kacheln, Regionen */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:var(--s-2);background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:var(--s-2) var(--s-0);text-decoration:none;font-weight:600;font-size:.86rem;line-height:1.2;min-height:40px}
.chip:hover{border-color:var(--ink)}
.chip b{font-family:var(--black);color:var(--signal);font-size:.86rem}
.chip--live{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip--live b{color:var(--white)}
.tilegrid{display:grid;gap:var(--s-0);
  grid-template-columns:repeat(auto-fit,minmax(11rem,16rem));justify-content:start}
.tile{position:relative;display:block;text-decoration:none;color:var(--white);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/5;background:linear-gradient(180deg,transparent 40%,rgba(18,18,18,.85)),#3c4f55}
.tile__ph{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s-2);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;opacity:.28;text-align:center}
.tile__cap{position:absolute;inset-inline:var(--s-1);inset-block-end:var(--s-1)}
.tile__cap p{font-size:.8rem;line-height:1.3;opacity:.85;margin-block-start:var(--s-3)}
.tile:hover .h3{color:var(--signal)}
.regions{display:grid;gap:var(--s-2x);grid-template-columns:1fr}
@media(min-width:38rem){.regions{grid-template-columns:1fr 1fr}}
.regions .h3 a{text-decoration:none} .regions .h3 a:hover{color:var(--signal)}

/* Statische Textseiten */
.prose{max-width:42rem}
.prose p{margin-block:var(--s-1)}
.prose .h2{margin-block-start:var(--s-2x)}
.prose a{color:var(--signal)}

/* Hero (nur Startseite) */
.hero{position:relative;height:50svh;min-height:22rem;max-height:34rem;display:flex;align-items:flex-end;color:var(--white);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,18,18,.35) 0%,rgba(18,18,18,.1) 40%,rgba(18,18,18,.8) 100%)}
.hero__inner{position:relative;z-index:1}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero .h1 br{display:block}
.hero .lead{opacity:.9;max-width:40ch}
/* Header transparent über Hero, wird beim Scrollen fest (per JS .is-solid) */
body:has(.hero) .header:not(.is-solid){background:linear-gradient(180deg,rgba(18,18,18,.5),transparent);border-block-end-color:transparent}
body:has(.hero) .header:not(.is-solid) .logo,
body:has(.hero) .header:not(.is-solid) .nav a{color:var(--white)}

/* Buchungsblock */
.book{background:var(--ink);color:var(--paper);border-radius:8px;padding:var(--s-2x) var(--gutter)}
@media(min-width:50rem){.book{padding:var(--s-3x)}}
.book .h2{color:var(--paper)}
.book__fields{display:grid;gap:var(--s-2);grid-template-columns:1fr}
@media(min-width:54rem){.book__fields{grid-template-columns:repeat(3,1fr) 11rem}}
.field{background:rgba(242,240,235,.07);border:1px solid rgba(242,240,235,.22);border-radius:4px;padding:var(--s-1) var(--s-0);min-height:56px}
.field span{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.field b{font-weight:600}
.book .btn{width:100%}
.book__hint{font-size:.8rem;opacity:.55;max-width:60ch}

/* Tipps */
.tips{border-block-start:1px solid var(--line)}
.tip{border-block-end:1px solid var(--line)}
.tip__sum{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:var(--s-1);padding-block:var(--s-1x);font-weight:600;font-size:var(--t-1);line-height:1.35}
.tip__sum::-webkit-details-marker{display:none}
.tip__no{font-family:var(--black);color:var(--signal);font-size:.9rem;flex:0 0 2rem}
.tip__plus{margin-inline-start:auto;flex:none;font-family:var(--black);font-size:1.3rem;line-height:1;color:var(--ink-50);transition:transform .15s}
.tip[open] .tip__plus{transform:rotate(45deg);opacity:.5}
.tip__body{display:grid;gap:var(--s-1x);padding-block-end:var(--s-1x);padding-inline-start:calc(2rem + var(--s-1))}
@media(min-width:52rem){.tip__body{grid-template-columns:1fr 1fr;align-items:start}}
.tip__imgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.tip__imgs div{aspect-ratio:4/3;background:#D6D1C6;border-radius:4px;display:grid;place-items:center;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#847E73}

/* Saison-Mosaik (Startseite) */
.mosaic{display:grid;gap:var(--s-2);grid-template-columns:1fr;grid-auto-rows:14rem}
@media(min-width:44rem){
  .mosaic{grid-template-columns:2fr 1fr;grid-auto-rows:11rem}
  .mosaic .mtile:first-child{grid-row:span 2}
}
.mtile{position:relative;display:block;text-decoration:none;color:var(--white);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(18,18,18,.1) 30%,rgba(18,18,18,.85)),#3c4f55}
.mtile:nth-child(2){background:linear-gradient(180deg,rgba(18,18,18,.1) 30%,rgba(18,18,18,.85)),#4a6b74}
.mtile:nth-child(3){background:linear-gradient(180deg,rgba(18,18,18,.1) 30%,rgba(18,18,18,.85)),#5a5240}
.mtile__ph{position:absolute;inset:0;display:grid;place-items:center;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;opacity:.28;text-align:center;padding:var(--s-2)}
.mtile__cap{position:absolute;inset-inline:var(--s-1x);inset-block-end:var(--s-1x)}
.mtile__desc{display:block;font-size:.9rem;opacity:.9;margin-block-start:var(--s-3)}
.mtile:hover .h3{color:var(--signal)}
.mtile:first-child .h3{font-size:var(--t-2)}

/* 404 */
.section--404{padding-block-start:calc(var(--header-h) + var(--s-4x))}
.e404{max-width:44rem}
.e404 .h1{font-size:clamp(2.4rem,2rem + 4vw,5rem)}
.e404__url{font-size:.85rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:var(--s-2) var(--s-1);display:inline-block;word-break:break-all}
.wayfind{border-block-start:1px solid var(--line)}
.wayfind li{border-block-end:1px solid var(--line)}
.wayfind a{display:flex;align-items:center;gap:var(--s-1);padding-block:var(--s-1x);
  text-decoration:none;color:inherit}
.wayfind__no{font-family:var(--black);color:var(--signal);font-size:.85rem;flex:0 0 2rem}
.wayfind__body{flex:1}
.wayfind__name{display:block;font-family:var(--black);text-transform:uppercase;
  letter-spacing:-.02em;font-size:var(--t-1);line-height:1.1}
.wayfind__desc{display:block;color:var(--ink-70);font-size:.92rem;margin-block-start:var(--s-3)}
.wayfind__arrow{flex:none;font-size:1.2rem;color:var(--ink-50);transition:transform .15s,color .15s}
.wayfind a:hover .wayfind__name{color:var(--signal)}
.wayfind a:hover .wayfind__arrow{transform:translateX(4px);color:var(--signal)}
.e404__report{max-width:44rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s-1x)}