:root{
  --nav:#000000;        /* alleen voor menu en hamburgericoon */
  --link:#cd5b00;       /* standaard linkkleur in de content */
  --footer:#ba7b00;     /* footer achtergrond */
  --ink:#18222f;
  --muted:#f2b479;
  --line:#e6ebf2;
  --card:#ffffff;
  --chip:#f7f9fc;
  --pagebg:#f3f3f3;     /* pagina-achtergrond tussen header en footer */
  --radius:14px;        /* globale ronding */

  /* Banner-afmetingen */
  --banner-w:300px;
  --banner-h:250px;
}

/* ========== BASIS ========== */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--pagebg);
  overflow-x:hidden;
}
body{padding-bottom:0}
img{max-width:100%;height:auto;display:block}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a:visited{color:var(--link)}

.container{max-width:1100px;margin:0 auto;padding:0 16px;overflow:visible}
section{padding:28px 0}
section:last-of-type{padding-bottom:40px}
.lead{opacity:.9}

/* ========== HEADER ========== */
header.site{background:#ffffff;border-bottom:1px solid var(--line);position:relative;z-index:30}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:74px;flex-wrap:wrap;
}
.brand{flex:0 0 auto}
.brand img{height:60px}

/* NAV */
nav{flex:1 1 auto;position:relative;z-index:40}
nav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:8px;
  justify-content:flex-end;flex-wrap:nowrap;
}
nav li{flex:0 0 auto}
nav a{
  display:block;color:var(--nav) !important;font-weight:700;
  padding:10px 14px;border-radius:10px;white-space:nowrap;text-decoration:none;
}
nav a:hover,nav a.active{
  background:#ffa900;text-decoration:none;color:var(--nav) !important;
}

/* Hamburger menu voor mobiel */
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:50}
.menu-toggle span{
  display:block;width:24px;height:3px;background:var(--nav);
  margin:5px 0;border-radius:2px;transition:all .3s ease;
}

/* ========== FULL-BLEED BALK ========== */
.header-gap.full-bleed{
  height:12px;background:#075c98;width:100vw;position:relative;
  left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-bottom:18px;
}

/* FOOTER-BALK */
.footer-gap.full-bleed{
  height:24px;
  background:#075c98;
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c8d1ff;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.2px;
  border-top:1px solid rgba(255,255,255,.15);
}

/* ========== INTRO ========== */
.intro-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(10,20,40,.06);padding:22px;
}
.intro{
  display:grid;grid-template-columns:1.5fr .5fr;gap:24px;align-items:center;
}
.intro > *{min-width:0}
.intro h1,.intro p{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.intro .photo{
  width:min(100%,var(--banner-w));aspect-ratio:6/5;height:auto;border-radius:12px;
  background:#eef3f0 url('/images/vliegveld-bremen.jpg') center/cover no-repeat;
  border:1px solid var(--line);margin-left:auto;
  justify-self:end;
}

/* ========== GRIDS & CARDS ========== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 2px 10px rgba(8,28,58,.05)
}
.card .pad{padding:14px}

/* ========== BANNERS (sponsor/affiliates) ========== */
.logoCard{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 2px 10px rgba(8,28,58,.05);
  transition:transform .12s ease, box-shadow .12s ease;
}
.logoCard:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(8,28,58,.12)}
.logoCard .logoBox{
  display:flex;align-items:center;justify-content:center;background:#fff;
  height:calc(var(--banner-h) + 24px);padding:12px;
}
.logoCard .logoBox img{
  width:var(--banner-w);height:var(--banner-h);object-fit:contain;
  border-radius:12px;background:#fff;border:1px solid var(--line);
}
.logoCard .pad{padding:14px}
.slogan{
  font-weight:500;        /* niet vet */
  margin:.1rem 0 .35rem;
}
.slogan a{font-weight:inherit;}

/* Lijst met deeplinks onder banners */
.linkrows{display:flex;flex-direction:column;gap:6px}
.linkrow{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--line);padding:9px 12px;
  border-radius:10px;font-weight:400;
}
.linkrow .arrow{opacity:.9}
.row-gap{margin-top:16px}

/* ========== BESTEMMINGEN / TABELLEN ========== */
.section-gap{margin-top:26px}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 6px;                 /* compacter */
}
.table thead th{
  text-align:left;
  font-weight:800;
  color:#456;
  font-size:.95rem;
  padding:0 6px 3px 6px;
}
.table tbody tr{
  background:#fff;
  box-shadow:0 1px 6px rgba(8,28,58,.06);
  border-radius:12px;
}
.table tbody td{
  padding:8px 10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.table tbody td:first-child{
  border-left:1px solid var(--line);
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
.table tbody td:last-child{
  border-right:1px solid var(--line);
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}
.table td a{
  color:var(--link);
  font-weight:400;                      /* niet vet */
  text-decoration:none;
}
.table td a:hover{ text-decoration:underline }

/* ========== NIEUWS (compact, bv op home) ========== */
.news-compact{display:flex;flex-direction:column;gap:12px}
.news-item{
  display:grid;grid-template-columns:150px 1fr;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 6px rgba(8,28,58,.06)
}
.news-item img{width:200px;height:200px;object-fit:cover}
.news-item .ni-pad{padding:10px;min-width:0}

/* ========== NIEUWS (lijstpagina nieuws.php) ========== */
.news-wrap{max-width:1100px;margin:0 auto;padding:0 16px 28px}
.newslist{display:grid;grid-template-columns:1fr;gap:18px}
.news-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 2px 10px rgba(8,28,58,.05)
}
.news-card-inner{
  display:grid;grid-template-columns:minmax(220px,260px) 1fr;gap:16px
}
.news-cover{
  width:100%;height:220px;background:#fff center/cover no-repeat;border-right:1px solid var(--line)
}
.news-pad{padding:14px;min-width:0}
.news-title{margin:.2rem 0 .35rem;font-size:1.05rem;line-height:1.35}
.news-date{margin:.1rem 0 .5rem;color:var(--muted)}
.news-excerpt{margin:0}
.news-more{margin-top:.6rem;display:inline-block;font-weight:700}

/* ========== FOOTER ========== */
footer{background:var(--footer);color:#fff;margin-top:28px}
footer .cols{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;padding:24px 20px;
}
footer h3{margin:.2rem 0 .6rem}
footer a,
footer a:visited{
  color:#fff !important;
  text-decoration:none;           /* geen streep standaard/visited */
  font-weight:400;                /* rustig gewicht */
}
footer a:hover,
footer a:focus{
  color:#ffe8c6 !important;
  text-decoration:underline;      /* alleen op hover/focus */
}
footer a:active{
  color:#fff !important;
  text-decoration:none;
}
footer ul{margin:0;padding-left:0;list-style:none}
footer li+li{margin-top:6px}

input[type=email]{
  width:100%;padding:12px;border:1px solid #0d3f2a;border-radius:10px;
  background:#0c2f21;color:#e6ecff;
}
button.btn{
  margin-top:10px;padding:10px 14px;border:0;border-radius:10px;
  background:#0ea36b;color:#fff;font-weight:800;cursor:pointer;
}

/* ========== TYPOGRAFIE – rustiger, beter leesbaar ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

html, body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;color:var(--ink);
}

/* Koppen – kleiner en subtieler */
h1, h2, h3{font-weight:600;color:#222;letter-spacing:.2px}
h1{
  font-size:clamp(18px,2vw,26px);
  margin:.5rem 0 .9rem;line-height:1.25;
}
h2{
  font-size:clamp(18px,2vw,23px);
  margin:1.3rem 0 .6rem;line-height:1.3;
}
h3{
  font-size:1.05rem;margin:.8rem 0 .4rem;line-height:1.35;
}

/* Paragrafen */
p{margin:0 0 1rem 0;font-weight:400}

/* Tekstpagina-lijsten (Parkeren, FAQ) */
section ul{list-style:disc;margin:0 0 1rem 1.1rem;padding-left:0}
section ul li{margin-bottom:6px;font-weight:400;line-height:1.6}

/* ========== RESPONSIVE ========== */
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .intro{grid-template-columns:1fr .8fr}
  .intro .photo{margin-left:auto}
  footer .cols{grid-template-columns:1fr}
}

@media (max-width:700px){
  .grid3{grid-template-columns:1fr 1fr}
  .intro{grid-template-columns:1fr;align-items:start}
  .intro .photo{margin:12px 0 0 0;justify-self:stretch}
  .news-card-inner{grid-template-columns:1fr}
  .news-cover{height:200px;border-right:0;border-bottom:1px solid var(--line)}
}

@media (max-width:560px){
  .grid3{grid-template-columns:1fr}
  nav ul{
    justify-content:flex-end;flex-wrap:wrap;column-gap:8px;row-gap:8px;max-width:100%;
  }
  nav li{flex:1 1 calc(50% - 8px)}
  nav a{padding:8px 10px;font-size:14px;white-space:nowrap;text-align:center}
  .intro .photo{margin-left:0}
}

@media (max-width:480px){
  .news-item{grid-template-columns:120px 1fr}
  .news-item img{width:120px;height:120px}
}

@media (orientation:landscape) and (max-width:900px){
  .grid3{grid-template-columns:1fr}
}

/* ========== MOBIEL MENU ========== */
@media (max-width:768px){
  .menu-toggle{display:block}
  nav ul{
    position:absolute;top:74px;left:0;right:0;background:#fff;
    flex-direction:column;padding:16px;box-shadow:0 4px 12px rgba(8,28,58,.1);
    display:none;border-top:1px solid var(--line);z-index:35;
  }
  nav ul.open{display:flex}
  nav li{width:100%}
  nav a{width:100%;text-align:left;padding:12px 14px}
}

/* ---- Compacte heading-schaal site-breed ---- */
:root{
  --h1: clamp(18px, 2vw, 24px);
  --h2: clamp(16px, 1.8vw, 21px);
  --h3: 1.05rem;
}

h1{font-size:var(--h1)!important;line-height:1.3;margin:.4rem 0 .8rem;font-weight:600}
h2{font-size:var(--h2)!important;line-height:1.3;margin:1.1rem 0 .55rem;font-weight:600}
h3{font-size:var(--h3);line-height:1.35;margin:.8rem 0 .4rem}

/* Nieuws detail */
main .news-pad h1{font-size:var(--h1)!important}

/* ====== Bestemmingen grid ====== */
.dest-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:700px){ .dest-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .dest-grid{grid-template-columns:1fr} }

.dest-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(8,28,58,.05);
  display:flex;
  flex-direction:column;
}

.dest-thumb{
  position:relative;
  display:block;
  background:#fff;
  border-bottom:1px solid var(--line);
  aspect-ratio:6/5;              /* 600x500 */
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.dest-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.dest-thumb:hover{
  transform:scale(1.02);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.dest-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.05);
  opacity:0;
  transition:opacity .25s ease;
}
.dest-thumb:hover::after{opacity:1;}

.dest-title{
  text-align:center;
  margin:.7rem 10px .2rem;
  font-size:1.05rem;
}
.dest-title a{ color:inherit; text-decoration:none; }
.dest-title a:hover{ text-decoration:underline; }

.dest-intro{
  margin:0 .9rem 1rem;
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ==== Compactere spacing op bestemmingenpagina ==== */
main.container > .section-gap:first-of-type { margin-top:14px; padding-top:0; }
.section-gap + .section-gap { margin-top:18px; }
main.container > p.lead { margin-bottom:0.6rem; }

/* ===== Sidebar sponsors (ook gebruikt op bestemmingspagina's) ===== */
.sidebar .logoCard{
  margin:0;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 2px 10px rgba(8,28,58,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sidebar .logoCard:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(8,28,58,.12); }
.sidebar .logoCard .logoBox{
  padding:0; background:#fff; border:0; height:auto;
}
.sidebar .logoCard .logoBox img{
  display:block; width:100%; height:auto; object-fit:cover; border:0; border-radius:0;
}
.sidebar .logoCard .pad{ padding:8px 10px 10px; }
.sidebar .slogan{ margin:.2rem 0 0; font-weight:500; }
.sidebar .logoCard + .logoCard{ margin-top:12px; }

/* ===== Sidebar bestemmingslinks-card ===== */
.side-destinations.card .pad{ padding:12px; }
.side-destinations h3{ margin:.2rem 0 .3rem; font-size:1rem; }
.side-destinations ul{ margin:0; padding:0; list-style:none; }
.side-destinations li + li{ margin-top:6px; }
.side-destinations a{ text-decoration:none; color:var(--link); font-weight:500; }
.side-destinations a:hover{ text-decoration:underline; }

.side-destinations.card {
  margin-bottom: 14px; /* of 16px als je iets meer lucht wilt */
}

/* ====== Bestemmingspagina: layout ====== */
.dest-layout{
  display:grid;
  grid-template-columns: 3fr 1fr;   /* ~75% / 25% */
  gap:24px;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px 28px;
}
.article.card .pad{ padding:16px; }
.article h1{ margin-top:.4rem; }
.article p{ margin:0 0 1rem; }

/* ====== Artikelafbeeldingen: breder op desktop, trapsgewijs op midsize ====== */
.figure-left,
.figure-right{
  width:300px;               /* ≥ 1101px: 300px */
  max-width:50%;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 1px 6px rgba(8,28,58,.06);
}
.figure-left{ float:left;  margin:0 16px 12px 0; }
.figure-right{ float:right; margin:0 0 12px 16px; }

/* 1000–1100px: 280px */
@media (max-width:1100px) and (min-width:1000px){
  .figure-left, .figure-right{ width:280px; }
}

/* 900–999px: 260px */
@media (max-width:999px) and (min-width:900px){
  .figure-left, .figure-right{ width:260px; }
}

/* < 900px: full-width onder elkaar */
@media (max-width:900px){
  .dest-layout{ grid-template-columns:1fr; }
  .figure-left, .figure-right{
    float:none; width:100%; max-width:100%; margin:0 0 12px 0;
  }
}