/* Grundlegende, gut lesbare Basis */
:root{
  --bg: #f7f9fc;
  --text: #1f2937;
  --brand: #004466;      /* dunkles Blau: hoher Kontrast */
  --accent: #ffb703;     /* warmes Gelb als Hingucker */
  --card: #ffffff;
  --muted: #64748b;
  --shadow: 0 4px 16px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
}

.wrap{max-width:1000px; margin:0 auto; padding:0 20px}

/* Skip-Link für Screenreader & Tastatur */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; background:#fff; color:#000;
  padding:10px 14px; border-radius:6px; box-shadow:var(--shadow);
}

/* Header / Navigation */
.site-header{background:var(--brand); color:#fff}
.site-header .wrap{display:flex; align-items:center; gap:24px; padding:16px 20px; flex-wrap:wrap}
.brand{margin:0; font-size:28px; letter-spacing:.5px}
.nav{list-style:none; display:flex; gap:18px; padding:0; margin:0}
.nav a{color:#fff; text-decoration:none; font-weight:bold; padding:8px 10px; border-radius:6px}
.nav a:hover,.nav a:focus{background:rgba(255,255,255,.12); outline:none}

/* Hero */
.hero{
  background:linear-gradient(180deg, #0a4e6e, #07384f);
  color:#fff; padding:36px 0;
  text-align:center;
}
.hero h2{margin:.2em 0 .4em; font-size:32px}
.hero p{max-width:760px; margin:0 auto 18px; color:#eaf6ff}

/* Buttons */
.btn{
  display:inline-block; padding:14px 18px; font-weight:bold;
  border-radius:10px; text-decoration:none; cursor:pointer;
  border:2px solid transparent;
}
.btn:focus{outline:3px solid #fff; outline-offset:2px}
.btn-primary{background:var(--accent); color:#242424}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:#fff; color:var(--brand); border-color:#fff}
.btn-secondary:hover{background:#eaf6ff}
.btn-ghost{background:transparent; color:#fff; border-color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Features */
.features{padding:28px 0}
.grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.feature{
  background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow)
}
.feature h3{margin:0 0 6px}

/* Tours */
.tours{padding:10px 0 24px}
.tours h2{text-align:center; margin:10px 0 12px}
.tour-card{
  background:var(--card); border-radius:14px; padding:20px; margin:16px 0;
  box-shadow:var(--shadow)
}
.tour-card h3{margin:0 0 8px; color:var(--brand)}
.details{margin:10px 0 0; padding-left:18px}
.details li{margin:4px 0}
.card-cta{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}

/* Infos */
.infos{padding:10px 0 24px}
.grid-2{display:grid; gap:20px; grid-template-columns:repeat(2,1fr)}
.checklist{padding-left:20px; margin:10px 0}
.checklist li{margin:6px 0}
.note{background:#fff; border-left:6px solid var(--accent); border-radius:10px; padding:16px; box-shadow:var(--shadow)}

/* Testimonials */
.testimonials{padding:6px 0 24px}
.testimonials h2{text-align:center}
.quote{
  background:#fff; padding:18px; border-radius:12px; box-shadow:var(--shadow);
}
.quote span{display:block; color:var(--muted); margin-top:8px}

/* Kontakt */
.contact{padding:6px 0 36px}
.contact-card{
  background:#fff; padding:18px; border-radius:12px; box-shadow:var(--shadow)
}

/* Footer */
.site-footer{background:var(--brand); color:#fff; margin-top:auto}
.site-footer .wrap{padding:16px 20px; text-align:center}

/* Responsiv */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr