/* Raumgleiter: Parzellen-Datenblock.
   Gegen das Figma gebaut: eine Karte im Markenverlauf mit runden Ecken,
   darin aufklappbare Szenarien mit Tabelle links und Bild rechts.

   Diese Datei wird von Bricks beim Rendern angemeldet und steht damit im
   Dokument NACH dem Customizer-CSS. Sie gewinnt also bei gleicher
   Spezifitaet, deshalb stehen hier auch Korrekturen am Bestand. */

/* Die Sektion ist weiss, der Verlauf liegt auf der Karte */
.rg-standorte {
  background-color: var(--rg-weiss);
  background-image: none;
  color: var(--rg-schwarz);
  padding-block: var(--rg-sektion-y);
  padding-inline: var(--rg-sektion-x);
}

.rg-standorte__inner {
  max-width: var(--rg-content-width);
  margin-inline: auto;
}

.rg-standort {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background-image: var(--rg-gradient-brand);
  border-radius: 1rem;
  color: var(--rg-weiss);
}

.rg-standort__kopf {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.rg-standort__nr {
  /* weiss-40 ergab auf dem Verlauf nur 2.57:1. weiss-70 liegt bei rund 5:1
     und wirkt gegenueber dem reinweissen Titel immer noch zurueckgenommen. */
  color: var(--rg-weiss-70);
  font-size: var(--rg-size-h2);
  font-weight: var(--rg-weight-heavy);
  line-height: var(--rg-lh-heading);
}

.rg-standort__titel {
  margin: 0;
  color: var(--rg-weiss);
  font-size: var(--rg-size-h2);
  font-weight: var(--rg-weight-semibold);
  line-height: var(--rg-lh-heading);
  letter-spacing: var(--rg-ls-heading);
}

/* --- Aufklappbare Szenarien --- */
.rg-standort__szenario {
  /* Nur oben eine Linie, sonst stehen zwischen zwei Szenarien zwei davon.
     border-bottom: 0 hebt die aeltere Regel aus dem Customizer auf. */
  border-top: 1px solid var(--rg-weiss-40);
  border-bottom: 0;
  color: var(--rg-weiss);
}

.rg-standort__szenario:last-child {
  border-bottom: 1px solid var(--rg-weiss-40);
}

/* Der Bestand setzt ein gelbes Plus beziehungsweise Minus als ::after,
   im offenen Zustand ueber ".rg-standort__szenario[open] summary::after".
   Diese Regel ist spezifischer, deshalb muss der Zustand hier mitgenannt
   werden, sonst bleibt im offenen Szenario ein Minus stehen und der Pfeil
   rutscht in die Mitte der Zeile. */
.rg-standort__szenario summary::after,
.rg-standort__szenario[open] summary::after {
  content: none;
}

.rg-standort__szenario summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--rg-size-body);
  font-weight: var(--rg-weight-semibold);
}

.rg-standort__szenario summary::-webkit-details-marker { display: none; }

.rg-standort__szenario summary:focus-visible {
  outline: 3px solid var(--rg-gelb);
  outline-offset: 4px;
}

/* Pfeil zeigt zu nach unten, offen nach oben. Das SVG zeigt nach oben. */
.rg-standort__pfeil {
  flex: 0 0 auto;
  display: block;
  width: 1.25rem;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.rg-standort__szenario[open] .rg-standort__pfeil { transform: rotate(0deg); }

.rg-standort__pfeil svg { display: block; width: 100%; height: auto; }

/* --- Inhalt eines Szenarios: Tabelle links, Bild rechts --- */
.rg-standort__lage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-bottom: 1.5rem;
}

/* Der Bestand haengt der Tabelle im Szenario einen Aussenabstand an,
   zusammen mit dem Innenabstand oben ergab das eine leere Bank. */
.rg-standort__szenario .rg-tabelle {
  margin-bottom: 0;
}

.rg-standort__daten {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rg-standort__media { margin: 0; }

.rg-standort__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rg-radius-card);
}

/* --- Tabelle --- */
.rg-standort .rg-tabelle {
  width: 100%;
  border-collapse: collapse;
  color: var(--rg-weiss);
  font-size: var(--rg-size-body-s);
  line-height: var(--rg-lh-text);
}

.rg-standort .rg-tabelle__caption {
  padding-bottom: 1rem;
  color: var(--rg-weiss);
  text-align: left;
  font-weight: var(--rg-weight-semibold);
}

.rg-standort .rg-tabelle__caption span {
  display: block;
  color: var(--rg-weiss-70);
  font-weight: var(--rg-weight-semibold);
}

.rg-standort .rg-tabelle th,
.rg-standort .rg-tabelle td {
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--rg-weiss-40);
  color: var(--rg-weiss);
  text-align: left;
  font-weight: var(--rg-weight-semibold);
}

.rg-standort .rg-tabelle tr:first-child th,
.rg-standort .rg-tabelle tr:first-child td {
  border-top: 1px solid var(--rg-weiss-40);
}

.rg-standort .rg-tabelle td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Symbol und Text in der Kopfspalte nebeneinander */
.rg-standort .rg-tabelle th {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rg-tabelle__symbol {
  flex: 0 0 auto;
  display: block;
  width: 1.125rem;
  color: var(--rg-weiss);
}

.rg-tabelle__symbol svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .rg-standort__pfeil { transition: none; }
}