/* =========================================================
   Tigerhaie im Roten Meer
   Diver on Tour
   Datei: /assets/css/tigerhaie-rotes-meer.css
========================================================= */

:root{
  --dot-primary:#0e3a5a;
  --dot-secondary:#006699;
  --dot-accent:#0bb3d9;
  --dot-light:#f4f8fb;
  --dot-white:#ffffff;
  --dot-text:#263238;
  --dot-shadow:0 12px 35px rgba(0,0,0,.12);
  --dot-radius:18px;
}

/* =========================================================
   Allgemein
========================================================= */

.dot-tiger-page{
  background:#ffffff;
  color:var(--dot-text);
}

.dot-tiger-page img{
  max-width:100%;
  display:block;
}

.dot-tiger-page a{
  text-decoration:none;
}

/* =========================================================
   Hero Banner
========================================================= */

.dot-tiger-hero{
  position:relative;
  height:55vh;
  min-height:420px;
  max-height:650px;
  overflow:hidden;
}

.dot-tiger-hero__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.dot-tiger-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.35) 50%,
    rgba(0,0,0,.15) 100%
  );
}

.dot-tiger-hero__content{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 40px;
  text-align:left;
}

.dot-kicker{
  color:#fff;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.95rem;
  margin-bottom:10px;
}

.dot-tiger-hero h1{
  color:#fff;
  font-size:clamp(2.2rem,5vw,4.2rem);
  line-height:1.1;
  margin:0 0 20px;
}

.dot-hero-text{
  color:#fff;
  max-width:700px;
  font-size:1.25rem;
  line-height:1.6;
}

/* =========================================================
   Breadcrumb
========================================================= */

.dot-breadcrumb{
  max-width:1200px;
  margin:30px auto;
  padding:0 20px;
  font-size:.95rem;
  color:#777;
}

.dot-breadcrumb a{
  color:var(--dot-primary);
  font-weight:600;
}

.dot-breadcrumb span{
  margin:0 8px;
}

/* =========================================================
   Bildkarten
========================================================= */

.dot-gallery-section{
  max-width:1200px;
  margin:60px auto;
  padding:0 20px;
}

.dot-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.dot-gallery-card{
  background:#fff;
  border-radius:var(--dot-radius);
  overflow:hidden;
  box-shadow:var(--dot-shadow);
  transition:.3s ease;
}

.dot-gallery-card:hover{
  transform:translateY(-6px);
}

.dot-gallery-card img{
  width:100%;
  height:260px;
  object-fit:cover;
}

.dot-gallery-card__content{
  padding:24px;
}

.dot-gallery-card__content h2{
  font-size:1.3rem;
  color:var(--dot-primary);
  margin:0 0 12px;
}

.dot-gallery-card__content p{
  margin:0;
  line-height:1.7;
}

/* =========================================================
   Artikel
========================================================= */

.dot-article{
  max-width:1000px;
  margin:80px auto;
  padding:0 20px;
}

.dot-article-header{
  margin-bottom:60px;
}

.dot-article-header h2{
  color:var(--dot-primary);
  font-size:2.4rem;
  margin-bottom:20px;
}

.dot-article-lead{
  font-size:1.2rem;
  line-height:1.8;
  color:#444;
}

.dot-article section{
  margin-bottom:55px;
}

.dot-article h2{
  color:var(--dot-primary);
  margin-bottom:20px;
  font-size:2rem;
}

.dot-article h3{
  color:var(--dot-primary);
  margin-bottom:12px;
}

.dot-article p{
  line-height:1.9;
  margin-bottom:20px;
  font-size:1.08rem;
}

.dot-article-list{
  padding-left:25px;
}

.dot-article-list li{
  margin-bottom:10px;
  line-height:1.8;
}

/* =========================================================
   Zeitleiste
========================================================= */

.dot-timeline{
  display:grid;
  gap:25px;
}

.dot-timeline-item{
  background:#f7fafc;
  border-left:6px solid var(--dot-accent);
  border-radius:12px;
  padding:25px;
}

.dot-timeline-year{
  display:inline-block;
  background:var(--dot-primary);
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-weight:700;
  margin-bottom:15px;
}

/* =========================================================
   Autorenbox
========================================================= */

.dot-author-box{
  background:#f4f8fb;
  padding:40px;
  border-radius:var(--dot-radius);
}

.dot-author-box h2{
  margin-top:0;
}

/* =========================================================
   Quellen
========================================================= */

.dot-sources{
  background:#fafafa;
  border-radius:var(--dot-radius);
  padding:35px;
}

.dot-sources ul{
  margin:0;
  padding-left:20px;
}

.dot-sources li{
  margin-bottom:12px;
  line-height:1.8;
}

/* =========================================================
   Schulungsvideo
========================================================= */

.dot-training-video{
  max-width:1100px;
  margin:80px auto;
  padding:0 20px;
}

.dot-training-video__inner{
  background:var(--dot-light);
  border-radius:var(--dot-radius);
  padding:40px;
  text-align:center;
}

.dot-training-video__inner h2{
  color:var(--dot-primary);
  margin-top:0;
}

.dot-training-video__frame{
  margin:30px 0;
  overflow:hidden;
  border-radius:16px;
  box-shadow:var(--dot-shadow);
}

.dot-training-video__frame video{
  width:100%;
  display:block;
}

.dot-button{
  display:inline-block;
  background:var(--dot-primary);
  color:#fff;
  padding:14px 30px;
  border-radius:8px;
  font-weight:700;
  transition:.3s ease;
}

.dot-button:hover{
  background:var(--dot-secondary);
}

/* =========================================================
   Zurück Button
========================================================= */

.dot-back-section{
  max-width:1000px;
  margin:0 auto 80px;
  padding:0 20px;
  text-align:center;
}

.dot-back-button{
  display:inline-block;
  background:#eef4f8;
  color:var(--dot-primary);
  padding:14px 24px;
  border-radius:8px;
  font-weight:700;
  transition:.3s ease;
}

.dot-back-button:hover{
  background:#dfeaf1;
}

/* =========================================================
   Podcast Player
========================================================= */

.dot-podcast-player{
    max-width:1000px;
    margin:80px auto 60px;
    padding:0 20px;
}

.dot-podcast-player__inner{
    background:#f4f8fb;
    border-radius:18px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.dot-podcast-player h2{
    margin-top:0;
    color:#0e3a5a;
}

.dot-podcast-player p{
    margin-bottom:25px;
    line-height:1.7;
}

.dot-podcast-player audio{
    width:100%;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:992px){

  .dot-gallery-grid{
    grid-template-columns:1fr;
  }

  .dot-gallery-card img{
    height:auto;
  }

  .dot-tiger-hero{
    height:45vh;
    min-height:350px;
  }

  .dot-tiger-hero__content{
    padding:0 25px;
  }

  .dot-article h2{
    font-size:1.7rem;
  }

}

@media (max-width:768px){

  .dot-tiger-hero{
    height:40vh;
    min-height:320px;
  }

  .dot-training-video__inner,
  .dot-author-box,
  .dot-sources{
    padding:25px;
  }

  .dot-tiger-hero h1{
    font-size:2.3rem;
  }

  .dot-hero-text{
    font-size:1rem;
  }

}