/* ============================================================
   Block: Onepager Grundrisse
   ============================================================ */

.block-onepager-grundrisse {
  font-family: "Jost", sans-serif;
  color: #15325a;
  background: #fff;
  padding: 60px 80px;
}

/* ── Stage: Gebäudebild + Info-Karte ────────────────────────── */

.ogr-stage {
  display: flex;

  gap: 40px;
  max-width: 1920px;
  margin: 0 auto;
}

.ogr-stage__building {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ogr-heading {
  font-size: 3rem;
  font-weight: 300;
  color: #15325a;
  text-align: center;
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

.ogr-building-wrap {
  position: relative;
  display: block;
  line-height: 0;
}

.ogr-building-img {
  display: block;
  width: 100%;
  height: auto;
}

.ogr-building-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.ogr-highlight-rect {
  position: absolute;
  top: 0;
  background: rgba(255, 255, 255, 0.5);

  border: 2px solid transparent;
  box-sizing: border-box;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease;
  pointer-events: all; 
  cursor: pointer;
  z-index: 1;
  &:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.ogr-highlight-rect.is-active {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #ff2d3c;
}

/* Info-Karte Spalte */
.ogr-stage__kosten {
  flex: 0 0 260px;
  /* CSS-Grid-Stapelung: alle Panels belegen dieselbe Zelle */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-self: stretch;
}

.ogr-kosten-panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.ogr-kosten-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Info-Karte ─────────────────────────────────────────────── */

.ogr-info-card {
  border: 1px solid #cdd3da;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Abschnitt */
.ogr-info-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #cdd3da;
}

.ogr-info-section:last-of-type {
  border-bottom: none;
  flex: 1; /* Module-Bereich füllt verbleibenden Platz */
}

/* Abschnitts-Überschrift */
.ogr-info-section__title {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #15325a;
  margin: 0 0 0.55rem;
  padding: 0;
}

/* DATEN / AUSSTATTUNG: Definition List als Zeilen-Tabelle */
.ogr-info-dl {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ogr-info-dl__row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.ogr-info-dl__row dt {
  font-weight: 400;
  color: #7a8fa8;
  white-space: nowrap;
}

.ogr-info-dl__row dd {
  font-weight: 400;
  color: #15325a;
  margin: 0;
  text-align: right;
}

/* MODULE: einfache Liste */
.ogr-module-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #15325a;
}

.ogr-module-list li {
  font-weight: 400;
}

/* Hinweis-Text am Ende der Karte */
.ogr-hinweis {
  margin: auto 0 0;
  padding: 0.6rem 1rem;
  font-size: 0.6rem;
  line-height: 1.5;
  color: #1f4271;
  border-top: 1px solid #cdd3da;
}

/* ── Kosten-Skala ────────────────────────────────────────────── */

/*
 * Mathematik (scale.svg, viewBox 0 0 168.15 91.64):
 *   Bogenmittelpunkt  x = 81 → 48.17 % der Breite
 *                     y = 91 → 0.70 % vom unteren Rand  (91.64–91)/91.64
 *   Äußerer Bogenradius  76.59 SVG-Einheiten → 83.58 % der Höhe
 *
 * Wichtig: .ogr-kosten-gauge__scale ist NICHT absolut positioniert, damit
 * das Bild den Container in seiner natürlichen Höhe aufspannt. Erst dann
 * liefern %-Angaben auf den absolut positionierten Kinder (Pivot, Pfeil)
 * zuverlässige Pixelwerte.
 */

.ogr-info-section--kosten {
  padding-bottom: 0.6rem;
}

/* Gauge-Container – Höhe ergibt sich aus dem Skalen-Bild */
.ogr-kosten-gauge {
  position: relative;
  width: 100%;
  line-height: 0; /* verhindert Lücke unter dem inline-block-Bild */
}

/* Skalen-SVG im normalen Fluss → treibt die Containerhöhe */
.ogr-kosten-gauge__scale {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Dreharm: Unterkante am Bogenmittelpunkt (left 48.17 %, bottom 0.7 %).
 *
 * Track: äußerer Bogen (r=76.59, 83.58 %) – innerer Bogen (r=57.44, 62.68 %).
 * Mathematische Mitte wäre 73.13 %, aber die Pfeilspitze (▲, Spitze bei y=0)
 * ragt durch translate(-50%, -50%) noch ein Stück über die Armspitze hinaus
 * und erscheint so zu nah an der äußeren Bogenlinie (besonders bei 0°).
 * Korrektur: Arm auf 69 % kürzen → Pfeil sitzt visuell klar im Track-Bereich.
 *
 * transform-origin: 0 100 % → Drehpunkt = linke Unterkante = Bogenmittelpunkt.
 * CSS rotate(-90°…+90°) dreht den Arm von links (Min) nach rechts (Max).
 */
.ogr-kosten-gauge__pivot {
  position: absolute;
  left: 48.17%;
  bottom: 0.7%;
  width: 0;
  height: 69%;
  transform-origin: 0 100%;
  transform: rotate(var(--ogr-deg, 0deg));
  pointer-events: none;
  z-index: 1;
}

/*
 * Pfeilspitze am oberen Ende des Dreharms (= zwischen den beiden Bogenlinien).
 * translate(-50 %, -50 %) legt den Mittelpunkt des Pfeils auf den Arm-Endpunkt.
 *
 * Das neue arrow.svg ist ein ▲ (Spitze bei y=0, Basis bei y=6.85).
 * Der Dreharm zeigt stets in Richtung Außenbogen → ▲ zeigt automatisch
 * radial auswärts. Keine zusätzliche Rotation nötig.
 */
.ogr-kosten-gauge__arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: auto;
  transform: translate(-50%, -50%);
}

/* Min/Max-Labels unterhalb der Skala */
.ogr-kosten-gauge__labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
  line-height: normal;
}

.ogr-kosten-gauge__label {
  font-size: 0.58rem;
  font-weight: 400;
  color: #15325a;
  letter-spacing: 0.04em;
}

/* ── Haus-Navigation ────────────────────────────────────────── */

.ogr-nav {
  display: flex;
  border-top: 1px solid #cdd3da;
  border-bottom: 1px solid #cdd3da;
  margin-top: 1rem;
}

.ogr-nav__item {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  padding: 1rem 0.5rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #15325a;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  text-align: center;
}

.ogr-nav__item:hover {
  color: #ff2d3c;
}

.ogr-nav__item.is-active {
  color: #ff2d3c;
  border-bottom-color: #ff2d3c;
}

/* ── Grundrisse ─────────────────────────────────────────────── */

.ogr-grundrisse-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.ogr-grundrisse-panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.ogr-grundrisse-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ogr-grundrisse {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 4rem;
}

.ogr-grundriss {
  flex: 1;
  max-width: calc(25% - 1.5rem); /* bis zu 4 Bilder */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ogr-grundriss img {
  display: block;
  width: 100%;
  height: auto;
}

.ogr-grundriss__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #15325a;
  margin: 0.75rem 0 0;
  text-align: center;
}

/* ── Grundriss-Trigger (Zoom-Button) ────────────────────────── */

.ogr-grundriss__trigger {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}

.ogr-grundriss__trigger img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.ogr-grundriss__trigger:hover img {
  transform: scale(1.04);
}

/* Zoom-Icon-Overlay */
.ogr-grundriss__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 50, 90, 0);
  transition: background 0.3s ease;
}

.ogr-grundriss__zoom::after {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2315325a'%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='%2315325a' stroke-width='1.5'/%3E%3Cline x1='12' y1='12' x2='17' y2='17' stroke='%2315325a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='8' y1='5.5' x2='8' y2='10.5' stroke='%2315325a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='5.5' y1='8' x2='10.5' y2='8' stroke='%2315325a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 22px no-repeat;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.ogr-grundriss__trigger:hover .ogr-grundriss__zoom {
  background: rgba(21, 50, 90, 0.12);
}

.ogr-grundriss__trigger:hover .ogr-grundriss__zoom::after {
  opacity: 1;
  transform: scale(1);
}

/* ── Lightbox ────────────────────────────────────────────────── */

.ogr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* hidden-Attribut wird per JS entfernt; is-open steuert Sichtbarkeit */
}

.ogr-lightbox[hidden] {
  display: none !important;
}

.ogr-lightbox.is-open {
  opacity: 1;
}

/* Halbtransparenter Hintergrund */
.ogr-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 35, 0.88);
  cursor: zoom-out;
}

/* Inhalt-Container */
.ogr-lightbox__inner {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Schließen-Button */
.ogr-lightbox__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.ogr-lightbox__close:hover {
  opacity: 1;
}

/* Bild */
.ogr-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.ogr-lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  background: #fff;
}

/* Beschriftung */
.ogr-lightbox__caption {
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  min-height: 1em;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ogr-stage__kosten {
    flex: 0 0 220px;
  }
}

@media (max-width: 768px) {
  .block-onepager-grundrisse {
    padding: 40px 20px;
  }
  .ogr-stage {
    flex-direction: column;
  }

  .ogr-stage__kosten {
    flex: none;
    width: 100%;
    max-width: 360px;
    margin: 1.5rem auto 0;
    /* Kein Grid-Stacking auf Mobile: jedes Panel nimmt seine eigene Höhe */
    display: block;
  }

  /* Inaktive Panels komplett ausblenden statt übereinander stapeln */
  .ogr-kosten-panel {
    display: none;
  }

  .ogr-kosten-panel.is-active {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .ogr-info-card {
    height: auto;
  }

  .ogr-info-section:last-of-type {
    flex: none;
  }

  .ogr-nav__item {
    font-size: 0.7rem;
    padding: 0.75rem 0.25rem;
  }

  .ogr-grundrisse {
    flex-wrap: wrap;
    padding: 1.5rem 1rem;
    gap: 1rem;
  }

  .ogr-grundriss {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: none;
  }
}

@media (max-width: 480px) {
  .ogr-heading {
    font-size: 2rem;
  }

  .ogr-grundriss {
    flex: 1 1 100%;
  }
}