/* ==========================================================================
   Club Machine — v2.css
   Zusatzbausteine für die Variante index-v2.html.
   Übernimmt Strukturideen von primoprints.photos, übersetzt in unser System:
   Grund bleibt Schwarz, es kommt keine dritte Farbfläche dazu, Pink bleibt
   bei zwei Momenten (Hero-CTA und Kontaktfläche).
   ========================================================================== */

/* --- Hero: wechselndes Zielgruppenwort ----------------------------------- */
.rotator {
  font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: .2em; text-transform: uppercase; color: var(--cm-mint);
  margin: 1.1rem 0 0; display: flex; align-items: center; gap: .6rem; min-height: 1.4em;
}
.rotator__word { display: inline-block; }
.rotator__word.is-out { opacity: 0; transform: translateY(-6px); }
.rotator__word { transition: opacity .22s ease, transform .22s ease; }

/* --- Zahlenband ---------------------------------------------------------- */
.stats { border-bottom: 1px solid var(--line); background: var(--raised); }
.stats__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: clamp(1.8rem, 4vw, 2.8rem) 0; }
@media (min-width: 700px) {
  .stat + .stat { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
}
.stat + .stat { border-top: 1px solid var(--line); }
@media (min-width: 700px) { .stat + .stat { border-top: 0; } }
.stat__num {
  font-family: var(--display); font-weight: 900; line-height: .9;
  font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -.03em; color: var(--cm-mint);
}
.stat__label {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim); margin-top: .7rem;
}

/* --- Selbstzuordnung „Ich bin gerade" ------------------------------------ */
.chooser { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 760px) { .chooser { grid-template-columns: repeat(3, 1fr); } }
.chooser a {
  background: var(--card); padding: clamp(1.5rem, 3vw, 2.2rem);
  text-decoration: none; color: var(--fg);
  display: flex; flex-direction: column; gap: .5rem;
  transition: background .18s ease;
}
.chooser a:hover { background: #1b1b1b; }
.chooser strong {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); letter-spacing: -.02em;
}
.chooser span { color: var(--fg-dim); font-size: .95rem; }
.chooser em {
  font-style: normal; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--cm-mint); margin-top: .4rem;
}

/* --- Vergleich: kaufen oder aufstellen lassen ---------------------------- */
.compare { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 820px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { background: var(--card); padding: clamp(1.6rem, 3vw, 2.4rem); }
.compare__col--ours { background: #171717; box-shadow: inset 3px 0 0 var(--cm-mint); }
.compare__head {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: 1rem;
}
.compare__col--ours .compare__head { color: var(--cm-mint); }
.compare__title {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1; margin-bottom: 1.3rem;
}
.compare dl { margin: 0; display: grid; }
.compare dt {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim); padding-top: .9rem;
}
.compare dd { margin: .25rem 0 .9rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.compare dd:last-child { border-bottom: 0; }

/* --- Stimmen ------------------------------------------------------------- */
.quotes { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; background: var(--card); padding: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-direction: column; }
.quote__mark { color: var(--cm-mint); font-family: var(--display); font-size: 2rem; line-height: 1; margin-bottom: .8rem; }
.quote p { flex: 1 1 auto; }
.quote__who {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim); margin-top: 1.4rem;
}

/* --- Standortband -------------------------------------------------------- */
.places { border-block: 1px solid var(--line); background: var(--raised); padding-block: clamp(2rem, 4vw, 3rem); }
.places__list {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.2rem 0 0; padding: 0; list-style: none;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem); letter-spacing: -.02em;
}
.places__list li { display: inline-flex; align-items: center; gap: 1.6rem; color: var(--fg); }
.places__list li::after { content: ""; width: 6px; height: 6px; background: var(--cm-mint); }
.places__list li:last-child::after { display: none; }
.places__list .places__more { color: var(--fg-dim); font-style: normal; }

/* --- Zweiter Kontaktweg -------------------------------------------------- */
.direct { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* --- Rechenzeile unter dem Zahlenband ------------------------------------ */
.stats__calc {
  max-width: 70ch; margin: 0; padding: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  font-size: 1.02rem; line-height: 1.6; color: var(--fg-dim);
}
.stats__calc strong { color: var(--fg); font-weight: 700; }
.stats__note { display: block; margin-top: .4rem; font-size: .85em; opacity: .8; }