/* ====================================================================
   Immobilie 10 · OnOffice-Listen-Template · v3
   Brandguideline 2025/APR (Ebony · Dun · Ash · Onyx · Eerie · Powder)
   Typo: Comfortaa (Headline) + Roboto (Body)
   -------------------------------------------------------------------
   Greift EXAKT die Klassen aus dem Template
   (child-theme/onoffice-theme/templates/estate/default.php) ab.
   BEM-ähnlich, kein Mitrutschen auf OnOffice-Default-Klassen.
   ==================================================================== */

:root{
  --i10-ash:        #B3C4AA;
  --i10-ebony:      #697165;
  --i10-dun:        #E1CFB6;
  --i10-onyx:       #353C40;
  --i10-eerie:      #1E1E1F;
  --i10-powder:     #F3F6F3;

  --i10-bg:         #FFFFFF;
  --i10-surface:    var(--i10-powder);
  --i10-line:       #DEDFDA;
  --i10-muted:      #7C8178;
  --i10-text:       var(--i10-eerie);
  --i10-text-soft:  #4A4F48;

  --i10-primary-dark:   var(--i10-ebony);
  --i10-primary-ink:    var(--i10-powder);
  --i10-accent:         var(--i10-dun);
  --i10-accent-ink:     var(--i10-eerie);

  --i10-shadow-card:        0 1px 2px rgba(30,30,31,.06), 0 4px 18px rgba(30,30,31,.06);
  --i10-shadow-card-hover:  0 12px 32px rgba(30,30,31,.14);
  --i10-shadow-chip:        0 6px 18px rgba(30,30,31,.22);

  --i10-radius-card:    16px;
  --i10-radius-image:   14px;
  --i10-radius-chip:    14px;
  --i10-radius-badge:   12px;

  --i10-font-heading:   'Comfortaa','Nunito',system-ui,sans-serif;
  --i10-font-body:      'Roboto',system-ui,sans-serif;
}

/* v1.0.13: Touch-Tap-Fix – alle interaktiven Elemente feuern beim ersten Tap.
   touch-action:manipulation eliminiert den 300ms-Delay auf iOS/Android und
   verhindert Doppel-Tap-Zoom auf Buttons. Zusätzlich dezenter Tap-Highlight. */
.i10-card__link,
.i10-card .i10-title a,
.i10-cta,
.i10-favorite,
.i10d-btn,
.i10d-btn--primary,
.i10d-btn--ghost,
.i10d-back__link,
.i10d-gallery__hero,
.i10d-gallery__thumb,
.i10d-gallery__count,
.i10d-lightbox__nav,
.i10d-lightbox__close,
.i10-pagination-moved a,
.i10-list + .page-links a{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(105,113,101,.18);
}

/* ---------- Wrapper ---------- */
.i10-list{
  font-family:var(--i10-font-body);
  color:var(--i10-text);
  max-width:1320px;
  margin:0 auto;
  padding:48px 24px 72px;
}
.i10-list *{box-sizing:border-box}
.i10-list img{max-width:100%;display:block}
.i10-list a{color:inherit}

/* ---------- Head-Row ---------- */
.i10-list__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:40px;
}
.i10-list__title{
  font-family:var(--i10-font-heading);
  font-weight:700;
  font-size:clamp(26px,3vw,38px);
  letter-spacing:-.01em;
  margin:0; color:var(--i10-eerie);
  line-height:1.15;
}
.i10-list__lead{
  margin:8px 0 0; color:var(--i10-text-soft);
  max-width:44ch; font-size:15px;
}
.i10-filter-tag{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; background:#fff;
  border:1px solid var(--i10-line); border-radius:999px;
  font-size:14px; font-weight:500; color:var(--i10-eerie);
}
.i10-filter-tag__count{
  background:var(--i10-ebony); color:var(--i10-powder);
  border-radius:999px; padding:2px 10px; font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* ---------- Grid ---------- */
.i10-grid{
  display:grid; gap:32px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1100px){ .i10-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} }
@media (max-width:640px){  .i10-grid{grid-template-columns:1fr;gap:16px} }

/* ---------- Card ---------- */
.i10-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--i10-bg);
  border:1px solid var(--i10-line);
  border-radius:var(--i10-radius-card);
  box-shadow:var(--i10-shadow-card);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  isolation:isolate;
}
/* v1.0.13: :hover nur auf hover-fähigen Geräten – verhindert Doppel-Tap auf Mobile. */
@media (hover:hover){
  .i10-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--i10-shadow-card-hover);
  }
}
.i10-card:focus-within{
  outline:2px solid var(--i10-ebony);
  outline-offset:3px;
}
.i10-card__link{
  position:absolute; inset:0; z-index:1;
  text-indent:-9999px; overflow:hidden;
}

/* ---------- Media ---------- */
.i10-card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  margin:0 !important;                      /* v1.0.4: garantiert randlos */
  padding:0 !important;
  border-top-left-radius:var(--i10-radius-card);
  border-top-right-radius:var(--i10-radius-card);
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  background:#E7E3D9;
}
/* v1.0.4: Bild FÜLLT immer komplett - überschreibt Astra/WP-Defaults hart. */
.i10-card__media > img,
.i10-card__media img{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:0 !important;
  transition:transform .45s ease;
}
@media (hover:hover){
  .i10-card:hover .i10-card__media img{ transform:scale(1.035) }
}

/* Placeholder */
.i10-card__media--placeholder{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(105,113,101,.14), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(225,207,182,.35), transparent 55%),
    repeating-linear-gradient(135deg, #EFEBDF 0 12px, #E6E1D2 12px 24px);
}
.i10-card__placeholder-label{
  font-family:var(--i10-font-heading);
  font-weight:600;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--i10-eerie);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(4px);
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--i10-line);
}

/* ---------- Price + Kauf Stack (unten links auf Bild) ---------- */
.i10-stack{
  position:absolute;
  left:16px; bottom:16px;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; z-index:2; pointer-events:none;
}
.i10-price{
  display:inline-flex; align-items:baseline; gap:4px;
  padding:14px 22px;
  font-family:var(--i10-font-body);
  font-weight:700; font-size:22px;
  letter-spacing:-.01em;
  color:var(--i10-primary-ink);
  background:var(--i10-primary-dark);
  border-radius:var(--i10-radius-chip);
  box-shadow:var(--i10-shadow-chip);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.i10-type{
  display:inline-flex; align-items:center;
  padding:10px 20px;
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--i10-accent-ink);
  background:var(--i10-accent);
  border-radius:var(--i10-radius-badge);
  box-shadow:var(--i10-shadow-chip);
  line-height:1;
}

/* ---------- Status-Badge (oben rechts) ---------- */
.i10-status{
  position:absolute;
  top:16px; right:16px;
  display:inline-flex; align-items:center;
  padding:9px 16px;
  font-family:var(--i10-font-heading);
  font-weight:600; font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--i10-powder);
  background:var(--i10-onyx);
  border-radius:var(--i10-radius-badge);
  box-shadow:var(--i10-shadow-chip);
  line-height:1; z-index:2;
}
.i10-status--new{      background:var(--i10-ebony); color:var(--i10-powder) }
.i10-status--reserved{ background:var(--i10-dun);   color:var(--i10-eerie) }
.i10-status--sold{     background:var(--i10-onyx);  color:var(--i10-powder); opacity:.92 }

/* ---------- Body ---------- */
.i10-card__body{
  padding:22px 22px 22px;
  display:flex; flex-direction:column; gap:14px;
  flex:1;
}
.i10-meta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--i10-font-body);
  font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--i10-muted);
}
.i10-icon{ flex-shrink:0 }

.i10-title{
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:16px;          /* v1.0.5: lesbarer statt 19px */
  line-height:1.4; margin:0;                /* v1.0.5: 1.4 statt 1.3 */
  color:var(--i10-eerie);
  letter-spacing:-.005em;
  display:-webkit-box;
  -webkit-line-clamp:3;                     /* v1.0.5: 3 Zeilen statt 2 */
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.4em * 3);               /* reserviert Platz, damit alle Cards gleich hoch bleiben */
}
.i10-title a{
  color:inherit; text-decoration:none;
  position:relative; z-index:2;
  background-image:linear-gradient(var(--i10-ebony),var(--i10-ebony));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size .3s ease, color .2s ease;
}
@media (hover:hover){
  .i10-card:hover .i10-title a{
    color:var(--i10-ebony);
    background-size:100% 1px;
  }
}

/* ---------- Foot-Row ----------
   v1.0.12: Features sind nun AUSSERHALB der Foot-Row. Foot-Row enthält
   nur noch den DETAILS-Button, Trennstrich bleibt oben (oberhalb DETAILS). */
.i10-foot-row{
  display:flex; align-items:center; justify-content:flex-end;
  gap:16px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--i10-line);
}
/* v1.0.12: Features als eigener Block UNTER dem Titel (ohne Trennlinie oben). */
.i10-features{
  display:flex; flex-wrap:wrap; gap:8px 14px;
  list-style:none !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  padding-inline-start:0 !important;
  font-family:var(--i10-font-body); font-size:13px;
  color:var(--i10-text-soft);
}
.i10-features li{
  display:inline-flex; align-items:center; gap:8px;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
/* v1.0.11: Powder-Tile um das Icon – konsistent zu Detail-Eckdaten */
.i10-feat__icon{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:26px; height:26px;
  border-radius:7px;
  background:var(--i10-powder);
  color:var(--i10-ebony);
  flex-shrink:0;
}
.i10-feat__icon svg{
  width:15px; height:15px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.i10-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--i10-ebony);
  white-space:nowrap; flex-shrink:0;
  position:relative; z-index:2;
}
.i10-cta svg{ transition:transform .2s ease }
@media (hover:hover){
  .i10-card:hover .i10-cta svg{ transform:translateX(4px) }
}

/* ---------- Favorite Button ---------- */
.i10-favorite{
  position:absolute; top:16px; left:16px;
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0;
  background:rgba(255,255,255,.92);
  color:var(--i10-ebony);
  border-radius:50%;
  box-shadow:var(--i10-shadow-chip);
  cursor:pointer;
  z-index:3; transition:color .2s ease, transform .2s ease;
}
@media (hover:hover){
  .i10-favorite:hover{ transform:scale(1.08) }
}
.i10-favorite.is-active{
  color:#B7343C;
}
.i10-favorite.is-active svg{ fill:currentColor }

/* ---------- Mobile Tweaks ---------- */
@media (max-width:480px){
  /* v1.0.9: Foot-Row als Spalte, DETAILS unter den Features/Icons */
  .i10-foot-row{
    flex-wrap:wrap;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:14px 4px 4px;
  }
  /* v1.0.10: Features gleichmäßig über Breite verteilt (2x2 Grid) */
  .i10-features{
    flex:none;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
    padding:0;
  }
  .i10-features li{
    justify-content:flex-start;
    gap:8px;
    font-size:13px;
  }
  .i10-cta{
    order:2; /* nach Features */
    width:100%;
    justify-content:center;
    padding:12px 18px;
    border:1px solid var(--i10-line);
    border-radius:12px;
    background:transparent;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  /* v1.0.13: hover-Effekt nur auf Geräten mit echtem Zeiger – Touch feuert
     jetzt beim ersten Tap (kein Hover-Lock mehr). */
  @media (hover:hover){
    .i10-cta:hover{
      background:var(--i10-ebony);
      color:var(--i10-powder);
      border-color:var(--i10-ebony);
    }
  }
  .i10-price{ font-size:19px; padding:12px 18px }
  .i10-type{ font-size:12px; padding:8px 16px }
}

/* ---------- Reduce-Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .i10-card,
  .i10-card__media img,
  .i10-cta svg{
    transition:none !important;
    transform:none !important;
  }
}

/* ---------- Legacy OnOffice-Wrappers hart überschreiben ---------- */
/* Falls altes Markup parallel gerendert wird (z.B. via Shortcode-Cache),
   sollen die alten Table-Klassen nicht doppelt styled erscheinen. */
.i10-list .oo-listframe,
.i10-list .oo-listobject,
.i10-list .oo-listinfotable{
  all:unset; display:contents;
}


/* ====================================================================
   DETAILANSICHT (v3) · v1.0.3
   =================================================================== */

.i10-detail{
  font-family:var(--i10-font-body);
  color:var(--i10-text);
  max-width:1320px;
  margin:0 auto;
  padding:40px 24px 72px;
}
.i10-detail *{box-sizing:border-box}
.i10-detail img{max-width:100%;display:block}
.i10-detail h1,.i10-detail h2,.i10-detail h3{
  font-family:var(--i10-font-heading);
  color:var(--i10-eerie);
  letter-spacing:-.005em;
  margin:0;
}

/* ---------- Back-Nav ---------- */
.i10d-back{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:24px;
}
.i10d-back__link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--i10-font-heading);
  font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--i10-ebony); text-decoration:none;
  padding:10px 14px;
  border:1px solid var(--i10-line);
  border-radius:999px;
  background:#fff;
  transition:background .2s ease, color .2s ease;
}
@media (hover:hover){
  .i10d-back__link:hover{ background:var(--i10-ebony); color:var(--i10-powder) }
}
.i10d-back__id{
  font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--i10-muted);
}

/* ---------- Galerie ---------- */
.i10d-gallery{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:repeat(2,minmax(160px,1fr));
  gap:10px;
  margin-bottom:36px;
  border-radius:var(--i10-radius-card);
  overflow:hidden;
  position:relative;
  /* v1.0.15: scroll-margin-top für #i10-bilder-Anker.
     Astra-Header ist sticky (~80-100px), scroll-margin schiebt das
     Anker-Ziel beim Hash-Sprung um diese Höhe nach unten – Bild beginnt
     dann visuell direkt unter dem Header statt darunter zu verschwinden. */
  scroll-margin-top:100px;
}
@media (max-width:760px){
  .i10d-gallery{ scroll-margin-top:80px; }
}
.i10d-gallery__hero{
  position:relative;
  grid-row:1 / span 2;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#E7E3D9;
}
/* v1.0.4: Hero-Bild füllt Rahmen komplett – Astra-Overrides blocken. */
.i10d-gallery__hero > img,
.i10d-gallery__hero img{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:0 !important;
}
.i10d-gallery__thumbs{
  grid-column:2;
  grid-row:1 / span 2;
  display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-template-columns:1fr 1fr;
  gap:10px;
  min-height:100%;
}
.i10d-gallery__thumb{
  position:relative;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  background:#E7E3D9;
  border-radius:10px;
}
.i10d-gallery__thumb > img,
.i10d-gallery__thumb img{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:0 !important;
}
.i10d-gallery__count{
  position:absolute;
  right:16px; bottom:16px;
  padding:8px 14px;
  font-family:var(--i10-font-heading);
  font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--i10-powder);
  background:rgba(30,30,31,.72);
  border-radius:999px;
  backdrop-filter:blur(4px);
}
@media (max-width:900px){
  .i10d-gallery{ grid-template-columns:1fr; grid-template-rows:auto }
  .i10d-gallery__hero{ grid-row:auto; aspect-ratio:16/10 }
  .i10d-gallery__thumbs{
    grid-column:1; grid-row:auto;
    grid-template-rows:1fr;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* ---------- Head ---------- */
.i10d-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px 32px;
  align-items:end;
  margin-bottom:40px;
  padding-bottom:28px;
  border-bottom:1px solid var(--i10-line);
}
.i10d-head__meta{
  display:flex; flex-wrap:wrap; gap:10px 18px;
  align-items:center;
  grid-column:1 / -1;
}
.i10d-location, .i10d-objtype{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--i10-muted);
}
/* v1.0.10: Headline deutlich kleiner (war clamp 28-44px) + robust gegen Astra-H1-Overrides */
.i10-detail .i10d-title,
.i10-detail h1.i10d-title{
  font-family:var(--i10-font-heading) !important;
  font-weight:700 !important;
  font-size:clamp(22px, 2.4vw, 28px) !important;
  line-height:1.2 !important;
  color:var(--i10-eerie) !important;
  grid-column:1;
  margin:0;
}
.i10d-head__priceblock{
  display:flex; align-items:center; gap:12px;
  grid-column:2; flex-wrap:wrap;
}
.i10d-price{
  display:inline-flex; flex-direction:column;
  align-items:flex-end;
  padding:14px 22px;
  background:var(--i10-ebony);
  color:var(--i10-powder);
  border-radius:var(--i10-radius-chip);
  box-shadow:var(--i10-shadow-chip);
  line-height:1.1;
}
.i10d-price__label{
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  opacity:.75;
  margin-bottom:4px;
}
.i10d-price__value{
  font-family:var(--i10-font-body);
  font-weight:700; font-size:22px;
  font-variant-numeric:tabular-nums;
}
.i10d-kauf{
  display:inline-flex; align-items:center;
  padding:10px 18px;
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--i10-eerie);
  background:var(--i10-dun);
  border-radius:var(--i10-radius-badge);
  box-shadow:var(--i10-shadow-chip);
  line-height:1;
}
@media (max-width:760px){
  /* v1.0.5: kompletter mobiler Schliff für Detail-Head */
  .i10-detail{ padding:28px 18px 56px }

  .i10d-back{ flex-wrap:wrap; gap:10px; margin-bottom:20px }
  .i10d-back__link{
    padding:9px 14px; font-size:12px; letter-spacing:.12em;
  }
  .i10d-back__id{
    margin-left:auto; font-size:11px; letter-spacing:.12em;
  }

  .i10d-gallery{ margin-bottom:24px; gap:6px; border-radius:12px }

  .i10d-head{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:28px;
    padding-bottom:20px;
    align-items:start;
  }
  .i10d-head__meta{ gap:6px 12px }
  .i10d-location, .i10d-objtype{
    font-size:11px; letter-spacing:.1em;
  }
  /* v1.0.10: Headline mobil deutlich kleiner + mit !important gegen Astra-h1 absichern */
  .i10-detail .i10d-title,
  .i10-detail h1.i10d-title{
    font-size:clamp(17px, 4.6vw, 20px) !important;
    line-height:1.3 !important;
    word-break:break-word;
    hyphens:auto;
  }

  /* v1.0.10: Price-Block absolut full-width und garantiert im Viewport */
  .i10d-head__priceblock{
    grid-column:1 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    box-sizing:border-box;
  }
  .i10d-price{
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px;
    padding:14px 18px !important;
    line-height:1.1;
  }
  .i10d-price__value{
    text-align:right;
    white-space:nowrap;
  }
  .i10d-price__label{
    margin-bottom:0;
    font-size:11px;
  }
  .i10d-price__value{
    font-size:20px;
  }
  .i10d-kauf{
    align-self:flex-start;
    font-size:11px;
    padding:9px 16px;
  }

  .i10d-layout{ gap:28px }
  .i10d-main{ gap:24px }
  .i10d-block{ padding:22px 20px }
  .i10-detail .i10d-block__title,
  .i10d-block .i10d-block__title{ font-size:16px; margin-bottom:24px !important; padding-bottom:14px !important }
  .i10d-contact{ padding:22px 20px }
  .i10d-contact__title{ font-size:20px }
}

/* ---------- Layout Main/Aside ---------- */
.i10d-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:40px;
  align-items:start;
}
@media (max-width:900px){
  .i10d-layout{ grid-template-columns:1fr }
}

.i10d-main{
  display:flex; flex-direction:column; gap:36px;
  min-width:0;
}

/* ---------- Blocks ---------- */
.i10d-block{
  padding:26px 28px;
  background:#fff;
  border:1px solid var(--i10-line);
  border-radius:var(--i10-radius-card);
  box-shadow:var(--i10-shadow-card);
}
/* v1.0.11: Abstand nach dem Strich mit !important erzwingen
   (wird sonst von .entry-content h2/h3 überschrieben) */
.i10-detail .i10d-block__title,
.i10d-block .i10d-block__title{
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:18px;
  letter-spacing:-.005em;
  color:var(--i10-eerie);
  margin:0 0 32px !important;
  padding-bottom:16px !important;
  border-bottom:1px solid var(--i10-line) !important;
}
.i10d-block--small{ padding:18px 22px }

/* ---------- Facts (v1.0.10/11: Icon+Label nebeneinander, Value drunter) ---------- */
/* v1.0.11: ul-Reset hart mit !important – WP/Astra entry-content-ul-padding
   setzt sonst padding-inline-start:40px (sichtbar als linke Asymmetrie). */
.i10-detail ul.i10d-facts,
.i10d-facts{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  padding-inline-start:0 !important;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px 28px;
}
@media (max-width:900px){
  .i10-detail ul.i10d-facts,
  .i10d-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px }
}
/* v1.0.11: Mobil 1 Spalte – nicht mehr quetschen */
@media (max-width:560px){
  .i10-detail ul.i10d-facts,
  .i10d-facts{ grid-template-columns:1fr; gap:14px 0 }
}
.i10d-fact{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;
  row-gap:2px;
  align-items:start;
  min-width:0;
  /* v1.0.11: WP-li-Reset */
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.i10d-fact__label{
  grid-column:2; grid-row:1;
  align-self:center;
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--i10-muted);
  line-height:1.2;
}
.i10d-fact__value{
  grid-column:2; grid-row:2;
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:17px;
  color:var(--i10-eerie);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}

/* ---------- Prose ---------- */
.i10d-prose{
  font-family:var(--i10-font-body);
  font-size:15px; line-height:1.7;
  color:var(--i10-text-soft);
}
.i10d-prose p{ margin:0 0 1em }
.i10d-prose p:last-child{ margin:0 }
.i10d-prose strong{ color:var(--i10-eerie) }

.i10d-note{
  font-size:14px; margin:0 0 8px;
  color:var(--i10-text-soft);
}
.i10d-note:last-child{ margin:0 }

/* ---------- Aside ---------- */
.i10d-aside{
  display:flex; flex-direction:column; gap:24px;
  position:sticky; top:24px;
}
@media (max-width:900px){ .i10d-aside{ position:static } }

.i10d-contact{
  /* v1.0.12: Padding identisch zu .i10d-block (Energie/Beschreibung-Kasten) */
  padding:26px 28px;
  background:var(--i10-ebony);
  color:var(--i10-powder);
  border-radius:var(--i10-radius-card);
  box-shadow:var(--i10-shadow-card-hover);
}
.i10d-contact__eyebrow{
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--i10-dun);
  opacity:.95;
}
/* v1.0.7: Ansprechpartner-Name direkt unter Eyebrow, powder/weiß */
.i10-detail .i10d-contact__person{
  font-family:var(--i10-font-heading);
  font-weight:600; font-size:16px;
  color:var(--i10-powder);
  margin:6px 0 0;
  letter-spacing:.01em;
  line-height:1.3;
}
/* v1.0.7: Spezifität erhöht, damit .i10-detail h3 (color:eerie) nicht gewinnt */
/* v1.0.10: Farbe auf Dun angeglichen (wie Eyebrow "Ihr Ansprechpartner") */
.i10-detail .i10d-contact__title{
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:22px;
  margin:12px 0 8px;
  color:var(--i10-dun);
}
.i10d-contact__lead{
  font-size:14px; line-height:1.6;
  color:rgba(243,246,243,.82);
  margin:0 0 18px;
}
.i10d-contact__actions{
  display:flex; flex-direction:column; gap:10px;
}
.i10d-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:13px 18px;
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  border-radius:12px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.i10d-btn--primary{
  background:var(--i10-dun);
  color:var(--i10-eerie);
}
@media (hover:hover){
  .i10d-btn--primary:hover{ transform:translateY(-1px) }
}
.i10d-btn--ghost{
  background:transparent;
  color:var(--i10-powder);
  border:1px solid rgba(243,246,243,.4);
}
@media (hover:hover){
  .i10d-btn--ghost:hover{ background:rgba(243,246,243,.08) }
}
.i10d-contact__bullets{
  list-style:none; margin:20px 0 0; padding:0;
  display:flex; flex-direction:column; gap:6px;
  font-size:13px;
  color:rgba(243,246,243,.78);
}
.i10d-contact__bullets li:before{
  content:'✓';
  margin-right:8px;
  color:var(--i10-dun);
  font-weight:700;
}

.i10d-pricecard{
  /* v1.0.10: Padding an Kontakt-Card angeglichen (28px) */
  padding:28px;
  background:#fff;
  border:1px solid var(--i10-line);
  border-radius:var(--i10-radius-card);
  box-shadow:var(--i10-shadow-card);
  display:flex; flex-direction:column; gap:6px;
}
.i10d-pricecard__label{
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--i10-muted);
}
.i10d-pricecard__value{
  font-family:var(--i10-font-body);
  font-weight:700;
  font-size:28px;
  color:var(--i10-ebony);
  font-variant-numeric:tabular-nums;
}
/* v1.0.13: ul- und li-Reset BULLETPROOF. Astra/WP/Block-Editor setzen je nach
   Kontext padding-inline-start:40px auf ul ODER margin-inline-start auf li –
   beides hier hart auf 0. Zusätzlich Grid justify-items:start, damit das
   Icon-Tile garantiert am linken Card-Content-Rand anliegt (auf Höhe der "3"
   von 375.000 €). width:100% erzwungen, damit der Value rechts bündig mit dem
   Card-Content-Rand ist (gleicher Abstand wie links). */
.i10-detail .i10d-pricecard__meta,
.i10-detail ul.i10d-pricecard__meta,
.i10d-pricecard__meta{
  list-style:none !important;
  list-style-type:none !important;
  margin:14px 0 0 !important;
  margin-inline-start:0 !important;
  margin-inline-end:0 !important;
  padding:16px 0 0 !important;
  padding-inline-start:0 !important;
  padding-inline-end:0 !important;
  text-indent:0 !important;
  width:100% !important;
  border-top:1px solid var(--i10-line);
  display:flex; flex-direction:column; gap:12px;
  font-size:13px; color:var(--i10-text-soft);
}
.i10-detail .i10d-pricecard__meta li,
.i10d-pricecard__meta li{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  column-gap:10px;
  align-items:center;
  justify-items:start;          /* Icon linksbündig erzwingen */
  /* BULLETPROOF-Reset gegen alle WP/Astra/Block-Paddings */
  list-style:none !important;
  list-style-type:none !important;
  margin:0 !important;
  margin-inline-start:0 !important;
  margin-inline-end:0 !important;
  padding:0 !important;
  padding-inline-start:0 !important;
  padding-inline-end:0 !important;
  text-indent:0 !important;
  width:100% !important;
}
.i10-detail .i10d-pricecard__meta li::before,
.i10-detail .i10d-pricecard__meta li::marker,
.i10d-pricecard__meta li::before,
.i10d-pricecard__meta li::marker{
  content:none !important;
  display:none !important;
}
/* Value rechtsbündig zum rechten Card-Content-Rand */
.i10d-pricecard__meta li strong{
  justify-self:end;
}
.i10d-pricecard__icon{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:8px;
  background:var(--i10-powder);
  color:var(--i10-ebony);
  flex-shrink:0;
}
.i10d-pricecard__icon svg{
  width:16px; height:16px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.i10d-pricecard__meta strong{
  font-family:var(--i10-font-heading);
  color:var(--i10-eerie);
  font-variant-numeric:tabular-nums;
}

/* ---------- Legacy OnOffice-Detail-Default absichern ---------- */
/* Wenn gleichzeitig noch das alte Plugin-Detail-Template rendert, visuell ausblenden. */
.i10-detail ~ .oo-detailview,
.i10-detail ~ .oo-detailsheadline{
  display:none !important;
}
/* Und auf Detail-URLs auch die obige Liste ausblenden, falls sie doch noch rendert. */
body.i10-is-detail .i10-list{ display:none !important; }

/* v1.0.6: OnOffice-Plugin-Helper-Text ("You have opened the detail page...")
   auf Nicht-Detail-URLs ausblenden. Das Widget rendert bei fehlender Estate-ID
   diesen englischen Admin-Hinweis – für Besucher irrelevant und verwirrend. */
body:not(.i10-is-detail) .oo-detailview-helper,
body:not(.i10-is-detail) .oo-detailview-helper-text{
  display:none !important;
}

/* ============================================================
   v1.0.8 – WP-Core-Pagination ".page-links" (von wp_link_pages)
   Detailseiten: komplett ausblenden.
   Listenseite: per JS direkt an die Immobilien-Grid angehängt,
   bekommt dort ein eigenes Brand-Styling. Andere Seiten
   (Blog-Posts, paginierter Content) bleiben unberührt.
   ============================================================ */
body.i10-is-detail .page-links{ display:none !important; }

/* Paginierung, wenn sie per JS an die Liste gehängt wurde */
.i10-pagination-moved,
.i10-list + .page-links{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:28px auto 10px !important;
  padding:18px 16px !important;
  font-family:var(--i10-font-heading);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--i10-eerie);
  border-top:1px solid var(--i10-line);
}
.i10-pagination-moved a,
.i10-list + .page-links a,
.i10-pagination-moved .page-link,
.i10-list + .page-links .page-link{
  display:inline-flex;
  align-items:center; justify-content:center;
  min-width:38px; height:38px;
  padding:0 12px;
  border-radius:10px;
  background:transparent;
  color:var(--i10-eerie);
  text-decoration:none;
  border:1px solid var(--i10-line);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .i10-pagination-moved a:hover,
  .i10-list + .page-links a:hover{
    background:var(--i10-ebony);
    color:var(--i10-powder);
    border-color:var(--i10-ebony);
  }
}
/* Aktive Seite (WP wrappt sie in <span class="page-link">) */
.i10-pagination-moved > .page-link,
.i10-list + .page-links > .page-link{
  background:var(--i10-ebony);
  color:var(--i10-powder);
  border-color:var(--i10-ebony);
  cursor:default;
}
/* a > .page-link: span innen soll wieder wie ein Text aussehen */
.i10-pagination-moved a .page-link,
.i10-list + .page-links a .page-link{
  all:unset;
  font:inherit; color:inherit;
}

/* ============================================================
   v1.0.7 – Detail-Gallery-Lightbox
   ============================================================ */
.i10d-gallery__hero,
.i10d-gallery__thumb{
  cursor:zoom-in;
  position:relative;
}
.i10d-gallery__hero:focus-visible,
.i10d-gallery__thumb:focus-visible{
  outline:3px solid var(--i10-dun);
  outline-offset:2px;
}
.i10d-gallery__zoom{
  position:absolute; right:14px; bottom:14px;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(30,30,31,.75);
  color:var(--i10-powder);
  border-radius:50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:transform .2s ease, background .2s ease;
  pointer-events:none;
  z-index:2;
}
@media (hover:hover){
  .i10d-gallery__hero:hover .i10d-gallery__zoom{
    transform:scale(1.08);
    background:var(--i10-eerie);
  }
}
.i10d-gallery__count{
  cursor:pointer;
  border:none;
  font-family:inherit;
}
@media (hover:hover){
  .i10d-gallery__count:hover{
    opacity:.92;
  }
}

html.i10d-no-scroll,
html.i10d-no-scroll body{ overflow:hidden !important; }

.i10d-lightbox{
  position:fixed; inset:0;
  z-index:99999;
  background:rgba(30,30,31,.94);
  display:flex; align-items:center; justify-content:center;
  padding:28px;
  opacity:0;
  transition:opacity .18s ease;
}
.i10d-lightbox:not([hidden]){ opacity:1 }
.i10d-lightbox[hidden]{ display:none }

.i10d-lightbox__stage{
  margin:0;
  max-width:min(1400px, 96vw);
  max-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
}
.i10d-lightbox__img{
  display:block;
  max-width:100%;
  max-height:82vh;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  background:#111;
}
.i10d-lightbox__caption{
  color:var(--i10-powder);
  font-family:var(--i10-font-heading);
  font-weight:500;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.8;
}
/* v1.0.8: Astra/Elementor-Button-Overrides neutralisieren – alles hart mit !important */
.i10d-lightbox__nav,
.i10d-lightbox__close,
.i10d-lightbox button{
  position:absolute;
  background:rgba(20,20,21,.55) !important;
  color:#F3F6F3 !important;
  border:1px solid rgba(243,246,243,.35) !important;
  width:48px; height:48px;
  min-width:48px; min-height:48px;
  padding:0 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:1 !important;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .i10d-lightbox__nav:hover,
  .i10d-lightbox__close:hover,
  .i10d-lightbox button:hover{
    background:rgba(20,20,21,.85) !important;
    border-color:#F3F6F3 !important;
    color:#F3F6F3 !important;
    transform:scale(1.06);
  }
}
.i10d-lightbox__nav:disabled{ opacity:.25 !important; cursor:not-allowed !important; transform:none !important; }
.i10d-lightbox__nav svg,
.i10d-lightbox__close svg{
  color:#F3F6F3 !important;
  stroke:#F3F6F3 !important;
  fill:none !important;
  stroke-width:2.4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  pointer-events:none;
}
.i10d-lightbox__nav svg path,
.i10d-lightbox__close svg path{
  stroke:#F3F6F3 !important;
  fill:none !important;
}
.i10d-lightbox__nav--prev{ left:22px; top:50%; transform:translateY(-50%); }
.i10d-lightbox__nav--next{ right:22px; top:50%; transform:translateY(-50%); }
@media (hover:hover){
  .i10d-lightbox__nav--prev:hover{ transform:translateY(-50%) scale(1.06); }
  .i10d-lightbox__nav--next:hover{ transform:translateY(-50%) scale(1.06); }
}
.i10d-lightbox__close{ top:22px; right:22px; }

@media (max-width:760px){
  .i10d-lightbox{ padding:12px }
  .i10d-lightbox__img{ max-height:72vh }
  .i10d-lightbox__nav{ width:42px; height:42px }
  .i10d-lightbox__nav--prev{ left:8px }
  .i10d-lightbox__nav--next{ right:8px }
  .i10d-lightbox__close{ top:10px; right:10px }
  .i10d-gallery__zoom{ right:10px; bottom:10px; width:34px; height:34px }
}

/* ============================================================
   v1.0.9 – Ergänzungen
   - Eckdaten-Icons (Bett/Maximize/Bad/…)
   - Zweiter Back-Button unten
   - Mobile Contact-Buttons einheitlich
   - Mobile Paginierung polieren
   - Mobile Listenkarte: DETAILS unter Features
   ============================================================ */

/* --- Fact-Icons (Wohnfläche, Zimmer, Bad, Baujahr, Energie…) v1.0.10 --- */
.i10d-fact__icon{
  grid-column:1; grid-row:1 / span 2;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:8px;
  background:var(--i10-powder);
  color:var(--i10-ebony);
  flex-shrink:0;
  align-self:start;
}
.i10d-fact__icon svg{
  width:20px; height:20px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

/* --- Zweiter Back-Button am Ende der Detailseite --- */
.i10d-back--bottom{
  justify-content:center;
  margin:48px 0 8px;
  padding-top:32px;
  border-top:1px solid var(--i10-line);
}
.i10d-back--bottom .i10d-back__link{
  padding:12px 22px;
}

/* --- Mobile (<=760px): Detail-Kontakt-Buttons einheitlich --- */
@media (max-width:760px){
  .i10d-contact{ padding:22px 18px }
  .i10d-contact__actions{
    gap:12px;
  }
  .i10d-contact__actions .i10d-btn{
    width:100%;
    min-height:52px;
    padding:14px 18px;
    font-size:12px;
    letter-spacing:.14em;
    box-sizing:border-box;
  }
  .i10d-contact__actions .i10d-btn svg{
    width:16px; height:16px;
    flex-shrink:0;
  }

  /* Zweiter Back-Button mobil: etwas enger */
  .i10d-back--bottom{
    margin:36px 0 4px;
    padding-top:24px;
  }

  /* Paginierung mobil: kompakter, weich in das Design integriert */
  .i10-pagination-moved,
  .i10-list + .page-links{
    gap:8px;
    margin:20px auto 6px !important;
    padding:16px 10px !important;
    font-size:11px;
    letter-spacing:.16em;
  }
  .i10-pagination-moved a,
  .i10-list + .page-links a,
  .i10-pagination-moved .page-link,
  .i10-list + .page-links .page-link{
    min-width:34px; height:34px;
    padding:0 10px;
    border-radius:8px;
  }
}

/* --- Small-Mobile (<=480px) v1.0.9 Ergänzung: Paginierung noch kompakter --- */
@media (max-width:480px){
  .i10-pagination-moved,
  .i10-list + .page-links{
    margin:16px auto 4px !important;
    padding:14px 8px !important;
  }
  .i10-cta{ letter-spacing:.16em; font-size:12px; color:var(--i10-eerie) }
  .i10-cta svg{ width:14px; height:14px }
}

/* ====================================================================
   v1.0.16/17 – Widerruf-Button (§ 356a BGB) + Widerrufsbelehrungs-Seite
   ====================================================================
   v1.0.17: Die ursprüngliche Footer-Bar (.i10-widerruf-bar*) wurde
   entfernt – der "Vertrag widerrufen"-CTA läuft jetzt vollständig
   über den Astra-Footer-Builder, kein Plugin-Footer-Output mehr.
   Belehrungsseiten-Styles bleiben unverändert.
   ==================================================================== */

/* ---------- Widerrufsbelehrungs-Seite (Template) ---------- */
.i10-widerruf-page .entry-header,
.i10-widerruf-page .ast-archive-description,
.i10-widerruf-page .page-title{
  display:none !important;
}

.i10-wb{
  font-family:var(--i10-font-body);
  color:var(--i10-text);
  padding:48px 24px 72px;
  background:#fff;
}
.i10-wb__container{
  max-width:880px;
  margin:0 auto;
}
.i10-wb__head{
  margin-bottom:40px;
}
.i10-wb__eyebrow{
  display:inline-block;
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--i10-muted);
  margin-bottom:14px;
}
.i10-wb__title{
  font-family:var(--i10-font-heading);
  font-weight:700;
  font-size:clamp(28px, 3.6vw, 42px);
  letter-spacing:-.01em;
  margin:0 0 16px;
  color:var(--i10-eerie);
  line-height:1.15;
}
.i10-wb__lead{
  font-size:16px; line-height:1.7;
  color:var(--i10-text-soft);
  max-width:62ch;
  margin:0;
}
.i10-wb__card{
  background:#fff;
  border:1px solid var(--i10-line);
  border-radius:var(--i10-radius-card);
  box-shadow:var(--i10-shadow-card);
  padding:32px 36px;
  margin-bottom:24px;
}
.i10-wb__card--note{
  background:var(--i10-powder);
  border:1px solid var(--i10-line);
  box-shadow:none;
}
.i10-wb__card--cta{
  background:var(--i10-ebony);
  color:var(--i10-powder);
  border-color:var(--i10-ebony);
  box-shadow:var(--i10-shadow-card-hover);
  text-align:center;
}
.i10-wb__card--cta .i10-wb__h2{
  color:var(--i10-dun);
}
.i10-wb__card--cta p{
  color:rgba(243,246,243,.86);
  max-width:62ch;
  margin:0 auto 22px;
}
.i10-wb__h2{
  font-family:var(--i10-font-heading);
  font-weight:700;
  font-size:20px;
  letter-spacing:-.005em;
  margin:0 0 16px;
  color:var(--i10-eerie);
}
.i10-wb__card p{
  font-size:15px; line-height:1.75;
  color:var(--i10-text-soft);
  margin:0 0 14px;
}
.i10-wb__card p:last-child{ margin-bottom:0 }
.i10-wb__card a{
  color:var(--i10-ebony);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.i10-wb__address{
  font-style:normal;
  background:var(--i10-powder);
  border-left:3px solid var(--i10-dun);
  padding:14px 20px;
  margin:6px 0 20px;
  font-size:15px; line-height:1.6;
  color:var(--i10-eerie);
  border-radius:0 8px 8px 0;
}
.i10-wb__address a{
  color:var(--i10-ebony) !important;
}
.i10-wb__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  background:var(--i10-dun);
  color:var(--i10-eerie) !important;
  font-family:var(--i10-font-heading);
  font-weight:700; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none !important;
  border-radius:999px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(225,207,182,.32);
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .i10-wb__cta:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(30,30,31,.32);
  }
}
@media (max-width:760px){
  .i10-wb{ padding:32px 18px 56px }
  .i10-wb__card{ padding:24px 22px }
  .i10-wb__h2{ font-size:18px }
  .i10-wb__cta{ padding:13px 22px; font-size:13px }
}