/* Für Leonie – Kurztrip nach Belgien & NL
   Editorial design angelehnt an sonne-wolken.de: Playfair Display für
   Überschriften, Roboto für Fließtext, kantige Bilder ohne Schatten. */

:root{
  --ink:#1f1b18;
  --ink-soft:#666666;
  --meta:#8c919b;
  --accent:#c0432a;
  --line:rgba(31,27,24,0.12);
  --bg:#ffffff;
  --bg-belgien:#fbf8f3;
  --bg-niederlande:#f6f8fa;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:'Roboto', sans-serif; font-size:17px; line-height:1.65;
  color:var(--ink-soft); background:var(--bg);
}
h1,h2,h3,h4{font-family:'Playfair Display', serif; font-weight:700; color:var(--ink); margin:0; line-height:1.2;}
a{color:var(--accent);}
img{max-width:100%; display:block;}

.eyebrow{
  font-family:'Roboto Condensed', sans-serif; font-size:.76rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--meta);
}

.divider{
  display:flex; align-items:center; gap:14px; margin:40px 0 20px; color:var(--ink-soft);
}
.divider span{
  font-family:'Playfair Display', serif; font-size:1.15rem; font-weight:700; color:var(--ink);
  white-space:nowrap;
}
.divider::before, .divider::after{content:""; flex:1; height:1px; background:var(--line);}

/* ---------- Übersichtsseite (index.html) ---------- */

body.overview{overflow:hidden;}
#scroller{height:100vh; height:100dvh; overflow-y:scroll; scroll-snap-type:y mandatory; scroll-behavior:smooth;}
#scroller::-webkit-scrollbar{display:none;}

.tabs{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:center; gap:28px;
  background:rgba(255,255,255,0.92); padding:16px 12px;
  border-bottom:1px solid var(--line);
}
.tabs a{
  font-family:'Roboto Condensed', sans-serif; font-size:.78rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  padding-bottom:4px; border-bottom:2px solid transparent; text-decoration:none;
}
.tabs a.active{color:var(--ink); border-bottom-color:var(--accent);}

.group{
  height:100vh; height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; padding-top:14vh; position:relative;
}
.group.bg-belgien{background:var(--bg-belgien);}
.group.bg-niederlande{background:var(--bg-niederlande);}

.group-header{padding:0 6vw 16px;}
.group-header .region-tag{font-family:'Roboto Condensed', sans-serif; font-size:.76rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
.group-header h2{font-size:1.7rem; margin-top:6px;}
.group-header .sub{font-family:'Roboto Condensed', sans-serif; font-size:.8rem; color:var(--meta); margin-top:6px; letter-spacing:.02em;}

.cities-row{
  flex:1; display:flex; align-items:stretch; gap:20px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  padding:0 11vw 6vh; -webkit-overflow-scrolling:touch;
}
.cities-row::-webkit-scrollbar{display:none;}

.city-card{
  flex:0 0 76vw; max-width:320px; scroll-snap-align:center;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
.city-card .photo{
  flex:0 0 auto; aspect-ratio:4/5; background-size:cover; background-position:center;
  background-color:#e7ddce; position:relative;
}
.city-card .time-pill{
  position:absolute; left:0; bottom:0; background:rgba(255,255,255,0.94); color:var(--ink);
  font-family:'Roboto Condensed', sans-serif; font-weight:400; font-size:.72rem; letter-spacing:.06em;
  padding:5px 10px;
}
.city-card .body{padding-top:14px;}
.city-card h3{font-size:1.28rem;}
.city-card p{font-size:.86rem; line-height:1.5; color:var(--ink-soft); margin:6px 0 0;}
.city-card .pill{
  display:inline-block; margin-top:10px; font-family:'Roboto Condensed', sans-serif;
  font-size:.72rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--accent); padding-bottom:2px;
}

.hint{text-align:center; font-family:'Roboto Condensed', sans-serif; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--meta); padding-bottom:2vh;}

.dots{position:fixed; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; z-index:10;}
.dots span{width:6px; height:6px; border-radius:50%; background:rgba(31,27,24,0.2); transition:background .2s, transform .2s;}
.dots span.active{background:var(--accent); transform:scale(1.3);}

@media (min-width:700px){
  .group-header h2{font-size:2.4rem;}
  .city-card{flex:0 0 300px;}
  .cities-row{padding:0 8vw 6vh; gap:26px;}
}

/* ---------- Detailseiten (staedte/*.html) ---------- */

.back{
  display:inline-block; margin:20px 6vw 0;
  font-family:'Roboto Condensed', sans-serif; font-size:.78rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
}
.back:hover{color:var(--accent);}

.page-head{max-width:640px; margin:0 auto; padding:22px 6vw 24px;}
.page-head h1{font-size:2.3rem;}
.page-head .subtitle{font-family:'Roboto Condensed', sans-serif; font-size:.88rem; color:var(--meta); margin-top:10px; letter-spacing:.01em;}

.hero-image{width:100%; margin:0;}
.hero-image img{width:100%; height:52vw; min-height:220px; max-height:420px; object-fit:cover;}

.content{max-width:640px; margin:0 auto; padding:32px 6vw 60px;}
.content p.lead{font-size:1.05rem; line-height:1.7; color:var(--ink-soft); margin:0;}

.highlights{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:0;}
.highlights li{
  padding:12px 0; font-size:.92rem; line-height:1.5; color:var(--ink-soft);
  border-top:1px solid var(--line);
}
.highlights li:last-child{border-bottom:1px solid var(--line);}
.highlights li::before{content:"— "; color:var(--accent); font-weight:700;}

.activities{display:flex; flex-direction:column; gap:36px;}
.activity img{width:100%; height:260px; object-fit:cover;}
.activity .activity-body{padding-top:14px;}
.activity h4{font-size:1.3rem;}
.activity p{margin:8px 0 0; font-size:.94rem; line-height:1.6; color:var(--ink-soft);}

.link-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.link-list li a{
  display:block; padding:13px 0; font-size:.92rem; color:var(--ink);
  border-top:1px solid var(--line); text-decoration:none;
}
.link-list li:last-child a{border-bottom:1px solid var(--line);}
.link-list li a::after{content:" →"; color:var(--accent);}

.nav-footer{
  display:flex; justify-content:space-between; align-items:center; margin-top:44px;
  padding-top:22px; border-top:1px solid var(--line);
}
.nav-footer a{
  font-family:'Roboto Condensed', sans-serif; font-size:.8rem; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-decoration:none;
}
.nav-footer a:hover{color:var(--accent);}