/* Schriften lokal eingebunden (SIL Open Font License) */
@font-face{font-family:"Grandstander";font-style:normal;font-weight:700 800;font-display:swap;src:url("../fonts/grandstander-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Grandstander";font-style:normal;font-weight:700 800;font-display:swap;src:url("../fonts/grandstander-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/mulish-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/mulish-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/caveat-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/caveat-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: Luftbild des Platzes als Start, darunter zeichnet sich die Mosel ein und fließt als Leitlinie links durch die Seite; Fotos als eingeklebte Polaroids */
:root{
  --navy:#0f3370;
  --river:#0d8ae0;
  --river-soft:#e6f3fd;
  --orange:#f27d10;
  --green:#64a724;
  --sunny:#fff6d6;
  --ink:#18263f;
  --muted:#4a5872;
  --white:#ffffff;
  --display:"Grandstander", "Comic Sans MS", system-ui, sans-serif;
  --body:"Mulish", "Segoe UI", sans-serif;
  --hand:"Caveat", "Segoe Script", cursive;
  --rail:90px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 17.5px/1.65 var(--body);overflow-x:clip}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);color:var(--navy);margin:0;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:800}
h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:800}
h3{font-size:1.3rem;font-weight:700}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.hand{font-family:var(--hand);font-size:1.75rem;line-height:1.1;color:var(--river)}

/* Kopf */
header{background:rgba(255,255,255,.97);position:sticky;top:0;z-index:20;transition:background-color .35s, box-shadow .35s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
header.scrolled{background:rgba(255,255,255,.86);box-shadow:0 6px 24px -14px rgba(15,51,112,.35)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;transition:padding .35s}
.head > a img{height:86px;width:auto;transition:height .35s}
header.scrolled .head{padding-block:8px}
header.scrolled .head > a img{height:50px}
nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
nav a{display:block;padding:8px 14px;border-radius:12px;color:var(--navy);text-decoration:none;font-weight:800}
nav a:hover{background:var(--river-soft)}
nav a.book{background:var(--orange);color:var(--white);transform:rotate(-2deg)}
nav a.book:hover{background:#d96c06}
.lang{position:relative;margin-left:6px}
header:has(.lang[open]){z-index:70}
@media (min-width:1440px){
  .langitem{position:absolute;right:max(24px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
}
.lang summary{list-style:none;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:12px;cursor:pointer;font-weight:800;font-size:.9rem;color:var(--navy);background:var(--river-soft);user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:7px;height:7px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;margin-left:2px}
.lang[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.lang summary:hover{background:#d3e9fb}
.lang img{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(15,51,112,.15);flex:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;margin:0;padding:6px;list-style:none;background:var(--white);border-radius:14px;box-shadow:0 18px 40px -16px rgba(15,51,112,.45),0 0 0 1px rgba(15,51,112,.06);display:grid;gap:2px}
nav .lang ul a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-weight:600;color:var(--navy)}
nav .lang ul a:hover{background:var(--river-soft)}
nav .lang ul a[aria-current="page"]{font-weight:800;background:var(--river-soft)}

/* Polaroid mit Klebeband */
.snap{margin:0;background:var(--white);padding:12px 12px 14px;box-shadow:0 14px 30px -14px rgba(15,51,112,.45);position:relative;transition:transform .25s}
.snap img{width:100%;object-fit:cover}
.snap figcaption{font-family:var(--hand);font-size:1.5rem;color:var(--navy);text-align:center;padding-top:8px;line-height:1.1}
.snap::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:30px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,210,90,.75)}
.snap.blue::before{background:rgba(120,190,245,.6);transform:translateX(-50%) rotate(4deg)}
.snap:hover{transform:rotate(0) scale(1.02)}
.r1{transform:rotate(-3deg)}.r2{transform:rotate(2.5deg)}.r3{transform:rotate(-1.5deg)}

/* Hero: Luftbild des Platzes */
.hero{position:relative;min-height:620px;display:flex;align-items:flex-end;background:var(--navy);overflow:hidden}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,51,112,.7) 0%,rgba(15,51,112,.35) 45%,rgba(15,51,112,0) 70%),linear-gradient(180deg,rgba(15,51,112,0) 40%,rgba(15,51,112,.6) 90%)}
.hero .hand,.hero h1{text-shadow:0 2px 14px rgba(8,25,60,.45)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:150px 130px}
.hero .hand{color:#ffd56a;font-size:2.1rem}
.hero h1{color:var(--white);max-width:13ch}
.hero p.lead{color:#eef4ff;font-size:1.2rem;max-width:32em;margin-top:18px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;align-items:center}
.btn{display:inline-block;padding:15px 28px;border-radius:16px;font-weight:800;text-decoration:none;transition:transform .2s}
.btn:hover{transform:rotate(-2deg) scale(1.03)}
.btn.primary{background:var(--orange);color:var(--white)}
.btn.soft{background:var(--white);color:var(--navy)}
.hero .wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;z-index:2}

/* Mosel zeichnet sich ein und fließt in die Leitlinie */
.course{position:relative;--x:calc(max(0px, (100% - 1180px) / 2) + max(20px, env(safe-area-inset-left,0px)) + var(--rail) / 2)}
.flow{position:absolute;top:-90px;left:calc(var(--x) - 140px);width:160px;height:260px;overflow:visible;pointer-events:none;z-index:3}
.flow path{fill:none;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:flow 1.6s cubic-bezier(.45,0,.2,1) .4s forwards}
.flow .fat{stroke:url(#glow);stroke-width:40}
.flow .thin{stroke:var(--river);stroke-width:7;animation-delay:.55s}
@keyframes flow{to{stroke-dashoffset:0}}
.course-line{position:absolute;top:168px;bottom:120px;left:calc(var(--x) - 15px);width:30px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='120' viewBox='0 0 30 120'%3E%3Cpath d='M15 0 C30 30 0 30 15 60 S0 90 15 120' fill='none' stroke='%230d8ae0' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y}
.intro{position:relative;overflow-x:clip}
.intro .inner{position:relative;padding-block:80px 60px}
.intro .text{position:relative;margin-left:calc(var(--rail) + 28px);display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.intro .text p{margin-top:14px;font-size:1.12rem;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:28px;margin-top:28px}
.facts div{color:var(--muted);font-size:.95rem}
.facts strong{display:block;font-family:var(--display);font-size:1.75rem;color:var(--navy);line-height:1.1}

/* Stationen am Fluss */
.station{position:relative;padding-block:80px}
.station > .wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 28px}
.rail{position:relative}
.stop{position:sticky;top:110px;width:var(--rail);height:var(--rail);border-radius:50%;background:var(--white);border:5px solid var(--river);display:grid;place-items:center;text-align:center;font:700 .95rem/1.05 var(--display);color:var(--navy);z-index:1;transform:rotate(-6deg)}
.station:nth-of-type(odd) .stop{transform:rotate(5deg)}
.body{min-width:0}
.title p{margin-top:14px;font-size:1.1rem;color:var(--muted);max-width:40em}
.intro .text p.hand,.title p.hand,.bookband p.hand{font-size:clamp(1.9rem,3vw,2.3rem);margin:0 0 6px;color:var(--river);transform:rotate(-2deg);transform-origin:left center}
.bookband p.hand{color:#ffd56a}

/* Platz */
.two{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:44px}
.list{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;padding:0;margin:0;list-style:none}
.list li{padding-left:28px;position:relative}
.list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;border:3px solid var(--green)}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.stack .snap img{aspect-ratio:3/4}
.stack .snap:nth-child(2){margin-top:50px}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:56px}
.strip .snap img{aspect-ratio:4/3}
.pricecard{margin-top:56px;background:var(--sunny);border-radius:24px;padding:34px clamp(22px,4vw,44px);display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:start}
.pricecard p{margin-top:10px;color:#5a4f33}
.pricecard table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pricecard td{padding:8px 0;border-bottom:2px dotted #ead9a0}
.pricecard td:last-child{text-align:right;font-weight:800;color:var(--navy);white-space:nowrap;padding-left:16px}
.pricecard th{text-align:left;font-family:var(--hand);font-weight:600;font-size:1.5rem;color:var(--orange);padding:18px 0 2px}
.pricecard tr:first-child th{padding-top:0}

/* Region */
.wish{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:46px}
.wish .snap img{aspect-ratio:4/3}
.wish .note{display:block;font-family:var(--body);font-size:.98rem;line-height:1.5;text-align:left;padding:8px 4px 0;color:var(--ink)}
.plan{margin-top:56px;background:var(--river-soft);border-radius:24px;padding:30px clamp(20px,4vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;align-items:start}
.plan > div{min-width:0}
.plan ul{list-style:none;margin:12px 0 0;padding:0}
.plan li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:2px dotted #bcd9f1}
.plan li b{display:block;color:var(--navy);font-weight:800}
.plan li small{display:block;color:var(--muted);font-size:.9rem;line-height:1.4;margin-top:2px}
.plan li span{color:var(--river);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.plan .hand{grid-column:1/-1;margin:0;font-size:1.6rem}

/* Bauernstube */
.stube{background:var(--sunny);border-radius:28px;padding:clamp(26px,4vw,50px);display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:10px}
.stube .snap img{aspect-ratio:4/3}
.soon{display:inline-block;font-family:var(--hand);font-size:2rem;color:var(--orange);transform:rotate(-4deg);margin-bottom:10px}
.stube p{margin-top:14px;color:#5a4f33;font-size:1.06rem}

.bookband{background:var(--navy);border-radius:28px;padding:clamp(30px,5vw,56px);margin-top:46px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:26px}
.bookband h2{color:var(--white)}
.bookband p{color:#d7e3f8;margin-top:8px}

footer{background:#0b2753;color:#c3d1ea;padding-block:50px 36px;margin-top:80px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer img{height:66px;width:auto}
footer h3{color:var(--white);margin-bottom:8px}
footer a{color:var(--white)}
.footer-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:22px;font-size:.9rem;padding-top:18px;border-top:1px solid #22427a}

@media (max-width:960px){
  nav > ul > li:not(.keep){display:none}
  .intro .text,.two,.pricecard,.stube{grid-template-columns:1fr}
  .wish,.strip{grid-template-columns:1fr 1fr}
  .plan{grid-template-columns:1fr}
}
@media (max-width:640px){
  .station > .wrap{grid-template-columns:1fr}
  .rail,.flow,.course-line{display:none}
  .head > a img{height:56px}
  header.scrolled .head > a img{height:40px}
  .intro .text{margin-left:0}
  .station{padding-block:56px}
  .wish,.strip,.list{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .hero{min-height:540px}
  .intro .inner{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){.flow path{animation:none;stroke-dashoffset:0}.btn,.snap,header,.head,.head > a img{transition:none}html{scroll-behavior:auto}}

/* Cookie-Hinweis im Album-Stil – wird nur genutzt, wenn COOKIE_BANNER in build.js auf true steht */
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cookie{position:fixed;z-index:60;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100% - 32px));background:var(--white);color:var(--ink);padding:26px 24px 20px;border-radius:6px;box-shadow:0 24px 60px -20px rgba(15,51,112,.55),0 0 0 1px rgba(15,51,112,.06);font-size:.95rem;line-height:1.55}
.cookie::before{content:"";position:absolute;top:-13px;left:50%;width:110px;height:28px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,210,90,.8)}
.cookie-title{font-family:var(--hand);font-size:1.9rem;line-height:1;color:var(--river);margin-bottom:8px}
.cookie a{color:var(--navy)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.cookie-actions .linklike{color:var(--navy);font-weight:700;margin-left:auto}
.cbtn{font:800 .95rem var(--body);border:0;border-radius:12px;padding:11px 16px;cursor:pointer;background:var(--navy);color:var(--white)}
.cbtn:hover{background:#0a2552}
.cbtn.ghost{background:var(--river-soft);color:var(--navy);margin-top:4px}
.cbtn.ghost:hover{background:#d3e9fb}
.cookie-details{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:2px dotted #d8e6f3}
.cookie-details[hidden]{display:none}
.cookie-option{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;cursor:pointer}
.cookie-option input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--river)}
.cookie-option b{display:block;color:var(--navy)}
.cookie-option span{color:var(--muted)}
footer .linklike{color:#c3d1ea;font-size:.9rem}
footer .linklike:hover{color:var(--white)}

/* Rechtsseiten (Impressum, Datenschutz): ein eingeklebtes Blatt im Album */
.legalpage{background:linear-gradient(180deg,var(--river-soft),var(--white) 520px);padding-block:48px 90px}
.legalpage .wrap{max-width:900px}
.back{display:inline-block;margin-bottom:28px;color:var(--navy);font-weight:800;text-decoration:none;padding:8px 14px;border-radius:12px;background:var(--white)}
.back:hover{background:var(--sunny)}
.legal-sheet{position:relative;background:var(--white);padding:clamp(24px,5vw,64px);border-radius:4px;box-shadow:0 24px 60px -30px rgba(15,51,112,.45)}
.legal-sheet::before{content:"";position:absolute;top:-14px;left:50%;width:130px;height:30px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,210,90,.8)}
.legal-sheet .hand{font-size:clamp(1.8rem,3vw,2.2rem);margin-bottom:4px;transform:rotate(-2deg);transform-origin:left center}
.legal-sheet h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.legal-sheet .lead{margin-top:12px;font-size:1.12rem;color:var(--muted);max-width:44em}
.legal-sheet section{margin-top:38px;max-width:46em}
.legal-sheet h2{font-size:1.35rem;font-weight:700;margin-bottom:10px}
.legal-sheet p + p{margin-top:12px}
.legal-sheet ul{margin:10px 0 0;padding-left:22px}
.legal-sheet li{margin-top:4px}
.legal-sheet li::marker{color:var(--green)}
.legal-sheet a{color:var(--river);font-weight:600}
.facts-list{display:grid;grid-template-columns:max-content 1fr;gap:6px 22px;margin:0}
.facts-list dt{font-weight:800;color:var(--navy)}
.facts-list dd{margin:0}
.summary{margin-top:34px;background:var(--sunny);border-radius:20px;padding:24px clamp(20px,3vw,32px)}
.summary h2{font-size:1.3rem}
.notice{background:var(--river-soft);border-radius:20px;padding:24px clamp(20px,3vw,32px);max-width:none}
.translation-note{margin-top:16px;font-size:.95rem;color:var(--muted);font-style:italic}
.stand{margin-top:44px;font-size:.9rem;color:var(--muted)}

/* Sprungmarke für Tastatur und Screenreader – nur bei Fokus sichtbar */
/* Sprunglink für Tastatur/Screenreader: komplett unsichtbar (auch beim Überscrollen
   am Seitenanfang auf dem Handy), erscheint nur, wenn er per Tab den Fokus bekommt */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:12px;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;z-index:100;background:var(--navy);color:var(--white);padding:10px 16px;border-radius:12px;font-weight:800;text-decoration:none}