/* ============================================================
   goldenroom yoga | Digitale Visitenkarte (info/index.html)
   Eigenes, schlankes Stylesheet statt weiterer Regeln in
   components.css (111K Zeilen) – diese eine Seite hat ein eigenes,
   viel kleineres Layout (eine zentrierte Karte statt Mehrspalten-
   Sections) und teilt sich absichtlich nicht mit dem Rest der Seite
   die CSS-Datei. Farben/Schriften/Buttons kommen trotzdem aus
   tokens.css/base.css/components.css (.btn, .link-arrow), damit die
   Karte optisch exakt zur restlichen Website passt.
   ============================================================ */

body.visitenkarte {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 3rem) var(--space-section-x);
  /* --surface (28.09.2026) – kein eigenes background hier (zeigt Cream
     durch), die .btn-Buttons auf dieser Seite (.card__save,
     .contact-section__submit auf kontaktformular.html) richten ihre
     Textfarbe daran aus, siehe Kommentar bei .btn--primary in
     components.css. */
  --surface: var(--surface-a);
}

.card {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card__logo {
  /* War clamp(96px, 22vw, 132px) (23.09.2026, auf Wunsch: "Logo bei der
     Visitenkarte größer machen"). */
  width: clamp(140px, 32vw, 190px);
  height: clamp(140px, 32vw, 190px);
  object-fit: contain;
  margin-bottom: 1rem;
}

.card__name {
  margin-bottom: 0.35rem;
}

/* Eine Zeile statt Umbruch (11.09.2026 auf Wunsch) – Bebas Neue ist
   schmal genug, dass "goldenroom yoga · Yogalehrerin und
   Fitnesstrainerin" bei dieser Schriftgröße selbst auf schmalen
   Handy-Breiten (getestet ab 320px) noch bequem in eine Zeile passt,
   daher kein eigenes clamp/kein kleineres Schriftbild nötig. */
.card__role {
  color: var(--graubraun);
  font-size: 0.9375rem;
  white-space: nowrap;
  margin-bottom: 2rem;
}

/* Hairline-Liste wie .credentials/.price-list – jede Zeile ist aber
   selbst der Link (größere Tippfläche fürs Handy, keine kleinen
   Einzel-Links wie in der normalen Kontakt-Section). */
.card__contacts {
  width: 100%;
  margin-bottom: 2rem;
}

.card__contacts li {
  border-top: 1px solid var(--gold-500);
}

.card__contacts li:last-child {
  border-bottom: 1px solid var(--gold-500);
}

.card__contacts a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 0.9rem;
  transition: opacity 0.2s ease;
}

.card__contacts a:hover,
.card__contacts a:focus-visible {
  opacity: 0.7;
}

.card__contact-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.card__contact-value {
  font-size: 1.0625rem;
  color: var(--ink);
}

.card__save {
  width: 100%;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.card__website {
  margin-bottom: 0;
}

.card__legal {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  font-size: 0.8125rem;
  color: var(--graubraun);
}

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

/* Für info/kontaktformular.html: .contact-section__form-wrap (aus
   components.css) ist für die Zweispalten-Kontakt-Section gebaut,
   hier steht sie allein auf der Karte – volle Breite, linksbündiger
   Formularinhalt statt dem sonstigen zentrierten Karten-Text. */
.card__form-wrap {
  width: 100%;
  text-align: left;
  margin-block: 1.5rem 2rem;
}