/* Sektionen nach docs/DESIGN-SYSTEM.md, Abschnitt 6, plus Rechtsseiten (6.11).
 * Mobile first; die Breakpoints sind 600 / 768 / 1024 / 1280 (3.7).
 */

/* ============================================================== 6.1 Hero */

.hero {
  position: relative;
  min-height: max(560px, 100svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--photo-bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 60%; /* Pult der Scheune im Hochformat mittig */
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Redesign 2026-10-06: deutlich heller. Oben ein schmales Band unter der
   Leiste (die weissen Links lagen sonst auf den LOVE-Gluehbirnen), die
   Deckung sitzt gezielt hinter dem Textblock, der Rest bleibt offen. */
.hero::before {
  background: linear-gradient(
    180deg,
    var(--veil-55) 0%,
    var(--veil-20) calc(var(--nav-h) + 24px),
    var(--veil-000) 30%,
    var(--veil-12) 50%,
    var(--veil-66) 100%
  );
}

.hero::after {
  /* Helles Scheunenfoto: kraeftigere Deckung hinter Name, Zeile und Knoepfen. */
  background: radial-gradient(80% 70% at 50% 74%, var(--veil-66), transparent 74%);
}

.hero__inner {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--s-16));
  padding-bottom: clamp(72px, 12svh, 152px);
}

/* Die Versalien lassen ueber und unter der Zeile Luft stehen; ohne den Abzug
   messen sich die Abstaende optisch deutlich groesser als die Tokens sagen. */
.hero h1 { margin-bottom: var(--title-gap); }

/* Wie die Referenz: Name gross und mittig, darueber die Rolle weit gesperrt
   in Versalien, ohne Strich. */
.hero__inner { text-align: center; }
.hero .eyebrow {
  justify-content: center;
  margin-bottom: var(--s-5);
  font-style: normal;
  font-size: var(--fs-nav);
  letter-spacing: .5em;
  text-transform: uppercase;
}
.hero .eyebrow::before { display: none; }
.hero__subline { margin-inline: auto; }
.hero__actions { justify-content: center; align-items: center; }

.hero__subline {
  max-width: 44ch;
  color: var(--text-2);
  margin-bottom: var(--s-8);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.hero__scroll { display: none; }

/* Auf dem Telefon gleich breite Knoepfe untereinander. */
@media (max-width: 599.98px) {
  .hero__actions { align-items: stretch; width: min(100%, 300px); margin-inline: auto; }
}

@media (min-width: 600px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (min-width: 768px) {
  .hero__media img { object-position: 50% 62%; }
}

/* Die Begrenzung sitzt an der Subline, nicht am Block: sonst bricht die H1
   in zwei Zeilen, obwohl 1200 px Platz sind. Die linke Kante bleibt die
   Containerkante (kein width, .container bringt margin-inline: auto mit). */


/* Parallax nur, wo Scroll-Timelines unterstuetzt werden - sonst steht das
 * Bild still, was ebenfalls korrekt aussieht. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline-name: --hero; view-timeline-axis: block; }

    .hero__media img {
      animation: hero-parallax linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes hero-parallax {
  from { transform: scale(1.08) translateY(0); }
  to { transform: scale(1) translateY(-6%); }
}


/* ======================================================== 6.2 Willkommen */

.welcome__media { position: relative; border-radius: var(--r-sm); overflow: hidden; }

.welcome__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.welcome__head { margin-bottom: var(--s-8); }
.welcome__text .lead { margin-bottom: var(--s-6); }
.welcome__text .link-arrow { margin-top: var(--s-8); }

@media (min-width: 600px) and (max-width: 1023.98px) {
  .welcome__media img { aspect-ratio: 3 / 2; }
}

@media (min-width: 1024px) {
  .welcome__grid { align-items: center; }
  .welcome__head { grid-column: 1 / 13; grid-row: 1; margin-bottom: var(--s-4); }
  .welcome__text { grid-column: 1 / 6; grid-row: 2; }
  .welcome__media { grid-column: 7 / 13; grid-row: 2; align-self: center; }
}

/* Bei 1024 px war die Textspalte nur 367 px breit - der Lead brach auf
   drei Zeilen mit 24 Zeichen. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .welcome__head { grid-column: 1 / 13; }
  .welcome__text { grid-column: 1 / 7; }
  .welcome__media { grid-column: 8 / 13; }
}


/* ========================================================== 6.3 Anlaesse */

/* Korrektur 2026-09-20: "eine grosse Kachel links, drei gestapelte rechts"
   geht mit zwei bis drei Saetzen Text pro Kachel nicht auf - die kleinen
   Kacheln wurden zu reinen Textkaesten ohne sichtbares Foto. Jetzt laeuft
   die Hochzeit als breite Bildbahn, die uebrigen stehen daneben. */
.tiles {
  display: grid;
  gap: var(--gap-lg);
  /* Feste Spaltenzahl statt auto-fit: auto-fit liess bei 1137-1279 und
     1550-1622 px eine leere Zelle und lief unter 340 px seitlich ueber. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) and (max-width: 767.98px) {
  .tiles .tile img { aspect-ratio: 4 / 3; }
}

@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ab 1024 px: Hochzeit gross oben, die drei anderen darunter in einer Reihe.
   Das Hochzeitsfoto ist quadratisch; statt es auf 2:1 zu beschneiden (die
   Haelfte fiel weg), steht es ungeschnitten links neben dem Text. */
@media (min-width: 1024px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .tiles .tile:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-lg);
    align-items: center;
  }

  .tiles .tile:first-child img { aspect-ratio: auto; }
  .tiles .tile:first-child .tile__body { padding: 0; }
  .tiles .tile:first-child h3 { font-size: var(--fs-h2); line-height: 1.04; }
  .tiles .tile:first-child p { font-size: var(--fs-intro); }
}

/* ================================================= 6.4 Leuchtbuchstaben */

/* Natuerliches Format (16:9): ein 4:3-Ausschnitt schnitt das L ab. */
.letters__media img {
  display: block;
  width: 100%;
  height: auto;
}

.letters__text h2 { margin-bottom: var(--title-gap); }
.letters__text .lead { margin-bottom: var(--s-6); }
.letters__meta { margin-top: var(--s-6); font-size: var(--fs-body); color: var(--text-2); }
.letters__text .link-arrow { margin-top: var(--s-6); }

@media (min-width: 1024px) {
  .letters__grid { align-items: center; }
  .letters__media { grid-column: 1 / 7; }
  .letters__text { grid-column: 8 / 13; }
}

/* =========================================================== 6.5 Technik */

.tech { overflow-x: clip; }

.tech__head { margin-bottom: var(--head-gap); }

.tech__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  display: grid;
  gap: var(--gap-lg);
}

.tech__media img {
  display: block;
  width: 100%;
  /* Ohne height:auto gewinnt das height-Attribut aus dem picture()-Makro
     gegen aspect-ratio - das Bild war auf jeder Breite 900 px hoch. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.tech__text .intro { margin-bottom: var(--s-8); }

@media (min-width: 1024px) {
  .tech__inner { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .tech__media { grid-column: 1 / 7; }
  .tech__text { grid-column: 8 / 13; }
}

/* Einziger halbseitiger Bleed der Seite: das Bild laeuft links aus. */
@media (min-width: 1280px) {
  .tech__inner {
    width: 100%;
    /* 50% statt 50vw: die Prozentbasis ist die Seitenbreite ohne Scrollbalken,
       damit die Textspalte exakt an der Containerkante endet. */
    grid-template-columns: calc(50% - var(--gap-lg) / 2) 1fr;
  }

  .tech__media { grid-column: 1; }

  .tech__media img { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

  .tech__text {
    grid-column: 2;
    width: min(100%, calc((var(--container) - var(--gap-lg)) / 2));
  }
}

/* ============================================================ 6.6 Ablauf */

.process__cta { margin-top: var(--s-16); }

@media (max-width: 767.98px) {
  .step {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: var(--s-4);
  }

  .step__rule,
  .step__num { grid-column: 1; }
  .step h3,
  .step p { grid-column: 2; }
  .step__num { margin-bottom: 0; font-size: 2.25rem; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .steps {
    position: relative;
    /* minmax(0, 1fr): ein langes Wort darf die Spalte nicht aufblaehen. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================== 6.8 FAQ */

.faq__closing { margin-top: var(--s-12); }
.faq__closing p { margin-bottom: var(--s-4); }

/* Wie die Referenz: schmaler Kopf links (bleibt beim Scrollen stehen),
   breites Akkordeon rechts - so sieht die FAQ anders aus als die Anfrage
   darunter. */
@media (min-width: 1024px) {
  .faq__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-lg);
    align-items: start;
  }

  .faq__head {
    grid-column: 1 / 5;
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--nav-h) + var(--s-8));
  }

  .faq__list { grid-column: 6 / 13; }
}

/* ========================================================== 6.9 Anfrage */

.inquiry { position: relative; }

.inquiry__head { margin-bottom: var(--head-gap); }
.inquiry__text .box--hint { margin-top: var(--s-10); }

.ways { list-style: none; margin-top: var(--s-10); }

.ways li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-top: var(--line);
}

.ways li:last-child { border-bottom: var(--line); }

.ways__label {
  color: var(--text-3);
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1.3;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.ways__value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.ways__value:hover,
.ways__value:focus-visible { color: var(--text-3); border-bottom-color: currentColor; }

.form-card {
  container-type: inline-size;
  margin-top: var(--head-gap);
  padding: var(--s-8) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--text-1);
  border-radius: 0;
  box-shadow: var(--shadow-card);
}

.flash { margin-bottom: var(--s-6); }
.flash:empty { display: none; }
.flash .box + .box { margin-top: var(--s-4); }
.legal .flash { margin-bottom: var(--s-8); }

.form:not([hidden]) { display: grid; gap: var(--s-6); }

/* Abschnitte "Kontaktdaten", "Event", "Nachricht" */
.form__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.form__group + .form__group { padding-top: var(--s-4); }

.form__legend {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  margin-bottom: var(--s-5);
  padding: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.form__legend::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-color);
}

/* Sechs Spalten: ganze, halbe und Drittel-Zeilen. */
.form__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
}

.form__grid > .field--full { grid-column: span 6; }
.form__grid > .field--half { grid-column: span 3; }
.form__grid > .field--third { grid-column: span 2; }

/* Schmale Karte (Telefon, Tablet hochkant): halbe Felder ueber die ganze
   Breite, Beginn und Ende bleiben nebeneinander. */
@container (max-width: 459px) {
  .form__grid > .field--half,
  .form__grid > .field--grow { grid-column: span 6; }
  .form__grid > .field--third:not(.field--grow) { grid-column: span 3; }
}

/* Breite Karte (Desktop): Kontakt und Event nebeneinander, die Nachricht
   darunter, Haekchen und Knopf in einer Zeile - ein Rechteck statt einer
   langen Spalte. */
@container (min-width: 860px) {
  .form:not([hidden]) {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-12);
  }
  .form > * { grid-column: 1 / -1; }
  .form > .form__group--side { grid-column: auto; }
  .form__group--side + .form__group--side { padding-top: 0; }
  .form > .form__privacy { grid-column: 1; align-self: center; }
  .form > .form__actions {
    grid-column: 2;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: var(--s-6);
  }
  .form__actions .form__note { text-align: right; }
}
.form__actions { display: grid; gap: var(--s-4); }
.form__actions .btn { width: 100%; }
.form__note { margin: 0; color: var(--text-3); font-size: var(--fs-meta); }

@media (min-width: 768px) {
  .form-card { padding-top: var(--s-10); }
  .form__actions { grid-template-columns: auto 1fr; align-items: center; }
  .form__actions .btn { width: auto; }
}

/* Ab Desktop: Text und Kontaktwege als flacher Streifen, darunter das
   Formular ueber die volle Breite. */
@media (min-width: 1024px) {
  .inquiry__grid { align-items: start; }
  .inquiry__text {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-lg);
    align-items: start;
  }
  .inquiry__text .intro { grid-column: 1 / 6; margin: 0; }
  .inquiry__text .box--hint { grid-column: 1 / 6; margin-top: var(--s-6); }
  .inquiry__text .ways {
    grid-column: 7 / 13;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-8);
    margin-top: 0;
  }
  .inquiry__text .ways li:nth-last-child(-n + 2) { border-bottom: var(--line); }
  .inquiry__text .ways li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
  }
  .inquiry__form { grid-column: 1 / -1; }
  .form-card { margin-top: var(--s-4); }
}

/* ===================================================== 6.11 Rechtsseiten */

.legal {
  padding-block: calc(var(--nav-h) + var(--section-y)) var(--section-y);
  background: var(--ink-000);
}

.legal__body { max-width: var(--measure); }
.legal__body h1 { font-size: var(--fs-h2); line-height: 1.1; }

/* Design-System 6.11: "H1 in H2-Groesse, H2 in H3-Groesse" - ohne die
   zweite Haelfte standen beide auf 77 px und die Seite hatte keine
   Hierarchie mehr. */
.legal__body h2 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.legal__section { margin-top: var(--s-12); }
.legal__section h2 { margin-bottom: var(--s-4); }
.legal__section p { color: var(--text-2); }
.legal__section p + p { margin-top: var(--s-4); }

.legal__lines {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.legal__lines li { display: flex; gap: var(--s-4); color: var(--text-2); }

.legal__lines li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  margin-top: 14px;
  background: var(--accent-500);
}