/* ==========================================================
   herquist.de/cecil — Seitenspezifisches CSS
   Baut auf brand-tokens.css + ../style.css auf. Hier nur, was
   nur auf dieser Unterseite vorkommt. Kein Dark/Light-Toggle -
   die Seite ist fest auf data-theme="light" gesetzt (siehe
   index.html), darum keine [data-theme="dark"]-Regeln hier.
   ========================================================== */

/* --- Akzentfarbe für diese Seite ---------------------------------
   Bewusste Abweichung vom Haus-Gold NUR für Cecil (Fischkutter-
   Grünton). Überschreibt --accent ausschließlich hier,
   brand-tokens.css bleibt für alle anderen Seiten unangetastet.
   ------------------------------------------------------------ */

:root,
[data-theme="light"] {
  --accent: #2f7d6b;
}

/* --- Seitentitel ------------------------------------------------
   Reiner Text statt Bild-Logo, damit der Titel durchsuchbar/lesbar
   bleibt. Hero-Idee (Latten-Textur + Typo-Schriftzug) erstmal
   pausiert - Assets liegen unter assets/img/gruene-latten.jpg und
   assets/img/cecil-typo.png, falls die Idee später aufgegriffen
   wird.
   ------------------------------------------------------------ */

/* Enthält Float-Bilder innerhalb ihrer Section (Clearfix via
   Block-Formatting-Context), statt sie in die nächste Section
   bluten zu lassen. */
main.legal section {
  overflow: hidden;
}

.legal-header {
	margin: 0;
	padding-top: 0;
}

.cecil-title {
  margin-top: calc(var(--space) * 0.5);
}

.cecil-title h1 {
  font-weight: 700;
  font-size: 260%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 0.15em;
}

.cecil-title .subtitle {
  font-weight: 700;
  font-size: 120%;
  margin-bottom: 0em;
}

.cecil-title .tagline {
  color: var(--color-muted);
  max-width: 46em;
}

/* --- Gerahmte Illustrationen -------------------------------------
   Ersatz für die alten .lefty/.righty Floats. Auf schmalen
   Screens fallen sie automatisch auf gestapelt zurück (siehe
   Media Query unten), statt Text zu zerschneiden.
   ------------------------------------------------------------ */

.img-float {
  display: block;
  height: auto;
  margin: 0 0 1em 0;
}

.img-float-right {
  float: right;
  clear: both;
  width: 38%;
  max-width: 260px;
  margin-left: var(--space);
}

.img-float-left {
  float: left;
  clear: both;
  width: 42%;
  max-width: 280px;
  margin-right: var(--space);
}

/* --- Booking-Hinweis --------------------------------------------
   Wiederverwendet die Kasten-Optik der Footer-Links auf der
   Startseite (Rahmen in Akzentfarbe).
   ------------------------------------------------------------ */

.booking-box {
  border: 1px solid var(--accent);
  padding: 1em 1.25em;
  margin: var(--space) 0;
}

.booking-box p:last-child {
  margin-bottom: 0;
}

.booking-box a {
  font-weight: 700;
}

/* --- Workshop-Liste (ersetzt die alte Pfeil-Grafik) --------------- */

.workshop-list {
  list-style: none;
  margin: 0.75em 0 1em;
  padding: 0;
}

.workshop-list li {
  padding-left: 1.25em;
  margin-bottom: 0.75em;
  position: relative;
}

.workshop-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* --- Besatzung ----------------------------------------------------- */

.besatzung {
  list-style: none;
  margin: 0.5em 0 1em 3em;
  padding: 0;
}

.besatzung li {
  margin-bottom: 0.4em;
}

/* Bewusst NICHT gefloatet: zusammen mit dem bereits rechts
   gefloateten Anker würde ein zweiter Float hier eine große,
   unschöne Lücke reißen (Float muss unter den Anker "clearen",
   der Text davor ist aber schon durchgelaufen). Deshalb hier
   nur ein kleines, ruhiges Bild im normalen Textfluss. */
.besatzung-instrument {
  display: block;
  width: 130px;
  height: auto;
  margin: 1em 0 0;
}

.besatzung-label {
  color: var(--color-muted);
  text-transform: uppercase;
  font-size: 80%;
  letter-spacing: 0.02em;
  margin: 1em 0 0.4em;
}

/* --- Fotogalerien --------------------------------------------------
   Grid aus Thumbnails, öffnet per JS ein Lightbox-Dialog
   (siehe Script am Seitenende). Kein jQuery, keine externe
   Library.
   ------------------------------------------------------------ */

.gallery {
  clear: both;
  margin: 0 0 var(--space);
}

.gallery .caption {
  margin-bottom: 0.5em;
  color: var(--color-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.4em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-grid button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: var(--space);
}

.lightbox.is-open {
  display: flex;
}

.lightbox figure {
  max-width: 90vw;
  max-height: 90vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox img {
  max-width: 90vw;
  max-height: 78vh;
  height: auto;
  display: block;
}

.lightbox figcaption {
  color: var(--color-muted);
  margin-top: 0.75em;
  text-align: center;
  font-size: 0.9rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0.4em 0.7em;
}

.lightbox-close {
  top: var(--space);
  right: var(--space);
}

.lightbox-prev {
  left: var(--space);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: var(--space);
  top: 50%;
  transform: translateY(-50%);
}

/* --- Mobile --------------------------------------------------------- */

@media (max-width: 480px) {
  .cecil-title h1 {
    font-size: 190%;
  }

  .img-float-right,
  .img-float-left {
    float: none;
    width: 60%;
    max-width: 220px;
    margin: 0 auto 1em;
  }

  .lightbox-prev,
  .lightbox-next {
    padding: 0.4em 0.6em;
  }
}