/* ============================================================
   Property Detail (Expose)
   Page: #property
   HTML: .gallery(slider + thumbs) + .content(article + aside) + .similar-properties
   ============================================================ */

/* --- Gallery: Image Slider + Thumbnail Strip --- */

#property > .gallery {
  position: relative;
  margin-block-end: var(--gap-block);
}

/* Kleiner visueller Abstand zum oberen Bildschirmrand im media-focus-Mode.
   Greift wenn property.js focusMedia() den Slider via scrollIntoView({block:'start'})
   an den Page-Top zieht — der Browser respektiert scroll-margin-top und lässt
   den definierten Abstand oberhalb frei.
   Mobile: gleicher Abstand wie horizontaler Site-Rand (--padding-page),
   damit der Slider visuell mit dem links/rechts gehaltenen Layout-Inset
   konsistent abschließt. */
#property .slider {
  scroll-margin-top: var(--padding-page);
}

@media (max-width: 44.999rem) {
  #property .slider {
    scroll-margin-top: var(--padding-page);
  }
}

/* Gallery > mark styling konsolidiert in components/property-card.css */

#property > .gallery .slider-track {
  aspect-ratio: 16 / 9;
}

/* Mobile: höheres Bild-Ratio (4/3 statt 16/9), damit die Hochformat-Anteile
   auf schmalen Screens nicht zur Briefschlitz-Optik werden. */
@media (max-width: 44.999rem) {
  #property > .gallery .slider-track {
    aspect-ratio: 4 / 3;
  }
}

#property > .gallery .slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: transparent;
  /* Sticky-Header-Höhe als scroll-margin → wenn JS via scrollIntoView ein
     Slide ins Sichtfeld scrollt, lässt der Browser den Header-Bereich frei,
     statt das Bild oben anzuschneiden. --sticky-offset wird von header.js
     mit der echten Header-Höhe (offsetHeight) befüllt — inkl. contact-bar,
     topbar, main-nav etc., je nach Tier und Compact-State. */
  scroll-margin-top: calc(var(--sticky-offset, 0px) + var(--space-3));
}

#property > .gallery .slide figure {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* Dezenter Placeholder-Background — sichtbar während das Bild noch lädt
     (Lazy-Load) oder an den Rändern wenn ein Bild kleiner als die Stage ist.
     Verhindert die "weiße Lücke" beim verzögerten Bildaufbau. */
  background: var(--color-bg-alt);
}

/* <picture>-Wrapper layout-transparent: das <img> bleibt die Box, damit
   aspect-ratio (.slider-track) und Bild-Regeln unverändert greifen. */
#property > .gallery picture {
  display: contents;
}

#property > .gallery .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform var(--transition-med);
  background: transparent;
}

/* Subtiler Hover-Zoom nur auf Geräten mit echtem Hover. Auf Touch würde
   :hover beim ersten Tap triggern und einen ungewollten Mini-Zoom auslösen. */
@media (hover: hover) {
  #property > .gallery .slide img:hover {
    transform: scale(1.01);
  }
}

#property > .gallery .slide:hover {
  transform: none;
}

#property > .gallery .slide figcaption {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-inverse);;
  background: var(--scrim-heavy);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* "Alle XX Bilder anzeigen" — pill button, left/bottom over gallery */
.gallery-all {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-inverse);;
  background: var(--scrim-heavy);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity var(--transition);
}

.gallery-all:hover {
  opacity: 0.8;
}

#property > .gallery .slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}


#property > .gallery .slider-counter {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Thumbnail Strip --- */

.gallery-thumbs {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: var(--space-2);
}

.gallery-thumbs::-webkit-scrollbar {
  display: none;
}

/* Tablet-Landscape: vertikale Höhe ist knapp (Slider + Nav + Thumbs konkurrieren
   um den Viewport). Padding-Block der Nav-Bar und Thumb-Strip reduzieren —
   spart insgesamt ~0.5rem Höhe für mehr Bildfläche. Zusätzlich Aspect-Ratio
   von 16/9 auf 2/1 — flacher als Standard, aber nicht so cinemaesk wie 21/9.
   Lässt Nav + Thumbs unter den Fold passen ohne das Bild zu schmal wirken
   zu lassen. */
@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {
  #property > .gallery .slider-track {
    aspect-ratio: 2 / 1;
  }
  #property > .gallery .slider-nav {
    padding-block: var(--space-1);
  }
  .gallery-thumbs {
    padding-block: var(--space-1);
  }
}

.gallery-thumbs button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0;
  border: 0.125rem solid transparent;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  transition: transform var(--transition-med), border-color var(--transition), opacity var(--transition);
  opacity: 0.7;
  overflow: hidden;
  /* Wenn Slide-Change-Event den aktiven Thumbnail via scrollIntoView ins
     Sichtfeld zieht, soll der sticky Header nicht drüberliegen.
     --sticky-offset = echter offsetHeight, von header.js gesetzt. */
  scroll-margin-top: calc(var(--sticky-offset, 0px) + var(--space-3));
}

.gallery-thumbs button:hover {
  opacity: 1;
  transform: scale(1.01);
  border-color: var(--color-primary);
}

.gallery-thumbs button.active {
  border-color: var(--color-primary);
  opacity: 1;
}

.gallery-thumbs img {
  display: block;
  height: 4rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.125rem);
  background: var(--color-bg-alt);
  transition: transform var(--transition-med);
}

.gallery-thumbs img:hover,
.gallery-thumbs button.active img {
  transform: scale(1.8);
}

/* --- Header --- */

#property article > header .header-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Fav-Total im Property-Detail-Header — eigene Definition mit größerem Icon
   (unabhängig von der Card-Variante in components/property-card.css). */
#property article > header .header-meta .fav-total {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-light);
}

#property article > header .header-meta .fav-total::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-heart);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>') center / contain no-repeat;
}

#property article > header .header-meta .fav-total[hidden] {
  display: none;
}

#property article > header h1 {
  margin-block-end: var(--space-3);
}

#property article > header > p:last-child {
  margin-block: var(--gap-inline);
}



/* --- Layered Panels (Key Facts, Detail-Gruppen, Costs, Energy, Floorplans) ---
   Pattern: <section> trägt nur margin, Headline (h2/h3) sitzt frei darüber,
   <div class="panel"> wrappt den Inhalt mit bg-alt + padding + radius.
   Globale dl-Zeilen-Formatierung liegt in 02-base.css. Hier nur das Panel-Look. */

/* Äußeres Panel-Look kommt aus globaler .panel-Klasse (siehe 02-base.css).
   Hier nur noch der innere Layer (dl im Panel) und die Price-Section-Sonderbehandlung. */

/* Inneres Panel — dl im Panel + .price > h2 setzen sich zusätzlich ab (Layer-Effekt) */
#property article > section > .panel > dl,
#property article > section.price > h2 {
  background: var(--color-bg);
  padding: var(--padding-card);
  border-radius: var(--radius);
  margin: 0;
}

/* Price-Section: kein .panel-Wrapper im Markup (Sticky-Sonderfall) — selbe Optik manuell */
#property article > section.price {
  background: var(--color-bg-alt);
  padding: var(--padding-card);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
}

/* Transitions auf Base-Regel, damit beide Richtungen (stuck an/aus) sanft animieren. */
#property article > section.price {
  position: sticky;
  top: calc(var(--sticky-offset, 0px) + var(--space-5));
  z-index: 10;
  transition: top var(--transition-slow),
              margin var(--transition),
              background var(--transition),
              box-shadow var(--transition);
}

#property article > section.price > h2 {
  transition: background var(--transition), color var(--transition);
}

#property article > section.price > h2 > small {
  transition: color var(--transition), opacity var(--transition);
}

/* Stuck state: invertierte Farben */
#property article > section.price.stuck {
  background: var(--color-bg-dark);
}

/* Stuck state: kleiner hover effekt */
#property article > section.price.stuck {
  margin-inline: calc(var(--padding-card) * -1);
  box-shadow: var(--shadow);
}

#property article > section.price.stuck > h2 {
  /* Kein eigener Background — sonst Doppel-Ton (h2 schwarz vs. section dark-grey).
     Hintergrund kommt vom Section-Container (var(--color-bg-dark)). */
  background: transparent;
  color: var(--color-bg);
}

#property article > section.price.stuck > h2 > small {
  color: inherit;
  opacity: 0.7;
}

#property article > section.price.stuck > h2 .pill {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Desktop: section permanent flex, price-facts über Opacity/Max-width ein-/ausblenden.
   So greifen Transitions auch beim Verlassen des Sticky-Modus. */
@media (min-width: 79.5rem) {
  #property article > section.price {
    display: flex;
    align-items: center;
    /* gap erst im Stuck-State setzen — sonst reserviert flex-gap immer Platz
       rechts neben der h2, auch wenn .price-facts (max-width:0) unsichtbar ist. */
    gap: 0;
    transition: gap var(--transition);
  }

  #property article > section.price.stuck {
    gap: var(--gap-inline);
    border-radius: var(--space-2);
  }

  #property article > section.price > h2 {
    flex: 1;
    min-width: 0;
  }

  #property article > section.price > .price-facts {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    overflow: hidden;
    transition: opacity var(--transition),
                visibility var(--transition),
                max-width var(--transition),
                padding var(--transition);
  }

  #property article > section.price.stuck > .price-facts {
    opacity: 1;
    visibility: visible;
    max-width: 50%;
    padding-inline-end: var(--space-3);
  }
}

/* Mobile/Tablet: price-facts komplett aus dem Layout */
@media (max-width: 79.499rem) {
  #property article > section.price > .price-facts {
    display: none;
  }
}


/* Preis-h2: kleiner als die section-h2 (die hat border-bottom), flache Darstellung.
   font-family: var(--font-body) overridet die globale Heading-Font — diese hat
   stark ausgepraegte Ober-/Unterlaengen, die bei reinen Zahlen unleserlich werden
   (z.B. tabular Ziffern mit Old-Style-Versatz). Body-Font hat ruhigere Ziffern. */
#property article > section.price > h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-bottom: none;
  padding-block-end: var(--padding-card);
  font-family: var(--font-body), sans-serif;
}

#property article > section.price > h2 > small {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

#property article > section.price > h2 .pill {
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-bg-alt);
  transition: background var(--transition), color var(--transition);
}

/* Mehrere dl im Panel (z.B. Costs): Abstand untereinander */
#property article > section > .panel > dl:not(:last-child) {
  margin-block-end: var(--gap-inline);
}

/* Gruppentitel: Abstand zum darunterliegenden Panel
   (h3 als direktes section-Kind = Detail-Gruppen, h3 innerhalb .panel = Costs-Subblöcke) */
#property article > section > h3,
#property article > section > .panel > h3 {
  margin-block-end: var(--space-3);
  font-size: var(--text-lg);
}

/* Multi-Column für Key-Facts (.key-facts) + Detail-Gruppen (section mit h3).
   render_energy hat h2 und keine der Klassen → bleibt single-column. */
#property article > section.key-facts dl,
#property article > section:has(> h3) dl {
  column-count: 3;
  column-width: 14rem;
  column-gap: var(--space-6);
}

/* dt/dd-Paar nie über Spaltengrenze brechen */
#property article > section.key-facts dl > div,
#property article > section:has(> h3) dl > div {
  break-inside: avoid;
}

/* --- Text Sections (Description, Equipment, Location) --- */

#property article > section {
  margin-block-end: var(--gap-block);
}

#property article > section h2 {
  font-size: var(--text-xl);
  margin-block-end: var(--gap-inline);
  padding-block-end: var(--space-2);
  border-bottom: 0.0625rem solid var(--color-border);
}

/* --- Floor Plans Grid --- */

.floorplan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-3);
}

.floorplan-grid figure {
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 0.0625rem solid var(--color-panel-border);
}

.floorplan-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  cursor: zoom-in;
}

.floorplan-grid figcaption {
  padding: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Empty-State: CTA-Text + Anfrage-Button wenn keine Grundrisse hinterlegt sind */
.floorplan-empty .btn {
  margin-block-end: var(--space-3);
}

/* Sidebar (aside) + Contact-Card + Actions + Share-Dialog
   wurden nach pages/property-aside.css ausgelagert. */

/* --- Location Section (Adresse + Karte + Commute + Erreichbarkeit) --- */

/* .location-Section: h2 außerhalb, Inhalt im <div class="panel"> (siehe 02-base.css) */


#property .location h3 {
  margin-block: var(--gap-inline) var(--space-3);
  font-size: var(--text-lg);
}

#property .commute{
  margin-block-start: var(--space-2);
}

#property .commute nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#property .commute nav a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}

#property .commute nav a:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}

/* Distances — 2 Spalten, Icons inline vor dem Label */
#property .distances {
  column-count: 2;
  column-width: 12rem;
  column-gap: var(--space-6);
  background: var(--color-bg);
  padding: var(--space-4);
  border-radius: var(--radius);
}

#property .distances > div {
  break-inside: avoid;
}

#property .distances > div > svg {
  flex-shrink: 0;
  color: var(--color-icon);
}

#property .distances dt {
  font-weight: 500;
}

/* --- Print --- */

/* --- Property Navigation (prev / counter / next) --- */

.property-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--gap-inline) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Erster Slot links-bündig, letzter rechts-bündig, mittlerer zentriert */
.property-nav > *:first-child { justify-self: start; }
.property-nav > *:nth-child(2) { justify-self: center; }
.property-nav > *:last-child  { justify-self: end; }

.property-nav > .nav-counter,
.property-nav > .back-to-list {
  text-align: center;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  width: auto;
}

/* back-to-list ist selbst ein <a>, sein Content (Icon + Text + Counter)
   wird via inline-flex zentriert ausgerichtet */
.property-nav > .back-to-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.property-nav > .back-to-list > span {
  color: var(--color-text-muted);
  margin-inline-start: var(--space-2);
  padding-inline-start: var(--space-2);
  border-inline-start: 0.0625rem solid var(--color-border);
}

.property-nav:last-of-type {
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
  margin-block: var(--gap-block);
}

.property-nav:last-of-type > span:not(:empty) {
  background: var(--color-bg);
}

.property-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  font-weight: 500;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  transition: color var(--transition);
}

.property-nav a:hover {
  color: var(--color-primary);
  background: var(--color-bg);
}

.property-nav:first-of-type a:hover {
  color: var(--color-bg);
  background: var(--color-primary);
}


/* Prev/Next-Ausrichtung im Grid via justify-self (oben gesetzt) */
.property-nav > .nav-next {
  text-align: right;
}

/* Mobile: nur Icons, Label ausblenden */
@media (max-width: 44.999rem) {

  .property-nav:last-of-type a {
    color: var(--color-primary);
    background: var(--color-bg);
  }

  .property-nav a:hover {
    color: var(--color-bg);
    background: var(--color-primary);
  }

  .property-nav:last-of-type a:hover {
    color: var(--color-bg);
    background: var(--color-primary);
  }

  .property-nav > .nav-prev > span,
  .property-nav > .nav-next > span {
    display: none;
  }

  /* back-to-list (Icon + "Zurück zur Liste" + Counter) wird im Mobile zu lang
     für die mittlere Grid-Spalte → eigene Zeile darüber, prev/next bleiben
     in 2-Spalten darunter. :has() greift nur wenn back-to-list tatsächlich
     gerendert wird (d.h. show_back=true im Backend). */
  .property-nav:has(> .back-to-list) {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-2);
  }
  .property-nav > .back-to-list {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
  }
  /* Prev/Next rutschen in Zeile 2 */
  .property-nav:has(> .back-to-list) > .nav-prev,
  .property-nav:has(> .back-to-list) > a:not(.back-to-list),
  .property-nav:has(> .back-to-list) > span:not(.back-to-list) {
    grid-row: 2;
  }

}



@media print {
  #site-header,
  body > footer,
  .social,
  #cookie-btn,
  #scroll-top,
  .similar-properties,
  .commute,
  .gallery-thumbs,
  .slider-nav {
    display: none !important;
  }

  /* Aside-Print-Overrides liegen in pages/property-aside.css */

  #property > .gallery .slider-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    /* aspect-ratio aufheben — sonst wird der Track-Container niedrig und
       die N Slides werden zu Schmalstreifen gequetscht. */
    aspect-ratio: auto;
    height: auto;
  }

  #property > .gallery .slide {
    flex: none;
    /* Pro Slide eigenes Aspect-Ratio damit alle Bilder im Print gleich hoch
       sind und die Original-Bildproportionen sichtbar bleiben. */
    aspect-ratio: 4 / 3;
  }
}

/* --- Kostenübersicht (Kaufnebenkosten + Miete + Stellplätze + Provision) --- */

/* Direkte dl-Kinder der .costs-Section 2-spaltig (überschreibt die 3-column-
   Default-Regel für section:has(> h3) dl weiter oben). Gilt für Miete, Stellplätze,
   Provision — NICHT für die Aufschlüsselung neben dem Doughnut. */
#property article > section.costs > dl {
  column-count: 2;
}

#property article > section.costs .costs-purchase dl {
  column-count: 1;
  margin-block-start: var(--gap-block);
}

#property article > section.costs .costs-purchase dl div {
  margin-block-end: var(--space-1);
}

#property article > section.costs .costs-purchase dl div:hover {
  background: var(--color-bg);
}

.costs-purchase {
  /* Costs-Farbpalette: aus --color-primary in OKLCH-Lightness-Stufen abgeleitet,
     damit alle Posten zur Projekt-Grundfarbe harmonieren (statt zufälliger HSL-Töne).
     Index-basiert (--costs-c0 = Kaufpreis, dann Nebenkosten) — key-agnostisch,
     gilt für DE-, HU- und alle weiteren Länderprofile ohne CSS-Nachpflege. */
  --costs-c0: var(--color-primary);
  --costs-c1: color-mix(in oklch, var(--color-primary) 75%, white);
  --costs-c2: color-mix(in oklch, var(--color-primary) 55%, white);
  --costs-c3: color-mix(in oklch, var(--color-primary) 35%, white);
  --costs-c4: color-mix(in oklch, var(--color-primary) 65%, black);
  --costs-c5: color-mix(in oklch, var(--color-primary) 85%, black);

  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--gap-block)  * 2);
  align-items: center;
  vertical-align: center;
  margin-block-start: var(--gap-block);
  margin-block-end: var(--gap-block);
}

.costs-doughnut-wrap {
  position: relative;
  width: clamp(12rem, 100%, 16rem);
  justify-self: center;
  flex-shrink: 0;
}

.costs-doughnut {
  width: 100%;
  height: 100%;
}

.costs-doughnut .costs-track {
  fill: none;
  stroke: var(--color-bg-alt);
  stroke-width: 14;
}

.costs-doughnut .costs-slice {
  fill: none;
  stroke: var(--c);
  stroke-width: 14;
  transition: stroke-width var(--transition);
  cursor: pointer;
}

/* Posten-Farbe nach Index — gilt für Slice, Legenden-Punkt und Center-Label
   (jedes Element trägt data-i). Key-agnostisch über alle Länderprofile. */
.costs-purchase [data-i="0"] { --c: var(--costs-c0); }
.costs-purchase [data-i="1"] { --c: var(--costs-c1); }
.costs-purchase [data-i="2"] { --c: var(--costs-c2); }
.costs-purchase [data-i="3"] { --c: var(--costs-c3); }
.costs-purchase [data-i="4"] { --c: var(--costs-c4); }
.costs-purchase [data-i="5"] { --c: var(--costs-c5); }

/* HTML-Center-Overlay: alle Labels übereinander gestapelt, nur [data-k="total"]
   sichtbar. Bei dl-Hover (:has) wird das Total aus- und das passende Slice-Label
   eingeblendet. Zusätzlich wird der hovered Slice dicker gezeichnet. */
.costs-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  text-align: center;
}

.costs-center > span {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition);
}

.costs-center > span[data-k="total"] {
  opacity: 1;
}

.costs-center strong {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
}

.costs-center small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.costs-purchase:has(:is(dl > div, .costs-slice)[data-i]:hover) .costs-center > span[data-k="total"] {
  opacity: 0;
}

.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="0"]:hover) .costs-center > span[data-i="0"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="1"]:hover) .costs-center > span[data-i="1"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="2"]:hover) .costs-center > span[data-i="2"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="3"]:hover) .costs-center > span[data-i="3"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="4"]:hover) .costs-center > span[data-i="4"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="5"]:hover) .costs-center > span[data-i="5"] {
  opacity: 1;
}

.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="0"]:hover) .costs-slice[data-i="0"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="1"]:hover) .costs-slice[data-i="1"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="2"]:hover) .costs-slice[data-i="2"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="3"]:hover) .costs-slice[data-i="3"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="4"]:hover) .costs-slice[data-i="4"],
.costs-purchase:has(:is(dl > div, .costs-slice)[data-i="5"]:hover) .costs-slice[data-i="5"] {
  stroke-width: 20;
}

/* Farbpunkt vor dem Label (quadrat) — ::before auf <dt> */
.costs-purchase dl > div[data-k] dt::before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 1rem;
  margin-inline-end: var(--space-2);
  vertical-align: -0.125rem;
  border-radius: 0.125rem;
  background: var(--c);
}

.costs-purchase dl > div.costs-total {
  font-weight: 700;
  border-top: 0.125rem solid var(--color-border);
  border-radius: 0;
  border-bottom: none;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
}

.costs-purchase dt small {
  color: var(--color-text-muted);
  font-weight: 400;
  margin-inline-start: var(--space-1);
}

/* Costs-spezifisch: hint überspannt beide Grid-Spalten (Doughnut + dl) */
.costs-purchase > .hint {
  grid-column: 1 / -1;
}

@media (max-width: 40rem) {
  .costs-purchase {
    grid-template-columns: 1fr;
    justify-items: center;
    /* Mobile: margin-block-end raus — drunter folgt eh genug Abstand
       durch das nächste Section-Heading. */
    margin-block-end: 0;
  }
  .costs-purchase dl {
    width: 100%;
  }
}

/* --- Energy section (Bausubstanz und Energie) --- */

/* Farbpalette (HSL, kräftigere Werte) — gilt für alle .energy-* Elemente per [data-class].
   Wird von .energy-scale (classic), .energy-scale-compact (neu) und .energy-scale-vertical (modal) geteilt. */
.energy-scale [data-class="A+"],
.energy-badge[data-class="A+"],
.energy-mini[data-class="A+"],
.energy-scale-vertical [data-class="A+"] { background: hsl(140, 70%, 35%); color: var(--color-text-inverse);; }
.energy-scale [data-class="A"],
.energy-badge[data-class="A"],
.energy-mini[data-class="A"],
.energy-scale-vertical [data-class="A"]  { background: hsl(100, 70%, 40%); color: var(--color-text-inverse);; }
.energy-scale [data-class="B"],
.energy-badge[data-class="B"],
.energy-mini[data-class="B"],
.energy-scale-vertical [data-class="B"]  { background: hsl(75, 75%, 45%);  color: var(--color-text-inverse);; }
.energy-scale [data-class="C"],
.energy-badge[data-class="C"],
.energy-mini[data-class="C"],
.energy-scale-vertical [data-class="C"]  { background: hsl(58, 90%, 55%);  color: hsl(0, 0%, 13%); }
.energy-scale [data-class="D"],
.energy-badge[data-class="D"],
.energy-mini[data-class="D"],
.energy-scale-vertical [data-class="D"]  { background: hsl(45, 90%, 55%);  color: hsl(0, 0%, 13%); }
.energy-scale [data-class="E"],
.energy-badge[data-class="E"],
.energy-mini[data-class="E"],
.energy-scale-vertical [data-class="E"]  { background: hsl(32, 90%, 55%);  color: var(--color-text-inverse);; }
.energy-scale [data-class="F"],
.energy-badge[data-class="F"],
.energy-mini[data-class="F"],
.energy-scale-vertical [data-class="F"]  { background: hsl(20, 80%, 50%);  color: var(--color-text-inverse);; }
.energy-scale [data-class="G"],
.energy-badge[data-class="G"],
.energy-mini[data-class="G"],
.energy-scale-vertical [data-class="G"]  { background: hsl(5, 75%, 45%);   color: var(--color-text-inverse);; }
.energy-scale [data-class="H"],
.energy-badge[data-class="H"],
.energy-mini[data-class="H"],
.energy-scale-vertical [data-class="H"]  { background: hsl(0, 80%, 35%);   color: var(--color-text-inverse);; }

/* Classic Layout (Variante): breite Skala mit Marker + Zahlen-Labels darunter */
.energy-bar {
  position: relative;
  margin-block-end: var(--gap-block);
  padding-block-start: 2.5rem;
}

.energy-scale {
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
}

.energy-scale span {
  flex: 1;
  padding: var(--space-2) 0;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 400;
}

.energy-scale span[data-active] {
  font-weight: 700;
  font-size: var(--text-sm);
}

.energy-numbers {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-block-start: var(--space-1);
}

.energy-marker {
  position: absolute;
  top: 0;
  left: calc(var(--energy-pos) / 251 * 100%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.energy-label {
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.energy-arrow {
  line-height: 1;
  color: var(--color-text);
}

/* Energie-Klassen-Badge: Pfeil-Shape mit Buchstabe + Wert — Farbe via [data-class] oben */
.energy-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-inline-end: calc(var(--space-4) + 1.5rem);
  border: none;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%);
  margin-block-end: var(--gap-block);
  transition: filter var(--transition);
}

.energy-badge:hover { filter: brightness(1.05); }

.energy-badge strong {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
}

.energy-badge span {
  font-size: var(--text-sm);
  font-weight: 500;
}

.energy-label-head {
  margin-block-end: var(--space-2);
  font-weight: 600;
}

/* 4-Fakten-Grid mit Icons (Baujahr, Zustand, Heizung, Energieträger) */
.energy-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--gap-inline);
  list-style: none;
  margin: 0 0 var(--gap-block);
  padding: 0;
}

.energy-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.energy-facts li > svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  margin-block-start: 0.1rem;
}

.energy-facts li > div {
  display: flex;
  flex-direction: column;
}

.energy-facts li strong {
  font-weight: 600;
  font-size: var(--text-sm);
}

.energy-facts li span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Vertikale Skala im Modal — Treppen-Optik A+ bis H mit Callout für aktive Klasse */
.energy-scale-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block: var(--space-2);
}

.energy-scale-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block: var(--space-4);
}

.energy-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;  /* Anker für den absolut positionierten Callout */
}

.energy-letter {
  width: 2rem;
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--text-base);
}

.energy-range {
  padding: var(--space-2) var(--space-3);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
  font-size: var(--text-sm);
  font-weight: 500;
  padding-inline-end: calc(var(--space-3) + 1rem);
  width: var(--range-w, 14rem);
}

/* Range-Breite pro Klasse — als CSS-Variable, damit Callout sie referenzieren kann */
.energy-scale-vertical .energy-row:nth-child(1) { --range-w:  6rem; }
.energy-scale-vertical .energy-row:nth-child(2) { --range-w:  8rem; }
.energy-scale-vertical .energy-row:nth-child(3) { --range-w: 10rem; }
.energy-scale-vertical .energy-row:nth-child(4) { --range-w: 12rem; }
.energy-scale-vertical .energy-row:nth-child(5) { --range-w: 14rem; }
.energy-scale-vertical .energy-row:nth-child(6) { --range-w: 16rem; }
.energy-scale-vertical .energy-row:nth-child(7) { --range-w: 18rem; }
.energy-scale-vertical .energy-row:nth-child(8) { --range-w: 20rem; }
.energy-scale-vertical .energy-row:nth-child(9) { --range-w: 22rem; }

/* Callout: absolut positioniert rechts neben dem Range der aktiven Zeile.
   Vertikale Position über --callout-pos (0–100 %) inline gesetzt = relative
   Position des Wertes innerhalb der Klassen-Range. Fallback 50 % (zentriert). */
.energy-callout {
  position: absolute;
  top: var(--callout-pos, 50%);
  left: calc(2rem + var(--space-3) + var(--range-w) + var(--space-4));
  transform: translateY(-50%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 0.125rem solid var(--color-success);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 14rem;
  box-shadow: var(--shadow);
  z-index: 1;
  pointer-events: none;
}

.energy-callout strong {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
}

.energy-callout .value {
  font-weight: 600;
}

/* Schmale Container (z.B. Modal auf Mobile): Callout unter die aktive Zeile statt rechts daneben */
.energy-scale-vertical {
  container-type: inline-size;
}

@container (max-width: 32rem) {
  .energy-callout {
    left: 4rem;
  }
}

/* --- Documents (PDF-Liste) ------------------------------------------------
   Markup: <section class="property-docs"> > h2 + ul > li > a > span + span.action
   Layout: Stack-of-Rows mit border-bottom, Title links / Download-Hint rechts.
   Komplette Zeile klickbar (eine <a> umschließt beides). */

.property-docs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 0.0625rem solid var(--color-border);
}

.property-docs li {
  border-block-end: 0.0625rem solid var(--color-border);
}

.property-docs li:hover {
  background: var(--color-bg-alt);
}

.property-docs li span:first-child {
  margin-left: var(--space-1);
}

.property-docs li span:last-child {
  margin-right: var(--space-1);
}

.property-docs a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.property-docs a:hover {
  color: var(--color-primary);
}

.property-docs .action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  font-weight: 500;
  white-space: nowrap;
}