/* Stile für <sprache>/about.html — Crew, Boot und Verpflegung.
 *
 * Die Klassen .team-* und .boat-photos standen bis 2026-09-26 nur auf der
 * Startseite und leben daher in home.css. home.css lässt sich hier nicht
 * einbinden: dort ist .reef-grid ein dreispaltiges Kachelraster, auf den
 * Unterseiten aber das zweispaltige Seitenlayout — die Seite bräche zusammen.
 * Also stehen die gebrauchten Regeln hier ein zweites Mal. Wer die Crew-Kacheln
 * in home.css ändert, muss sie hier mitändern.
 * Gleiches Vorgehen wie bei snorkeling.css (2026-09-06): eine eigene Datei
 * statt eines ?v=-Bumps über achtzig Seiten.
 *
 * Die Crew steht in einem eigenen dunklen Band, weil die Namen in den Kacheln
 * weiß sind — auf dem hellen Seitengrund wären sie unlesbar.
 */

.about-crew{
  background:linear-gradient(180deg,#0a3a4a 0%,#072b38 100%);
  padding:74px 0 84px;
}
.about-crew .eyebrow{color:var(--accent,#ffc14d);}
.about-crew h2{
  color:#fff;font-size:clamp(28px,3.4vw,42px);line-height:1.15;margin:0 0 10px;
}
.about-crew .about-crew-lede{
  color:#bfe6e2;font-size:15.5px;line-height:1.65;max-width:620px;margin:0;
}

/* --- Crew-Kacheln: Spiegel von home.css Zeile 82-93 --------------------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px 24px;margin-top:46px;}
.team-card{text-align:center;}
.team-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 16px;}
.team-photo.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.07);border:1.5px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.55);box-sizing:border-box;}
.team-photo.placeholder .ph-label{font-size:11px;letter-spacing:.01em;line-height:1.2;text-align:center;padding:0 8px;}
.team-photo.placeholder.wide{width:100%;max-width:640px;height:300px;border-radius:20px;margin:0 auto;gap:10px;}
.team-photo.placeholder.wide .ph-label{font-size:13px;}
.team-photo.wide{width:100%;max-width:640px;aspect-ratio:1437/1095;height:auto;border-radius:20px;margin:0 auto;object-fit:contain;background:rgba(255,255,255,.07);}
.team-card h3{color:#fff;font-size:16px;margin:0;}
.team-card span{display:block;color:#8fcfc8;font-size:12.5px;margin-top:6px;line-height:1.4;}
.team-nextgen{margin-top:44px;text-align:center;}
.team-nextgen h3{color:#fff;font-size:19px;margin:0 0 18px;}

/* --- Foto-Paare für Boot und Buffet: Spiegel von home.css Zeile 408-411 - */
.boat-photos{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:auto!important;}
.boat-photos .g-item img{width:100%;height:auto;display:block;}

@media(max-width:960px) {
  .team-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px) {
  .team-grid{grid-template-columns:repeat(2,1fr);gap:26px 18px;}
  .about-crew{padding:56px 0 64px;}
  .boat-photos{grid-template-columns:1fr!important;}
}

/* --- Kopfbild (Gruppenfoto) ---------------------------------------------
 * reef.css ist fuer Riff-Panoramen gebaut: flaches Band, Bild 112 % gross,
 * Ken-Burns-Zoom bis 1.16 auf die Bildmitte, oben 82 % Abdunklung. Beim
 * Gruppenfoto (1316x1195) schnitt das genau die Gesichter weg (die liegen
 * bei 13-47 % der Bildhoehe) und dunkelte den Rest ab. Deshalb hier:
 * hoeheres Band, Bildausschnitt oben verankert, Text nach unten, leichterer
 * Schleier, Zoom nur minimal und auf die Gesichter zentriert.
 * Mobil wird das Foto unbeschnitten ueber dem Text gezeigt. */
.about-hero{
  min-height:min(780px,92vh);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:84px;
}
.about-hero .reef-hero-img{
  inset:0;width:100%;height:100%;
  object-position:50% 16%;
  transform:none;animation:none;
}
.about-hero .reef-hero-media,
.about-hero .reef-hero-media.is-parallax{
  transform-origin:50% 28%;
  animation:aboutKen 26s ease-in-out infinite alternate;
}
@keyframes aboutKen{
  0%{transform:scale(1);}
  100%{transform:scale(1.05);}
}
.about-hero .reef-hero-veil{
  background:linear-gradient(180deg,rgba(1,20,27,.55) 0%,rgba(2,34,45,.08) 16%,rgba(2,34,45,.04) 48%,rgba(2,26,34,.62) 70%,rgba(2,22,30,.92) 100%);
}
.about-hero .reef-hero-caustics{opacity:.4;}

@media(max-width:760px){
  .about-hero{min-height:0;display:block;padding:74px 0 64px;}
  .about-hero .reef-hero-media,
  .about-hero .reef-hero-media.is-parallax{
    position:relative;inset:auto;animation:none;transform:none;
    margin:0 0 22px;
  }
  .about-hero .reef-hero-img{
    position:static;display:block;width:100%;height:auto;
    transform:none!important;
  }
  .about-hero .reef-hero-veil{
    background:linear-gradient(180deg,rgba(1,20,27,0) 0,rgba(1,20,27,0) calc(74px + 70vw),rgba(2,22,30,.96) calc(74px + 91vw),#02202c 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .about-hero .reef-hero-media,
  .about-hero .reef-hero-media.is-parallax{animation:none;transform:none;}
}