/* ============================================================
   Property Detail — Sidebar (aside)
   Page: #property > .content > aside
   Includes: Contact Card, Sidebar Actions (Share/Download/Print/Fav/QR),
             Share-Dialog (rendered outside aside via queue_dialog).
   ============================================================ */

#property aside {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* --- Tablet: Aside-Sections 2-spaltig (Reihenfolge gedreht), solange die Aside in
       voller Breite UNTER dem Content liegt — d.h. bevor das Desktop-Grid sie daneben
       stellt (classic: 79.5rem in 04-layout.css). ACHTUNG: Im Editorial-Layout startet
       das Grid schon bei 64rem → dort wird diese Regel ab 64rem wieder auf single-column
       zurückgesetzt (siehe pages/property-editorial.css), sonst wäre die schmale Aside
       neben dem Content fälschlich zweispaltig. Mobile bleibt vertikaler Stack. --- */
@media (min-width: 45rem) and (max-width: 79.499rem) {
  #property aside {
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    gap: var(--gap-block);
  }

  #property aside > section {
    flex: 1 1 calc(50% - var(--gap-block) / 2);
    min-width: 0;
  }
}

/* Aside-Sections (.contact-card, .actions) tragen "panel"-Klasse — bg/padding/
   radius/border kommen aus globaler .panel-Regel in 02-base.css. */

#property aside h2 {
  font-size: var(--text-lg);
  font-family: var(--font-body), sans-serif;
  margin-block-end: var(--gap-inline);
}

/* --- Request-Expose CTA (prominenter Schnellkontakt-Trigger) ---
   Eigenstaendige Section oberhalb der Contact-Card. Flex-Column + align-items:
   center wie .contact-actions — so ist der `.btn` ein Flex-Item und seine
   prozentuale Breite (width: clamp(... 80%)) loest in allen Browsern zuverlaessig
   auf. (Als inline-flex in einem Block fiel Chrome sonst auf das clamp-Minimum
   zurueck → Button zu kurz; Firefox rechnete korrekt.) */

#property .request-expose {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-end: var(--gap-inline);
}

/* CTA-Buttons (Termin/Anfrage UND Expose) einheitlich: content-width (80%),
   zentriert via align-items:center der Container. Der clamp loest jetzt zuverlaessig
   auf, weil beide Buttons echte Flex-Items sind (Container = flex-column) UND die
   Scrollbar-Gutter-Reservierung auf .request-expose entfernt wurde (war die Ursache
   fuer den frueher rechts kuerzeren Expose-Button). */
#property .contact-actions .btn,
#property .request-expose .btn {
  width: clamp(12.5rem, 100%, 80%);
  justify-content: center;
}

/* Mobile: volle Breite fuer maximale Touch-Flaeche. */
@media (max-width: 44.999rem) {
  #property .contact-actions .btn,
  #property .request-expose .btn {
    width: 100%;
  }
}

/* Desktop: Sticky-CTA — bleibt beim Scrollen im Sichtfeld. Tablet hat
   row-reverse Layout (siehe oben) — Sticky funktioniert dort nicht
   sinnvoll. Mobile: Stack ist kurz genug, Sticky wuerde nur stoeren. */
@media (min-width: 79.5rem) {
  #property .request-expose {
    position: sticky;
    /* Gleicher Abstand zum oberen Rand wie die Sticky-Preis-Section
       (section.price: --sticky-offset + --space-5) — beide bündig. */
    top: calc(var(--sticky-offset, 0px) + var(--space-5));
    z-index: 1;
  }
}

/* --- Contact Card --- */

#property .contact-card {
  text-align: center;
}

#property .contact-card > img {
  width: 8rem;
  height: 8rem;
  margin-inline: auto;
  margin-block-start: var(--space-2);
  margin-block-end: var(--space-2);
}

/* Platzhalter ohne Foto: im Kreis wie das Foto (.avatar, 02-base.css) — gleiche Größe, Rahmen, Fläche. */
#property .contact-card .contact-avatar {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  margin-inline: auto;
  margin-block-start: var(--space-2);
  margin-block-end: var(--space-2);
  border-radius: 50%;
  border: 0.125rem solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

/* Makler (Schalter „Makler-Profilseiten"): Bewertung, Social-Knöpfe, „Profil ansehen" — Bausteine aus components/ui.css
   (Ui::rating, Ui::social, Ui::more); hier nur die zentrierte Ausrichtung im Kasten. */
/* Social-Knöpfe und „Profil ansehen" sind <p> — die margin:0-Regel für Absätze im Kasten (s. unten, ID-Spezifität)
   nahm ihnen den Abstand; Nutzer 29.09.2026: Link klebte an den Icons. */
#property .contact-card > div p.social { margin-block: var(--space-3) 0; }
#property .contact-card > div p.more { margin-block: var(--space-5) 0; }
/* Suchauftrag-Pille (07.10.2026): mittig unter den Kontaktwegen */
#property .contact-card > div p.search-order { margin-block: var(--space-4) 0; font-size: var(--text-sm); color: var(--color-text-muted); }
#property .contact-card > div p.search-order-title { font-weight: 600; color: var(--color-text); }   /* Frage fett, eigene Zeile (08.10.2026) */
#property .contact-card > div p.search-order-title + p.search-order { margin-block-start: 0; }
#property .contact-card > div p.search-order-link { margin-block: var(--space-2) 0; }
#property .contact-card > div p.account-hint { margin-block: var(--space-3) 0; font-size: var(--text-sm); color: var(--color-text-muted); }   /* Kundenkonto-Hinweis zwischen Anreißer und Suchauftrag-Pille */
/* „Jetzt erreichbar" (Ui::open_status): `strong` ist im Kasten der Namensstil (block, groß) — hier Fließtext. */
#property .contact-card > div p.open-status { margin-block: var(--space-3) 0; }
#property .contact-card .open-status strong { display: inline; font-size: inherit; margin: 0; }
#property .contact-card .rating { justify-content: center; margin-block: var(--space-1) var(--space-2); font-size: var(--text-sm); }
/* „Mehr zum Ansprechpartner": Kopfzeile mittig wie der Kasten, Angaben linksbündig als kleine Liste */
#property .contact-card .contact-more {
  margin-block: var(--space-3) 0;
  border-block: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
#property .contact-card .contact-more summary {
  padding-block: var(--space-3);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
}
#property .contact-card .contact-more summary:hover { color: var(--color-text); }
/* Im Fluss des (zentrierten) Kastens: je Punkt Icon + Begriff in einer Zeile, Wert darunter, Trennlinie dazwischen.
   (Nutzer 28.09.2026: linksbündig als Icon-Spalte fiel es aus dem Kasten heraus.) */
#property .contact-card .contact-more dl { margin: 0; padding: 0; text-align: center; }
/* global ist dl > div ein Flex-Paar (space-between, Linie unten) — hier: zentrierter Umbruch */
#property .contact-card .contact-more dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0;                           /* eine allgemeine Regel gab der letzten Zeile 4px unten → Abstand zur Linie ungleich */
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-top: 1px solid var(--color-border);
  transition: background var(--transition);
}
/* Hover je Zeile: dezente Fläche zwischen den Trennlinien */
#property .contact-card .contact-more dl > div:hover { background: var(--color-bg); }
#property .contact-card .contact-more svg { flex: none; color: var(--color-text-muted); }
#property .contact-card .contact-more dt { margin: 0; padding: 0; font-weight: 600; line-height: 1.3; color: var(--color-text); }
#property .contact-card .contact-more dd {
  flex-basis: 100%;
  margin: 0.125rem 0 0;
  padding: 0;
  text-align: center;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.3;                    /* wie dt — sonst wirkt der Abstand zur unteren Linie größer als zur oberen */
}
/* Icon-Zeilen des Kastens (Ui::icon_lines, components/ui.css) — hier nur Größe/Farbe wie die übrigen Kastenzeilen.
   Touch-Targets: gap 8px + Zeile ≈20px → ≥24px Mitte-zu-Mitte (WCAG 2.5.8), wie vorher per p-margin. */
#property .contact-card .icon-lines { margin-block: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
#property .contact-card .contact-listings { margin-block-start: var(--space-3); }

#property .contact-card > div {
  margin-block-end: var(--gap-inline);
}

#property .contact-card > div p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* WCAG 2.5.8 Target Size: ≥24px Center-to-Center-Abstand zwischen
   benachbarten Touch-Targets. Da das umgebende <p> sonst margin:0 hat,
   kleben die Tel-/Mail-Links zu eng. Margin auf den <p>-Wrappers, die
   einen Tel-/Mail-Link enthalten — visueller Abstand statt aufgeblähter
   Hit-Area (sauberer als padding auf den <a>-Elementen).
   Die WhatsApp-Zeile (.wa-contact) ist derselbe Fall: auch ein Touch-Target,
   und ihr eigenes margin verliert gegen die margin:0-Regel oben (ID-Spezifität). */
#property .contact-card > div p:has(a[href^="tel:"]),
#property .contact-card > div p:has(a[href^="mailto:"]),
#property .contact-card > div p.wa-contact {
  margin-block: var(--space-2);
}

#property .contact-card strong {
  display: block;
  font-size: var(--text-base);
  margin-block-end: var(--space-2);
}

#property .contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--gap-inline);
}

/* --- Sidebar Actions (Share/Download/Print/Fav/QR) --- */

#property aside .actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#property aside .actions button,
#property aside .actions a {
  display: flex;
  align-items: 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);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

#property aside .actions button:hover,
#property aside .actions a:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}

/* QR-Code: frueher <img> (externer Dienst), seit 30.09.2026 inline <svg class="qr-code"> (View\QrCode) -
   gleiche Darstellung, zentriert. */
#property aside .actions :is(img, .qr-code) {
  display: block;
  margin-block-start: var(--space-3);
  margin-block-end: var(--space-3);
  margin-inline: auto;
  padding: var(--space-2) var(--space-3);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: white;
}

/* Fav-Button im Sidebar-Actions-Kontext — komplett anderer Look als auf Cards.
   Überschreibt die Card-Variante aus components/property-card.css. */
#property aside .actions .fav-btn {
  position: static;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  line-height: inherit;
  transform: none;
}

#property aside .actions .fav-btn:hover {
  transform: none;
}

#property aside .actions .fav-btn.active {
  color: var(--color-primary);
}

/* --- Share Dialog — rendered outside aside (queue_dialog), thematically belongs here --- */

.share-copy {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--gap-inline);
}

.share-copy input {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.share-copy button {
  white-space: nowrap;
}

#share-dialog .share-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Layout-only — Farben + Hover kommen aus .btn.medium (siehe 05-buttons.css).
   Selektor bewusst nicht spezifischer als nötig, damit btn-Modifier greift. */
#share-dialog .share-links .btn {
  flex: 1 0 calc(50% - var(--space-2));
}

/* --- Print: hide sidebar actions but keep QR image --- */

@media print {
  #property aside .actions button,
  #property aside .actions a {
    display: none !important;
  }

  #property aside .actions {
    border: none;
    padding: 0;
    background: none;
  }

  #property aside .actions :is(img, .qr-code) {
    display: block;
  }
}