/* ==========================================================================
   Hirten- und Engelsmarkt im Rhyfall Village
   Landingpage Standanbieter — Stylesheet
   ========================================================================== */

@font-face {
  font-family: 'Rivi-Regular';
  src: url('../fonts/RiviBoo.woff2') format('woff2'),
       url('../fonts/RiviBoo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rivi-Heavy';
  src: url('../fonts/RiviBooHea.woff2') format('woff2'),
       url('../fonts/RiviBooHea.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farbwelt */
  --nacht:      #070E24;
  --nacht-2:    #0B1330;
  --nacht-3:    #0E1839;
  --waldgruen:  #0B1330;
  --gold:       #D9AE5F;
  --gold-hell:  #D9AE5F;
  --creme:      #F6F1E7;
  --creme-warm: #EFE7D8;
  --grau:       #97A2B8;
  --linie:      rgba(217, 174, 95, .22);
  --linie-soft: rgba(246, 241, 231, .12);

  /* Typografie */
  --bold: 'Rivi-Heavy';
  --sans:  'Rivi-Regular';

  /* Schriftgrössen — die gesamte Seite nutzt ausschliesslich diese vier Stufen.
     s: Labels, Eyebrows, Meta, Footer · m: Buttons, Kartentext · l: Fliesstext · xl: Überschriften */
  --fs-s: 14px;
  --fs-m: 18px;
  --fs-l: 22px;
  --fs-xl: 42px;

  /* Raster */
  --max:  1180px;
  --pad:  clamp(1.25rem, 5vw, 3rem);
  --sect: clamp(4.5rem, 10vw, 8rem);
}

/* Unterhalb Tablet (< 768px) eine Stufe kleiner und mit weniger Kontrast
   zwischen Fliesstext und Überschrift — 42px sind auf dem Handy zu wuchtig. */
@media (max-width: 767px) {
  :root {
    --fs-s:  14px;
    --fs-m:  16px;
    --fs-l:  16px;
    --fs-xl: 24px;
  }
}

/* --------------------------------------------------------- Reset / Basis */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--creme);
  font-family: var(--sans);
  font-size: var(--fs-l);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h2, h3 {
  font-family: var(--bold);
  font-size: var(--fs-xl);
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-hell); text-decoration-color: rgba(243, 220, 166, .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold-hell); }

::selection { background: var(--gold); color: var(--nacht); }

/* --------------------------------------------------------- Hilfsklassen */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--sect); position: relative; }

/* Wiederkehrender Sektionskopf: Übertitel, Titel, Text — immer zentriert.
   Genutzt von Intro, Standarten, FAQ und Anmeldung. */
.sectionhead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.eyebrow {
  font-size: var(--fs-s);
  text-transform: uppercase;
  color: var(--gold);
  letter-spacing: 2px;
  margin: 0 0 1.25rem;
}

.lead { color: var(--creme-warm);}

/* --------------------------------------------------------- Button */

.btn {
  font-size: var(--fs-m);
  font-family: var(--bold);
  display: inline-flex;
  align-items: center;
  padding: .95rem 2.2rem;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--nacht);
  text-decoration: none;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(217, 174, 95, .7);
}
.btn:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

/* --------------------------------------------------------- Sternenhimmel */

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px   1px   at 28% 62%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.6px 1.6px at 45% 24%, rgba(243,220,166,.75), transparent),
    radial-gradient(1px   1px   at 63% 71%, rgba(255,255,255,.5),  transparent),
    radial-gradient(1.3px 1.3px at 78% 33%, rgba(255,255,255,.7),  transparent),
    radial-gradient(1px   1px   at 88% 58%, rgba(243,220,166,.55), transparent),
    radial-gradient(1.1px 1.1px at 7%  81%, rgba(255,255,255,.5),  transparent),
    radial-gradient(1.5px 1.5px at 55% 89%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1px   1px   at 36% 8%,  rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 94% 12%, rgba(255,255,255,.6),  transparent);
}

/* Lichtpunkte (particles.js) — liegen als Overlay über der Seite */
#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ==========================================================================
   1 — HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/hero-bg.jpg") center 38% / cover no-repeat;
  transform: scale(1.04);
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 85% at 50% 30%, rgba(7,14,36,.10) 0%, rgba(7,14,36,.62) 55%, rgba(7,14,36,.94) 100%),
    linear-gradient(180deg, rgba(7,14,36,.72) 0%, rgba(7,14,36,.18) 30%, rgba(7,14,36,.86) 88%, var(--nacht) 100%);
}

.hero__inner { max-width: 780px; }


.hero__logo {
  width: min(420px, 78vw);
  margin: 0 auto 1.5rem;
}

@media (max-width: 767px) {
  .hero__logo { width: 50vw;}
  .hero__inner { padding: 24px }
}

/* Auf kurzen Handy-Viewports (iPhone SE & Co.) rutscht der mittig gesetzte
   Hero-Inhalt so weit nach oben, dass er den Medienpartner-Block oben rechts
   berührt. Etwas Luft nach oben schiebt ihn wieder darunter. */
@media (max-width: 767px) and (max-height: 780px) {
  .hero__inner { padding-top: 96px; }
}

/* Medienpartner oben rechts im Hero.
   Beide Logos sind weisse SVGs; die Höhen sind so gewählt, dass die
   Wortmarke (Bock) und das runde Signet (Radio TOP) optisch gleich
   gewichtet erscheinen und etwa gleich breit laufen. */
.partners {
  position: absolute;
  top: clamp(1rem, 3vw, 2.25rem);
  right: var(--pad);
  z-index: 2;
  text-align: right;
}

.partners__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(246, 241, 231, .6);
  margin: 0 0 .7rem;
}

.partners__logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
}

.partners__link {
  display: block;
  opacity: .85;
  transition: opacity .2s ease;
}
.partners__link:hover,
.partners__link:focus-visible { opacity: 1; }
.partners__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.partners__logo { width: auto; }
.partners__logo--top  { height: 44px; }
.partners__logo--bock { height: 24px; }

@media (max-width: 767px) {
  /* Label bleibt sichtbar, muss aber neben die schmaleren Logos passen:
     eine Spur kleiner und enger gesperrt, damit "Medienpartner" nicht umbricht. */
  .partners__label { font-size: 10px; letter-spacing: .8px; margin-bottom: .5rem; }
  .partners__logo--top  { height: 32px; }
  .partners__logo--bock { height: 17px; }
}

.hero__meta {
  font-size: var(--fs-s);
  text-transform: uppercase;
  color: var(--gold-hell);
  margin: 0 0 1.75rem;
}

.hero__claim {
  font-family: var(--bold);
  font-size: var(--fs-xl);
  line-height: 1.1;
  margin: 0 0 1rem;
}

.hero__sub {
  color: var(--creme-warm);
  margin: 0 auto 2.4rem;
  max-width: 34em;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

@media (max-width: 700px) { .hero__scroll { display: none; } }

/* --------------------------------------------------------- 1b Eckdaten */

.facts {
  background: var(--nacht-2);
  border-block: 1px solid var(--linie-soft);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linie-soft);
}
.facts__item {
  background: var(--nacht-2);
  padding: 2rem 1.5rem;
  text-align: center;
}
.facts__value {
  font-family: var(--bold);
  color: var(--gold-hell);
  margin: 0 0 .3rem;
  line-height: 1.2;
}
.facts__label {
  font-size: var(--fs-s);
  text-transform: uppercase;
  margin: 0;
}
/* Entweder drei nebeneinander oder alle untereinander – nie 2 + 1.
   Die breiteste Kachel braucht 239px, drei davon also 719px Seitenbreite;
   760px lässt etwas Luft für abweichende Font-Metriken. */
@media (max-width: 760px) {
  .facts__grid { grid-template-columns: 1fr; }
  /* Sechs Kacheln untereinander würden sonst einen halben Bildschirm füllen. */
  .facts__item { padding: 1.4rem 1.25rem; }
}

/* ==========================================================================
   2 — INTRO
   ========================================================================== */

.intro { background: var(--nacht); }

/* ==========================================================================
   3 — STANDARTEN
   ========================================================================== */

.kinds { background: var(--nacht-3); overflow: hidden; }
.kinds > .wrap { position: relative; z-index: 1; }

.cards {
  font-size: var(--fs-m);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.cards h3 {font-size: var(--fs-l);}
@media (max-width: 780px) { .cards { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}
.card:hover { transform: translateY(-3px); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s;
}
.card:hover .card__media img { transform: scale(1.045); }


.card__body { padding: 1.6rem 0 1.75rem; }
.card__body h3 { margin-bottom: .55rem; }

/* ==========================================================================
   4 — FAQ
   ========================================================================== */

.faq { background: var(--waldgruen); }

.faq__block { margin-bottom: 2.75rem; }
.faq__block:last-of-type { margin-bottom: 0; }

.qa { border-bottom: 1px solid rgba(246, 241, 231, .09); }
.qa > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  color: var(--creme);
  transition: color .2s ease;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--gold-hell); }
.qa > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.qa > summary::after {
  content: "";
  position: absolute;
  right: .35rem; top: 1.55rem;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.qa[open] > summary::after { transform: rotate(-135deg); top: 1.75rem; }

.qa__answer {
  padding: 0 2.5rem 1.4rem 0;
  max-width: 62ch;
}
.qa__answer ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.qa__answer li { margin-bottom: .35rem; }

/* ==========================================================================
   5 — KONTAKT
   ========================================================================== */

.contact { background: var(--nacht); }
/* Inhalt unter dem Sektionskopf — gleiche Breite, ebenfalls zentriert */
.contact__body { max-width: 640px; margin-inline: auto; text-align: center; }

.person { margin-top: 2.25rem; }
.person__name { font-family: var(--bold); color: var(--creme); margin: 0 0 .1rem; }
.person__role { font-size: var(--fs-l); margin: 0 0 1rem; }
.person__links { display: grid; gap: .45rem; }
.person__links a { text-decoration: none; }
.person__links a:hover { text-decoration: underline; }

/* ==========================================================================
   6 — SPONSOREN
   ========================================================================== */

.sponsors { background: var(--nacht-2); overflow: hidden; }
.sponsors > .wrap { position: relative; z-index: 1; }

/* Festes Spaltenraster: 4 Spalten Desktop, 3 Tablet, 2 Mobile.
   Jedes Logo sitzt zentriert in seiner Spalte; eine unvollständige letzte
   Zeile wird mittig ausgerichtet — egal, wie viele Sponsoren dazukommen. */
.sponsors__logos {
  --cols: 4;
  --gap-x: clamp(2rem, 5vw, 3.5rem);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(2.25rem, 4vw, 3.25rem) var(--gap-x);
}
.sponsors__logos > li {
  /* −1px verhindert, dass Rundungsfehler die letzte Spalte umbrechen lassen */
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols) - 1px);
  display: flex;
  justify-content: center;
}
@media (max-width: 1023px) { .sponsors__logos { --cols: 3; } }
@media (max-width: 767px)  { .sponsors__logos { --cols: 2; --gap-x: 1.5rem; } }

/* Alle Logos sind weisse SVGs mit sehr unterschiedlichen Seitenverhältnissen.
   Damit sie optisch gleich gross wirken, wird nicht die Höhe, sondern die
   Fläche angeglichen: Höhe ≈ 88px / √(Breite / Höhe). Hochformatige Logos
   werden gedeckelt, sehr fette oder sehr feine nach Augenmass korrigiert. */
.sponsors { --logo-k: 1; }
@media (max-width: 767px) { .sponsors { --logo-k: .7; } }

.sponsors__logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  height: calc(48px * var(--logo-k));
  opacity: .9;
}
.sponsors__logo--arc         { height: calc(62px * var(--logo-k)); } /* 1.8 : 1, Signet über Wortmarke */
.sponsors__logo--bluemont    { height: calc(45px * var(--logo-k)); } /* 3.9 : 1 */
.sponsors__logo--denner      { height: calc(34px * var(--logo-k)); } /* 4.7 : 1, volle Fläche → kleiner */
.sponsors__logo--kiosk       { height: calc(36px * var(--logo-k)); } /* 4.6 : 1, sehr fett → kleiner */
.sponsors__logo--lejla       { height: calc(39px * var(--logo-k)); } /* 5.8 : 1 */
.sponsors__logo--meetin      { height: calc(36px * var(--logo-k)); } /* 6.1 : 1 */
.sponsors__logo--meister     { height: calc(51px * var(--logo-k)); } /* 3.0 : 1 */
.sponsors__logo--moretti     { height: calc(46px * var(--logo-k)); } /* 3.7 : 1 */
.sponsors__logo--mueller     { height: calc(45px * var(--logo-k)); } /* 3.6 : 1 */
.sponsors__logo--pantli      { height: calc(88px * var(--logo-k)); } /* 0.9 : 1, hochformatig → gedeckelt */
.sponsors__logo--remondis    { height: calc(43px * var(--logo-k)); } /* 3.2 : 1, schwere Fläche → kleiner */
.sponsors__logo--rivi        { height: calc(51px * var(--logo-k)); } /* 3.0 : 1 */
.sponsors__logo--rueger      { height: calc(60px * var(--logo-k)); } /* 2.4 : 1, feine Bögen → grösser */
.sponsors__logo--smilestones { height: calc(40px * var(--logo-k)); } /* 4.9 : 1 */
.sponsors__logo--strabag     { height: calc(42px * var(--logo-k)); } /* 3.6 : 1, sehr fett → kleiner */
.sponsors__logo--sweet       { height: calc(90px * var(--logo-k)); } /* 0.7 : 1, hochformatig → gedeckelt */
.sponsors__logo--tsomos      { height: calc(56px * var(--logo-k)); } /* 2.7 : 1 */
.sponsors__logo--vaca        { height: calc(47px * var(--logo-k)); } /* 3.5 : 1 */

/* ==========================================================================
   7 — OUTRO
   ========================================================================== */

.outro {
  position: relative;
  min-height: 88svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sect) var(--pad);
  overflow: hidden;
  isolation: isolate;
}
.outro__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../img/outro.jpg") center 45% / cover no-repeat;
}
.outro__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 55%, rgba(7,14,36,.35) 0%, rgba(7,14,36,.82) 70%, rgba(7,14,36,.97) 100%),
    linear-gradient(180deg, var(--nacht) 0%, rgba(7,14,36,.35) 22%, rgba(7,14,36,.55) 60%, var(--nacht) 100%);
}
.outro__inner { max-width: 760px; }
.outro h2 {
  color: var(--gold-hell);
  margin-bottom: .5em;
}
.outro p {
  color: var(--creme-warm);
  max-width: 40em;
  margin-inline: auto;
  margin-bottom: 2.4rem;
}

/* ==========================================================================
   8 — FOOTER
   ========================================================================== */

.footer {
  background: var(--nacht);
  border-top: 1px solid var(--linie-soft);
  padding: 3.5rem var(--pad) 2.5rem;
  font-size: var(--fs-m);
}
.footer__grid {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

.footer h3 {
  font-family: var(--sans);
  font-size: var(--fs-s);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }

.footer__partners {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.footer__partners a { opacity: .8; transition: opacity .2s ease; }
.footer__partners a:hover,
.footer__partners a:focus-visible { opacity: 1; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--gold-hell); }

.footer__bottom {
  max-width: var(--max);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie-soft);
  color: rgba(151, 162, 184, .75);
}

/* ==========================================================================
   Animation
   ========================================================================== */

/* Nur mit aktivem JavaScript ausblenden – sonst wäre die Seite ohne JS leer. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover,
  .card:hover .card__media img,
  .btn:hover { transform: none; }
}

/* Druck */
@media print {
  /* Die Partnerlogos sind weisse SVGs und waeren auf weissem Papier unsichtbar. */
  .hero__scroll, .btn, #particles-js,
  .partners, .footer__partners, .sponsors { display: none !important; }
  body { background: #fff; color: #111; }
  .qa { break-inside: avoid; }
  .qa > summary { color: #111; }
  .qa__answer { color: #333; }
}