/* ==========================================================================
   Taxi Fluor — Karten: Kontakt, Referenzen (Text-Kacheln), Legal, Karte,
   FAQ. Exakt Mock-Werte (Border/Radius/Padding), FAQ ist eine bewusste
   Ergänzung aus CONTENT.md (siehe DESIGN.md, im Mock nicht enthalten).
   ========================================================================== */

/* -- Gemeinsame Basis: weisse Karte mit dünnem Border -------------------- */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-white);
}

.card--alt {
  background: var(--color-bg-alt);
}

/* ==========================================================================
   Kontakt-Karten (/kontakt): Firmenkarten + Öffnungszeiten + Formularkarte
   ========================================================================== */
.contact-card {
  padding: var(--space-24) var(--space-26);
}

.contact-card__title {
  margin: 0 0 var(--space-10);
  font-size: var(--text-3xl);
}

.contact-card__address {
  margin: 0 0 var(--space-12);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.contact-card__meta {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

.contact-card__meta a {
  font-weight: 700;
}

.contact-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
  align-items: start;
}

@media (min-width: 56rem) {
  .contact-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.contact-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* -- Karten-Einbettung: Klick-to-load (Consent), Mock-Optik -------------- */
.map-card {
  position: relative;
  height: 18.75rem; /* 300px, exakt Mock */
  border-radius: var(--radius-xl);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  text-align: center;
  padding: var(--space-24);
  overflow: hidden;
}

.map-card__caption {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 30ch;
}

.map-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Referenzen: Logo-Kacheln (Kundenwunsch 24.07.2026, Logos 360x180 von der Alt-Site)
   ========================================================================== */
.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: var(--space-16);
}

.reference-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  text-align: center;
  background: var(--color-white);
}

.reference-tile img {
  display: block;
  width: 100%;
  max-width: 11.25rem;
  height: auto;
}

/* ==========================================================================
   Legal-Karten (Impressum/Datenschutz)
   ========================================================================== */
.legal-block {
  padding: var(--space-32);
}

.legal-block + .legal-block {
  margin-top: var(--space-24);
}

.legal-block dl {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--space-8) var(--space-24);
  margin: var(--space-16) 0 0;
}

.legal-block dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.legal-block dd {
  margin: 0;
  color: var(--color-heading);
}

/* ==========================================================================
   FAQ (/bestellen): Ergänzung aus CONTENT.md, im Mock-Kartenstil
   ========================================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.faq-item {
  padding: var(--space-24);
}

.faq-item__q {
  margin: 0 0 var(--space-8);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-heading);
}

.faq-item__a {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 65ch;
}