/* Schriften selbst gehostet (SIL Open Font License, siehe assets/fonts/OFL-*.txt) */
@font-face{font-family:'Poppins'; src:url('fonts/poppins-bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'Poppins'; src:url('fonts/poppins-medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Montserrat'; src:url('fonts/montserrat-var.woff') format('woff'); font-weight:400 700; font-style:normal; font-display:swap;}

:root{
  /* Markenfarben laut Manual de marca @su.scuba */
  --azul-profundo:#2D2EC4;
  --azul-cielo:#3C7DE8;
  --turquesa:#2ABFBF;
  --cyan-caribe:#38C4EA;
  --noche-marina:#1A1A2E;
  --espuma:#F0F7FF;
  /* abgeleitete Flächen (dunkle Unterwasser-Grundstimmung bleibt) */
  --abyss-1:#1A1A2E;
  --abyss-2:#22224A;
  --abyss-3:#141426;
  --ink:#F0F7FF;
  --muted:#D3E2F2;
  --line:rgba(255,255,255,.16);
  --glass:rgba(18,20,44,.62);
  --reef:#2ABFBF;
  --reef-ink:#38C4EA;
  --coral:#2D2EC4;      /* Knopffarbe: Azul profundo (Name aus alter Version) */
  --coral-ink:#38C4EA;  /* Akzenttext auf dunkel: Cyan caribe */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--abyss-1);
  color:var(--ink);
  font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand-word{
  font-family:'Poppins', 'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
  color:#fff;
}
.mono{ font-family:'Poppins', sans-serif; }
a{color:inherit;}
img{max-width:100%;}
section{padding:64px 24px; position:relative; overflow:hidden;}
.inner{max-width:1080px; margin:0 auto; position:relative; z-index:2;}
@media (max-width:640px){ section{padding:44px 18px;} }

/* video-backed sections */
.bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:brightness(1.18) contrast(1.08) saturate(1.18);}
.bg-video-boost{filter:brightness(1.4) contrast(1.16) saturate(1.3);}
.scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,27,34,.38) 0%, rgba(7,27,34,.42) 35%, rgba(7,27,34,.68) 78%, var(--abyss-1) 100%);}

/* full-page fixed video background (e.g. cursos.html) */
body.full-bg{background:transparent;}
.page-bg{position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; z-index:-1; overflow:hidden; background:var(--abyss-1);}
.page-bg video, .page-bg img{width:100%; height:100%; object-fit:cover; filter:brightness(1.15) contrast(1.06) saturate(1.15); opacity:1; transition:opacity .25s ease;}
.page-bg video.bg-fade{opacity:0;}
.page-bg-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,27,34,.34) 0%, rgba(7,27,34,.40) 45%, rgba(7,27,34,.74) 100%);}

/* depth gauge (desktop) / depth rail (mobile) — scroll-driven "diving deeper" effect */
#depthGauge{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 10px; border-radius:100px;
  background:rgba(26,26,46,.55); border:1px solid var(--line); backdrop-filter:blur(4px);
}
.d-bubbles{position:relative; width:14px; height:64px; overflow:hidden;}
.d-bubbles .bub{
  position:absolute; bottom:-10px; left:4px; width:5px; height:5px; border-radius:50%;
  background:rgba(125,214,221,.65); box-shadow:0 0 4px rgba(125,214,221,.5);
  animation:bub 4.5s ease-in infinite;
}
.d-bubbles .bub.coral{
  background:rgba(60,125,232,.75); box-shadow:0 0 4px rgba(60,125,232,.55);
}
@keyframes bub{
  0%{ transform:translateY(0) scale(.8); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translateY(-70px) scale(1.15); opacity:0; }
}
.d-num{font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:600; color:var(--reef-ink); letter-spacing:.02em;}
@media (max-width:760px){ #depthGauge{ display:none; } }

#depthRail{
  display:none; position:fixed; right:14px; top:96px; bottom:96px; z-index:45;
  width:4px; border-radius:100px; background:rgba(255,255,255,.12);
}
.rail-fill{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:0%;
  border-radius:100px; background:linear-gradient(180deg, var(--turquesa), var(--azul-cielo));
  transition:height .1s linear;
}
.rail-num{
  position:absolute; right:12px; bottom:0%; transform:translateY(50%);
  font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:600; color:var(--reef-ink);
  background:rgba(26,26,46,.7); border:1px solid var(--line); border-radius:100px; padding:3px 8px;
  white-space:nowrap; transition:bottom .1s linear;
}
@media (max-width:760px){ #depthRail{ display:block; } }

/* ribbon */
.ribbon{
  background:rgba(56,196,234,.12);
  color:var(--coral-ink);
  text-align:center; font-size:12.5px; font-weight:600;
  padding:8px 16px; border-bottom:1px solid var(--line); position:relative; z-index:5;
}

/* header */
header{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(10,12,32,.82) 0%, rgba(10,12,32,.55) 55%, rgba(10,12,32,0) 100%);
  border-bottom:0;
}
/* weicher Unschaerfe-Verlauf, damit Text beim Scrollen darunter lesbar bleibt */
header::before{content:""; position:absolute; inset:0 0 -22px 0; z-index:-1; pointer-events:none;
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);}
header .nav{padding-bottom:22px}
.nav{max-width:1080px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-size:19px; text-decoration:none;}
.brand-mark{
  width:54px; height:54px; border-radius:50%; flex:none; position:relative; isolation:isolate; overflow:hidden;
  box-shadow:0 0 0 1px rgba(240,247,255,.22);
  display:block;
}
/* Logo: Verlauf wie beim Knopf, aber etwas durchsichtiger; Linien der Taucherin marineblau als eigene Ebene (Maske logo-lines.webp), das Bild selbst bleibt unsichtbar im HTML fuer die feste Groesse */
.brand-mark::before{content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(196,238,250,.74) 35%, rgba(56,196,234,.90) 100%);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
.brand-mark img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(.9); opacity:0;}
.brand-mark::after{content:""; position:absolute; inset:0; background:#1F2F7A; pointer-events:none;
  -webkit-mask:url('logo-lines.webp') center/90% 90% no-repeat; mask:url('logo-lines.webp') center/90% 90% no-repeat;}
nav.links{display:flex; gap:22px; font-size:14px; font-weight:600;}
nav.links a{opacity:.85; text-decoration:none;}
nav.links a:hover, nav.links a[aria-current="page"]{opacity:1; color:var(--reef-ink);}
.nav-right{display:flex; align-items:center; gap:12px;}
.lang-toggle{display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; font-family:'Poppins',sans-serif; font-size:12px; font-weight:600;}
.lang-toggle button{background:none; border:none; color:var(--muted); padding:6px 11px; cursor:pointer;}
.lang-toggle button[aria-pressed="true"]{background:rgba(255,255,255,.14); color:#fff;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:100px; font-weight:700; font-size:14px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-coral{background:linear-gradient(135deg,var(--turquesa),var(--cyan-caribe)); color:var(--noche-marina); border-color:rgba(240,247,255,.55);}
.btn-coral:hover{background:linear-gradient(135deg,#3AD0D0,#5AD2F2);}
.btn-outline{border-color:rgba(255,255,255,.35); color:#fff;}
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; color:#fff; width:38px; height:34px; cursor:pointer;}
@media (max-width:820px){
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:rgba(8,26,56,.55); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid var(--line);
    padding:8px 24px;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:12px 0; border-bottom:1px solid var(--line);}
  nav.links a:last-child{border-bottom:none;}
  .menu-toggle{display:block;}
}

/* hero */
.hero{padding-top:64px; padding-bottom:76px;}
.hero-tag{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:6px 13px; border-radius:100px; margin-bottom:20px;}
h1.hero-title{font-size:clamp(2.1rem, 5.2vw, 3.4rem); line-height:1.04; max-width:16ch; margin-bottom:18px; text-shadow:0 2px 18px rgba(3,14,18,.55);}
.trip-line{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--coral-ink); background:rgba(56,196,234,.12); border:1px solid rgba(56,196,234,.35); padding:9px 16px; border-radius:100px; margin-bottom:28px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px;}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px;}
.fact-tag{font-family:'Poppins',sans-serif; font-size:11.5px; color:var(--ink); background:rgba(255,255,255,.08); border:1px solid var(--line); padding:6px 11px; border-radius:8px;}

/* page hero (smaller, for inner pages) */
.page-hero{padding-top:56px; padding-bottom:48px;}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,2.8rem); text-shadow:0 2px 16px rgba(3,14,18,.5);}
.page-hero p{color:var(--muted); font-size:15.5px; margin-top:10px; max-width:60ch;}

/* generic section head */
.section-head{max-width:640px; margin-bottom:34px;}
.eyebrow-label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-ink); margin-bottom:8px; display:block;}
h2.section-title{font-size:clamp(1.6rem,3.2vw,2.2rem); text-shadow:0 2px 16px rgba(3,14,18,.5);}
.section-desc{color:var(--muted); font-size:15.5px; margin-top:8px;}

/* glass card base */
.glass{background:var(--glass); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(2px);}

/* nosotros */
.instructors{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media (max-width:720px){ .instructors{grid-template-columns:1fr;} }
.instructor-card{padding:22px; display:flex; gap:16px; align-items:flex-start;}
.avatar{width:56px; height:56px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:#0A2226; object-fit:cover;}
.avatar.a1{background:linear-gradient(135deg,var(--reef),#2A8990);}
.avatar.a2{background:linear-gradient(135deg,var(--azul-cielo),var(--azul-profundo));}
.instructor-card h3{font-size:17px; margin-bottom:2px;}
.instructor-role{color:var(--reef-ink); font-size:12.5px; font-weight:700; margin-bottom:8px;}
.instructor-bio{color:var(--muted); font-size:14px;}
.ig-note{color:var(--muted); font-size:12.5px; margin-top:8px;}

/* cursos */
.courses-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.course-card{padding:18px; display:flex; flex-direction:column; gap:8px;}
.course-icon{width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--reef-ink);}
.course-card h3{font-size:15px;}
.course-meta{color:var(--muted); font-size:13px; flex:1;}
.course-foot{display:flex; justify-content:space-between; font-family:'Poppins',sans-serif; font-size:11.5px; color:var(--reef-ink); border-top:1px dashed var(--line); padding-top:8px;}
.course-price{font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:#fff;}
.course-badges{display:flex; flex-wrap:wrap; gap:6px; padding-top:6px; border-top:1px dashed var(--line);}
.course-badges .fact-tag{padding:4px 9px; font-size:10px; display:flex; gap:4px;}
.course-badges .fact-k{font-weight:700; opacity:.65;}

/* viajes */
.trip-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:0; border-radius:18px; overflow:hidden; margin-bottom:20px;}
@media (max-width:960px){ .trip-card{grid-template-columns:minmax(0,1fr);} .trip-media{min-height:260px;} }
.trip-media{position:relative; overflow:visible; background:linear-gradient(155deg,#0E7C86,#071B22); padding:22px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-end; text-align:right; gap:6px; min-height:180px; aspect-ratio:1200/870;}
.trip-media h3{position:relative; z-index:2; font-size:22px;}
.trip-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:1;}
.trip-media-scrim{position:absolute; inset:0; background:radial-gradient(ellipse 92% 78% at 88% 20%, rgba(7,27,34,.88) 0%, rgba(7,27,34,.55) 48%, rgba(7,27,34,0) 78%); z-index:1; pointer-events:none;}
.trip-badge{position:relative; z-index:2; align-self:flex-end; font-family:'Poppins',sans-serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); padding:5px 10px; border-radius:100px;}
.trip-media > p{position:relative; z-index:2;}
.trip-media.text-bottom{justify-content:flex-end;}
.trip-media.text-bottom .trip-media-scrim{background:radial-gradient(ellipse 92% 78% at 88% 80%, rgba(7,27,34,.88) 0%, rgba(7,27,34,.55) 48%, rgba(7,27,34,0) 78%);}
.trip-body{padding:24px;}
.trip-body-placeholder{height:100%; display:flex; flex-direction:column; justify-content:center;}
.trip-highlights{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:7px;}
.trip-highlights li{font-size:13.5px; display:flex; gap:8px;}
.trip-highlights li::before{content:"✓"; color:var(--reef-ink); font-weight:700;}
.trip-price-table{display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; margin-bottom:12px;}
.price-col{display:flex; flex-direction:column; gap:2px;}
.price-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.price-value{font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#fff;}
.price-note{font-size:11px; color:var(--muted);}
.note{font-size:11.5px; color:var(--muted);}

.otros-destinos{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.destino-chip{
  flex:1 1 220px; padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px dashed var(--line);
  font-size:13px; color:var(--muted);
}
.destino-chip b{color:var(--ink); display:block; font-size:14px; margin-bottom:2px;}

.destino-chip.has-photo{
  position:relative; overflow:hidden; border:none; padding:16px;
  aspect-ratio:1200/870; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(155deg,#0E7C86,#071B22);
}
.destino-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:1;}
.destino-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,27,34,0) 35%, rgba(7,27,34,.85) 100%); pointer-events:none;}
.destino-chip.has-photo b, .destino-chip.has-photo span{position:relative; z-index:2;}
.destino-chip.has-photo b{color:#fff;}
.destino-chip.has-photo span{color:rgba(255,255,255,.85);}

/* home teaser cards linking to the other 3 pages */
.teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:820px){ .teaser-grid{grid-template-columns:1fr;} }
.teaser-card{padding:24px; text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:transform .15s ease, border-color .15s ease;}
.teaser-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.3);}
.teaser-card h3{font-size:17px;}
.teaser-card p{color:var(--muted); font-size:13.5px; flex:1; margin:0;}
.teaser-card .teaser-arrow{color:var(--coral-ink); font-family:'Poppins',sans-serif; font-size:13px;}

/* contact / footer */
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:start;}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{padding:22px;}
.contact-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; font-size:14px;}
.contact-row svg{flex:none; color:var(--cyan-caribe); margin-top:2px;}
.contact-row .label{font-weight:700; display:block; font-size:13px;}
.contact-row .value{color:var(--muted);}
footer.site-footer{padding:36px 24px 28px; background:var(--abyss-3); border-top:1px solid var(--line);}
.foot-line{max-width:1080px; margin:0 auto; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.privacy-note{max-width:1080px; margin:0 auto 0; font-size:12px; line-height:1.6; color:var(--muted);}

.contact-divider{display:flex; align-items:center; gap:14px; margin:34px 0 20px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.contact-divider::before, .contact-divider::after{content:""; flex:1; height:1px; background:var(--line);}
.contact-form{padding:26px; display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; max-width:720px;}
.contact-form .form-row{display:flex; flex-direction:column;}
.contact-form .form-row.full{grid-column:1 / -1;}
.contact-form label{font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.contact-form input, .contact-form textarea{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-family:inherit; font-size:14px; color:var(--ink); resize:vertical;}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:rgba(211,226,242,.55);}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--reef);}
.contact-form input:focus-visible, .contact-form textarea:focus-visible{outline:2px solid var(--reef); outline-offset:2px;}
.contact-form .form-actions{grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.contact-form .form-note{font-size:11.5px; color:var(--muted);}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-success{padding:26px; display:flex; align-items:center; gap:12px; font-size:14.5px;}
.form-success svg{flex:none; color:var(--reef-ink);}
@media (max-width:560px){ .contact-form{grid-template-columns:1fr;} }

/* floating whatsapp */
.fab{position:fixed; right:20px; bottom:20px; z-index:50; width:54px; height:54px; border-radius:50%; background:#25D366; color:#0B2500; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -6px rgba(0,0,0,.5); text-decoration:none;}

/* ===== Handy-Feinschliff (v4) ===== */
/* Mindestschrift 12 px */
.d-num,.rail-num,.fact-tag,.course-foot,.course-badges .fact-tag,.trip-badge,.price-label,.price-note,.note,.contact-form .form-note{font-size:12px;}
.brand{min-height:44px;}
@media (max-width:820px){
  .nav{padding:8px 16px; gap:10px;}
  .lang-toggle button{min-width:44px; min-height:44px;}
  .menu-toggle{width:44px; height:44px;}
  .btn{min-height:44px;}
  nav.links a{padding:15px 0;}
}
@media (max-width:560px){
  .nav-right{gap:8px;}
  .nav-right > .btn{display:none;} /* WhatsApp-Button unten rechts ersetzt ihn */
  .hero-ctas .btn{width:100%; justify-content:center;}
  footer.site-footer{padding-bottom:96px;} /* Platz fuer den WhatsApp-Button */
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ===== Barrierefreiheit & Feinschliff (v5) ===== */
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--azul-profundo); color:#fff; font-weight:700; padding:12px 18px; border-radius:10px; text-decoration:none;}
.skip-link:focus{top:12px;}
main:focus{outline:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--coral-ink); outline-offset:3px;}
.form-success:focus{outline:2px solid var(--reef); outline-offset:3px;}
:target, h2, h3{scroll-margin-top:90px;}
.contact-form input{min-height:44px;}
picture{display:contents;}
@media (min-width:821px){ nav.links a{display:inline-flex; align-items:center; min-height:44px;} }
body.full-bg{min-height:100vh; display:flex; flex-direction:column;}
body.full-bg > main{flex:1 0 auto;}
[hidden]{display:none !important;}

/* ===== FAQ (v6) ===== */
.faq{max-width:760px;}
.faq-item{border:1px solid var(--line); border-radius:12px; background:var(--glass); margin-bottom:10px;}
.faq-item summary{list-style:none; cursor:pointer; position:relative; display:flex; align-items:center; min-height:48px; padding:10px 52px 10px 16px; border-radius:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-family:'Poppins',sans-serif; font-size:18px; color:var(--coral-ink);}
.faq-item[open] summary::after{content:"\2013";}
.faq-item summary h3{font-size:15.5px; font-weight:600; margin:0; line-height:1.4;}
.faq-item summary:focus-visible{outline:2px solid var(--coral-ink); outline-offset:3px;}
.faq-a{padding:0 16px 16px; color:var(--muted); font-size:14.5px; line-height:1.65;}
.faq-a p{margin:0;}
.faq-a p + p{margin-top:10px;}
.faq-open{display:inline-block; font-family:'Poppins',sans-serif; font-size:12px; color:var(--coral-ink); border:1px dashed rgba(56,196,234,.6); border-radius:8px; padding:6px 10px;}
.faq-links{display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:20px; font-family:'Poppins',sans-serif; font-size:13px;}
.faq-links a{color:var(--coral-ink); display:inline-flex; align-items:center; min-height:44px;}

/* ===== Lesbarkeit (v6): dunklerer Hintergrund hinter Text, hellere Nebentexte ===== */
.page-hero p, .page-hero h1, .page-hero .eyebrow-label{text-shadow:0 1px 14px rgba(3,14,18,.75);}
.instructor-bio, .instructor-role, .ig-note{font-size:15px;}
.instructor-role{color:var(--cyan-caribe);}

/* ===== Rechtsseite & Footer-Link (v6) ===== */
.foot-link{color:var(--muted); display:inline-flex; align-items:center; min-height:44px;}
.legal-block{max-width:760px;}
.legal-block{padding:0; margin-bottom:28px; overflow:visible;}
.legal-block h2{font-size:19px; margin-bottom:10px;}
.legal-block p{color:var(--muted); font-size:15px; line-height:1.65; margin:0 0 10px;}
.legal-block p.faq-open{color:var(--coral-ink);}

/* v6.1: Video wieder heller; Text bekommt lokal einen weichen dunklen Schleier statt den ganzen Hintergrund abzudunkeln */
.page-hero .inner::before, .hero .inner::before{content:""; position:absolute; inset:-64px -140px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5,20,26,.7) 0%, rgba(5,20,26,.5) 45%, rgba(5,20,26,.22) 78%, rgba(5,20,26,0) 100%);}
@media (max-width:640px){ .page-hero .inner::before, .hero .inner::before{inset:-48px -40px; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5,20,26,.68) 0%, rgba(5,20,26,.48) 50%, rgba(5,20,26,.2) 80%, rgba(5,20,26,0) 100%);} }

/* v6.2: Cursos behält die ursprüngliche, dunklere Darstellung (Stand v5) */
.bg-bright .page-bg video, .bg-bright .page-bg img{filter:brightness(1.15) contrast(1.06) saturate(1.15);}
.bg-bright .page-bg-scrim{background:linear-gradient(180deg, rgba(7,27,34,.5) 0%, rgba(7,27,34,.58) 40%, rgba(7,27,34,.8) 100%);}
.bg-bright .glass{background:rgba(255,255,255,.05); backdrop-filter:blur(2px);}


/* v6.3: Startseite: oben dunkler (Text), unten heller (Video wirkt) */
.bg-home .page-bg-scrim{background:linear-gradient(180deg, rgba(7,27,34,.54) 0%, rgba(7,27,34,.44) 30%, rgba(7,27,34,.36) 65%, rgba(7,27,34,.40) 100%);}

/* v6.4: Cursos ohne Textschleier und ohne zusätzlichen Textschatten (Stand v5) */
.bg-bright .page-hero .inner::before{display:none;}
.bg-bright .page-hero p, .bg-bright .page-hero .eyebrow-label{text-shadow:none;}
.bg-bright .page-hero h1{text-shadow:0 2px 16px rgba(3,14,18,.5);}

/* ===== Marke (v8): Manual de marca @su.scuba – Poppins für Titel/Zahlen, Markenfarben ===== */
.fact-tag,.course-price,.price-value,.trip-badge,.lang-toggle,.d-num,.rail-num,.faq-open,.faq-links,.teaser-arrow{letter-spacing:0;}
.course-price,.price-value{font-weight:700;}
.fact-tag,.trip-badge,.lang-toggle,.faq-open,.faq-links,.teaser-arrow,.d-num,.rail-num{font-weight:500;}
.trip-badge{background:var(--azul-profundo); border-color:rgba(240,247,255,.45); color:#fff;}
.brand-script{font-family:'Poppins', sans-serif; font-weight:500; color:var(--cyan-caribe);}
.brand-word{white-space:nowrap;}
@media (max-width:420px){ .brand{font-size:16px; gap:8px;} }
/* v8: kleine Texte über dem Video lesbar halten (Kontrast WCAG AA) */
.ribbon{background:#22224A; color:#C9F1FB;}
.section-head{position:relative;}
.section-head::before{content:""; position:absolute; inset:-30px -70px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(16,18,40,.74) 0%, rgba(16,18,40,.52) 55%, rgba(16,18,40,0) 100%);}
.hero-tag{background:rgba(26,26,46,.62);}
.trip-line{background:rgba(26,26,46,.78); border-color:rgba(56,196,234,.5);}
.faq-links a{background:rgba(26,26,46,.78); border:1px solid var(--line); padding:0 16px; border-radius:100px; text-decoration:none;}
.faq-links a:hover{border-color:var(--cyan-caribe);}
.privacy-note{background:rgba(26,26,46,.72); padding:12px 16px; border-radius:12px; margin-top:14px;}
.page-hero .inner::before, .hero .inner::before{background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(16,18,40,.8) 0%, rgba(16,18,40,.58) 45%, rgba(16,18,40,.25) 78%, rgba(16,18,40,0) 100%);}
@media (max-width:640px){ .page-hero .inner::before, .hero .inner::before{background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(16,18,40,.78) 0%, rgba(16,18,40,.56) 50%, rgba(16,18,40,.22) 80%, rgba(16,18,40,0) 100%);} }
:root{--glass:rgba(18,20,44,.68);}
.eyebrow-label{display:inline-block; background:rgba(26,26,46,.8); padding:5px 11px; border-radius:100px; border:1px solid rgba(56,196,234,.28);}
.page-hero p{color:var(--ink); font-weight:500;}
@media (min-width:641px){ .page-hero .inner::before{background:radial-gradient(ellipse 52% 55% at 40% 50%, rgba(16,18,40,.84) 0%, rgba(16,18,40,.66) 50%, rgba(16,18,40,.28) 80%, rgba(16,18,40,0) 100%);} }
.trip-price-table{align-items:end;} @media (max-width:420px){ .price-value{font-size:16px;} }
.trip-media > p{color:var(--ink) !important; font-weight:500; text-shadow:0 1px 10px rgba(16,18,40,.95), 0 0 3px rgba(16,18,40,.8);}
.trip-price-open{font-weight:600; font-size:15px; color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; margin:0 0 12px;}

/* Buttons: Turquesa-Verlauf (v9) */
.btn-coral:focus-visible{outline:2px solid var(--espuma); outline-offset:3px;}

/* v9.1: keine Schatten/Schleier hinter Ueberschriften und Texten (auf Wunsch) */
.section-head::before, .page-hero .inner::before, .hero .inner::before{display:none !important;}
h1.hero-title, .page-hero h1, h2.section-title, .page-hero p, .page-hero .eyebrow-label, .bg-bright .page-hero h1, .bg-bright .page-hero p{text-shadow:none !important;}
/* Ausgleich fuer entfallene Schleier: Gesamtton etwas dunkler, damit Ueberschriften lesbar bleiben */
.page-bg-scrim{background:linear-gradient(180deg, rgba(7,27,34,.46) 0%, rgba(7,27,34,.52) 45%, rgba(7,27,34,.76) 100%);}
.bg-home .page-bg-scrim{background:linear-gradient(180deg, rgba(7,27,34,.56) 0%, rgba(7,27,34,.54) 30%, rgba(7,27,34,.6) 65%, rgba(7,27,34,.64) 100%);}

/* v12 Vorschau: Standbild aus bluefish3 als Hintergrund der Kursseite, ohne Filter und ohne Schleier */
body.bg-bright .page-bg img{filter:none; object-position:center 50%;}
body.bg-bright .page-bg-scrim{background:none !important;}
/* v12 Vorschau: Lesbarkeit ueber dunkle Glasflaechen statt Schleier ueber dem Bild */
body.bg-bright .glass{background:rgba(18,20,44,.78); backdrop-filter:blur(2px);}
body.bg-bright .page-hero .inner > *:not(.eyebrow-label){position:relative;}

/* Nosotros-Vorschau Taucherpaar: Titel allein ueber dem dunklen Wasser; darunter blendet das Foto weich in die dunkle Seitenfarbe aus, Einleitung steht ohne Kasten darauf */
body.bg-title .page-hero{padding-top:calc(64vh - 90px); padding-bottom:0; margin-bottom:0;}
@media (min-width:601px){ body.bg-title .page-hero{padding-top:calc(66vh - 90px);} }
@media (min-width:900px){ body.bg-title .page-hero{padding-top:calc(72vh - 90px);} }
body.bg-title .page-hero h1{line-height:1.15;}
body.bg-title .intro-section{padding-top:190px; padding-bottom:190px; background:linear-gradient(180deg, rgba(26,26,46,0) 0, rgba(26,26,46,.88) 150px, #1A1A2E 190px, #1A1A2E calc(100% - 190px), rgba(26,26,46,.88) calc(100% - 150px), rgba(26,26,46,0) 100%);}
body.bg-title .intro-card{background:none !important; backdrop-filter:none !important; border:0 !important; box-shadow:none !important; padding:0; max-width:760px;}
body.bg-title .intro-card p{margin:0; color:var(--ink); font-weight:500; font-size:1.02rem; line-height:1.6;}
body.bg-title .intro-section + section{padding-top:0;}

/* Cursos-Vorschau: kurzer Satz unter dem Titel links neben dem Taucher; Hinweise am Ende auf einem dunklen Band mit weichem Uebergang nach oben */
body.bg-band .page-hero p{max-width:min(420px,100%);}
/* Cursos: Text steht unter dem Taucher; das Foto blendet dahinter weich ins Dunkle */
body.bg-band .page-hero{padding-top:calc(54vh - 90px); padding-bottom:56px; background:linear-gradient(180deg, rgba(26,26,46,0) calc(54vh - 90px), rgba(26,26,46,.78) calc(54vh - 20px), rgba(26,26,46,.78) calc(100% - 40px), rgba(26,26,46,0) 100%);}
@media (min-width:900px){ body.bg-band .page-hero{padding-top:calc(55vh - 90px); background:linear-gradient(180deg, rgba(26,26,46,0) calc(55vh - 90px), rgba(26,26,46,.78) calc(55vh - 20px), rgba(26,26,46,.78) calc(100% - 40px), rgba(26,26,46,0) 100%);} }
body.bg-band .band-section{padding-top:190px; padding-bottom:56px; background:linear-gradient(180deg, rgba(26,26,46,0) 0, rgba(26,26,46,.88) 150px, #1A1A2E 190px);}
body.bg-band .band-text{margin:0 0 16px; max-width:760px; color:var(--ink); font-weight:500; font-size:1.02rem; line-height:1.6;}
body.bg-band .band-section .btn{margin-top:8px;}

/* Viajes-Vorschau Rochenfoto: Platz unter dem Titel, damit der Rochen frei im Bild steht, bevor die Karten beginnen */
body.bg-gap .page-hero{padding-bottom:0; margin-bottom:clamp(240px,40vh,420px);}
body.bg-gap .page-bg img{object-position:62% 50%;}

/* Viajes-Vorschau: Ausschnitt fuer das Haifoto bei Providencia */
.trip-photo.pos-hai{object-position:50% 78%;}
.trip-media.pos-hai-wrap .trip-media-scrim{background:radial-gradient(ellipse 85% 60% at 90% 12%, rgba(7,27,34,.7) 0%, rgba(7,27,34,.38) 50%, rgba(7,27,34,0) 78%);}

/* Viajes: Foto blendet weich in den Block; Hai grösser im Ausschnitt */
.trip-media{background:transparent;}
.trip-photo-wrap{position:absolute; inset:0; z-index:1; overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--fade-from,66%),transparent 100%);
 mask-image:linear-gradient(90deg,#000 0,#000 var(--fade-from,66%),transparent 100%);}
.trip-photo-wrap .trip-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.trip-photo.pos-hai{object-position:50% 78%; transform:translateY(10%) scale(1.4); transform-origin:20.5% 62%;}
.trip-media.pos-hai-wrap{--fade-from:70%;}
.trip-media.turtle-wrap{--fade-from:82%;}
@media (min-width:521px){ .turtle-wrap .trip-photo{transform:scale(1.24); transform-origin:45% 0;} .trip-media.turtle-wrap > p{margin-top:-6px;} }
@media (max-width:960px){
 .trip-photo-wrap{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--fade-from-m,74%),transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 var(--fade-from-m,74%),transparent 100%);}
}
@media (max-width:520px){
 .trip-media.pos-hai-wrap{aspect-ratio:1/1; --fade-from-m:86%;}
 .trip-media.turtle-wrap{--fade-from-m:84%;}
 .trip-photo.pos-hai{transform:scale(1.2);}
 /* Schildkroete: Text steht ueber dem Foto, nicht darauf */
 .trip-media.turtle-wrap{aspect-ratio:auto; min-height:0; padding-bottom:0;}
 .turtle-wrap .trip-media-scrim{display:none;}
 .turtle-wrap .trip-photo-wrap{position:relative; inset:auto; order:3; align-self:stretch; width:calc(100% + 44px); margin:10px -22px 0; aspect-ratio:4/3;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);}
}

/* Feinschliff (v24): Kontrast Etiketten/Lead, Tippflaeche Telefonlinks */
.eyebrow-label{background:rgba(26,26,46,.96);}
body.bg-band .page-hero p{font-size:1.17rem; font-weight:600; line-height:1.45;}
.ig-note a{display:inline-block; padding:12px 4px; margin:-12px -4px;}

/* Blog: Platzhalter-Artikel */
.post-card{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr); border-radius:18px; overflow:hidden; margin-bottom:18px;}
.post-media{min-height:200px; background:linear-gradient(155deg,rgba(60,125,232,.55),rgba(42,191,191,.35) 55%,rgba(26,26,46,.2)); display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:500; font-size:14px; opacity:.95;}
.post-body{padding:22px 24px;}
.post-tag{display:inline-block; font-family:'Poppins',sans-serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(56,196,234,.5); color:var(--cyan-caribe); background:rgba(26,26,46,.8); padding:4px 10px; border-radius:100px; margin-bottom:10px;}
.post-body h3{font-size:22px; margin:0 0 4px;}
.post-date{color:var(--muted); font-size:13px; margin:0 0 10px;}
.post-more{margin-top:12px; font-weight:600; color:var(--cyan-caribe); font-size:14px;}
@media (max-width:760px){ .post-card{grid-template-columns:minmax(0,1fr);} .post-media{min-height:0; aspect-ratio:16/8;} .post-body{padding:18px 18px;} }

/* Weicher Schatten statt dunkler Bloecke (Etiketten, Karten) */
:root{--sh-txt:0 1px 2px rgba(6,8,26,.9), 0 0 14px rgba(6,8,26,.85), 0 0 34px rgba(6,8,26,.65);}
body .hero-tag, body .trip-line, body .eyebrow-label, body .fact-tag, body .privacy-note, body .post-tag{
  background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; backdrop-filter:none !important;
  text-shadow:var(--sh-txt) !important;}
body .hero-tag{color:#E8F4FF}
body .fact-tag{margin-right:6px}
body .faq-links a{background:none !important; border:0 !important; border-bottom:1px solid rgba(56,196,234,.7) !important; border-radius:0 !important; padding:0 !important; text-shadow:var(--sh-txt);}
body.bg-home .glass, body.bg-bright.bg-home .glass, body.bg-home .faq-item{
  position:relative; isolation:isolate; background:transparent !important; border:0 !important; backdrop-filter:none !important; box-shadow:none !important;}
body.bg-home .glass::before, body.bg-home .faq-item::before{
  content:""; position:absolute; inset:-34px -40px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(8,10,30,.78) 0%, rgba(8,10,30,.62) 45%, rgba(8,10,30,.25) 78%, rgba(8,10,30,0) 100%);}
body.bg-home .glass, body.bg-home .faq-item{text-shadow:0 1px 8px rgba(6,8,26,.6)}


/* Buttons: Hauptknopf als Scheibe im Logo-Verlauf, zweite Aktionen als Textlink mit Pfeil */
.btn-coral{
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(196,238,250,.6) 35%, rgba(56,196,234,.82) 100%);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  color:#1F2F7A; font-family:'Poppins',sans-serif; font-weight:500; font-size:13px;
  border-color:rgba(240,247,255,.3); padding:6px 14px;
  box-shadow:0 0 0 1px rgba(240,247,255,.3), 0 2px 8px rgba(6,8,26,.25);
}
.btn-coral:hover, .btn-coral:focus-visible{background:linear-gradient(180deg, #FFFFFF 0%, #CDEFFB 35%, #4CCBEE 100%); backdrop-filter:none; -webkit-backdrop-filter:none;}
/* Mit Maus: im Ruhezustand sehr durchsichtig, voll sichtbar erst beim Daraufgehen. Am Touchscreen bleibt die dichtere Fassung (kein Hover). */
@media (hover:hover) and (pointer:fine){
  .btn-coral{background:linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(196,238,250,.5) 35%, rgba(56,196,234,.7) 100%);}
  .btn-coral:hover, .btn-coral:focus-visible{background:linear-gradient(180deg, #FFFFFF 0%, #CDEFFB 35%, #4CCBEE 100%);}
}
.btn-outline{
  background:none; border:0; border-bottom:2px solid rgba(255,255,255,.5); border-radius:0;
  color:#fff; font-family:'Poppins',sans-serif; font-weight:500; font-size:13px; padding:6px 0;
  text-shadow:0 1px 10px rgba(6,8,26,.8);
}
.btn-outline::after{content:"→"; display:inline-block; transition:transform .15s ease;}
.btn-outline:hover{transform:none; border-bottom-color:var(--cyan-caribe);}
.btn-outline:hover::after{transform:translateX(3px);}
@media (max-width:640px){ .hero-ctas .btn-outline{width:auto;} }
@media (max-width:900px){ .btn-coral{min-height:36px;} .btn-outline{min-height:36px;} }
@media (max-width:640px){ .hero-ctas .btn-coral{width:auto;} }

/* Unterseiten (Nosotros, Cursos, Viajes, ...): Kaesten bleiben dunkel, die Kanten laufen sehr weich als Schatten aus (wie das Band bei "Dos instructores") */
body:not(.bg-home) .glass:not(.intro-card), body:not(.bg-home) .faq-item{
  position:relative; isolation:isolate; background:transparent !important; border:1px solid transparent !important; backdrop-filter:none !important; box-shadow:none !important;
}
body:not(.bg-home) .glass:not(.intro-card)::before, body:not(.bg-home) .faq-item::before{
  content:""; position:absolute; inset:-6px; z-index:-1; pointer-events:none; border-radius:44px;
  background:rgba(14,16,38,.93); filter:blur(50px);
}
body:not(.bg-home) .faq-item::before{inset:-4px; filter:blur(34px);}
body:not(.bg-home) .trip-card{overflow:visible;}
/* Sektionen duerfen den weichen Schein ueberragen; seitliches Scrollen wird verhindert */
body:not(.bg-home) section{overflow:visible;}
body:not(.bg-home){overflow-x:clip;}
/* Foto der Reisekarten: Raender laufen weich in den dunklen Schein aus (Maske zusaetzlich zur bestehenden) */
:root{
  --eL:linear-gradient(90deg, transparent 0, rgba(0,0,0,.12) 24px, rgba(0,0,0,.4) 55px, rgba(0,0,0,.78) 92px, #000 130px);
  --eR:linear-gradient(270deg, transparent 0, rgba(0,0,0,.12) 24px, rgba(0,0,0,.4) 55px, rgba(0,0,0,.78) 92px, #000 130px);
  --eT:linear-gradient(180deg, transparent 0, rgba(0,0,0,.12) 24px, rgba(0,0,0,.4) 55px, rgba(0,0,0,.78) 92px, #000 130px);
  --eB:linear-gradient(0deg, transparent 0, rgba(0,0,0,.12) 24px, rgba(0,0,0,.4) 55px, rgba(0,0,0,.78) 92px, #000 130px);
}
body:not(.bg-home) .trip-photo-wrap{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--fade-from,66%),transparent 100%), var(--eL), var(--eT), var(--eB);
  mask-image:linear-gradient(90deg,#000 0,#000 var(--fade-from,66%),transparent 100%), var(--eL), var(--eT), var(--eB);
  -webkit-mask-composite:source-in, source-in, source-in; mask-composite:intersect, intersect, intersect;
}
@media (max-width:960px){
  body:not(.bg-home) .trip-photo-wrap{
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--fade-from-m,74%),transparent 100%), var(--eL), var(--eR), var(--eT);
    mask-image:linear-gradient(180deg,#000 0,#000 var(--fade-from-m,74%),transparent 100%), var(--eL), var(--eR), var(--eT);
    -webkit-mask-composite:source-in, source-in, source-in; mask-composite:intersect, intersect, intersect;
  }
}
@media (max-width:520px){
  body:not(.bg-home) .turtle-wrap .trip-photo-wrap{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%), var(--eL), var(--eR);
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%), var(--eL), var(--eR);
    -webkit-mask-composite:source-in, source-in; mask-composite:intersect, intersect;
  }
}
@media (max-width:1160px){
  body:not(.bg-home) .glass:not(.intro-card)::before{inset:-6px -2px;}
  body:not(.bg-home) .faq-item::before{inset:-4px -2px;}
}

/* Luftblasen: beim Daraufgehen mit der Maus treten nacheinander drei Blasen oben rechts am Hauptknopf aus, steigen auf und verpuffen (nur Maus, nicht bei reduzierter Bewegung) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn-coral{position:relative;}
  .btn-coral::before, .btn-coral::after{
    content:""; position:absolute; top:3px; right:16px; width:6px; height:6px; border-radius:50%;
    pointer-events:none; opacity:0; background:rgba(235,249,255,.9); box-shadow:0 0 4px rgba(200,240,255,.6); will-change:transform,opacity;
  }
  .btn-coral::after{width:5px; height:5px; right:10px;}
  /* Blase 1 (vorn) bei 0 s, Blase 2 (hinten) bei 0,5 s, Blase 3 (vorn) bei 1,0 s */
  .btn-coral:hover::before{animation:bubA 1.4s linear 0s 1 both, bubC 1.4s linear 1s 1 both;}
  .btn-coral:hover::after{animation:bubB 1.4s linear .5s 1 both;}
}
@keyframes bubA{
  0%{transform:translate3d(0.00px,-0.00px,0) scale(0.500); opacity:0.000; animation-timing-function:linear;}
  5%{transform:translate3d(0.16px,-2.91px,0) scale(0.708); opacity:0.417; animation-timing-function:linear;}
  10%{transform:translate3d(0.58px,-5.70px,0) scale(0.917); opacity:0.833; animation-timing-function:linear;}
  15%{transform:translate3d(1.13px,-8.37px,0) scale(1.002); opacity:1.000; animation-timing-function:linear;}
  20%{transform:translate3d(1.60px,-10.92px,0) scale(1.006); opacity:1.000; animation-timing-function:linear;}
  25%{transform:translate3d(1.78px,-13.34px,0) scale(1.010); opacity:1.000; animation-timing-function:linear;}
  30%{transform:translate3d(1.27px,-15.63px,0) scale(1.014); opacity:1.000; animation-timing-function:linear;}
  35%{transform:translate3d(0.56px,-17.80px,0) scale(1.017); opacity:1.000; animation-timing-function:linear;}
  40%{transform:translate3d(-0.25px,-19.84px,0) scale(1.021); opacity:1.000; animation-timing-function:linear;}
  45%{transform:translate3d(-1.02px,-21.75px,0) scale(1.025); opacity:1.000; animation-timing-function:linear;}
  50%{transform:translate3d(-1.62px,-23.52px,0) scale(1.029); opacity:1.000; animation-timing-function:linear;}
  55%{transform:translate3d(-1.95px,-25.16px,0) scale(1.033); opacity:1.000; animation-timing-function:linear;}
  60%{transform:translate3d(-1.96px,-26.66px,0) scale(1.036); opacity:1.000; animation-timing-function:linear;}
  65%{transform:translate3d(-1.65px,-28.01px,0) scale(1.040); opacity:1.000; animation-timing-function:linear;}
  70%{transform:translate3d(-1.07px,-29.22px,0) scale(1.044); opacity:1.000; animation-timing-function:linear;}
  75%{transform:translate3d(-0.31px,-30.28px,0) scale(1.048); opacity:1.000; animation-timing-function:linear;}
  80%{transform:translate3d(0.50px,-31.18px,0) scale(1.074); opacity:0.977; animation-timing-function:linear;}
  85%{transform:translate3d(1.23px,-31.91px,0) scale(1.301); opacity:0.761; animation-timing-function:linear;}
  90%{transform:translate3d(1.75px,-32.48px,0) scale(1.646); opacity:0.432; animation-timing-function:linear;}
  95%{transform:translate3d(1.99px,-32.85px,0) scale(1.962); opacity:0.131; animation-timing-function:linear;}
  100%{transform:translate3d(1.90px,-33.00px,0) scale(2.100); opacity:0.000; animation-timing-function:linear;}
}
@keyframes bubB{
  0%{transform:translate3d(0.00px,-0.00px,0) scale(0.500); opacity:0.000; animation-timing-function:linear;}
  5%{transform:translate3d(0.45px,-2.82px,0) scale(0.708); opacity:0.417; animation-timing-function:linear;}
  10%{transform:translate3d(0.66px,-5.53px,0) scale(0.917); opacity:0.833; animation-timing-function:linear;}
  15%{transform:translate3d(0.47px,-8.12px,0) scale(1.002); opacity:1.000; animation-timing-function:linear;}
  20%{transform:translate3d(-0.18px,-10.59px,0) scale(1.006); opacity:1.000; animation-timing-function:linear;}
  25%{transform:translate3d(-1.20px,-12.93px,0) scale(1.010); opacity:1.000; animation-timing-function:linear;}
  30%{transform:translate3d(-1.97px,-15.16px,0) scale(1.014); opacity:1.000; animation-timing-function:linear;}
  35%{transform:translate3d(-2.42px,-17.26px,0) scale(1.017); opacity:1.000; animation-timing-function:linear;}
  40%{transform:translate3d(-2.47px,-19.24px,0) scale(1.021); opacity:1.000; animation-timing-function:linear;}
  45%{transform:translate3d(-2.11px,-21.09px,0) scale(1.025); opacity:1.000; animation-timing-function:linear;}
  50%{transform:translate3d(-1.41px,-22.81px,0) scale(1.029); opacity:1.000; animation-timing-function:linear;}
  55%{transform:translate3d(-0.47px,-24.40px,0) scale(1.033); opacity:1.000; animation-timing-function:linear;}
  60%{transform:translate3d(0.54px,-25.85px,0) scale(1.036); opacity:1.000; animation-timing-function:linear;}
  65%{transform:translate3d(1.46px,-27.16px,0) scale(1.040); opacity:1.000; animation-timing-function:linear;}
  70%{transform:translate3d(2.15px,-28.34px,0) scale(1.044); opacity:1.000; animation-timing-function:linear;}
  75%{transform:translate3d(2.48px,-29.36px,0) scale(1.048); opacity:1.000; animation-timing-function:linear;}
  80%{transform:translate3d(2.40px,-30.23px,0) scale(1.074); opacity:0.977; animation-timing-function:linear;}
  85%{transform:translate3d(1.93px,-30.95px,0) scale(1.301); opacity:0.761; animation-timing-function:linear;}
  90%{transform:translate3d(1.14px,-31.49px,0) scale(1.646); opacity:0.432; animation-timing-function:linear;}
  95%{transform:translate3d(0.16px,-31.85px,0) scale(1.962); opacity:0.131; animation-timing-function:linear;}
  100%{transform:translate3d(-0.84px,-32.00px,0) scale(2.100); opacity:0.000; animation-timing-function:linear;}
}
@keyframes bubC{
  0%{transform:translate3d(-9.00px,-0.00px,0) scale(0.500); opacity:0.000; animation-timing-function:linear;}
  5%{transform:translate3d(-9.16px,-2.73px,0) scale(0.708); opacity:0.417; animation-timing-function:linear;}
  10%{transform:translate3d(-9.62px,-5.36px,0) scale(0.917); opacity:0.833; animation-timing-function:linear;}
  15%{transform:translate3d(-10.22px,-7.86px,0) scale(1.002); opacity:1.000; animation-timing-function:linear;}
  20%{transform:translate3d(-10.76px,-10.25px,0) scale(1.006); opacity:1.000; animation-timing-function:linear;}
  25%{transform:translate3d(-11.00px,-12.53px,0) scale(1.010); opacity:1.000; animation-timing-function:linear;}
  30%{transform:translate3d(-10.47px,-14.69px,0) scale(1.014); opacity:1.000; animation-timing-function:linear;}
  35%{transform:translate3d(-9.70px,-16.72px,0) scale(1.017); opacity:1.000; animation-timing-function:linear;}
  40%{transform:translate3d(-8.82px,-18.64px,0) scale(1.021); opacity:1.000; animation-timing-function:linear;}
  45%{transform:translate3d(-7.96px,-20.43px,0) scale(1.025); opacity:1.000; animation-timing-function:linear;}
  50%{transform:translate3d(-7.28px,-22.10px,0) scale(1.029); opacity:1.000; animation-timing-function:linear;}
  55%{transform:translate3d(-6.87px,-23.64px,0) scale(1.033); opacity:1.000; animation-timing-function:linear;}
  60%{transform:translate3d(-6.82px,-25.04px,0) scale(1.036); opacity:1.000; animation-timing-function:linear;}
  65%{transform:translate3d(-7.13px,-26.32px,0) scale(1.040); opacity:1.000; animation-timing-function:linear;}
  70%{transform:translate3d(-7.74px,-27.45px,0) scale(1.044); opacity:1.000; animation-timing-function:linear;}
  75%{transform:translate3d(-8.57px,-28.44px,0) scale(1.048); opacity:1.000; animation-timing-function:linear;}
  80%{transform:translate3d(-9.46px,-29.29px,0) scale(1.074); opacity:0.977; animation-timing-function:linear;}
  85%{transform:translate3d(-10.27px,-29.98px,0) scale(1.301); opacity:0.761; animation-timing-function:linear;}
  90%{transform:translate3d(-10.88px,-30.51px,0) scale(1.646); opacity:0.432; animation-timing-function:linear;}
  95%{transform:translate3d(-11.18px,-30.86px,0) scale(1.962); opacity:0.131; animation-timing-function:linear;}
  100%{transform:translate3d(-11.12px,-31.00px,0) scale(2.100); opacity:0.000; animation-timing-function:linear;}
}

/* Viajes (Reisekarten), Variante B (21.10.): kein Ueberstand ins Wasser mehr (wirkte am PC wie ein grauer Schleier).
   Obere Kante hart und gerade, links/rechts nur ein kurzer weicher Rand innerhalb des Kastens, unten weich auslaufend. */
body:not(.bg-home) .trip-card.glass::before{
  inset:0; border-radius:0; filter:none; background:rgba(14,16,38,.93);
  -webkit-mask-image:linear-gradient(270deg, transparent 0, rgba(0,0,0,.45) 8px, rgba(0,0,0,.85) 17px, #000 24px), linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 8px, rgba(0,0,0,.85) 17px, #000 24px), linear-gradient(0deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.65) 70px, rgba(0,0,0,.9) 100px, #000 130px);
  mask-image:linear-gradient(270deg, transparent 0, rgba(0,0,0,.45) 8px, rgba(0,0,0,.85) 17px, #000 24px), linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 8px, rgba(0,0,0,.85) 17px, #000 24px), linear-gradient(0deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.65) 70px, rgba(0,0,0,.9) 100px, #000 130px);
  -webkit-mask-composite:source-in, source-in; mask-composite:intersect, intersect;
}
body:not(.bg-home) .trip-photo-wrap{--eL:linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 8px, rgba(0,0,0,.85) 17px, #000 24px); --eR:linear-gradient(270deg, transparent 0, rgba(0,0,0,.45) 8px, rgba(0,0,0,.85) 17px, #000 24px); --eT:linear-gradient(180deg,#000,#000);}
body:not(.bg-home) .trip-media-scrim{
  -webkit-mask-image:linear-gradient(270deg, transparent 0, rgba(0,0,0,.25) 22px, rgba(0,0,0,.7) 48px, #000 80px);
  mask-image:linear-gradient(270deg, transparent 0, rgba(0,0,0,.25) 22px, rgba(0,0,0,.7) 48px, #000 80px);
}
@media (max-width:760px){
  body:not(.bg-home) .trip-card.glass::before{
  inset:0; border-radius:0; filter:none; background:rgba(14,16,38,.93);
  -webkit-mask-image:linear-gradient(270deg, transparent 0, rgba(0,0,0,.45) 4px, rgba(0,0,0,.85) 8px, #000 12px), linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 4px, rgba(0,0,0,.85) 8px, #000 12px), linear-gradient(0deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.65) 70px, rgba(0,0,0,.9) 100px, #000 130px);
  mask-image:linear-gradient(270deg, transparent 0, rgba(0,0,0,.45) 4px, rgba(0,0,0,.85) 8px, #000 12px), linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 4px, rgba(0,0,0,.85) 8px, #000 12px), linear-gradient(0deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.65) 70px, rgba(0,0,0,.9) 100px, #000 130px);
  -webkit-mask-composite:source-in, source-in; mask-composite:intersect, intersect;
  }
  body:not(.bg-home) .trip-photo-wrap{--eL:linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 4px, rgba(0,0,0,.85) 8px, #000 12px); --eR:linear-gradient(270deg, transparent 0, rgba(0,0,0,.45) 4px, rgba(0,0,0,.85) 8px, #000 12px);}
}

/* Startseite (23.10.): neues 4K-Riffvideo Trim2 (SDR), Filter Variante B: Kontrast 1.12, Helligkeit .9, kein Farbtonversatz; marineblauer Schleier wie zuvor */
/* Startseite Riffvideo: natuerliche Farben (Video ist bereits vom HDR umgerechnet; nur etwas Kontrast, keine Saettigung), leichte Abdunklung marineblau */
body.bg-home .page-bg video, body.bg-home .page-bg img{filter:contrast(1.12) brightness(.9);}
body.bg-home .page-bg-scrim{background:linear-gradient(180deg, rgba(6,20,64,.6) 0%, rgba(6,20,64,.44) 30%, rgba(6,20,64,.5) 65%, rgba(6,16,48,.7) 100%);}
/* Schlussbild (frueherer Moment mit dem Papageifisch) weich ueber das angehaltene Video blenden */
.page-bg .bg-ende{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; pointer-events:none;}
.page-bg .bg-ende.show{opacity:1;}
.page-bg .bg-ende:not([src]){display:none;}

/* Blog: Foto IMG_2510 (Grunzer-Schwarm) als Hintergrund; links ein weicher dunkler Verlauf, damit Ueberschrift und Text auf dem unruhigen Schwamm lesbar bleiben */
body.bg-blog .page-bg::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,16,38,.68) 0%, rgba(14,16,38,.5) 35%, rgba(14,16,38,.15) 65%, rgba(14,16,38,0) 85%),
             linear-gradient(180deg, rgba(14,16,38,.25) 0%, rgba(14,16,38,0) 30%);}
@media (max-width:760px){ body.bg-blog .page-bg::after{background:linear-gradient(180deg, rgba(14,16,38,.55) 0%, rgba(14,16,38,.4) 45%, rgba(14,16,38,.2) 100%);} }

/* Reisezeile Startseite: ganze Zeile in hellem Tuerkis (Kontrast ca. 4,8:1 statt 3,3-4,1:1 beim kraeftigen Tuerkis) */
body .trip-line{color:#8FE3F8;}
body .trip-line{display:block;} /* Fliesstext statt Flex, damit die Zeile am Handy natuerlich umbricht */
/* ...und sie gleitet von links ein (zeitgleich mit dem vorbeiziehenden Fisch, ab ca. 2 s), sobald das Startvideo laeuft; ohne Video oder bei reduzierter Bewegung steht sie sofort da */
/* Reisezeile ist von Anfang an sichtbar (zaehlt sofort fuer die Ladezeit) und gleitet nur noch ein; kein Einblenden ueber Deckkraft */
.trip-wait .hero .trip-line{transform:translateX(var(--trip-x,-44px)); transition:transform 1.9s cubic-bezier(.16,.75,.25,1);}
.trip-wait.trip-in .hero .trip-line{opacity:1; transform:none;}

/* Startseite: Startbild des Riffvideos als Hintergrund unter dem Video. Per CSS, damit das Handy nur die Hochkant-Fassung laedt
   (vorher lud es zusaetzlich das PC-Bild als poster). Gleicher Filter wie das Video, damit beim Start nichts springt. */
body.bg-home .page-bg::before{content:""; position:absolute; inset:0; z-index:-1;
  background:url(riff-still.webp) center/cover no-repeat; filter:contrast(1.12) brightness(.9);}
@media (max-aspect-ratio:1/1){ body.bg-home .page-bg::before{background-image:url(riff-mobil-still.webp);} }
body.bg-home .page-bg video{background:transparent;}


/* Blog: erster Beitrag beginnt tiefer, damit man (vor allem am Handy) zuerst das Hintergrundbild ganz sieht, wie bei Viajes */
body.bg-blog .page-hero{padding-bottom:0; margin-bottom:clamp(240px,40vh,420px);}

/* Viajes, Variante C (21.10.): Hai ganz im Bild (Schwanz nicht am Rand), Aussenkanten hart und gerade mit oberen Rundungen,
   nur unten laeuft Karte und Foto weich aus; Foto laeuft zur Textseite weich in den Block */
@media (min-width:521px){ .trip-photo.pos-hai{transform:translateY(10%) scale(1.2); transform-origin:3% 62%;} }
body:not(.bg-home) .trip-photo-wrap{--eL:linear-gradient(#000,#000); --eR:linear-gradient(#000,#000); --eT:linear-gradient(#000,#000); border-radius:18px 0 0 0;}
@media (max-width:960px){ body:not(.bg-home) .trip-photo-wrap{border-radius:18px 18px 0 0;} }
body:not(.bg-home) .trip-card.glass::before{
  border-radius:18px 18px 0 0;
  -webkit-mask-image:linear-gradient(0deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.65) 70px, rgba(0,0,0,.9) 100px, #000 130px);
  mask-image:linear-gradient(0deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.65) 70px, rgba(0,0,0,.9) 100px, #000 130px);
}

/* Einwilligung im Kontaktformular */
.contact-form label.consent{display:flex; align-items:flex-start; gap:10px; margin:0; font-size:13px; font-weight:500; line-height:1.5; color:var(--muted); cursor:pointer;}
.contact-form .consent input[type="checkbox"]{flex:none; width:24px; height:24px; min-height:0; padding:0; margin:0; accent-color:#38C4EA; cursor:pointer;}
.contact-form .consent a{color:var(--reef-ink); text-decoration:underline; text-underline-offset:2px;}