/* =========================================================
   AUSWAHL-STARTSEITE — Klick-Dummy Übersicht
   Neutral & markentreu (Almarai), führt zu den 3 Varianten
   ========================================================= */
.idx{ background:
  radial-gradient(90% 60% at 100% 0%, var(--blue-soft) 0%, rgba(231,238,241,0) 60%),
  radial-gradient(80% 50% at 0% 100%, var(--orange-soft) 0%, rgba(247,228,211,0) 55%),
  var(--cream);
  min-height:100vh; }

/* Kopf */
.idx-top{ padding-top:clamp(2.5rem,6vw,4.5rem); text-align:center; }
.idx-top img{ height:clamp(90px,12vw,128px); margin:0 auto 1.6rem; }
.idx-kicker{ font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; color:var(--olive); font-weight:700; }
.idx-top h1{ font-weight:300; font-size:clamp(2.2rem,6vw,4rem); line-height:1.08; margin:1rem auto .6rem; max-width:18ch; }
.idx-top h1 b{ font-weight:800; }
.idx-top p{ color:var(--ink-soft); max-width:54ch; margin:0 auto; font-size:1.08rem; }

/* Karten */
.idx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-block:clamp(2.5rem,6vw,4.5rem); }
.vcard{ display:flex; flex-direction:column; background:var(--cream-card); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s; position:relative; }
.vcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--ac,var(--olive)); z-index:3; }
.vcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow-card); }
.vcard .shot{ position:relative; aspect-ratio:1440/980; overflow:hidden; background:var(--cream-2); border-bottom:1px solid var(--line); }
.vcard .shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s ease; }
.vcard:hover .shot img{ transform:scale(1.04); }
.vcard .shot .open{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(35,35,32,.34); opacity:0; transition:opacity .25s; }
.vcard:hover .shot .open{ opacity:1; }
.vcard .shot .open span{ background:#FBF9F3; color:var(--ink); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.8rem 1.4rem; border-radius:40px; }
.vcard .body{ padding:1.6rem 1.5rem 1.8rem; display:flex; flex-direction:column; flex:1; }
.vcard .vno{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ac,var(--olive)); }
.vcard h2{ font-weight:800; font-size:1.5rem; margin:.35rem 0 .1rem; }
.vcard .ref{ font-size:.82rem; color:var(--ink-mute); font-weight:700; letter-spacing:.02em; margin-bottom:.7rem; }
.vcard p{ color:var(--ink-soft); font-size:.95rem; margin:0 0 1.3rem; }
.vcard .go{ margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.vcard .go .arr{ transition:transform .25s; color:var(--ac,var(--olive)); }
.vcard:hover .go .arr{ transform:translateX(5px); }

/* Fußnote */
.idx-foot{ text-align:center; padding-bottom:3.5rem; }
.idx-note{ display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center;
  background:var(--cream-card); border:1px solid var(--line); border-radius:40px; padding:.7rem 1.3rem;
  font-size:.86rem; color:var(--ink-soft); }
.idx-note b{ color:var(--ink); }
.idx-copy{ margin-top:1.4rem; font-size:.8rem; color:var(--ink-mute); }

@media (max-width:880px){
  .idx-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
}