/* =========================================================================
   Lust auf Segeln – statisches Bootstrap-5-Gerüst (Rebuild, nah am Original)
   Palette:  Meerblau #006EAE · Orange #FF9300 · Sand/Creme #F2ECE0 · Dunkel #333
   Fonts (selbst gehostet, wie Original): Abril Fatface · Barlow SemiBold · Barlow Regular
   ========================================================================= */

/* ---- Fonts (Original-Dateien, selbst gehostet) ---- */
@font-face{ font-family:"Abril Fatface"; font-display:swap; font-style:normal; font-weight:400;
  src:url("../fonts/AbrilFatface-Regular/abril-fatface.woff2") format("woff2"),
      url("../fonts/AbrilFatface-Regular/abril-fatface.ttf") format("truetype"); }
@font-face{ font-family:"Barlow Regular"; font-display:swap; font-style:normal; font-weight:400;
  src:url("../fonts/Barlow-Regular/barlow.woff2") format("woff2"),
      url("../fonts/Barlow-Regular/barlow.ttf") format("truetype"); }
@font-face{ font-family:"Barlow SemiBold"; font-display:swap; font-style:normal; font-weight:400;
  src:url("../fonts/Barlow-SemiBold/barlow.woff2") format("woff2"),
      url("../fonts/Barlow-SemiBold/barlow.ttf") format("truetype"); }

:root{
  --las-blue:   #006EAE;
  --las-blue-d: #005d80;
  --las-orange: #FF9300;
  --las-orange-d:#e07f00;
  --las-sand:   #F2ECE0;
  --las-ink:    #333333;
  --bs-body-font-family: "Barlow Regular", system-ui, sans-serif;
  --bs-body-color: var(--las-ink);
  --bs-link-color: var(--las-blue);
}

html{ font-size: clamp(17px, 1.2vw, 20px); scroll-behavior: smooth; }
body{ font-family:"Barlow Regular", system-ui, sans-serif; color:var(--las-ink); overflow-x:hidden; }

img{width:100%; height: auto;}

/* Headings: Titel + Untertitel generell BLAU (wie Original: h1/h2/h3 = swatch #006EAE) */
h1,h2{ font-family:"Abril Fatface", Georgia, serif; font-weight:400; color:var(--las-blue); letter-spacing:.01em; }
h3,h4{ font-family:"Barlow SemiBold", sans-serif; font-weight:400; color:var(--las-blue); }
h1{ font-size: clamp(2.4rem, 5.5vw, 4rem); line-height:1.06; }
h2{ font-size: clamp(2rem, 4vw, 3rem); margin-bottom:1.25rem; }
h3{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
h4{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
p { line-height:1.7; }

blockquote{
	margin: 0px 0px 1rem;
	padding-left: 1rem;
	border-left: 10px solid rgb(221, 221, 221);
	font-style: italic;}


/* Inline-Textlinks: brand-blau + unterstrichen */
main a, section a, footer a, .content-link{ color:var(--las-blue); text-decoration:underline; text-underline-offset:2px; }
main a:hover, section a:hover, footer a:hover{ color:var(--las-blue-d); }
a.btn, a.navbar-brand{ text-decoration:none; }

/* ---- section backgrounds ---- */
.sec-sand{ background-color: var(--las-sand); }
.sec-blue{ background-color: var(--las-blue); color:#fff; }
.sec-blue h1,.sec-blue h2,.sec-blue h3,.sec-blue h4{ color:#fff; }
.sec-pad{ padding-top:5rem; padding-bottom:5rem; }
@media (max-width:767px){ .sec-pad{ padding-top:3.25rem; padding-bottom:3.25rem; } }

/* ---- buttons ---- */
.btn-las, .btn-orange{ font-family:"Barlow SemiBold",sans-serif; font-weight:400; color:#fff;
  border-radius:999px; padding:.62rem 1.7rem; border:0; transition:background .2s, transform .2s; }
.btn-las{ background:var(--las-blue); }
.btn-las:hover{ background:var(--las-blue-d); color:#fff; transform:translateY(-2px); }
.btn-orange{ background:var(--las-orange); }
.btn-orange:hover{ background:var(--las-orange-d); color:#fff; transform:translateY(-2px); }
/* Saison-Datums-Button inaktiv/ausgebucht: gleiche Pill-Form wie .btn-orange, nur grau */
.btn-date-off{ background:#9aa3ab !important; color:#fff; cursor:default; pointer-events:none; }
.btn-date-off:hover{ background:#9aa3ab !important; transform:none; }
.saison-dates{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* =========================================================================
   HERO
   ========================================================================= */
/* Hintergrundbild kommt aus dem Hero-Modul (inline style="background-image:…") */
#hero{ position:relative; min-height:100vh; display:flex; flex-direction:column;
  background-position:center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-color:#0a3a54; }
/* #hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,45,68,.30), rgba(0,45,68,.14) 42%, rgba(0,45,68,.42)); } */
#hero > *{ position:relative; z-index:2; }

/* Nav liegt im Template und überlagert den Hero (nur über dem Hero sichtbar) */
.hero-nav{ position:absolute; top:0; left:0; right:0; z-index:5; padding-top:.5rem; }
.hero-nav .navbar-brand img{ width:60px; height:60px; }
.hero-nav .nav-link{ color:#fff !important; font-family:"Barlow SemiBold",sans-serif; padding:.4rem .9rem; opacity:.92; }
.hero-nav .nav-link:hover{ opacity:1; text-decoration:underline; }
.hero-nav .navbar-toggler{ border:0; }
.hero-nav .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2.5' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); }
.hero-content{ flex:1 1 auto; display:flex; align-items:center; }
.h1-hero{ color:#fff; white-space:nowrap; }
.lead-hero{ color:#f4fbff; font-family:"Barlow Regular"; font-size:clamp(1.1rem,2vw,1.5rem); }
.hero-down{ text-align:center; padding-bottom:2rem; }
.hero-down a{ color:#fff; font-size:2rem; display:inline-block; text-decoration:none; animation:bounce 2s infinite; }
@keyframes bounce{ 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-12px)} 60%{transform:translateY(-6px)} }
@media (max-width:575px){ .h1-hero{ white-space:normal; } }
@media (max-width:767px){ .hero-nav .navbar-collapse{ background:rgba(0,45,68,.92); border-radius:12px; padding:.5rem 1rem; margin-top:.5rem; } }

/* =========================================================================
   ANGEBOTE (blue, exakte Original-Wellen-Divider, cards)
   ========================================================================= */
#angebote{ position:relative; padding-top:8rem; padding-bottom:8rem; }
.bloc-divider{ position:absolute; left:0; right:0; width:100%; line-height:0; z-index:1; pointer-events:none; overflow:hidden; }
.bloc-divider svg{ display:block; width:100%; height:100px; }
.bloc-divider-top{ top:-1px; transform:scaleY(-1); }
.bloc-divider-top svg path{ fill:var(--las-sand); }   /* Sand-Sektion dippt in Blau */
.bloc-divider-bottom{ bottom:-1px; transform:scaleX(-1); }
.bloc-divider-bottom svg path{ fill:#fff; }            /* weisse Saison-Sektion dippt in Blau */
@media (max-width:767px){ #angebote{ padding-top:5.5rem; padding-bottom:5.5rem; } .bloc-divider svg{ height:60px; } }

.card-las{ border:0; border-radius:30px; overflow:hidden; height:100%; background:#fff; color:var(--las-ink);
  box-shadow:0 18px 40px rgba(0,0,0,.18); transition:transform .25s; display:flex; flex-direction:column; }
.card-las:hover{ transform:translateY(-6px); }
.card-las .card-img-top{ aspect-ratio:4/3; object-fit:cover; flex:0 0 auto; }
.card-las .card-body{ padding:1.6rem 1.5rem 2rem; display:flex; flex-direction:column; flex:1 1 auto; }
.sec-blue .card-las h3,.sec-blue .card-las h4{ color:var(--las-blue); text-align:center; }
.card-las h4{ margin-bottom:1rem; }
.cardlist{ list-style:none; padding:0; margin:.5rem 0 1.25rem; }
.cardlist li{ position:relative; padding-left:1.4rem; margin-bottom:.5rem; line-height:1.5; }
.cardlist li::before{ content:"\203A"; position:absolute; left:.15rem; top:-.05rem; color:var(--las-blue); font-weight:400; }
.card-foot{ margin-top:auto; }                 /* Bild + Button immer am Fuss der Karte */
.card-img-inline{ border-radius:16px; margin-bottom:1.25rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq .accordion-button{ font-family:"Barlow SemiBold",sans-serif; font-weight:400; font-size:1.12rem; color:var(--las-blue); background:#fff; }
.faq .accordion-button:not(.collapsed){ color:var(--las-blue-d); background:#eef6fb; box-shadow:none; }
.faq .accordion-button:focus{ box-shadow:none; border-color:rgba(0,110,174,.3); }
.faq .accordion-button::after{ filter:hue-rotate(170deg) saturate(2); }
.faq .accordion-item{ border-color:#e6ddcd; }
.faq .accordion-body{ font-size:1.02rem; }
.faq .accordion-body ul{ padding-left:1.1rem; }

/* =========================================================================
   GALERIE
   ========================================================================= */
.gallery-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media(min-width:576px){ .gallery-grid{ grid-template-columns:repeat(3,1fr);} }
@media(min-width:992px){ .gallery-grid{ grid-template-columns:repeat(4,1fr);} }
.gallery-grid .g-item{ aspect-ratio:1/1; border-radius:26px; overflow:hidden; background:#dfe6ec; position:relative;
  display:flex; align-items:center; justify-content:center; color:#8aa0b0; font-size:.8rem; text-align:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.10); transition:transform .28s, box-shadow .28s; }
.gallery-grid .g-item:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.20); }
.gallery-grid .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-grid .g-item::after{ content:""; position:absolute; inset:0; background:rgba(0,110,174,0); transition:background .28s; }
.gallery-grid .g-item:hover::after{ background:rgba(0,110,174,.12); }
.gallery-grid .g-item:hover img{ transform:scale(1.08); }
.gallery-sub{ margin-bottom:2.25rem !important; }
.divider-h{ height:1px; background:#d9cfbd; margin:3.5rem auto; max-width:200px; }

/* =========================================================================
   VIDEOS  (hell, Hintergrundbild statt Hintergrundvideo, Titel blau, Text dunkel)
   ========================================================================= */
/* Hintergrundbild kommt aus dem Videos-Modul (inline style="background-image:…"); heller Overlay hier */
#videos{ position:relative; background-position:center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-color:var(--las-sand); }
/* #videos::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.86); z-index:1; } */
#videos .container{ position:relative; z-index:2; }
#videos p{ color:var(--las-ink); }
/* GLightbox: keine Captions/Beschreibungen (werden projektweit nicht genutzt) */
.glightbox-container .gslide-description{ display:none !important; }
.video-thumb{ display:block; position:relative; border-radius:14px; overflow:hidden; background:#000;
  box-shadow:0 10px 26px rgba(0,0,0,.22); transition:transform .25s, box-shadow .25s; }
.video-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .35s; }
.video-thumb:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.30); }
.video-thumb:hover img{ transform:scale(1.06); }
.video-thumb::after{ content:""; position:absolute; inset:0; background:rgba(0,45,68,.18); transition:background .25s; }
.video-thumb:hover::after{ background:rgba(0,45,68,.28); }
.video-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; transition:transform .25s, background .25s; }
.video-play::before{ content:""; margin-left:4px; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--las-blue); }
.video-thumb:hover .video-play{ transform:translate(-50%,-50%) scale(1.12); background:#fff; }

/* =========================================================================
   „Na, hast du auch"  ·  Footer  ·  images
   ========================================================================= */
.abimage, .roundedstrong{ border-radius:18px; }
.roundedstrong{ box-shadow:0 18px 40px rgba(0,0,0,.25); }
img.img-fluid{ max-width:100%; height:auto; }
a.lightbox-link{ display:block; }

#footer{ background-color:var(--las-sand); }
#footer a{ color:var(--las-blue); text-decoration:underline; }
#footer a:hover{ color:var(--las-blue-d); }

/* scroll-to-top */
.scrollTop{ position:fixed; right:20px; bottom:20px; z-index:60; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; display:none; align-items:center; justify-content:center; }
.scrollTop.show{ display:flex; }
.scrollTop:hover{ background:var(--las-blue); }