/* ============================================================================
   LSB Summit 2026 — Stylesheet
   © 2026 Elena Scherschneva e.U. · Kennung: esc-lsb-2026-7f3a9c
   Aufbau: Fonts · Normalisierung · Grundgerüst · Bausteine · Sektionen
   Design-Werte stehen in tokens.css.
   ========================================================================= */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-normal-latin-300-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-normal-latin-ext-300-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-italic-latin-300-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-italic-latin-ext-300-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/dm-sans-normal-latin-100-1000.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/dm-sans-normal-latin-ext-100-1000.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/dm-sans-italic-latin-100-1000.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/dm-sans-italic-latin-ext-100-1000.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Normalisierung ------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--green-700);
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: 300;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sichtbar nur für Screenreader, bis er per Tastatur fokussiert wird */
.skip-link {
  position: absolute;
  left: var(--container-pad);
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--gold-500);
  color: var(--text-on-gold);
  font-size: var(--size-sm);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transform: translateY(-110%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Grundgerüst ---------------------------------------------------------- */

.section {
  position: relative;
  background-color: var(--cream-50);
}

.section--dark {
  background-color: var(--green-800);
}

.section--alt {
  background-color: var(--cream-100);
}

.section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad) var(--container-pad);
  text-align: center;
}

/* --- Wiederkehrende Bausteine --------------------------------------------- */

.eyebrow {
  color: var(--text-eyebrow-light);
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.section--dark .eyebrow {
  color: var(--text-eyebrow-dark);
}

/* Lange deutsche Zusammensetzungen — „Aufzeichnungspaket" ist bei 40px schon
   326px breit — passen auf sehr schmale Geräte in keine Zeile. Ohne diese Regel
   schiebt die Überschrift über den Bildschirmrand. Greift nur dort, wo ein Wort
   tatsächlich nicht passt; bestehende Umbrüche bleiben unangetastet. */
h1,
h2,
h3 {
  /* Als Flex-Element wird eine Überschrift von ihrem längsten Wort breit
     gehalten — ohne max-width bricht sie deshalb nicht um, sondern schiebt
     über den Rand. Beides zusammen ist nötig. */
  max-width: 100%;
  overflow-wrap: break-word;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: 300;
  line-height: var(--leading-normal);
  color: var(--green-700);
}

.section--dark .section-title {
  color: var(--white);
}

/* Der zweite Halbsatz jeder Überschrift steht im Original kursiv in Gold */
.section-title em {
  color: var(--gold-500);
  font-style: italic;
}

.section--dark .section-title em {
  color: var(--gold-300);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: var(--space-3) 54px;
  font-family: var(--font-body);
  font-size: var(--size-lg);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), box-shadow var(--transition),
    color var(--transition);
}

.btn--primary {
  background-color: var(--gold-500);
  color: var(--text-on-gold);
}

.btn--primary:hover {
  background-color: var(--gold-300);
  box-shadow: var(--shadow-glow);
}

.btn--sm {
  padding: 14px 24px;
  font-size: var(--size-base);
}

/* Wellenförmiger Übergang zwischen zwei Sektionen.
   Im Original ein Inline-SVG mit viewBox 0 0 1440 320, Höhe 20 % der Sektion. */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 20%;
  color: var(--green-800);
  pointer-events: none;
}

.wave--top {
  top: 0;
  transform: scaleY(-1);
}

.wave--bottom {
  bottom: 0;
}

/* --- Sektion 0: Header ---------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--cream-50);
  border-bottom: 1px solid var(--gold-100);
  transition: transform var(--transition);
}

.site-header[data-hidden="true"] {
  transform: translateY(-100%);
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-2) var(--container-pad);
}

.site-header__logo img {
  height: 75px;
  width: auto;
}

@media (min-width: 1120px) {
  .site-header__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --- Sektion 1: Hero ------------------------------------------------------ */

.hero__inner {
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}

.hero .eyebrow {
  color: var(--text-hero-eyebrow);
}

.hero__badge {
  width: 100%;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  color: var(--text-eyebrow-dark);
  font-size: var(--size-base);
  font-weight: 500;
  /* Im Original durchgehend 0.3em — auf schmalen Viewports zerfällt der Text
     dadurch in fünf Zeilen. Siehe README, Punkt „Datums-Badge". */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 1.2;
  /* Der Verlauf ersetzt die Textfarbe. Das Original deklariert zusätzlich
     `animation: shimmer` — die Keyframes fehlen dort, die Animation läuft
     also auch im Original nicht. Siehe README. */
  background: linear-gradient(
    135deg,
    var(--gold-100) 0%,
    var(--gold-300) 25%,
    var(--gold-500) 50%,
    var(--gold-300) 75%,
    var(--gold-100) 100%
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero__subtitle {
  color: var(--green-300);
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-style: italic;
  font-weight: 500;
}

/* Im Original stehen die vier Kennzahlen unterhalb von 1120px untereinander,
   der Hero wird dadurch auf dem Handy 1776px hoch. Siehe README. */
.hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--column-gap);
  width: 100%;
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.stat__value {
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--size-4xl);
  line-height: var(--leading-normal);
}

.stat__label {
  color: var(--text-muted-dark);
  letter-spacing: var(--tracking-loose);
}

.hero__cta {
  margin-top: var(--space-7);
  margin-bottom: -10px;
}

.hero__note {
  color: var(--text-muted-dark);
  letter-spacing: var(--tracking-loose);
}

@media (min-width: 768px) {
  /* Das Original springt erst ab 768px direkt auf 7rem, wodurch die Zeile
     auf Tablets bis an den Rand stößt. Siehe README, Punkt „H1 auf Tablet". */
  .hero__title {
    font-size: 4.75rem;
  }

  .hero__badge {
    letter-spacing: var(--tracking-eyebrow);
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 5.75rem;
  }
}

@media (min-width: 1120px) {
  .hero__title {
    font-size: var(--size-5xl);
  }

  .hero__badge {
    width: 50%;
  }

  .hero__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Sektion 2: Über den Summit ------------------------------------------- */

.about__inner {
  padding-top: var(--space-11);
  padding-bottom: var(--space-9);
  gap: var(--space-4);
}

.about__intro,
.about__text {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.about__intro {
  gap: var(--space-2);
}

.about__text {
  /* Abstand = eine Zeilenhöhe, wie die <br><br> im Original */
  gap: calc(var(--size-md) * var(--leading-normal));
  font-size: var(--size-md);
  letter-spacing: var(--tracking-loose);
}

@media (min-width: 1024px) {
  .about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--column-gap);
    align-items: start;
  }
}

/* --- Sektion 3: Programm -------------------------------------------------- */

.pillars__grid {
  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
  width: 100%;
  margin-top: var(--space-2);
  list-style: none;
}

.pillar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  /* feine Goldkante über der Karte, im Original ein box-shadow */
  box-shadow: 0 -3px 1px 0 var(--gold-500);
  background-color: var(--cream-50);
  font-size: var(--size-md);
  letter-spacing: var(--tracking-loose);
  text-align: left;
}

/* Die Ziffern wiederholen nur die sichtbare Reihenfolge der drei Karten und
   sind als dekorativ ausgezeichnet. Im Original stehen sie auf 1.22:1 und
   sind dadurch praktisch unsichtbar — hier eine Stufe dunkler, bleibt aber
   ein Wasserzeichen. Siehe README. */
.pillar__num {
  margin-top: -20px;
  margin-bottom: -15px;
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--size-4xl);
  font-weight: 500;
  line-height: var(--leading-normal);
}

.card-title {
  color: var(--green-700);
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 600;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-base);
}

@media (min-width: 1120px) {
  .pillars__grid {
    flex-direction: row;
  }
}

/* --- Sektion 4: Line-up --------------------------------------------------- */

.talk {
  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
  width: 100%;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  background-color: var(--cream-100);
  overflow: hidden;
  text-align: left;
}

.talk__portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-8);
  text-align: center;
}

/* Im Original füllen die Porträts unterhalb von 1120px die ganze Spalte —
   auf einem 768px-Tablet sind das 686px, ein Kopf über den halben Bildschirm.
   Siehe README, „Bewusste Änderungen". */
.talk__portrait img {
  width: 100%;
  max-width: min(62%, 360px);
  margin-inline: auto;
}

@media (min-width: 1120px) {
  .talk__portrait img {
    max-width: none;
  }
}

.talk__credit {
  margin-top: var(--space-2);
  color: var(--text-muted-light);
  font-size: var(--size-xs);
}

.talk__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background-color: var(--white);
}

.talk__time {
  color: var(--text-eyebrow-light);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.talk__title {
  color: var(--green-700);
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 600;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-base);
}

.talk__speaker {
  color: var(--green-500);
  font-size: var(--size-sm);
  font-weight: 500;
  line-height: var(--leading-normal);
}

.talk__link {
  text-decoration-color: var(--gold-500);
  text-underline-offset: 3px;
}

.talk__link:hover {
  color: var(--text-eyebrow-light);
}

.talk__bio,
.talk__abstract {
  color: var(--text-muted-light);
}

.talk__bio strong {
  font-weight: 700;
}

.talk__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--gold-100);
}

/* Karten mit mehreren Sprecher:innen: Kopf oben über die volle Breite,
   darunter die Porträts nebeneinander, darunter der Text. */
.talk--panel {
  gap: 0;
  padding: var(--space-2);
}

.talk__head {
  display: flex;
  flex-direction: column;
}

.talk__speaker--panel {
  font-size: 1.0625rem;
}

/* Porträtreihe der Karten mit mehreren Sprecher:innen. Die Bilder überlappen
   leicht — das zeigt, dass die Personen zusammen auftreten. Die Breiten sind so
   gerechnet, dass die Reihe mit Überlappung genau in die verfügbare Breite
   passt: n × Breite − (n−1) × Überlappung = 100%. */
.talk__portraits {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-2) var(--space-2) var(--space-8);
}

.talk__portraits img {
  position: relative;
  /* min-width: 0 ist nötig — Flex-Elemente dürfen sonst nicht unter ihre
     Eigengröße schrumpfen, und die Bilddateien sind 1080px breit. */
  flex: none;
  min-width: 0;
  width: 58%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

.talk__portraits img + img {
  margin-left: -16%;
}

.talk__portraits--three img {
  width: 44%;
}

/* Die vorderste Person liegt oben, die weiteren gestaffelt dahinter */
.talk__portraits img:nth-child(1) { z-index: 3; }
.talk__portraits img:nth-child(2) { z-index: 2; }
.talk__portraits img:nth-child(3) { z-index: 1; }

@media (min-width: 1120px) {
  /* Ab hier haben die Porträts genau die Größe der Einzelkarten-Porträts,
     damit die Sektion ein einheitliches Bild ergibt. Der Wert ist aus den
     Tokens abgeleitet: Karteninnenraum × 30% − halber Spaltenabstand −
     beidseitiger Innenabstand. */
  .talk__portraits {
    --portraet: calc(
      (var(--container) - 2 * var(--container-pad) - 2px) * 0.3
      - var(--column-gap) / 2 - 2 * var(--space-2)
    );
  }

  .talk__portraits img,
  .talk__portraits--three img {
    width: var(--portraet);
  }

  .talk__portraits img + img {
    margin-left: calc(var(--portraet) * -0.28);
  }
}

.interlude {
  width: 100%;
  /* Die Banner gliedern den Tag, sie sind keine Karten — im Original liegt
     dazwischen derselbe Abstand wie zwischen zwei Vorträgen. */
  margin-block: var(--space-2);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  background-color: var(--cream-100);
  color: var(--green-500);
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: 300;
  line-height: var(--leading-normal);
  text-align: center;
}

@media (min-width: 1120px) {
  .talk:not(.talk--panel) {
    flex-direction: row;
  }

  .talk:not(.talk--panel) .talk__portrait {
    flex: 0 0 calc(30% - var(--column-gap) / 2);
  }

  .talk:not(.talk--panel) .talk__body {
    flex: 1;
  }

}

/* --- Sektion 5: Teilnahme & Ablauf ---------------------------------------- */

.facts__grid {
  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
  width: 100%;
}

.fact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  background-color: var(--white);
  text-align: left;
}

.fact__list {
  padding-inline-start: var(--space-2);
  list-style-position: outside;
}

.fact__list li {
  padding-inline-start: var(--space-1);
}

.fact__list li::marker {
  color: var(--gold-100);
}

.fact__list li:not(:last-child) {
  margin-bottom: var(--space-1);
}

/* Die Karte ist der Verkaufsmoment der Seite. Im Original hat sie denselben
   Grundton wie die Sektion und einen blassen Umriss-Button — sie verschwindet
   dadurch. Hier ist sie dunkel abgesetzt wie Hero und Anmeldung.
   Siehe README, „Bewusste Änderungen". */
.recording {
  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
  width: 100%;
  border: 1px solid var(--green-800);
  border-radius: var(--radius-lg);
  background-color: var(--green-800);
  text-align: left;
}

.recording .eyebrow {
  color: var(--text-eyebrow-dark);
}

.recording .card-title {
  color: var(--white);
}

.recording__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  color: var(--green-200);
  font-size: var(--size-md);
  letter-spacing: var(--tracking-loose);
}

.recording__offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-8);
  text-align: center;
}

.recording__price {
  margin-bottom: -10px;
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--size-4xl);
  line-height: var(--leading-normal);
}

.recording__terms {
  color: var(--text-muted-dark);
  letter-spacing: var(--tracking-loose);
}

.recording__cta {
  margin-top: var(--space-7);
  margin-bottom: -10px;
}

@media (min-width: 1120px) {
  .facts__grid {
    flex-direction: row;
  }

  .recording {
    flex-direction: row;
  }

  .recording__text {
    flex: 0 0 calc(60% - var(--column-gap) / 2);
  }

  .recording__offer {
    flex: 1;
  }
}

/* --- Sektion 6: Stimmen aus 2025 ------------------------------------------ */

.voices__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--column-gap);
  row-gap: var(--space-6);
  width: 100%;
  list-style: none;
}

.voices__grid img {
  width: 100%;
}

@media (min-width: 1024px) {
  .voices__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Sektion 7: FAQ ------------------------------------------------------- */

.faq .section__inner {
  gap: var(--space-4);
  padding-top: var(--space-9);
  padding-bottom: 140px;
}

.faq__list {
  width: 100%;
  text-align: left;
}

.faq__item {
  border-bottom: 1px solid var(--gold-100);
}

.faq__item:last-child {
  border-bottom: 0;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 16px;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* Das +/− des Originals; im Nachbau reines CSS auf nativem <details> */
.faq__question::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--gold-500), var(--gold-500)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--gold-500), var(--gold-500)) center / 1.5px 12px no-repeat;
  transition: transform var(--transition);
}

.faq__item[open] .faq__question::after {
  background: linear-gradient(var(--gold-500), var(--gold-500)) center / 12px 1.5px no-repeat;
}

.faq__label {
  color: var(--green-800);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
}

.faq__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 16px var(--space-6);
  color: var(--green-500);
}

/* --- Sektion 8: Anmeldung ------------------------------------------------- */

.signup__inner {
  gap: var(--space-4);
  /* Das Original setzt hier padding-bottom: 0 — mit dem viel höheren
     Cookie-Platzhalter fiel das nicht auf. Der Klick-zum-Laden-Platzhalter
     stieße sonst direkt an die Trennlinie zum Footer. */
  padding-bottom: var(--section-pad);
}

.signup__details {
  color: var(--green-200);
}

.signup__lead {
  color: var(--green-300);
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-style: italic;
  font-weight: 500;
}

.embed {
  width: 100%;
  max-width: 800px;
}

.embed__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Der Button trägt beim Überfahren einen 90px weichen Schein. Bei 20px
     Abstand ragte der in den Text darüber und darunter. */
  gap: var(--space-7);
  padding: var(--space-6) var(--space-2);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  background-color: var(--green-900);
}

.embed__text {
  max-width: 46ch;
  color: var(--green-200);
}

.embed__text strong {
  color: var(--gold-300);
  font-weight: 500;
}

.embed__note {
  color: var(--text-muted-dark);
  font-size: var(--size-sm);
}

.embed__note a {
  text-underline-offset: 3px;
}

.embed__frame {
  display: block;
  width: 100%;
  max-width: 800px;
  height: 680px;
  margin-inline: auto;
  border: 0;
}

/* --- Sektion 9: Footer ---------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--gold-100);
  background-color: var(--green-900);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-7) var(--container-pad) var(--space-2);
  text-align: center;
}

.site-footer__logo {
  height: 70px;
  width: auto;
}

.site-footer__initiative {
  margin-top: var(--space-2);
  color: var(--green-200);
  font-size: var(--size-sm);
}

/* Im Original sind diese Links pink (#ff2f65) — Breakdance' Standard-
   Markenfarbe. Siehe README, Punkt „Pinke Footer-Links". */
.site-footer__initiative a {
  color: var(--text-footer-link);
  text-underline-offset: 3px;
}

/* Das Original stapelt hier drei Sektionen mit eigenen Abständen; im Nachbau
   ist es ein footer mit entsprechend gesetzten Abständen. */
.site-footer__nav {
  margin-top: var(--space-6);
}

.site-footer__legal {
  margin-top: var(--space-7);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

.site-footer__nav a {
  display: inline-block;
  padding: var(--space-1);
  color: var(--white);
  font-size: var(--size-2xs);
  font-weight: 500;
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__legal {
  color: var(--green-100);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
}

.site-footer__copyright {
  margin-top: var(--space-7);
  color: var(--text-muted-dark);
  font-size: var(--size-2xs);
  line-height: var(--leading-normal);
}


/* ============================================================================
   Seite „Aufzeichnungspaket" — alles Übrige erbt von den Bausteinen oben
   ========================================================================= */

.site-header__back {
  font-weight: 300;
  text-decoration: none;
  text-underline-offset: 4px;
}

.site-header__back:hover {
  text-decoration: underline;
}

/* Preisangabe im Hero: Betrag und Streichpreis auf einer Grundlinie */
.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

.price__amount {
  color: var(--text-price);
  font-family: var(--font-display);
  font-size: var(--size-4xl);
  line-height: var(--leading-normal);
}

.price__was {
  color: var(--green-200);
  font-size: var(--size-md);
  letter-spacing: var(--tracking-loose);
}

.price__hint {
  margin-top: -40px;
  color: var(--text-muted-dark);
  letter-spacing: var(--tracking-loose);
}

/* Goodie-Pack: eine breite Karte statt drei schmaler */
.bonus__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-6) var(--space-2);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  box-shadow: 0 -3px 1px 0 var(--gold-500);
  background-color: var(--cream-100);
  font-size: var(--size-md);
  letter-spacing: var(--tracking-loose);
}

.bonus__title {
  color: var(--green-700);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: var(--leading-normal);
}

.bonus__title em {
  color: var(--text-eyebrow-light);
  font-style: italic;
}

.bonus__value {
  color: var(--text-eyebrow-light);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: var(--leading-normal);
}

.bonus__note {
  color: var(--text-muted-light);
}

.embed--cart {
  max-width: 80%;
}

/* ============================================================================
   Seite „Anmeldebestätigung"
   ========================================================================= */

.confirm__inner {
  padding-top: var(--space-12);
}

.confirm__rule {
  width: 100px;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 2px solid var(--gold-500);
}

.confirm__lead {
  font-size: var(--size-md);
  letter-spacing: var(--tracking-loose);
}

/* Hinweiskasten „Keine Mail erhalten?" */
.notice {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  background-color: var(--cream-100);
  color: var(--green-500);
  text-align: left;
}

.notice strong {
  font-weight: 700;
}

/* Im Original ist dieser Link pink (#FF2F65) — dieselbe Breakdance-
   Standardfarbe wie die Footer-Links. Siehe README. */
.notice a {
  color: var(--text-eyebrow-light);
  text-underline-offset: 3px;
}

/* Trennzeichen der Fallback-Schreibweise, sobald mail.js gelaufen ist */
/* E-Mail-Adresse fuer den Fall ohne JavaScript.

   scripts/mail.js setzt die Adressen im Browser zusammen, im Quelltext steht
   dann keine. Ohne JavaScript bliebe die Stelle leer, deshalb steht daneben
   ein <noscript> mit der Adresse rueckwaerts, und diese Regel dreht die
   Anzeige zurueck. Fuer das Auge steht sie richtig da, im Rohtext ergibt sie
   kein Adressmuster: Der Punkt steht dort vor dem @.

   Loest `.mail__at` ab. Das machte die Adresse sichtbar, mit eingeklammertem
   „at“ statt des @ — die bekannteste Verschleierungsform und damit keine. */
.mail-rueck {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.confirm__badge {
  width: 100%;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  color: var(--text-eyebrow-light);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .notice {
    max-width: 70%;
  }

  .confirm__badge {
    width: 70%;
    letter-spacing: var(--tracking-eyebrow);
  }
}

@media (min-width: 1120px) {
  .confirm__badge {
    width: 50%;
  }
}

/* ===========================================================================
   RECHTSTEXTE
   ===========================================================================

   Am 1. September 2026 dazugekommen, weil der Summit seither eine eigene
   Datenschutzerklaerung traegt. Vorher verwies sein Fuss dafuer auf
   scherschneva.at; seit der Entscheidung, dass eine Fassung fuer alle drei
   Websites gilt, liegt sie auf jeder Domain selbst.

   Der Textkoerper kommt aus recht/datenschutz-textkoerper.html und ist auf
   allen drei Seiten wortgleich. Er arbeitet mit reinem semantischem HTML,
   damit jede Seite ihn in ihrer eigenen Gestaltung zeigen kann. Diese Regeln
   sind die Summit-Fassung davon: Creme als Grund, Gold als Akzent,
   Cormorant Garamond fuer die Ueberschriften.
   =========================================================================== */

/* Der Kopf der Seite steht fest (position: fixed) und ist je nach Breite 162
   bis 238 px hoch. Die uebrigen Seiten schieben ihren Inhalt mit
   --space-12 darunter hervor, ueber `.hero__inner` und `.confirm__inner`.
   Die Rechtsseite hat keine dieser Klassen und stand deshalb mit ihrer
   Ueberschrift hinter dem Kopf: H1 bei 100 px, Kopf bis 162 px.

   Derselbe Wert wie dort, damit alle Seiten des Summit gleich weit unter dem
   Kopf beginnen. */
.legal-page .section__inner {
  padding-top: var(--space-12);
}

.legal {
  max-width: 46rem;
  /* `width: 100%` und `min-width: 0` sind hier nicht kosmetisch, sondern
     noetig. `.section__inner` ist ein Flex-Container mit
     `flex-direction: column` und `align-items: center`. Ein Kind darin
     bekommt deshalb nicht die volle Breite, sondern seine Inhaltsbreite —
     und die bestimmt die Tabelle in Abschnitt 3 mit ihren 34rem
     Mindestbreite. Ohne diese zwei Zeilen wird `.legal` 544 px breit und
     zieht die ganze Seite auf einem Telefon seitlich auf, statt die Tabelle
     in ihrem eigenen Rollbereich zu lassen.

     Am 1. September 2026 bei 375 px nachgemessen: Das Dokument war vorher
     564 px breit, jetzt 375. */
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  color: var(--green-700);
  font-size: var(--size-base);
  line-height: 1.75;
  text-align: left;
}

/* Trennt die Einleitung vom ersten Abschnitt. Ohne eigene Regel zeigt der
   Browser seinen grauen 3D-Balken, der in keiner der drei Gestaltungen
   etwas zu suchen hat. Hier in Gold, wie die uebrigen Linien des Summit. */
.legal hr {
  height: 0;
  margin-block: var(--space-3);
  border: 0;
  border-top: 1px solid var(--gold-100);
}

.legal h2 {
  margin-block: var(--space-4) var(--space-1);
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 600;
  color: var(--green-800);
}

.legal h3 {
  margin-block: var(--space-2) var(--space-1);
  font-size: var(--size-md);
  font-weight: 600;
  color: var(--green-700);
}

.legal p,
.legal ul,
.legal ol {
  margin-block: 0 var(--space-1);
}

.legal ul,
.legal ol {
  padding-inline-start: 1.4em;
}

.legal li {
  margin-block-end: 0.4em;
}

.legal a {
  color: var(--text-eyebrow-light);
  text-underline-offset: 3px;
}

.legal code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background-color: var(--cream-100);
}

/* Die Tabelle in Abschnitt 3 hat drei Spalten und wird auf schmalen Geraeten
   breiter als der Bildschirm. Sie bekommt deshalb einen eigenen Rollbereich,
   damit die Seite selbst nicht seitlich rollt. */
.legal__table-wrap {
  overflow-x: auto;
  margin-block-end: var(--space-2);
}

.legal table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--size-2xs);
}

.legal th,
.legal td {
  padding: 0.7em 0.9em;
  border: 1px solid var(--green-200);
  text-align: left;
  vertical-align: top;
}

.legal th {
  background-color: var(--cream-100);
  font-weight: 600;
  color: var(--green-800);
}