/* =========================================================
   Turtle Diving Resort – One-Pager · Finale Umsetzung (Teil b)
   Design-Vorlage: Konzeption/Startseite.png (Figma-Entwurf)
   CI: Marineblau #0E4C82 · Türkis #17A2B8 · Orange #FF7A45
   ========================================================= */

/* =========================================================
   SCHRIFTEN – lokal gehostet (Variable Fonts, SIL OFL 1.1)
   Dateien in fonts/ inkl. OFL.txt · kein externes CDN nötig
   ========================================================= */
@font-face{
  font-family:"Quicksand";
  src:url("../fonts/Quicksand/Quicksand-VariableFont_wght.ttf") format("truetype-variations"),
      url("../fonts/Quicksand/Quicksand-VariableFont_wght.ttf") format("truetype");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nunito Sans";
  src:url("../fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype-variations"),
      url("../fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype");
  font-weight:200 1000;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nunito Sans";
  src:url("../fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype-variations"),
      url("../fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype");
  font-weight:200 1000;
  font-style:italic;
  font-display:swap;
}

:root{
  --blau:      #0E4C82;
  --tuerkis:   #17A2B8;
  --tuerkis-d: #0F7C8C;
  --tuerkis-h: #7FD4E2;
  --orange:    #FF7A45;
  --orange-d:  #E9632F;
  --sand:      #F6F2EA;
  --tief:      #0A2A3F;
  --weiss:     #FFFFFF;
  --grau:      #6E7A82;
  --maxw:      1236px;   /* → Inhalt exakt 1180 px bei 28 px Padding (wie Figma: 130 px Rand) */
  --nav-h:     76px;
  --radius:    18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  color:var(--tief); background:var(--weiss);
  line-height:1.65; font-size:18px;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:"Quicksand","Segoe UI",sans-serif; font-weight:700; line-height:1.15; color:var(--blau); }
h2{ font-size:2.75rem; margin-bottom:.4em; letter-spacing:-.5px; }
h3{ font-size:1.4rem; }
p{ margin-bottom:1em; }
a{ color:var(--tuerkis-d); text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:2; }
section{ scroll-margin-top:var(--nav-h); }

/* Kicker mit Linie */
.kicker{
  display:flex; align-items:center; gap:14px;
  font-family:"Quicksand",sans-serif; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--tuerkis); font-size:.85rem; margin-bottom:.9em;
}
.kicker::before{ content:""; width:44px; height:2px; background:var(--tuerkis); flex:none; }
.centered .kicker, .kicker-centered{ justify-content:center; }
.centered .kicker::after, .kicker-centered::after{ content:""; width:44px; height:2px; background:var(--tuerkis); flex:none; }
.kicker-centered::before{ content:""; width:44px; height:2px; background:var(--tuerkis); flex:none; }

/* Buttons */
.btn{
  display:inline-block; font-family:"Quicksand",sans-serif; font-weight:700;
  font-size:1rem; padding:15px 34px; border-radius:40px; cursor:pointer;
  border:2px solid transparent; transition:transform .18s, background .18s, box-shadow .18s;
  text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 8px 22px rgba(233,99,47,.35); }
.btn-primary:hover{ background:var(--orange-d); }
.btn-ghost{ background:transparent; color:#fff; border-color:#fff; }
.btn-ghost:hover{ background:#fff; color:var(--blau); }
.btn-outline{ background:transparent; color:var(--blau); border-color:var(--blau); }
.btn-outline:hover{ background:var(--blau); color:#fff; }

/* Scroll-Reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* Deko-Freisteller (Freepik) */
.deko{ position:absolute; pointer-events:none; z-index:1; }

/* =========================================================
   NAVIGATION – startet offen, deckt beim Scrollen
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center;
  background:linear-gradient(to bottom, rgba(10,42,63,.5), rgba(10,42,63,0));
  transition:background .3s, box-shadow .3s;
}
.nav.solid{ background:rgba(10,42,63,.94); backdrop-filter:blur(10px); box-shadow:0 2px 16px rgba(0,0,0,.25); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo img{ height:44px; filter:brightness(0) invert(1); }
.nav ul{ list-style:none; display:flex; gap:30px; align-items:center; }
.nav a{
  color:#fff; font-family:"Quicksand",sans-serif; font-weight:600; font-size:1rem;
  padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2.5px; width:0;
  background:var(--orange); border-radius:2px; transition:width .25s;
}
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav .nav-cta{ background:var(--orange); border-radius:40px; padding:10px 22px; }
.nav .nav-cta::after{ display:none; }
.nav .nav-cta:hover{ background:var(--orange-d); }
.burger{ display:none; }

/* =========================================================
   HERO – Full-Screen-Video
   ========================================================= */
.hero{
  position:relative; height:100vh; min-height:660px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,42,63,.30), rgba(10,42,63,.5));
}
.hero-inner{ position:relative; z-index:3; color:#fff; padding:0 24px; max-width:880px; }
.hero-logo{
  height:150px; margin:0 auto 26px;
  filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(0,0,0,.4));
}
.hero h1{ color:#fff; font-size:3.8rem; text-shadow:0 3px 24px rgba(0,0,0,.5); margin-bottom:.35em; letter-spacing:-1px; }
.hero p{ font-size:1.25rem; text-shadow:0 2px 12px rgba(0,0,0,.55); margin-bottom:1.6em; max-width:720px; margin-left:auto; margin-right:auto; }
.hero .btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:4; line-height:0; }
.hero-wave svg{ width:100%; height:90px; display:block; }

/* =========================================================
   Helle Sektionen
   ========================================================= */
.section{ padding:96px 0; position:relative; }
.section-head{ max-width:820px; margin-bottom:56px; }
.section-head.centered{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head p{ color:var(--grau); font-size:1.1rem; }
.section-head.light h2{ color:#fff; }
.section-head.light p{ color:#d8e6f0; }
.section-head.light .kicker{ color:var(--tuerkis-h); }
.section-head.light .kicker::before,
.section-head.light .kicker::after{ background:var(--tuerkis-h); }

/* Einleitung */
.einleitung{ background:var(--weiss); padding-top:128px; padding-bottom:138px; }
.deko-fisch-clown{ left:15px; bottom:205px; width:112px; z-index:3; }
.deko-fisch-doktor{ left:158px; bottom:40px; width:265px; z-index:3; }
.intro-grid{ display:grid; grid-template-columns:1fr 1.11fr; gap:72px; align-items:center; }  /* Einleitung: Bild 524 / Text 584 */
.intro-grid.rev{ grid-template-columns:1.47fr 1fr; gap:64px; }                                 /* Willkommen: Text 664 / Bild 452 */
.framed{ position:relative; }
.framed img{ border-radius:var(--radius); position:relative; z-index:1; box-shadow:0 18px 46px rgba(14,76,130,.22); width:100%; object-fit:cover; }
.intro-grid .framed img{ height:380px; object-position: 25% center; }
.intro-grid.rev .framed img{ height:345px; }
.framed::before{
  content:""; position:absolute; top:22px; left:22px; right:-22px; bottom:-22px;
  border:2.5px solid var(--tuerkis); border-radius:var(--radius); z-index:0;
}
.intro-grid.rev .framed::before{ left:-22px; right:22px; }

/* Willkommen */
.willkommen{ background:var(--weiss); padding-top:0; }
.band-wave-under{ line-height:0; margin:0 -28px 76px; }
.willkommen .band-wave-under{ margin:0 0 50px; }
.band-wave-under svg{ width:100%; height:90px; display:block; }

/* Statistik-Leiste */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1.5px solid rgba(14,76,130,.18);
  border-bottom:1.5px solid rgba(14,76,130,.18);
  padding:32px 0; margin:48px 0;
}
.stat{ text-align:center; position:relative; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%;
  width:1.5px; background:rgba(14,76,130,.14);
}
.stat .num, .stat .suffix{
  font-family:"Quicksand",sans-serif; font-weight:700;
  font-size:3.25rem; color:var(--tuerkis);
}
.stat .suffix{ font-size:1.9rem; margin-left:2px; }
.stat .lbl{ display:block; color:var(--grau); font-size:.95rem; margin-top:2px; }

/* Teaser */
.teaser{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:300px;
  display:flex; align-items:flex-end; color:#fff; margin:0 auto; max-width:none;
}
.teaser img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.teaser:hover img{ transform:scale(1.06); }
.teaser .t-body{
  position:relative; z-index:2; padding:26px 30px;
  background:linear-gradient(to top, rgba(10,42,63,.88), transparent); width:100%;
}
.teaser h3{ color:#fff; font-size:1.5rem; }
.teaser .arrow{ font-weight:700; color:var(--orange); font-family:"Quicksand",sans-serif; }

/* =========================================================
   DUNKLE BÄNDER + Wellen-Kanten
   ========================================================= */
.band{ position:relative; background:var(--tief); }
.band-wave{ line-height:0; position:relative; z-index:2; }
.band-wave svg{ width:100%; height:90px; display:block; }
.band-wave-top{ margin-top:-89px; }
.band-wave-top svg path{ transform-origin:center; }
.naturschutz{
  margin-top:90px; padding:85px 0 69px;
  background:
    linear-gradient(rgba(9,45,68,.95), rgba(9,45,68,.95)),
    url("../img/14.jpg") center/cover no-repeat;
}
.naturschutz .band-wave-top{ position:absolute; top:-89px; left:0; right:0; margin-top:0; }
.naturschutz .band-wave-top svg path{ }
.deep-band{ margin-top:130px; background:#003E56; }
.deep-band > .band-wave-top{ position:absolute; top:-89px; left:0; right:0; margin-top:0; }
.deep-band > .band-wave-bottom{ position:absolute; bottom:-89px; left:0; right:0; }
.kontakt-band .kontakt-wave{ position:absolute; top:-1px; left:0; right:0; z-index:3; }

/* Naturschutz */
.naturschutz .section-head{ margin-bottom:44px; }
.deko-taucher{ left:-44px; bottom:-120px; width:375px; opacity:.9; z-index:3; transform: scaleX(-1); }
.deko-korallen{ right:-240px; bottom:-115px; width:660px; z-index:1; }
.naturschutz .teaser{ max-width:730px; min-height:367px; }

/* Deep-Band (Tauchspots + Kurse) */
.deep-band{ margin-bottom:90px; }
.band-section{ padding:100px 0; position:relative; }
#tauchspots{ padding-top:60px; }
.band-section h2{ color:#fff; }
.band-section .kicker{ color:var(--tuerkis-h); }
.band-section .kicker::before, .band-section .kicker::after{ background:var(--tuerkis-h); }

/* Tauchspots */
.spots-head{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:end; margin-bottom:64px; }
.spots-head p{ color:#c6d8e4; font-size:1.05rem; margin:0; }
.map-wrap{
  position:relative; max-width:1180px; margin:0 auto;
  border-radius:22px; overflow:visible;
}
.map-img{ width:100%; border-radius:30px; box-shadow:0 22px 60px rgba(0,0,0,.35); display:block; }
.map-pin{
  position:absolute; transform:translate(-50%,-90%);
  background:none; border:none; cursor:pointer; z-index:3;
}
.map-pin img{ width:50px; height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); transition:transform .2s; }
.map-pin:hover img, .map-pin:focus img{ transform:scale(1.15); }
.map-pin:focus{ outline:none; }
.pin-label{
  display:none;
  position:absolute; white-space:nowrap;
  font-family:"Quicksand",sans-serif; font-weight:700; font-size:1.18rem; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
@media (min-width: 768px) {
  .pin-label {
    display:block;
  }
}
.map-pin.label-left .pin-label{ right:calc(100% + 10px); top:20%; }
.map-pin.label-right .pin-label{ left:calc(100% + 10px); top:20%; }
.map-pin.label-above .pin-label{ bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); }
.map-pin.label-up .pin-label{ top:-34%; }

/* Kurse */
.kurse{ padding-top:170px; padding-bottom:50px; background:#071E2E; }
.kurse-wave{ position:absolute; top:-45px; left:0; right:0; z-index:1; }
.kurse .kicker-centered{ margin-bottom:2em; }
.kurse-head{ display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-bottom:18px; position:relative; }
.kurse-head::after{
  content:""; position:absolute; left:50%; top:8px; bottom:8px;
  width:1px; background:rgba(255,255,255,.22);
}
.kurse-head p{ color:#c6d8e4; font-size:1.02rem; }
.kurse-sub{ font-family:"Quicksand",sans-serif; font-weight:700; color:#fff; font-size:1.15rem; margin:0 0 1em; }
.langs{ display:flex; gap:8px; align-items:center; color:#9db8ca; font-size:.95rem; }
.langs em{
  font-style:normal; font-family:"Quicksand",sans-serif; font-weight:700; font-size:.82rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:20px; padding:4px 12px;
}
/* Delfin-Wasserzeichen hinter dem Kurse-Kopf */
.kurse .delfine{
  left:50%; top:95px; transform:translateX(-50%);
  width:800px; opacity:.3;
  filter:grayscale(1) brightness(1.35);
}

.courses{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 28px; position:relative; z-index:2; }
.course{
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s, background .25s, box-shadow .25s;
}
.course:hover{ transform:translateY(-6px); background:rgba(255,255,255,.11); box-shadow:0 24px 54px rgba(0,0,0,.35); }
.c-media{ overflow:hidden; flex:1 1 175px; min-height:175px; }
.c-img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.course:hover .c-img{ transform:scale(1.08); }
.course .c-body{ padding:22px 24px; display:flex; flex-direction:column; flex:none; }
.course h3{ margin-bottom:.2em; color:#fff; font-size:1.3rem; }
.course .price-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.course .price{ font-family:"Quicksand",sans-serif; font-weight:700; color:var(--orange); font-size:1.4rem; }
.course .meta{ color:#9db8ca; font-size:.88rem; }

/* „mehr“-Aufklappmechanik */
.more-link{
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:"Quicksand",sans-serif; font-weight:700; font-size:1rem;
  color:var(--tuerkis-h); padding:10px 0 0; margin-top:auto;
  display:flex; align-items:center; gap:8px;
}
.more-link .chev{ transition:transform .3s; display:inline-block; }
.course.open .more-link .chev{ transform:rotate(180deg); }
.more-link:hover{ color:#fff; }
.c-details{
  max-height:0; overflow:hidden;
  transition:max-height .5s ease, opacity .4s ease, margin .4s ease;
  opacity:0; margin-top:0;
}
.course.open .c-details{ max-height:460px; opacity:1; margin-top:10px; }
.c-details p{ font-size:.9rem; color:#dbe8f2; }
.c-details .btn{ margin-top:6px; }
.course-cta{
  justify-content:center; align-items:center; text-align:center;
  background:rgba(255,122,69,.12); border-color:rgba(255,122,69,.45);
  padding:32px 26px;
}
.course-cta h3{ color:#fff; }
.course-cta p{ color:#f6d9cb; }

/* Buchungsformular – transparentes Panel */
.form-card{
  background:rgba(255,255,255,.18); backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:20px; padding:36px 38px 40px; margin:24px auto 0;
  position:relative; z-index:2;
}
.form-card h2{ text-align:center; color:#fff; font-size:1.85rem; margin-bottom:.25em; }
.form-sub{ text-align:center; color:#c6d8e4; font-size:.95rem; margin-bottom:24px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field.full{ grid-column:1 / -1; }
.field.center{ align-items:center; }
label{ font-family:"Quicksand",sans-serif; font-weight:600; font-size:.82rem; color:var(--blau); }
.form-card label{ color:#fff; }
input,select,textarea{
  font-family:inherit; font-size:.95rem; padding:10px 14px; border:1.5px solid #d0d8dd;
  border-radius:10px; background:#fff; color:var(--tief);
}
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px;
  cursor:pointer;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--tuerkis); box-shadow:0 0 0 3px rgba(23,162,184,.2); }
.check{ flex-direction:row; align-items:flex-start; gap:10px; }
.check input{ margin-top:4px; width:18px; height:18px; min-width:18px; accent-color:var(--orange); }
.check label{ font-weight:400; font-family:inherit; font-size:.85rem; }
.form-card .check label{ color:#dbe8f2; }

/* =========================================================
   ÜBER UNS – 3-teilig
   ========================================================= */
.ueber{ background:var(--weiss); padding:70px 0 65px; }
.ueber .section-head{ max-width:1100px; }
.ueber .section-head{ margin-bottom:0; }
.ueber-mitte{ background:var(--sand); padding:70px 0; }
.ueber-team{ background:var(--weiss); margin-bottom:90px; }
.about-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:center; }
.about-grid.rev{ direction:rtl; } .about-grid.rev > *{ direction:ltr; }
.about-grid h3{ font-size:1.7rem; margin-bottom:.5em; }

/* =========================================================
   KONTAKT – Foto-Band
   ========================================================= */
.kontakt-band{
  background:
    linear-gradient(rgba(10,42,63,.45), rgba(10,42,63,.78)),
    url("../img/16.jpg") center bottom/cover no-repeat;
  padding:120px 0 200px;
}
.contact-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:40px; align-items:start; margin-top:24px; }
.contact-card{
  background:rgba(255,255,255,.14); backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:20px; padding:38px;
}
.contact-card .field{ margin-bottom:18px; }
.contact-card label{ color:#fff; }
.contact-card input, .contact-card textarea{
  background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.6); color:var(--tief);
}
.contact-card input::placeholder, .contact-card textarea::placeholder{ color:rgba(10,42,63,.5); }
.contact-card .check label{ color:#f0f6fa; }
.contact-info{
  background:rgba(10,42,63,.75); backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,.18);
  color:#fff; border-radius:20px; padding:40px;
}
.contact-info h3{ color:#fff; margin-bottom:.8em; }
.contact-info a{ color:var(--tuerkis-h); }
.contact-info .line{ margin-bottom:14px; display:flex; gap:12px; align-items:flex-start; }

/* Kontakt-/Footer-Icons (weiße SVGs) */
img.ci{ width:16px; height:16px; flex:none; margin-top:5px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--tief); color:#b9c6cf; padding:64px 0 285px; font-size:.95rem; position:relative; overflow:hidden; }
.footer .f-grid{
  display:grid; grid-template-columns:auto 1fr 1.2fr 1.2fr; gap:48px;
  margin-bottom:34px; align-items:start;
}
.footer .logo{ height:74px; filter:brightness(0) invert(1); }
.footer p{ margin-bottom:10px; }
.footer strong{ color:#fff; }
.f-line{ display:flex; gap:10px; align-items:flex-start; }
.footer a{ color:#b9c6cf; }
.footer a:hover{ color:var(--orange); }
.footer .copy{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.85rem; color:#8798a3;
}
.footer-riff{ left:0; bottom:0; width:100%; max-height:320px; object-fit:cover; object-position:50% 32%; filter:brightness(.85); }
.footer-taucher{ right:390px; bottom:150px; width:225px; opacity:.32; filter:brightness(0) invert(1); transform:scaleX(-1) rotate(-18deg); z-index:2; }

/* =========================================================
   OVERLAY / MODAL
   ========================================================= */
.overlay{
  position:fixed; inset:0; background:rgba(10,42,63,.75); z-index:200;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.overlay.open{ display:flex; }
.modal{
  background:#fff; border-radius:20px; max-width:640px; width:100%; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.4); position:relative; animation:pop .28s ease;
}
@keyframes pop{ from{ transform:scale(.92) translateY(10px); opacity:0;} to{ transform:none; opacity:1;} }
.modal > img{ width:100%; height:260px; object-fit:cover; }
.modal .m-body{ padding:28px 30px 34px; }
.modal .m-body h3{ font-size:1.8rem; display:flex; align-items:center; gap:12px; margin-bottom:.4em; }
.modal .m-body h3 img{ width:34px; height:auto; flex:none; }
.m-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.m-tags em{
  font-style:normal; font-family:"Quicksand",sans-serif; font-weight:600; font-size:.82rem;
  background:var(--sand); color:var(--tuerkis-d); border-radius:20px; padding:4px 12px;
}
.modal .close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; font-size:1.4rem; cursor:pointer; color:var(--tief);
  display:flex; align-items:center; justify-content:center; z-index:2;
}

/* =========================================================
   SCREENSHOT-MODUS (?shot / ?only=)
   ========================================================= */
html.shot{ scroll-behavior:auto; }
html.shot .hero{ height:755px; min-height:0; }
html.shot .hero-video{ display:none; }
html.shot .hero::before{
  content:""; position:absolute; inset:0;
  background:url("../img/video-poster.jpg") center/cover;
}
html.shot .nav{ position:absolute; }
html.shot .reveal{ opacity:1; transform:none; transition:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .intro-grid,.intro-grid.rev,.about-grid,.contact-grid,.form-grid,.spots-head,.kurse-head{ grid-template-columns:1fr; }
  .courses{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(3)::before{ display:none; }
  .about-grid.rev{ direction:ltr; }
  .hero h1{ font-size:2.5rem; }
  h2{ font-size:2rem; }
  .deko-fisch-clown,.deko-fisch-doktor,.deko-taucher,.deko-korallen,.kurse .delfine,.footer-taucher{ display:none; }
  .kurse-head::after{ display:none; }
  .kurse{ padding-top:60px; }
  .einleitung{ padding-top:96px; padding-bottom:80px; }
  .intro-grid .framed img,.intro-grid.rev .framed img{ height:auto; }
  .footer{ padding-bottom:220px; }
  .footer-riff{ max-height:190px; }
  .footer .f-grid{ grid-template-columns:1fr 1fr; }
  .pin-label{ font-size:.85rem; }
  .map-pin img{ width:40px; }
  .nav ul{
    position:fixed; top:var(--nav-h); right:0; width:72%; height:calc(100vh - var(--nav-h));
    background:var(--blau); flex-direction:column; padding:40px 30px; gap:22px;
    transform:translateX(100%); transition:transform .3s; align-items:flex-start;
  }
  .nav ul.show{ transform:translateX(0); }
  .burger{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
  .burger span{ width:28px; height:3px; background:#fff; border-radius:2px; }
}
@media (max-width:640px){
  .courses{ grid-template-columns:1fr; }
  .footer .f-grid{ grid-template-columns:1fr; gap:24px; }
}