/* MOON SHOT — Newsletter-Popup ("Join the crew")
   Eigenes Markup, kein Brevo-Widget: die Seite laedt nichts von fremden Servern
   (siehe README, "Externe Quellen"). Abgesendet wird an api/subscribe.php auf
   dem eigenen Server, der erst dort mit Brevo spricht.

   Markup liegt am Ende von index.html, Logik in js/crew.js.
   Sichtbar wird das Ganze ueber .crew.is-open — ohne JS bleibt es zu. */

.crew {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(3, 3, 4, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* Geschlossener Zustand. visibility statt display:none, damit die Blende
     ueberhaupt animieren kann; pointer-events haelt Klicks draussen. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.crew.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility 0s;
}

/* --- Dialog ------------------------------------------------------------- */

.crew__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  width: min(880px, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid var(--line);
  transform: translateY(18px) scale(.98);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.crew.is-open .crew__box {
  transform: none;
}

/* Der Kasten bekommt beim Oeffnen den Fokus (tabindex="-1"), damit Screenreader
   und Tastatur im Dialog starten. Den Fokusring aus reset.css braucht er dabei
   nicht — er ist kein Bedienelement, und ein goldener Rahmen um das ganze
   Popup sieht aus wie Absicht. Die Elemente darin behalten ihren Ring. */
.crew__box:focus {
  outline: none;
}

.crew__figure {
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  background: var(--void-3);
}

/* contain statt cover: Das Motiv soll vollstaendig zu sehen sein, auch wenn
   die Spalte ein anderes Seitenverhaeltnis hat als das Bild (814 x 930).
   Was uebrig bleibt, fuellt der Hintergrund der Figur. */
.crew__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crew__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* Bildspalte gibt die Hoehe vor, Text mittig dazu */
  gap: clamp(14px, 2.2vh, 22px);
  padding: clamp(24px, 3.4vw, 44px);
  overflow-y: auto;
}

/* Wortmarke als Zeile, nicht als .kicker: im Entwurf steht sie hell, nicht
   in Gold — Gold ist auf der Seite den Rubriken vorbehalten. */
.crew__brand {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--bone-2);
}

.crew__title {
  font-family: var(--font-poster);
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.crew__lead {
  max-width: 34ch;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Schliessen --------------------------------------------------------- */

.crew__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bone-2);
  cursor: pointer;
  transition: color .25s;
}

.crew__close:hover {
  color: var(--gold);
}

/* --- Formular ----------------------------------------------------------- */

.crew__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.crew__field {
  width: 100%;
  padding: 14px 16px;
  background: var(--void-3);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: .9375rem;
  color: var(--bone);
  transition: border-color .25s;
}

.crew__field::placeholder {
  color: rgba(238, 237, 227, .38);
}

.crew__field:focus {
  border-color: var(--line-loud);
}

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen ihn aus. Nicht
   display:none — manche Bots ueberspringen genau solche Felder.
   .crew__hidden versteckt dagegen echte Labels, die Screenreader brauchen. */
.crew__trap,
.crew__hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.crew__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted);
  cursor: pointer;
}

.crew__consent input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.crew__consent a {
  color: var(--bone-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.crew__consent a:hover {
  color: var(--gold);
}

.crew__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 22px;
  background: var(--gold);
  border: 1px solid var(--gold);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--void);
  cursor: pointer;
  transition: background .25s, border-color .25s, opacity .25s;
}

.crew__submit:hover {
  background: var(--gold-hot);
  border-color: var(--gold-hot);
}

.crew__submit[disabled] {
  opacity: .55;
  cursor: default;
}

/* Rueckmeldung nach dem Absenden. .is-bad faerbt sie rot, setzt js/crew.js. */
.crew__note {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--bone-2);
}

.crew__note.is-bad {
  color: var(--ember);
}

.crew__note:empty {
  display: none;
}

/* Bewusst leise: das X schliesst nur diesen Aufruf, dieser Knopf stellt
   dauerhaft stumm. Er darf dem CTA darueber nicht die Schau stehlen, muss
   aber auffindbar sein — deshalb Unterstrich statt Rahmen. */
.crew__mute {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .25s;
}

.crew__mute:hover {
  color: var(--bone-2);
}

/* Erfolgsansicht ersetzt das Formular, nicht die Headline — der Kasten
   soll dabei nicht in der Hoehe springen. */
.crew__done {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crew__done .btn {
  align-self: flex-start;
}

.crew__done p {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--bone-2);
}

/* .crew__form ist display:flex und wuerde das hidden-Attribut sonst
   ueberstimmen. Bewusst auf .crew begrenzt — globale Regeln gehoeren
   nach css/base, nicht in eine Komponente. */
.crew [hidden] {
  display: none !important;
}

/* --- Schmal ------------------------------------------------------------- */

@media (max-width: 860px) {
  .crew__box {
    /* minmax(0, 1fr) statt 1fr: Grid-Items haben von Haus aus min-width: auto
       und schrumpfen nicht unter ihren Inhalt — in Chrome laeuft der Kasten
       dadurch ueber. Die Desktop-Regel oben macht es aus demselben Grund so. */
    grid-template-columns: minmax(0, 1fr);
    width: min(440px, 100%);
  }

  /* Hochkant wird das Bild zum Deckel statt zur Spalte, sonst frisst es
     auf kleinen Displays die halbe Hoehe.

     Die Figur bekommt dabei die Form des Bildes: In einer Zelle ueber die
     volle Kastenbreite stuende das hochformatige Motiv sonst zwischen zwei
     dicken dunklen Balken. So ist die Flaeche genau das Bild, mittig gesetzt.
     max-width faengt sehr hohe, schmale Displays ab — dort bestimmt die
     Breite die Hoehe, nicht umgekehrt. */
  .crew__figure {
    height: 34vh;
    max-width: 100%;
    aspect-ratio: 814 / 930;
    justify-self: center;
  }

  .crew__title {
    font-size: clamp(2rem, 11vw, 2.75rem);
  }
}

@media (max-width: 420px) {
  .crew__figure {
    display: none;
  }
}