/*
Theme Name: Holiday World
Theme URI: https://holiday-world.com
Author: Holiday World
Description: Reisebüro Theme – Blau & Orange
Version: 3.0.0
Requires at least: 6.0
Text Domain: holiday-world
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400&family=Nunito:wght@300;400;500;600;700&display=swap');

/* =========================================================
   CSS VARIABLEN
   ========================================================= */


/* =========================================================
   RESET & BASIS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  color: var(--text);
  background: var(--offwhite);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--orange); }

/* =========================================================
   TYPOGRAFIE
   ========================================================= */
h1, h2, h3 {
  font-family: var(--fh);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -.01em;
}
h4 { font-family: var(--fh); font-weight: 700; font-size: .95rem; margin-bottom: .4rem; letter-spacing: .02em; }
h1 { font-size: clamp(2rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); margin-bottom: .8rem; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); margin-bottom: .5rem; }
p { margin-bottom: 1rem; font-weight: 400; color: var(--textmid); font-size: .95rem; line-height: 1.85; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; color: var(--orange) !important; font-weight: inherit; }

/* =========================================================
   LAYOUT
   ========================================================= */
.hw-container { max-width: 1200px; margin-inline: auto; padding-inline: 2.5rem; }
.hw-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.hw-section--sand   { background: var(--blue-bg); }
.hw-section--sand2  { background: var(--blue-bg2); }
.hw-section--white  { background: var(--white); }
.hw-section--dark {
  background: linear-gradient(135deg, var(--blue-dark) 0%, #2a4060 100%);
  color: var(--white);
}
.hw-section--dark h1,
.hw-section--dark h2,
.hw-section--dark h3 { color: var(--white); }
.hw-section--dark p { color: rgba(255,255,255,.72); }
.hw-section--forest {
  background: linear-gradient(135deg, #6b8fa8 0%, #4a6e88 100%) !important;
  color: #fff !important;
}
.hw-section--forest h1,
.hw-section--forest h2,
.hw-section--forest h3 { color: #fff !important; }
.hw-section--forest p { color: rgba(255,255,255,.72) !important; }

/* =========================================================
   SHARED COMPONENTS
   ========================================================= */
.hw-label {
  font-family: var(--fh);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .65rem;
  display: block;
}
.hw-label--light { color: rgba(255,255,255,.55); }
.hw-bar { width: 36px; height: 2px; background: var(--orange); margin-bottom: 1.2rem; }
.hw-bar--center { margin-inline: auto; }
.hw-bar--light { background: rgba(245,130,10,.4); }

/* BUTTONS */
.hw-btn {
  display: inline-block;
  padding: .8em 1.8em;
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.hw-btn--dark { background: var(--blue); color: var(--white); }
.hw-btn--dark:hover { background: var(--orange); color: var(--white); transform: translateY(-2px); }
.hw-btn--gold { background: var(--orange); color: var(--white); }
.hw-btn--gold:hover { background: var(--orange-dk); color: var(--white); transform: translateY(-2px); }
.hw-btn--outline { background: transparent; border: 1.5px solid var(--blue); color: var(--blue); }
.hw-btn--outline:hover { background: var(--blue); color: var(--white); }
.hw-btn--outline-light { background: transparent; border: 1.5px solid rgba(255,255,255,.6); color: var(--white); }
.hw-btn--outline-light:hover { background: rgba(255,255,255,.12); }

/* CHECKLIST */
.hw-checklist { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.hw-checklist li { font-size: .85rem; color: var(--textmid); line-height: 1.7; padding-left: 1.2rem; position: relative; }
.hw-checklist li::before { content: ''; position: absolute; left: 0; top: .65em; width: .5rem; height: 2px; background: var(--orange); }
.hw-checklist--light li { color: rgba(255,255,255,.8); }

/* WAVE */
.hw-wave { display: block; width: 100%; line-height: 0; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.hw-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background .4s ease, padding .3s ease, box-shadow .3s ease;
}
.hw-nav.scrolled {
  padding: .7rem 2.5rem;
  background: rgba(13,71,161,.97) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
/* Auf Unterseiten (kein Video-Hero) immer blau */
body:not(.home) .hw-nav {
  background: linear-gradient(135deg, #4a6e88 0%, #6b8fa8 100%) !important;
}
.hw-nav__logo {
  font-family: var(--fh);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
}
.hw-nav__logo img { max-height: 52px; width: auto; display: block; }
.hw-nav__links { display: flex; gap: 1.8rem; list-style: none; }
.hw-nav__links a {
  font-family: var(--fh);
  font-weight: 600;
  color: rgba(255,255,255,.82);
  font-size: .72rem;
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}
.hw-nav__links a:hover,
.hw-nav__links .current-menu-item > a,
.hw-nav__links a.active { color: var(--orange); }
.hw-nav__cta {
  font-family: var(--fh);
  font-weight: 700;
  background: transparent;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  padding: .5em 1.2em;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}
.hw-nav__cta:hover { background: var(--orange); color: var(--white); }

/* Burger */
.hw-nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.hw-nav__burger span { display: block; width: 22px; height: 2px; background: var(--white); transition: var(--transition); }
.hw-nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hw-nav__burger.open span:nth-child(2) { opacity: 0; }
.hw-nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown */
.hw-nav__links li { position: relative; }
.hw-nav__dropdown {
  display: none !important;
  position: absolute;
  top: calc(100% + 10px); left: 0;
  min-width: 230px;
  background: rgba(13,71,161,.97);
  backdrop-filter: blur(12px);
  list-style: none;
  padding: .6rem 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  z-index: 9999;
  border-top: 2px solid var(--orange);
}
.has-dropdown.open > .hw-nav__dropdown { display: block !important; }
.hw-nav__dropdown a {
  font-family: var(--fh);
  font-weight: 600;
  display: block;
  padding: .6rem 1.2rem;
  color: rgba(255,255,255,.8) !important;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.hw-nav__dropdown a:hover { color: var(--orange) !important; background: rgba(255,255,255,.06); }
.hw-nav__arrow { font-size: .6rem; margin-left: .3rem; opacity: .6; transition: transform .25s; display: inline-block; }
.has-dropdown.open .hw-nav__arrow { transform: rotate(180deg); }

/* =========================================================
   VIDEO HERO
   ========================================================= */
.hw-hero-video {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hw-hero-video__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-hero-video__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(13,71,161,.05) 0%,
    rgba(13,71,161,.2) 40%,
    rgba(6,30,80,.9) 100%);
}
.hw-hero-video__content { position: relative; z-index: 2; padding: 0 2.5rem 5rem; max-width: 780px; }
.hw-hero-video__content h1 { color: var(--white); font-weight: 700; }
.hw-hero-video__eyebrow {
  font-family: var(--fh); font-size: .6rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-bottom: 1rem; display: block;
}
.hw-hero-video__sub { color: rgba(255,255,255,.82); font-size: .95rem; max-width: 500px; margin-bottom: 1.8rem; line-height: 1.85; }
.hw-hero-video__btns { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

.hw-scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,.4); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--fh); }
.hw-scroll-hint__line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(245,130,10,.6), transparent); animation: scrollpulse 2s ease-in-out infinite; }
@keyframes scrollpulse { 0%,100%{opacity:.3;transform:scaleY(.7)} 50%{opacity:1;transform:scaleY(1)} }

/* =========================================================
   SPLIT HERO
   ========================================================= */
.hw-split-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.hw-split-hero__img { position: relative; overflow: hidden; }
.hw-split-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-split-hero__img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 65%, var(--offwhite) 100%);
}
.hw-split-hero__text {
  background: var(--offwhite);
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem 3rem 4rem 2.5rem;
}
.hw-split-hero--dark .hw-split-hero__text {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
}
.hw-split-hero--dark .hw-split-hero__text h1 { color: var(--white); }
.hw-split-hero--dark .hw-split-hero__img::after {
  background: linear-gradient(to right, transparent 65%, var(--blue-dark) 100%);
}

/* =========================================================
   OVERLAP
   ========================================================= */
.hw-overlap { position: relative; }
.hw-overlap__img { width: 100%; object-fit: cover; display: block; }
.hw-overlap__card {
  position: absolute;
  bottom: -2.5rem; right: 2.5rem;
  width: 360px;
  background: var(--white);
  padding: 2.2rem;
  box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--orange);
}

/* =========================================================
   MOSAIC
   ========================================================= */
.hw-mosaic { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3px; }
.hw-mosaic__big { grid-row: span 2; position: relative; overflow: hidden; cursor: pointer; }
.hw-mosaic__sm  { position: relative; overflow: hidden; cursor: pointer; }
.hw-mosaic__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.hw-mosaic__big .hw-mosaic__img { min-height: 500px; }
.hw-mosaic__sm  .hw-mosaic__img { min-height: 249px; }
.hw-mosaic__big:hover .hw-mosaic__img,
.hw-mosaic__sm:hover  .hw-mosaic__img { transform: scale(1.04); }
.hw-mosaic__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,71,161,.85) 0%, transparent 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem;
}
.hw-mosaic__name { font-family: var(--fh); font-size: 1.35rem; font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: .2rem; }
.hw-mosaic__sub  { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hw-mosaic__link { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-top: .5rem; transition: letter-spacing .2s; font-family: var(--fh); font-weight: 700; }
.hw-mosaic__big:hover .hw-mosaic__link,
.hw-mosaic__sm:hover  .hw-mosaic__link { letter-spacing: .16em; }

/* =========================================================
   VORTEILE
   ========================================================= */
.hw-vorteile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.hw-vorteil  { display: flex; gap: 1.2rem; align-items: flex-start; }
.hw-vorteil__num { font-family: var(--fh); font-size: 2.2rem; color: var(--orange); opacity: .7; line-height: 1; flex-shrink: 0; width: 2rem; font-weight: 800; }
.hw-vorteil__text h4 { color: var(--white) !important; font-size: .82rem; margin-bottom: .3rem; }
.hw-vorteil__text p  { color: rgba(255,255,255,.65) !important; font-size: .8rem; margin: 0; line-height: 1.65; }

/* =========================================================
   ABLAUF
   ========================================================= */
.hw-ablauf { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; text-align: center; }
.hw-ablauf__num   { font-family: var(--fh); font-size: 3rem; color: var(--orange); opacity: .5; line-height: 1; margin-bottom: .7rem; font-weight: 800; }
.hw-ablauf__title { font-family: var(--fh); font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }

/* =========================================================
   ZITAT
   ========================================================= */
.hw-zitat { max-width: 640px; margin-inline: auto; text-align: center; }
.hw-zitat__text { font-family: var(--fh); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-style: italic; color: var(--text); line-height: 1.65; margin-bottom: 1rem; font-weight: 300; }
.hw-zitat__attr { font-family: var(--fh); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--textlight); }

/* =========================================================
   HIGHLIGHTS
   ========================================================= */
.hw-hl { border-left: 2px solid var(--orange); padding: .65rem 0 .65rem 1rem; margin-bottom: .65rem; }
.hw-hl h4 { font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.hw-hl p  { font-size: .78rem; color: var(--textmid); margin: 0; line-height: 1.6; }

/* =========================================================
   INFO STRIP
   ========================================================= */
.hw-strip { display: grid; }
.hw-strip--4 { grid-template-columns: repeat(4,1fr); }
.hw-strip__item { padding: 1.5rem; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.hw-strip__item:last-child { border: none; }
.hw-strip__num   { font-family: var(--fh); font-size: 2.2rem; color: var(--orange); display: block; line-height: 1; font-weight: 800; }
.hw-strip__label { font-family: var(--fh); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: .35rem; }

/* =========================================================
   REGIONEN
   ========================================================= */
.hw-regions { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.hw-region { position: relative; overflow: hidden; cursor: pointer; }
.hw-region__img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform .5s; }
.hw-region:hover .hw-region__img { transform: scale(1.05); }
.hw-region__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,71,161,.82) 0%, transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; }
.hw-region__name { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; color: var(--white); }
.hw-region__sub  { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .2rem; }

/* =========================================================
   DEST BAND
   ========================================================= */
.hw-dest-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--blue-bg2); }
.hw-dest-item { background: var(--offwhite); overflow: hidden; cursor: pointer; transition: .25s; }
.hw-dest-item:hover { background: var(--white); }
.hw-dest-img  { width: 100%; height: 130px; object-fit: cover; transition: transform .5s; }
.hw-dest-item:hover .hw-dest-img { transform: scale(1.05); }
.hw-dest-body { padding: .9rem; }
.hw-dest-body h4 { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.hw-dest-body p  { font-size: .72rem; color: var(--textmid); margin: 0; }

/* =========================================================
   FORMULAR
   ========================================================= */
.hw-form { display: flex; flex-direction: column; gap: 1rem; }
.hw-form label { font-family: var(--fh); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: .3rem; display: block; }
.hw-form input, .hw-form textarea, .hw-form select {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--blue-bg2);
  background: var(--offwhite);
  font-family: var(--fb); font-size: .88rem; color: var(--text);
  outline: none; transition: border .2s;
}
.hw-form input:focus, .hw-form textarea:focus, .hw-form select:focus { border-color: var(--blue); }
.hw-form textarea { min-height: 120px; resize: vertical; }

/* =========================================================
   FOOTER
   ========================================================= */
.hw-footer { background: linear-gradient(135deg, var(--blue-dark) 0%, #2a4060 100%); padding: 3rem 2.5rem 1.5rem; }
.hw-footer__grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.hw-footer__logo { font-family: var(--fh); font-size: 1.4rem; font-weight: 800; color: var(--white); display: block; margin-bottom: .7rem; }
.hw-footer__logo span { color: var(--orange); }
.hw-footer p { font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.75; }
.hw-footer h5 { font-family: var(--fh); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .9rem; font-weight: 700; }
.hw-footer ul { list-style: none; }
.hw-footer li { margin-bottom: .5rem; }
.hw-footer li a { color: rgba(255,255,255,.5); font-size: .78rem; transition: color .2s; }
.hw-footer li a:hover { color: var(--orange); }
.hw-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .7rem; color: rgba(255,255,255,.25); padding-top: 1rem; }

/* =========================================================
   PAGE HERO
   ========================================================= */
.hw-page-hero {
  padding-top: 9rem; padding-bottom: 4rem;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
}
.hw-page-hero h1 { color: var(--white); }

/* =========================================================
   KONTAKT
   ========================================================= */
.kontakt-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; }
.kontakt-box { background: var(--white); padding: 1rem 1.2rem; border-left: 2px solid var(--orange); }
.kontakt-box h4 { font-family: var(--fh); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: .3rem; }
.kontakt-tipp { background: var(--blue-bg); padding: 1rem 1.2rem; margin-top: 1rem; border-left: 2px solid var(--orange); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hw-form > div { margin-bottom: 1rem; }

/* =========================================================
   ANIMATIONEN
   ========================================================= */
.hw-anim { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.hw-anim.visible { opacity: 1; transform: none; }
.hw-delay-1 { transition-delay: .1s; }
.hw-delay-2 { transition-delay: .2s; }
.hw-delay-3 { transition-delay: .3s; }
.hw-delay-4 { transition-delay: .4s; }
.hw-hero-anim { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.hw-hero-anim.go { opacity: 1; transform: none; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px) {
  .hw-nav { padding: .9rem 1.2rem; }
  .hw-nav__logo img { max-height: 40px !important; }
  .hw-nav__burger { display: flex; }
  .hw-nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: rgba(13,71,161,.97);
    padding: 1.5rem; gap: 1rem;
    border-top: 1px solid rgba(245,130,10,.3);
  }
  .hw-nav__links.open { display: flex; }
  .hw-nav__cta { display: none; }
  .hw-nav__dropdown {
    position: static !important; display: none !important;
    background: rgba(255,255,255,.08) !important;
    border-top: none !important;
    border-left: 2px solid var(--orange) !important;
    margin: .4rem 0 .4rem 1rem;
    box-shadow: none !important; padding: .3rem 0 !important;
  }
  .has-dropdown.open > .hw-nav__dropdown { display: block !important; }
  .hw-nav__arrow { display: none; }
  .hw-split-hero { grid-template-columns: 1fr; min-height: auto; }
  .hw-split-hero__img { height: 55vw; min-height: 240px; }
  .hw-split-hero__img::after { display: none; }
  .hw-split-hero--dark .hw-split-hero__img::after { display: none; }
  .hw-split-hero__text { padding: 2.5rem 1.5rem; }
  .hw-section { padding-block: 2.5rem; }
  .hw-container { padding-inline: 1.2rem; }
  .hw-vorteile  { grid-template-columns: 1fr; gap: 1.2rem; }
  .hw-ablauf    { grid-template-columns: 1fr; gap: 1.8rem; }
  .hw-strip--4  { grid-template-columns: repeat(2,1fr); }
  .hw-regions   { grid-template-columns: 1fr; }
  .hw-mosaic    { grid-template-columns: 1fr; }
  .hw-mosaic__big .hw-mosaic__img { min-height: 260px; }

/* Mobile Mosaic: Alle Kacheln untereinander */
@media (max-width: 768px) {
  .hw-mosaic {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .hw-mosaic__big,
  .hw-mosaic__stack,
  .hw-mosaic__item { 
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .hw-mosaic__img { min-height: 220px !important; }
  .hw-mosaic__big .hw-mosaic__img { min-height: 260px !important; }
  .hw-mosaic__overlay { 
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 60%) !important;
  }
  .hw-mosaic__label {
    font-size: 1.3rem !important;
    bottom: 1rem !important;
    left: 1rem !important;
  }
}
  .hw-overlap__card { position: static; width: 100%; margin-top: 1.5rem; }
  .hw-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hw-hero-video { min-height: 85vh; }
  .hw-hero-video__content { padding: 0 1.2rem 3.5rem; }
  .kontakt-layout { grid-template-columns: 1fr; gap: 2rem; }
  .kontakt-info { order: 1; } .kontakt-form { order: 2; }
  .form-row-2 { grid-template-columns: 1fr; }
  .hw-dest-band { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.8rem, 9vw, 3rem) !important; }
  h2 { font-size: clamp(1.4rem, 7vw, 2.2rem) !important; }
  .hw-dest-band { grid-template-columns: 1fr; }
}


/* =========================================================
   PASTELL STAUBBLAU + GOLD – Haupt-Design
   ========================================================= */
:root {
  --blue:      #6b8fa8;
  --blue-dark: #4a6e88;
  --blue-mid:  #8aafc8;
  --blue-bg:   #eef4f8;
  --blue-bg2:  #ddeaf3;
  --orange:    #c8a96e;
  --orange-dk: #b08848;
  --white:     #ffffff;
  --offwhite:  #faf8f4;
  --text:      #2a3d4e;
  --textmid:   #4a6070;
  --textlight: #8aafc8;
  --shadow:    0 4px 24px rgba(107,143,168,.12);
  --shadow-lg: 0 20px 60px rgba(107,143,168,.16);
  --fh: 'Raleway', Arial, sans-serif;
  --fb: 'Nunito', system-ui, sans-serif;
  --transition: all .3s cubic-bezier(.4,0,.2,1);
}

body { background: #faf8f4; color: #2a3d4e; font-family: var(--fb); }
h1,h2,h3 { font-family: var(--fh); font-weight: 700; color: #2a3d4e; }
h4 { font-family: var(--fh); font-weight: 700; }
p { color: #4a6070; font-size: .95rem; line-height: 1.85; }
em { color: #c8a96e !important; font-style: italic; }

/* LABEL + BAR */
.hw-label { color: #c8a96e; font-family: var(--fh); font-weight: 700; letter-spacing: .2em; font-size: .6rem; text-transform: uppercase; }
.hw-label--light { color: rgba(255,255,255,.6); }
.hw-bar { background: #c8a96e; width: 36px; height: 2px; margin-bottom: 1.2rem; }
.hw-bar--light { background: rgba(200,169,110,.45); }
.hw-bar--center { margin-inline: auto; }

/* SECTIONS */
.hw-section--sand  { background: #eef4f8; }
.hw-section--sand2 { background: #ddeaf3; }
.hw-section--white { background: #fff; }
.hw-section--dark  { background: linear-gradient(135deg, #4a6e88 0%, #2a4a60 100%); }
.hw-section--dark h1,.hw-section--dark h2,.hw-section--dark h3 { color: #fff; }
.hw-section--dark p { color: rgba(255,255,255,.75); }
.hw-section--forest { background: linear-gradient(135deg, #6b8fa8 0%, #4a6e88 100%); }
.hw-section--forest h1,.hw-section--forest h2,.hw-section--forest h3 { color: #fff; }
.hw-section--forest p { color: rgba(255,255,255,.75); }

/* BUTTONS */
.hw-btn { font-family: var(--fh); font-weight: 700; letter-spacing: .12em; }
.hw-btn--dark { background: #4a6e88; color: #fff; }
.hw-btn--dark:hover { background: #c8a96e; color: #fff; transform: translateY(-2px); }
.hw-btn--gold { background: #c8a96e; color: #fff; }
.hw-btn--gold:hover { background: #b08848; color: #fff; transform: translateY(-2px); }
.hw-btn--outline { border: 1.5px solid #4a6e88; color: #4a6e88; background: transparent; }
.hw-btn--outline:hover { background: #4a6e88; color: #fff; }
.hw-btn--outline-light { border: 1.5px solid rgba(255,255,255,.7); color: #fff; background: transparent; }

/* CHECKLIST + HIGHLIGHTS */
.hw-checklist li::before { background: #c8a96e; }
.hw-hl { border-left-color: #c8a96e; }
.hw-vorteil__num,.hw-ablauf__num,.hw-strip__num { color: #c8a96e; }
.hw-mosaic__link { color: #c8a96e; }
.hw-overlap__card { border-top-color: #c8a96e; }

/* MOSAIC + REGION */
.hw-mosaic__overlay { background: linear-gradient(to top, rgba(42,60,78,.8) 0%, transparent 55%); }
.hw-region__overlay { background: linear-gradient(to top, rgba(42,60,78,.8) 0%, transparent 55%); }

/* SPLIT HERO */
.hw-split-hero__img::after { background: linear-gradient(to right, transparent 65%, #faf8f4 100%); }
.hw-split-hero--dark .hw-split-hero__text { background: linear-gradient(135deg,#4a6e88,#6b8fa8); }
.hw-split-hero--dark .hw-split-hero__img::after { background: linear-gradient(to right, transparent 65%, #4a6e88 100%); }

/* HERO VIDEO */
.hw-hero-video__overlay {
  background: linear-gradient(to bottom,
    rgba(74,110,136,.03) 0%,
    rgba(74,110,136,.15) 40%,
    rgba(42,74,96,.88) 100%);
}

/* KONTAKT */
.kontakt-box { border-left-color: #c8a96e; }
.kontakt-box h4 { color: #c8a96e !important; }
.kontakt-tipp { border-left-color: #c8a96e; background: #eef4f8; }
.hw-form label { color: #4a6e88; }
.hw-form input:focus,.hw-form textarea:focus,.hw-form select:focus { border-color: #6b8fa8; }

/* ── SEKTION MIT HINTERGRUNDBILD ── */
.hw-section--bg-image {
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Overlay via Pseudo-Element */
.hw-section--bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250,248,244,.85);
  z-index: 0;
  pointer-events: none;
}
/* JS setzt die Stärke per CSS-Variable */
.hw-section--bg-image[data-bg-overlay]::before {
  background: rgba(250,248,244, var(--bg-overlay, .85));
}
.hw-section--bg-image .hw-container,
.hw-section--bg-image > .hw-anim,
.hw-section--bg-image > div,
.hw-section--bg-image > * {
  position: relative;
  z-index: 1;
}
/* Wellenform-Schnitt */
.hw-section--wave-cut {
  clip-path: ellipse(55% 100% at 50% 0%);
  padding-block: 6rem !important;
  margin-block: -1px;
}

/* ── MOBILE ── */
.hw-nav__burger { display: none; }
@media (max-width: 768px) {
  .hw-nav__burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
  .hw-nav__burger span { display: block; width: 24px; height: 2px; background: #fff; transition: all .3s; }
  .hw-nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hw-nav__burger.open span:nth-child(2) { opacity: 0; }
  .hw-nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hw-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: rgba(74,110,136,.97); padding: 1.5rem; gap: 1rem; border-top: 1px solid rgba(200,169,110,.3); }
  .hw-nav__links.open { display: flex; }
  .hw-nav__cta { display: none; }
  .hw-nav__dropdown { position: static !important; display: none !important; background: rgba(255,255,255,.08) !important; border-top: none !important; border-left: 2px solid #c8a96e !important; margin: .4rem 0 .4rem 1rem; box-shadow: none !important; }
  .has-dropdown.open > .hw-nav__dropdown { display: block !important; }
  .hw-nav__arrow { display: none; }
  .hw-split-hero { display: flex; flex-direction: column; min-height: auto; }
  .hw-split-hero__img { height: 65vw; min-height: 280px; max-height: 420px; width: 100%; position: relative; flex-shrink: 0; }
  .hw-split-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hw-split-hero__img::after,.hw-split-hero--dark .hw-split-hero__img::after { display: none; }
  .hw-split-hero__text { padding: 2rem 1.2rem; min-height: auto; }
  .hw-vorteile { grid-template-columns: 1fr; }
  .hw-ablauf { grid-template-columns: 1fr; }
  .hw-strip--4 { grid-template-columns: repeat(2,1fr); }
  .hw-regions { grid-template-columns: 1fr; }
  .hw-mosaic { grid-template-columns: 1fr; }
  .hw-mosaic__big .hw-mosaic__img { min-height: 260px; }

/* Mobile Mosaic: Alle Kacheln untereinander */
@media (max-width: 768px) {
  .hw-mosaic {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .hw-mosaic__big,
  .hw-mosaic__stack,
  .hw-mosaic__item { 
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .hw-mosaic__img { min-height: 220px !important; }
  .hw-mosaic__big .hw-mosaic__img { min-height: 260px !important; }
  .hw-mosaic__overlay { 
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 60%) !important;
  }
  .hw-mosaic__label {
    font-size: 1.3rem !important;
    bottom: 1rem !important;
    left: 1rem !important;
  }
}
  .hw-dest-band { grid-template-columns: repeat(2,1fr); }
  .hw-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hw-overlap__card { position: static; width: 100%; margin-top: 1.5rem; }
  .kontakt-layout { grid-template-columns: 1fr; gap: 2rem; }
  .form-row-2 { grid-template-columns: 1fr; }
  .hw-container { padding-inline: 1.2rem; }
  .hw-section { padding-block: 2.5rem; }
  .hw-hero-video { min-height: 85vh; }
  .hw-hero-video__content { padding: 0 1.2rem 3.5rem; }
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"],[style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],[style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],[style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.8rem,9vw,2.8rem) !important; }
  h2 { font-size: clamp(1.4rem,7vw,2rem) !important; }
  .hw-dest-band { grid-template-columns: 1fr; }
}

/* FOOTER */
.hw-footer { background: linear-gradient(135deg,#4a6e88 0%,#2a4a60 100%) !important; }
.hw-footer__logo span,.hw-footer__logo b { color: #c8a96e !important; }
.hw-footer li a:hover { color: #c8a96e !important; }
.hw-footer__partner { border-left-color: #c8a96e !important; }
.hw-footer__partner img { height: 50px !important; max-width: 200px !important; }
.hw-page-hero { background: linear-gradient(135deg,#4a6e88 0%,#6b8fa8 100%) !important; }
.hw-section--dark { padding-bottom: 5rem !important; }
footer.hw-footer { border-top: 3px solid rgba(255,255,255,.1); }

/* Hero Poster Fix */
.hw-hero-video__poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}
.hw-hero-video__video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 1 !important;
}

/* ── KATEGORIE-SEITEN: VOLLBILD HERO ── */
.hw-cat-hero {
  position: relative;
  width: 100%;
  min-height: 85vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .hw-cat-hero { min-height: 70vh; }
}