:root{
  --navy: #184078;
  --teal: #0098C0;
  --taupe: #B8A8A8;
  --ink: #0f172a;
  --muted: #475569;
  --bg: #ffffff;
  --card: #f7fafc;
  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 18px 50px rgba(2, 8, 23, 0.10);
  --radius: 18px;
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: radial-gradient(1100px 450px at 30% -10%, rgba(0,152,192,.14), transparent 60%),
              radial-gradient(900px 450px at 80% 0%, rgba(24,64,120,.10), transparent 55%),
              var(--bg);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:20px; top:20px; width:auto; height:auto; padding:10px 14px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); z-index:999}

header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 18px 0;
}

.brand{
display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap:8px;
  min-width: 220px;
}
.brand img{
  height:80px;
  width:auto;
  display:block;
}
.brand .tagline{
 display:block;
  font-size: 14px;
  font-weight: 700;        /* fett */
  color: var(--navy);      /* stärkerer Kontrast (Logo-Farbe) */
  letter-spacing: 0.2px;
  line-height: 1.25;
  opacity: 0.95;
}

nav ul{
 list-style:none;
  display:flex;
  gap: 22px;   /* vorher 18px */
  padding:0;
  margin:0;
  align-items:center;
}

nav a{
  font-weight:700;
  font-size: 16px;      /* vorher 14px */
  color: #0b1220;
  padding:12px 14px;    /* etwas größer, wirkt “kräftiger” */
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
nav a:hover{background: rgba(0,152,192,.12); color: var(--navy)}
nav a.cta{
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  box-shadow: 0 10px 25px rgba(24,64,120,.22);
}
nav a.cta:hover{background: linear-gradient(135deg, #14345f, #0085aa);}

.hero{
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
  padding: 56px 0 34px;
}
.hero-card{
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.02em;
  color: var(--navy);
  text-transform: uppercase;
  font-size: 12px;
}
.kicker .dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(0,152,192,.14);
}
h1{
  margin: 12px 0 10px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.lead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 16px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn-primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,152,192,.16);
}
.btn-ghost{background: rgba(255,255,255,.7)}
.btn-ghost:hover{background: rgba(0,152,192,.10)}

.hero-visual{
  position:relative;
  min-height: 360px;
  border-radius: calc(var(--radius) + 8px);
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero-visual::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(24,64,120,.55), rgba(0,152,192,.15)),
    url("Bilder/Haupt.jpg") center/cover no-repeat;
  transform: scale(1.02);
}
.hero-visual::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(700px 300px at 65% 15%, rgba(255,255,255,.35), transparent 55%);
  pointer-events:none;
}
.badge{
  position:absolute;
  left:16px; bottom:16px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 10px 25px rgba(2,8,23,.12);
}
.badge b{font-size:13px}
.badge span{font-size:12px; color: var(--muted)}

.section{
  padding: 25px 0;   /* 54px 0 */
 
}
 
.section h2{
  margin: 0 0 12px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.section p{color: var(--muted); margin: 0}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.card{
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
}
.card h3{
  margin: 6px 0 8px;
  font-size: 18px;
}

.card-img-bottom{
  width: 100%;
  height: 110px;           /* Höhe kannst du anpassen */
  object-fit: cover;
  border-radius: 14px;
  margin-top: 14px;
  border: 1px solid var(--border);
  display:block;
}

.card p{margin:0; font-size: 14px}


/* Inspiration Preview + Galerie */
.inspo-preview{
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  box-shadow: 0 14px 32px rgba(2,8,23,.10);
  position: relative;
}

.inspo-preview img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.inspo-preview-caption{
  position:absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  backdrop-filter: blur(8px);
}

.inspo-strip{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.inspo-strip a{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  transition: transform .12s ease, box-shadow .2s ease;
}

.inspo-strip a:hover,
.inspo-strip a:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(2,8,23,.12);
  outline: none;
}

.inspo-strip img{
  width:100%;
  height: 92px;
  object-fit: cover;
  display:block;
}










.icon{
  width:40px; height:40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(0,152,192,.12);
  border: 1px solid rgba(0,152,192,.20);
  color: var(--navy);
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.panel{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  padding: 18px;
}

.list{
  margin: 12px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 0;
  border-top: 1px dashed rgba(15,23,42,.14);
}
.list li:first-child{border-top:none}
.check{
  margin-top: 2px;
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(24,64,120,.12);
  border: 1px solid rgba(24,64,120,.22);
  flex: 0 0 auto;
}
.small{font-size: 13px; color: var(--muted)}

.callout{
  margin-top: 18px;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(135deg, rgba(24,64,120,.10), rgba(0,152,192,.10));
  border: 1px solid rgba(184,168,168,.45);
}

.callout-actions{
  display:flex;
  width: 100%;
  justify-content: space-between; /* links / rechts */
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.callout-actions .btn-right{
  margin-left:auto; /* schiebt NUR diesen Button nach rechts */
}

.callout strong{font-size: 16px}
.callout .btn{white-space:nowrap}

footer{
  border-top: 1px solid var(--border);
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
  background: rgba(255,255,255,.70);
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}


.inspo-strip{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.inspo-strip a{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  transition: transform .12s ease, box-shadow .2s ease;
}

.inspo-strip a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(2,8,23,.10);
}

.inspo-strip img{
  width:100%;
  height: 92px;     /* Höhe der Vorschau */
  object-fit: cover;
  display:block;
}

.anfrage-iframe{
  width: 100%;
  height: 1350px;          /* kannst du später anpassen */
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
}

.termin-iframe{
  width: 100%;
  height: 1500px;          /* nach Bedarf anpassen */
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
}

.split.single{
  grid-template-columns: 1fr;
}


.footer-row a{color: var(--navy); font-weight:700}
.footer-row a:hover{text-decoration:underline}

.mobile-menu{ display: none; }

.mobile-toggle{display:none}
@media (max-width: 1100px){
  .inspo-strip{ grid-template-columns: repeat(3, 1fr); }
  .inspo-preview img{ height: 220px; }
  .hero .wrap{grid-template-columns: 1fr; padding-top: 34px}
  .hero-visual{min-height: 320px}
  .grid-3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  nav ul{display:none}
  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.7);
    font-weight: 800;
    font-size: 14px;
  }
  .mobile-menu{
    display:none;
    padding: 10px 0 16px;
  }
  .mobile-menu.open{display:block}
  .mobile-menu a{
    display:block;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-top: 10px;
    background: rgba(255,255,255,.75);
  }
  .mobile-menu a.cta{border:none}
}
@media (min-width: 901px){
  nav ul{ gap: 16px; }
  nav a{ padding: 10px 12px; font-size: 15px; }
}



nav a[aria-current="page"],
.mobile-menu a[aria-current="page"],
nav a.is-active,
.mobile-menu a.is-active{
  background: rgba(24,64,120,.10);
  color: var(--navy);
  box-shadow: inset 0 0 0 2px rgba(24,64,120,.25);
}

/* Optional: kleine “Unterstreichung” als zusätzlicher Hinweis */
nav a[aria-current="page"]{
  position: relative;
}
nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  opacity:.9;
}




/* ================= HOTEL LAYOUT ================= */

.hotel{
  display:grid;
  grid-template-columns: 1fr 1fr; /* links / rechts */
  gap: 24px;
  align-items:start;
}

@media (max-width: 900px){
  .hotel{
    grid-template-columns: 1fr;
  }
}

.hotel-image-main{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

.hotel-image-main img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
}

.hotel-thumbs{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}

.hotel-thumbs img{
  width:100%;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  cursor:pointer;
  opacity:.75;
  transition: opacity .2s ease, transform .15s ease;
}

.hotel-thumbs img:hover{
  opacity:1;
  transform: translateY(-2px);
}

.hotel-thumbs img.active{
  opacity:1;
  box-shadow: 0 0 0 2px var(--navy);
}

.hotel-info h2{
  margin-top:0;
}

.hotel-recommend{
  margin: 18px 0;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(24,64,120,.10),
    rgba(0,152,192,.10)
  );
  border: 1px solid rgba(24,64,120,.25);
}

.hotel-recommend strong{
  display:block;
  margin-bottom:6px;
  color: var(--navy);
}

article{
  margin-bottom: 80px;
}




/* Newsletter Begleitete Reisen iframe im Callout */
/* ===== Newsletter-Callout: kompakt & sauber ===== */
.newsletter-callout{
  display: grid;              /* überschreibt flex der Basis-callout */
  grid-template-columns: 1fr; /* untereinander */
  gap: 12px;
  align-items: start;
}

.newsletter-callout .callout-actions{
  width: 100%;
  max-width: 760px;           /* optional: begrenzt Breite auf Desktop */
  margin: 0;                  /* standard: linksbündig */
}

/* Wenn du es zentriert willst, nimm stattdessen:
.newsletter-callout .callout-actions{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
*/

.newsletter-iframe{
  width: 100%;
  height: 280px;              /* ggf. 230–260, falls es zu knapp ist */
  border: 0;
  border-radius: 14px;
  display: block;
}


/* ===== Footer Social Media ===== */
.footer-links{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.social-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.social-icon{
  width: 18px;
  height: 18px;
  fill: currentColor; /* übernimmt Linkfarbe */
}

.social-link:hover{
  color: #1877F2; /* Facebook Blau beim Hover */
}


.hotel-head { 
 grid-column: 1 / -1;
  margin-bottom: 0;
}

.hotel-head h2{ margin: 0 0 6px; }
.hotel-head .small{ margin: 0; opacity: .85; }

.hotel-head h2{
  margin: 0 0 6px;
}

.hotel-head .small{
  margin: 0;
  opacity: 0.85;
}


@media (max-width: 900px){
  .hotel{
    grid-template-columns: 1fr;
  }
  .hotel-head{ grid-column: 1; }
}