/* ============================================================
   EGH Gebaeudeservice / 08 - STIMMEN UND FRAGEN
   ============================================================ */

/* ------------------------------------------------------------
   KUNDENSTIMMEN

   Ein Mauerwerk aus weissen Tafeln, nicht drei gleich grosse
   Karten nebeneinander. Die Spalten laufen versetzt, weil die
   Zitate verschieden lang sind und ein erzwungener Gleichstand
   sie alle auf die Laenge des laengsten aufblasen wuerde.

   Jedes Zitat ist auf drei Zeilen gekuerzt. Wer alles lesen
   will, geht auf das Google-Profil, und genau dorthin fuehrt
   der Link am Ende.
   ------------------------------------------------------------ */
.stimmen__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--stack-3);
  margin-bottom: var(--stack-4);
}

.wertung { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.wertung b {
  font-family: var(--font-kopf);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.wertung span { font-size: var(--t-sm); color: var(--auf-grund-2); line-height: 1.4; }
.sterne { display: inline-flex; gap: 2px; color: var(--gold); }
.sterne svg { width: 15px; height: 15px; }

/* Mauerwerk ueber Spalten. Kein Grid: Bei Spalten fliesst der
   Inhalt selbst in die naechste, und die Tafeln behalten ihre
   natuerliche Hoehe. */
.stimmen__mauer {
  columns: 3;
  column-gap: clamp(1rem, 1.8vw, 1.5rem);
}
.stimme {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  background: var(--flaeche);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-2);
  padding: clamp(1.25rem, 2vw, 1.6rem);
}
.stimme blockquote { font-size: 1.0625rem; line-height: 1.6; color: var(--auf-grund); }
.stimme .sterne { margin-bottom: 0.85rem; }
.stimme figcaption {
  margin-top: var(--stack-2);
  padding-top: 0.85rem;
  border-top: var(--hair) solid var(--regel);
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--auf-grund-2);
}

@media (max-width: 1000px) { .stimmen__mauer { columns: 2; } }
@media (max-width: 620px) { .stimmen__mauer { columns: 1; } }

.stimmen__fuss {
  margin-top: var(--stack-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-2) var(--stack-3);
  align-items: center;
  justify-content: space-between;
}
.stimmen__fuss p { color: var(--auf-grund-2); font-size: var(--t-sm); max-width: 52ch; }

/* ------------------------------------------------------------
   HAEUFIGE FRAGEN

   Nur Trennlinien, kein Kasten um jede Frage. Das Zeichen ist
   ein Plus aus zwei Strichen, das sich beim Oeffnen zum Minus
   dreht: ein Wechsel als Bewegung statt als Zeichentausch.
   ------------------------------------------------------------ */
.fragen__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .fragen__raster { grid-template-columns: minmax(0, 1fr); } }

.faq { border-top: var(--hair) solid var(--regel); }
.faq details { border-bottom: var(--hair) solid var(--regel); }
.faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: var(--stack-3) 2.75rem var(--stack-3) 0;
  font-family: var(--font-kopf);
  font-size: clamp(1.0625rem, 1.4vw, 1.175rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--auf-grund);
  transition: color var(--d-schnell) var(--e-weich);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 14px; height: 2px;
  background: var(--akzent);
  transition: transform var(--d-mittel) var(--e-aus);
}
.faq summary::before { transform: translateY(-50%); }
.faq summary::after  { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--gold); } }
.faq summary:focus-visible { outline-offset: -3px; }
.faq details > div { padding-bottom: var(--stack-3); }
.faq details p { color: var(--auf-grund-2); max-width: 62ch; }
.faq details p + p { margin-top: var(--stack-2); }

/* ------------------------------------------------------------
   ABSCHLUSSBAND
   Die letzte Aufforderung vor dem Fuss.
   ------------------------------------------------------------ */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-3);
  background: var(--flaeche);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-2);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.band h2 { max-width: 20ch; margin-bottom: 0.6rem; }
.band p { color: var(--auf-grund-2); max-width: 42ch; }
.band__tasten { display: flex; flex-wrap: wrap; gap: 0.75rem; }