/* anmeldung.css — Anmeldeseite. Eine ruhige Inhaltsspalte (Titel, Eckdaten, Formular) auf Weiß,
   daneben bzw. darüber das Foto ohne Text. Desktop: Foto links, Inhalt rechts; Mobil: gestapelt.
   Wenige Schriftgrößen: "Anmeldung", Ritual-Titel, Text, Kleingedrucktes.
   Baut auf ../einladung/einladung.css auf. */

.an { --an-banner: clamp(50px, 7.2vh, 70px); }

/* ── Banner oben ────────────────────────────────────────────────── */

.an-banner {
  position: relative;
  z-index: 5;
  height: var(--an-banner);
  background: var(--hd-green);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
}
.an-banner__link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.an-banner__link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
.an-banner__logo { height: clamp(22px, 3.2vh, 28px); width: auto; }
.an-banner__x    { font-size: clamp(16px, 1.9vh, 20px); font-weight: 600; line-height: 1; }
.an-banner__name {
  font-size: clamp(13px, 1.9vh, 17px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Inhalt (gemeinsam): Titel, Eckdaten, Formular ohne Karte/Kasten ── */

.an-hero { background: #fff; color: #14221d; }
.an-hero__bg { position: relative; display: block; overflow: hidden; background: #0a0605; }
.an-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.an-hero__scrim { display: none; }
.an-hero__inner { display: contents; }

.an-eyebrow { display: none; }
.an-title { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--hd-green); }
.an-title span { display: inline; }
.an-title span:last-child { white-space: nowrap; }   /* "& Werden" bleibt zusammen */
.an-title .an-title__pre { display: block; font-size: 34px; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 6px; }
.an-when { margin: 14px 0 0; font-size: 15px; line-height: 1.55; font-weight: 500; }
.an-when span, .an-when__date { display: block; }
.an-when__date { font-weight: 600; }
.an-when sup { font-size: .55em; line-height: 0; vertical-align: .82em; margin: 0 .08em 0 .04em; }

.an .inv-signup__card { width: auto; max-width: none; margin: 0; box-shadow: none; border-radius: 0; background: #fff; }
.an .inv-signup__card:not(.an-closed) > .inv-signup__card-title { display: none; }
.an .inv-summary { display: none; }
.inv-signup__card-title { font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; color: var(--hd-green); margin-bottom: .6em; }
.an .inv-signup__card label { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.an .inv-signup__card input[type="text"],
.an .inv-signup__card input[type="email"] { padding: 13px 14px; font-size: 16px; }
.an .inv-err { min-height: 1.1em; margin: 2px 0 6px; font-size: 13px; }
.an .inv-legal { font-size: 13px; margin: 2px 0 14px; }

/* Erfolgsmeldung: leise, in Text- und Titelgröße, kleiner Button statt Vollbreite */
.an .inv-done h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--hd-green); margin: 0; }
.an .inv-done .inv-signup__done-text { margin: 6px 0 18px; font-size: 15px; line-height: 1.5; font-weight: 500; }
.an .inv-done .btn--icon { display: inline-flex; width: auto; padding: 12px 24px; font-size: 16px; }

/* Kleine Nebenlinks unter dem Anmelde-Button */
.an-quick { margin-top: 0; padding-top: 4px; font-size: 14px; font-weight: 500; gap: 4px 22px; justify-content: flex-start; }
.an-quick a, .an-quick button { color: var(--hd-green); font-size: 14px; font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.an-quick a:hover, .an-quick button:hover { color: #00593e; text-decoration-thickness: 1.5px; }
.an-quick a:focus-visible, .an-quick button:focus-visible { outline: 2px solid var(--hd-green); outline-offset: 3px; }

/* ── Mobil: gestapelt — Foto 4:3 oben, darunter der Inhalt ── */

@media (max-width: 720px) {
  .an { --an-banner: 52px; }
  .an-banner__logo { height: 22px; }
  .an-banner__x { font-size: 16px; }
  .an-banner__name { font-size: 14px; }
  .an-hero { display: block; }
  .an-hero__bg { aspect-ratio: 4 / 3; }
  .an-hero__bg img { object-position: 50% 38%; }
  .an-text { padding: 24px 20px 0; }
  .an .inv-signup__card { padding: 22px 20px 0; }
  .an-quick { padding: 6px 20px 36px; justify-content: flex-start; font-size: 14px; }
}

/* ── Desktop: Foto links (ohne Text), Inhalt rechts, senkrecht mittig ── */

@media (min-width: 721px) {
  .an-hero {
    --an-pad: clamp(32px, 5vw, 96px);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    min-height: calc(100vh - var(--an-banner));
    min-height: calc(100svh - var(--an-banner));
  }
  .an-hero__bg { grid-column: 1; grid-row: 1 / 5; }
  .an-hero__bg img { position: absolute; inset: 0; object-position: 50% 0%; }

  .an-text, .an .inv-signup__card {
    grid-column: 2;
    justify-self: center;
    width: 100%;
    max-width: calc(560px + 2 * var(--an-pad));
    padding-left: var(--an-pad);
    padding-right: var(--an-pad);
  }
  .an-text { grid-row: 2; padding-top: clamp(12px, 3vh, 40px); }
  .an .inv-signup__card { grid-row: 3; padding-top: clamp(14px, 2.6vh, 26px); padding-bottom: 0; }
  .an-quick { grid-column: 2; grid-row: 4; align-self: start; justify-self: center; width: 100%; max-width: calc(560px + 2 * var(--an-pad)); padding-left: var(--an-pad); padding-right: var(--an-pad); padding-bottom: clamp(20px, 4vh, 48px); }

  .an-title { font-size: clamp(20px, min(1.7vw, 3.3vh), 26px); }
  .an-title .an-title__pre { font-size: clamp(36px, min(3.4vw, 6.4vh), 54px); margin-bottom: clamp(4px, 1vh, 10px); }
  .an-when { margin-top: clamp(12px, 2.2vh, 20px); font-size: clamp(15px, min(1.2vw, 2.4vh), 18px); }
  .an .inv-signup__card input[type="text"],
  .an .inv-signup__card input[type="email"] { padding: clamp(10px, 1.7vh, 13px) 14px; }
  .an .inv-signup__card .btn { padding: clamp(12px, 2vh, 15px) 22px; }
}

/* ── Scrollbarer Infobereich unten (Grün): Text + Foto, ganz unten Kalender/Route/Teilen ── */

.an-info { background: var(--hd-green); color: #fff; padding-top: clamp(44px, 6vw, 88px); }
.an-info__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: clamp(36px, 4vw, 60px);
  align-items: start;
  grid-template-areas: "texts photo" "more .";
  padding-bottom: clamp(40px, 5vw, 64px);
}
.an-info__texts { grid-area: texts; }
.an-info__photo { grid-area: photo; }
.an-more { grid-area: more; align-self: baseline; font-size: clamp(16px, 1.3vw, 19px); margin: 0; }
.an-info__texts { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; font-weight: 500; max-width: 560px; }
.an-info__title span { white-space: nowrap; }
.an-info__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin-bottom: .7em; }
.an-info__texts p + p { margin-top: .9em; }
.an-more a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.an-more a:hover { text-decoration-thickness: 3px; }
.an-more a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.an-info__photo { aspect-ratio: 3 / 2; }

.an-foot { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.an-foot__inner {
  margin-top: clamp(40px, 5vw, 72px);
  padding: 0 0 clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  align-items: center;
}

/* Impressum/Datenschutz: eigener weißer Streifen unter dem Grün, statt Trennlinie */
.an-legal { background: #fff; color: #14221d; }
.an-legal__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 48px) calc(20px + env(safe-area-inset-bottom));
  display: flex;
  gap: 28px;
  font-size: 15px;
}
.an-legal__inner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.an-legal__inner a:hover { color: var(--hd-green); }
.an-legal__inner a:focus-visible { outline: 2px solid var(--hd-green); outline-offset: 3px; }

@media (max-width: 720px) {
  .an-info__grid { grid-template-columns: 1fr; row-gap: 28px; padding: 0 20px; grid-template-areas: "texts" "more" "photo"; }
  .an-more { font-size: 17px; }
  .an-info__texts { font-size: 17px; }
  .an-info__photo { margin: 24px -20px 0; }   /* mehr Luft nach "Mehr zum Projekt"; unten direkt an den Footer */
  .an-foot { padding: 0 20px; }
  .an-foot__inner { flex-direction: column; align-items: flex-start; padding-bottom: 40px; }
  .an-legal__inner { padding-left: 20px; padding-right: 20px; }
}