:root{
  --brand:#3aa6a0;
  --ink:#111;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#fff;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius:6px;
  --container: 1200px;
  --stickyTop: 90px;
  --galleryH: 65vh;
}

*{box-sizing:border-box}

body{
  margin:0; 
  color:var(--ink); 
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== HERO-Gallery: Rail | Image | Thumbs ===== */
:root{
  --heroH: 100vh;
  --railW: 96px;
  --thumbW: 148px;
}

.hero-gallery{
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* wirklich volle Breite ab Seitenrand */
  display: grid;
  grid-template-columns: var(--railW) 1fr;
  gap: 0;
  align-items: stretch;
  background: #fff;
}

/* Linker Weiß-Streifen */
.hero-rail{
  background: #ffffff;
  display: grid;
  align-content: start;
  padding: 16px 12px;
}
.back-btn{
  display: inline-block;
  text-decoration: none;
  font-weight: 300;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease;
}
.back-btn:hover{ transform: translateY(-1px); background:#f8f8f8; }

/* Mittlerer Bildbereich + Overlays */
.hero-main{
  position: relative;
  height: var(--heroH);
  overflow: hidden;
  border-radius: 2px;
}
.gallery-main{ height: 100%; margin: 0; }
.gallery-main img{
  width: 100%; height: 100%;
  object-fit: cover; display:block; border-radius: 2px !important;
  box-shadow: var(--shadow);
}



/* Header-Overlay oben links */
.hero-head{
  position: absolute; inset: 16px auto auto 16px;
  display: grid; gap: 6px;
  padding: 10px 12px;
  background: rgba(24,24,24,.38);
  backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 0px solid rgba(0,0,0,.06);
  border-radius: 6px;
}
.hero-head #object-title{
  margin: 0; line-height: 1.25;
  font-size: clamp(1.2rem, 2.0vw, 1.5rem);
  font-weight: 500; color: #ffffff;
}
.hero-head .hero-loc{
  color: #ebebeb; font-weight: 300; font-size: .95rem;
}

/* KPI-Overlay unten links */
.kpi-overlay{
  position: absolute; left: 16px; bottom: 16px;
  display: grid; grid-auto-flow: column; gap: 12px;
  background: rgba(24,24,24,.38);
  backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 0px solid rgba(0,0,0,.06);
  border-radius: 6px;
  padding: 10px 14px;
}
.kpi-overlay li{ color: #fff; list-style: none; display:grid; gap:2px; }
.kpi-overlay strong{ font-size:  1.05rem;  font-weight: 800; color:#ffffff; }
.kpi-overlay span{ font-size: .85rem; color: #ebebeb; }


/* ===== Hero-Navigation (Pfeile) – robust sichtbar machen ===== */
.hero-main{ position: relative; } /* wichtig für absolute Positionierung */

.hero-nav{
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 28px;
  z-index: 50;                 /* über Thumbs/KPI/Head */
  pointer-events: none;        /* Container klickt nicht, nur Buttons */
}

.hero-nav button{
  pointer-events: auto;
  background: rgba(0,0,0,.65); /* gut sichtbar auf hellem/dunklem Bild */
  color: #fff;
  border: 2px solid rgba(255,255,255,.85);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}

.hero-nav button:hover{ transform: translateY(-1px) scale(1.03); }
.hero-nav button:active{ transform: translateY(0) scale(.98); }

/* optional: auf sehr kleinen Screens kleiner */
@media (max-width: 860px){
  .hero-nav{ bottom: 12px; gap: 18px; }
  .hero-nav button{ width: 40px; height: 40px; font-size: 1.2rem; }
}

/* Rechte Thumbs-Spalte (vertikal) */
.thumbs-wrap{
  position: absolute;           /* Thumbs liegen auf dem Bild */
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: var(--thumbW);         /* feste Breite */
  padding: 0;
  overflow: hidden;             /* Scrollbar liegt im inneren .thumbs */
  display: grid;
  z-index: 3;
  box-shadow: #111;
}
.thumbs{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-right: 4px;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge legacy */
}

.thumbs::-webkit-scrollbar{ width:0; height:0; display:none; }
.thumbs img{
  display: block;
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  flex: 0 0 auto;
  position: static !important;
  margin: 0;
}

/* Ensure each thumbnail button is a normal block in the vertical flow */
.thumbs .thumb{
  display: block;
  position: static !important;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  flex: 0 0 auto;                 /* prevent flex stretching */
}
/* Fallback spacing if gap is overridden somewhere */
.thumbs .thumb + .thumb{ margin-top: 10px; }

/* Responsive */
@media (max-width: 1080px){
  :root{ --railW: 72px; --thumbW: 132px; --heroH: 64vh; }
}
@media (max-width: 860px){
  .hero-gallery{
    grid-template-columns: 1fr; margin-left: 0;
  }
  .hero-rail{ display:none; }
  .hero-main{ height: 56vh; border-radius: 0; }
  .thumbs-wrap{
    position: static; 
    width: auto;
    height: auto; 
    padding: 10px 16px 0;
  }
  .thumbs{ flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .thumbs img{ width: 160px; height: 100px; }
  .kpi-overlay{
    grid-auto-flow: row; gap: 6px;
    right: 16px; left: 16px; /* volle Breite unten */
  }
}
/* ===== Mobile hero overlay tweaks ===== */
@media (max-width: 640px){
  /* hide KPI overlay on mobile */
  .kpi-overlay{ display: none !important; }

  /* make the top-left title badge more compact */
  .hero-head{
    padding: 8px 10px;
    border-radius: 4px;
    gap: 4px;
    background: rgba(24,24,24,.34);
  }
  .hero-head #object-title{
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    font-weight: 500;
  }
  .hero-head .hero-loc{
    font-size: .8rem;
  }
}
/* --- Responsive: unter 900px wieder Thumbs unter dem Bild --- */

.thumb-nav.prev {
  left: 4px;
}

.thumb-nav.next {
  right: 4px;
}



/* HIER BEGINNEN DIE CARDS UND INFOS */


.summary-card {
  margin-top: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
  margin: 18px 0 26px;
}

/* --- Clamp container width and include padding to avoid mobile overflow --- */
.summary-card,
.detail-layout{
  width: min(var(--container), 92%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(12px, 4vw, 20px);
  padding-right: clamp(12px, 4vw, 20px);
}

/* ===== Objekt-Titel in der Summary ===== */
#object-title{
  margin: 12px 0 18px 0;
  font-size: 1.8rem;
  font-weight: 500; 
  line-height: 1.3;
  color: #3c3c3c;
  letter-spacing: .01em;
  font-family: "Kaisei Tokumin", serif;
}


/* Detail-Bereich links neben dem Aside aufziehen */
.detail-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px; /* linke Spalte + reservierte Aside-Breite */
  gap: 22px;
  align-items: start;
}
.detail-layout .main-col{
  grid-column: 1; /* alles untereinander in der linken Spur */
  display: grid;
  gap: 18px;
}
/* Platzhalter-Spalte, damit die rechte Spur reserviert bleibt */
.detail-layout::after{
  content: "";
  grid-column: 2;
}

.summary-card .summary-left,
.detail-layout .main-col {
  /* no forced margin-left or left */
}

/* Reduce the vertical gap between summary and tabs */
.summary-card {
  margin-bottom: 16px;
  margin-top: 5%;
}
.tabs {
  margin-top: 0;
}

.summary-card .summary-left {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 22px;
  position: relative;
  left: 0;
  margin: 0;
}
.summary-card .summary-right {
  display: grid;
  gap: 16px;
}

/* gleiche Innenabstände für rechte Karten */
.summary-card .summary-right .card {
  padding: 18px;
  margin: 0;
  border-radius: 6px;
}

.card{background:var(--card); border:1px solid var(--line); border-radius: 6px; box-shadow:var(--shadow); padding:16px}
.card.soft{padding:18px}

.meta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1;
  margin-bottom: 6px;
}

.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem}
.badge-new{background:#f5e7e7; color:#b11c1f}


/* ÜBERSCHRIFT - NAME BEZEICHNUNG DER IMMO */
.summary-left h1 {
  margin: 6px 0 14px;
  font-size: 1.8rem;
  color: #3c3c3c;
}

/* ========================= */
/*   A U S S T A T T U N G   */
/* ========================= */

/* Gleiche Überschrift wie Objektbeschreibung */
.card.equip-card h3{
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #434343;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  font-family: "Kaisei Tokumin", serif;
}

/* Gleiche Typo wie paragraphen in Objektbeschreibung */
.equip-text{
  margin: 0;
  padding: 0;
  line-height: 1.75;
  color: #4a4a4a;
  font-size: 1rem;
  font-weight: 200;
}

/* Bullet-Liste wie bei Ausstattungsdetails */
.equip-text ul{
  margin: 10px 0 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.equip-text li{
  line-height: 1.6;
  color: #4a4a4a;
  font-size: .95rem;
}

/* Gleiche Card-Polster wie Beschreibungs-Cards */
.card.equip-card{
  padding: 22px 26px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}



.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0 0 14px;
  margin-top: 10px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  padding-left: 1px;
}

.kpis,
.kpis * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kpis li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  min-height: 96px;
  text-align: center;
  border-right: 1px solid var(--line);
  margin: 0 !important;
}

.kpis li:last-child {
  border-right: none;
}

.kpis strong {
  display: block;
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.kpis span {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.1;
}




/* ANSPRECHPARTNER */


.contact-card .contact {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 15px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--brand);
}

.name {
  font-weight: 500;
  font-family: "Kaisei Tokumin", serif;
  color: #3c3c3c;
}

.role {
  color: var(--muted);
  margin-top: 2px;
}

.contact-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 200;
  font-size: 0.8rem;
}

/* ======================= */
/* Ansprechpartner – Badge */
/* ======================= */

/* ===== Ansprechpartner Card mit Avatar-Badge ===== */
.contact-card.badged {
  position: relative;
  padding-top: 88px;         /* mehr Platz unter der überlappenden Badge */
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  text-align: center;        /* Inhalte mittig untereinander */
}

.contact-card.badged .badge-wrap {
  position: absolute;
  top: -60px;                /* Avatar ragt über den Kartenrand */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 120px;
  height: 120px;
  pointer-events: none;
}

.contact-card.badged .avatar-badge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;

  /* Rahmen-Unterbrechung: erst Card-Farbe „fräst“ die Kante aus,
     dann feiner Outline-Ring wie Kartenrand */
  background: var(--card);
  border: 8px solid var(--card);
  outline: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Inhalt unterhalb des Avatars */
.contact-card.badged .contact-content {
  margin: 0;
}

/* Typo-Feinschliff */
.contact-card.badged h3 {
    padding-top: 20px;;
    font-size: 25px;
  margin: 0 0 14px;          /* Überschrift klar unter der Badge */
}
.contact-card.badged .name {
  font-weight: 200;
  font-size: 30px;
  margin-top: 8px;
}

.contact-card.badged .role {
  color: var(--muted);
  margin: 2px 0 12px;
  font-weight: 200;
}

/* Kontaktzeilen – 2-spaltig: Festnetz + E‑Mail */
.contact-card .contact-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-items: center;
  font-size: 15px;
  font-weight: 200 !important;
}

/* zweite Zeile (Mobil) ausblenden */
.contact-card .contact-lines a:nth-child(2) {
  display: none;
}
.contact-card .contact-lines a {
  color: var(--brand);
  text-decoration: none;
}
.contact-card .contact-lines a:hover {
  text-decoration: underline;
}

/* Responsive Verkleinerung des Badges */
@media (max-width: 640px){
  .contact-card.badged .badge-wrap {
    top: -48px;
    width: 96px;
    height: 96px;
  }
  .contact-card.badged .avatar-badge {
    width: 96px;
    height: 96px;
    border-width: 6px;
  }
}

/* Responsive stacking for contact lines on small screens */
@media (max-width: 520px){
  .contact-card .contact-lines{
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
}




/* Energieausweis im Aside */

.summary-right .energy-card{
  padding: 0;
  overflow: hidden;
  margin-top: 20px; 
}

.summary-right .energy-card h3{
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  color: #4a4a4a;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  font-family: "Kaisei Tokumin", serif;
}


.summary-right .energy-list > div:nth-child(2n){
  background: #fafafa;
}
.summary-right .energy-list span{ color: var(--muted); }

/* Skala */
.summary-right .energy-scale{
  padding: 12px 18px 18px;
  background: #fff;
}
.summary-right .scale-bar{
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  margin-bottom: 8px;
}
.summary-right .scale-bar span{
  text-align: center;
  font-size: 0.8rem;
  padding: 4px 0;
  color: #fff;
}
.summary-right .scale-bar .aplus{ background:#5cb85c; }
.summary-right .scale-bar .a   { background:#8bc34a; }
.summary-right .scale-bar .b   { background:#cddc39; }
.summary-right .scale-bar .c   { background:#ffeb3b; color:#333; }
.summary-right .scale-bar .d   { background:#ffc107; color:#333; }
.summary-right .scale-bar .e   { background:#ff9800; }
.summary-right .scale-bar .f   { background:#f44336; }
.summary-right .scale-bar .g   { background:#e53935; }
.summary-right .scale-bar .h   { background:#b71c1c; }

.summary-right .scale-bar .active{
  outline: 3px solid #79b8b6;   /* goldene Markierung */
  font-weight: 700;
}
.summary-right .energy-value{
  font-size: .9rem;
  text-align: right;
  color: #4a4a4a;
}

/* Mobil einspaltig, damit es schmal gut aussieht */
@media (max-width: 720px){
  .summary-right .energy-list{ grid-template-columns: 1fr; }
}

.summary-right .energy-list{
  display: block;
}

.summary-right .energy-list > div{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.summary-right .energy-list > div:nth-child(2n){
  background: #fafafa;
}

.summary-right .energy-list span{
  color: #4a4a4a;
  text-align: left;
  font-weight: 300;
}

.summary-right .energy-list strong{
  font-weight: 300;
  text-align: right;
  color: #4a4a4a;
}


/* ===== Eckdaten-Block ===== */
.facts-card {
  padding: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
  margin-top: 90px;
}

.facts-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 10px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.facts-head h2{
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: .02em;
  color: #3c3c3c;
  font-weight: 500;
  font-family: "Kaisei Tokumin", serif;
}

/* Tabelle: zweispaltig, zebra-rows, wie im Screenshot */
.spec-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  color: #4a4a4a;
  font-weight: 300;
}
.spec-list > div{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: #4a4a4a;
  font-weight: 300;
}
.spec-list > div:nth-child(2n){
  background: #fafafa;
  color: #4a4a4a;
  font-weight: 300;
}
.spec-list > div:last-child{
  border-bottom: none;
  color: #4a4a4a;
  font-weight: 300;
}
.spec-list span{
  color: #4a4a4a;

  font-weight: 300;
}

/* Mobile: einspaltig */
@media (max-width: 720px){
  .spec-list{ grid-template-columns: 1fr; }
}











/* ===== Responsive Layout für Gesamtseite ===== */
@media (max-width: 1024px){
  .summary-card { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-layout::after{ display:none; }
}


/* ===== Mobile overflow guards (prevent right cut-off) ===== */
@media (max-width: 760px){
  /* keep all major cards within viewport */
  .summary-card .summary-left,
  .summary-card .summary-right,
  .desc-card,
  .facts-card,
  .object-cols,
  .object-desc{
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ensure spec table never exceeds container width */
  .spec-list{ width: 100%; }
  .spec-list > div{ grid-template-columns: 1fr auto; }

  /* robust word breaking to prevent accidental overflow */
  .spec-list span,
  .spec-list strong,
  .summary-left,
  .desc-card { overflow-wrap:anywhere; word-break:break-word; }
}

@media (max-width: 640px){
  /* KPIs: eine horizontale Reihe – mobil scrollbar */
  .kpis{
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;                             /* keine Lücken zwischen den Spalten */
    border-left: 1px solid var(--line); /* linker Trenner für die erste Zelle */
  }
  .kpis li{
    flex: 0 0 140px;                    /* Breite je KPI-Block; bei Bedarf feinjustieren */
    min-width: 120px;
    border-right: 1px solid var(--line);
    padding: 12px 10px;
  }
  .kpis li:last-child{ border-right: none; }
  .kpis strong{ font-size: 1.2rem; }
  .kpis span{ font-size: .85rem; }
  .kpis::-webkit-scrollbar{ height: 0; } /* Scrollbar ausblenden (iOS/Chrome) */

  .thumb-nav { display: none; }
}






/* ===== Objektbeschreibung ===== */
.object-desc{
  max-width: var(--container);
  margin: 24px auto 32px;
  padding-left: 24px;
  padding-right: 24px;
}
.desc-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 26px;
}
.desc-card h3{
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #434343;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  font-family: "Kaisei Tokumin", serif;
}
.desc-body p{
  margin: 0 0 12px 0;
  line-height: 1.75;
  color: #4a4a4a;
  font-size: 1rem;
  font-weight: 200;
}
.desc-bullets{
  margin: 10px 0 0 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 10px;
}
.desc-bullets li{
  line-height: 1.6;
  color: #4a4a4a;
  font-size: .95rem;
}

/* Responsive */
@media (max-width: 720px){
  .desc-card{ padding: 16px; }
  .desc-card h3{ font-size: 1.05rem; }
}







/* ===== Lage & Sonstige Angaben (2-Spalten-Layout) ===== */
.object-cols{
  max-width: var(--container);
  margin: 18px auto 24px;
  padding-left: 20px;
  padding-right: 20px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.object-cols .desc-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 26px;
}

.object-cols .desc-card h3{
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #434343;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  font-family: "Kaisei Tokumin", serif;
}

.object-cols .desc-body p{
  margin: 0 0 12px 0;
  line-height: 1.75;
  color: #4a4a4a;
  font-size: 1rem;
  font-weight: 200;
}

.object-cols .desc-bullets{
  margin: 10px 0 0 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 10px;
}
.object-cols .desc-bullets li{
  line-height: 1.6;
  color: #4a4a4a;
  font-size: .95rem;
}

/* Responsive: untereinander */
@media (max-width: 720px){
  .object-cols{
    grid-template-columns: 1fr;
  }
  .object-cols .desc-card{
    padding: 16px;
  }
  .object-cols .desc-card h3{
    font-size: 1.05rem;
  }
}





/* ===== Contact card – mobile fix (avatar cut + centering) ===== */
@media (max-width: 700px){
  /* ensure the aside and card never clip overflow */
  .summary-card .summary-right{ overflow: visible; }

  .summary-right .contact-card.badged{
    overflow: visible;                 /* allow avatar to sit above card */
    text-align: center;
    padding: 56px 14px 14px;           /* tighter inner spacing under badge */
    margin-top: 24px;                  /* slightly less outer gap */
    border-radius: 12px;
  }
  .summary-right .contact-card.badged .badge-wrap{
    top: -48px;                        /* keep overlap */
    width: 96px;
    height: 96px;
  }
  .summary-right .contact-card.badged .avatar-badge{
    width: 96px;
    height: 96px;
    border-width: 6px;
  }

  /* center inner text and make sizes comfortable */
  .contact-card .contact{ justify-content: center; }
  .contact-card .contact-text{ text-align: center; width: 100%; }
  .contact-card .name{
    font-size: clamp(1.1rem, 5.2vw, 1.5rem);
    font-weight: 500;
    margin-top: -30px !important;                   /* tighter gap to avatar */
  }
  .contact-card .role{
    font-size: .95rem;
    margin-top: 2px;
  }
  .contact-card .contact-lines{ margin-top: 10px; }

  /* stack contact lines and center them */
  .contact-card .contact-lines{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    font-size: .95rem;
  }
}

/* =============================
   MOBILE POLISH (KPIs + FACTS)
   ============================= */
@media (max-width: 700px){
  /* containers take almost full width, no cut-offs */
  .summary-card,
  .detail-layout,
  .object-desc,
  .object-cols{
    width: min(100%, 94%);
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  .summary-card{ grid-template-columns: 1fr; }
  .summary-card .summary-left{ padding:16px; }

  /* smaller title for mobile */
  .summary-left h1,
  #object-title{ font-size: clamp(1.2rem, 5.5vw, 1.45rem); margin-bottom: 10px; }

  /* KPIs: 2x2 grid with visible values – no horizontal scroll */
  .kpis{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding-left: 0;
  }
  .kpis li{
    border: 1px solid var(--line);
    border-radius: 12px;
    min-height: auto;
    padding: 12px;
  }
  .kpis strong{ font-size: 1.15rem; }
  .kpis span{ font-size: .85rem; }

  /* Facts card compact + single column */
  .facts-card{ margin-top: 18px; }
  .facts-head{ padding: 14px 14px 8px; }
  .facts-head h2{ font-size: 1.35rem; }
  .spec-list{ grid-template-columns: 1fr; width: 100%; }
  .spec-list > div{ padding: 12px 14px; gap: 10px; }
}

/* Extra guard to avoid any accidental horizontal scroll on very small screens */
@media (max-width: 420px){
  .kpis strong{ font-size: 1.05rem; }
  .kpis span{ font-size: .8rem; }
}