/* =========================================================
   Agora Web — Pricing page
   ========================================================= */

.hero-compact{ padding-bottom:clamp(20px,3vw,40px); }
.hero-compact .hero-title{ max-width:18ch; }

.nav-desktop a.is-current{ color:var(--ink); }
.nav-desktop a.is-current::after{ transform:scaleX(1); background:var(--sand); }

/* ---------- Payment switch (one-time / 12 instalments) ---------- */
.pay-switch{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-bottom:clamp(34px,4vw,54px);
}
.pay-switch-label{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.pay-seg{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  padding:5px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pay-btn{
  position:relative; z-index:1;
  background:none; border:0; cursor:pointer;
  padding:10px 22px; border-radius:999px;
  font-size:14px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink-mid); white-space:nowrap; text-align:center;
  transition:color .4s var(--ease);
}
.pay-btn.is-active{ color:var(--white); }
/* Both buttons share a column, so the pill is exactly half the track wide.
   No JS measurement — it can never end up the wrong size. */
.pay-thumb{
  position:absolute; top:5px; left:5px;
  width:calc(50% - 5px); height:calc(100% - 10px);
  border-radius:999px; background:var(--ink);
  transition:transform .5s var(--ease-out);
}
.pay-seg[data-pay="inst"] .pay-thumb{ transform:translateX(100%); }

/* variant visibility — driven by data-pay on .offer-wrap */
.offer-wrap[data-pay="once"] .pay-inst,
.offer-wrap[data-pay="inst"] .pay-once{ display:none; }
.offer.pay-once{ display:grid; }
.offer-single.pay-inst{ display:block; }

/* Two-step total: what you pay now → what you pay afterwards */
.offer-total{ margin-top:clamp(26px,3.2vw,38px); }
.offer-total .pay-once,
.offer-total .pay-inst{
  display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,1.4vw,18px);
  animation:sumIn .5s var(--ease-out) both;
}
@keyframes sumIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

.tot-step{
  display:flex; flex-direction:column; gap:6px;
  padding:18px clamp(22px,2.6vw,32px);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--white);
  min-width:210px;
  text-align:center;
}
.tot-step-after{
  background:linear-gradient(160deg,var(--olive-tint),var(--white) 88%);
  border-color:rgba(126,154,128,.35);
}
.tot-l{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.tot-v{
  font-size:clamp(1.15rem,1.9vw,1.45rem);
  letter-spacing:-.028em; color:var(--ink); white-space:nowrap;
}
.tot-arrow{
  align-self:center; position:relative;
  width:26px; height:1px; background:var(--line);
  flex:0 0 auto;
}
.tot-arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid var(--ink-faint); border-right:1px solid var(--ink-faint);
  transform:rotate(45deg);
}

/* Single card for the instalment option */
.offer-single{ max-width:640px; margin-inline:auto; }
.offer-single .offer-card{ padding:clamp(30px,3.6vw,52px); }
.offer-single .offer-price{ padding-bottom:clamp(20px,2.4vw,26px); }

.breakdown{
  margin-top:clamp(20px,2.4vw,26px);
  display:flex; flex-direction:column; gap:12px;
}
.breakdown li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
  font-size:15.5px; color:var(--ink-mid);
}
.bd-v{
  min-width:76px;
  font-variant-numeric:tabular-nums;
  color:var(--ink); letter-spacing:-.01em;
}
.bd-l{ text-wrap:pretty; }
.offer-single .offer-desc{
  margin-top:clamp(24px,2.8vw,32px);
  padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line-soft);
  max-width:52ch;
}

/* ---------- The two prices ---------- */
.offer-section{ padding-top:clamp(48px,6vw,86px); }
.offer{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:clamp(16px,2vw,26px);
}
.offer-card{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:clamp(30px,3.6vw,52px);
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
             border-color .4s var(--ease);
}
.offer-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line); }
.offer-card-accent{
  background:linear-gradient(172deg,var(--olive-tint) 0%, var(--white) 46%);
  border-color:rgba(126,154,128,.35);
  box-shadow:var(--shadow-md);
}
.offer-tag{
  display:inline-flex; align-self:flex-start;
  pointer-events:none; user-select:none;
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--line);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--olive-deep);
  background:rgba(255,255,255,.65);
}
.offer-title{
  margin-top:26px;
  font-size:clamp(1.3rem,2.1vw,1.6rem);
  font-weight:400; letter-spacing:-.028em;
}
.offer-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:12px;
  margin-top:clamp(24px,3vw,34px);
  padding-bottom:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--line-soft);
}
.offer-amount{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.2rem,6.4vw,5rem);
  line-height:.94; letter-spacing:-.04em; color:var(--ink);
}
.offer-unit{
  font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.offer-desc{
  margin-top:clamp(22px,2.6vw,30px);
  font-size:15.5px; line-height:1.65; color:var(--ink-mid);
  max-width:42ch; text-wrap:pretty;
}
.offer-plus{
  align-self:center;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,3vw,2.6rem);
  color:var(--ink-faint);
  padding-inline:4px;
  user-select:none;
}

.offer-actions{
  margin-top:clamp(34px,4vw,52px);
  display:flex; flex-direction:column; align-items:center; gap:22px;
  text-align:center;
}
.vat-note{
  max-width:62ch;
  font-size:13.5px; line-height:1.65; color:var(--ink-soft);
  text-wrap:pretty;
}

/* ---------- What's included ---------- */
.incl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,30px);
}
.incl-col{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(28px,3.2vw,44px);
  box-shadow:var(--shadow-sm);
}
.incl-title{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--olive-deep);
  padding-bottom:22px; margin-bottom:26px;
  border-bottom:1px solid var(--line-soft);
}
.incl-col .includes-list{ grid-template-columns:1fr; gap:14px; }

/* ---------- Two changes a month ---------- */
.changes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,80px);
  align-items:start;
}
.changes-note{
  margin-top:30px;
  font-size:14.5px; color:var(--ink-soft);
  padding-left:18px; border-left:2px solid var(--olive);
  max-width:44ch; text-wrap:pretty;
}
.changes-list{ border-top:1px solid var(--line); }
.changes-list li{
  display:flex; align-items:baseline; gap:20px;
  padding-block:20px;
  border-bottom:1px solid var(--line);
  font-size:1.05rem; color:var(--ink);
  transition:padding-left .45s var(--ease-out), color .3s var(--ease);
}
.changes-list li:hover{ padding-left:8px; color:var(--olive-deep); }
.ch-num{
  flex:0 0 auto;
  font-size:11.5px; letter-spacing:.14em; color:var(--ink-faint);
}

/* ---------- Terms in plain words ---------- */
.terms-section .section-head{ margin-bottom:clamp(30px,3.4vw,44px); }
.terms-list{ margin:0; border-top:1px solid var(--line); }
.term{
  display:grid;
  grid-template-columns:minmax(160px,240px) 1fr;
  gap:clamp(16px,4vw,60px);
  padding-block:24px;
  border-bottom:1px solid var(--line);
}
.term dt{
  font-size:1.02rem; letter-spacing:-.02em; color:var(--ink);
}
.term dd{
  margin:0; color:var(--ink-mid); font-size:1rem; line-height:1.6;
  max-width:56ch; text-wrap:pretty;
}

/* ---------- Add-ons ---------- */
.addon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.addon{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--white);
  padding:26px clamp(22px,2.6vw,34px);
  font-size:16px;
  transition:background-color .4s var(--ease);
}
.addon:hover{ background:var(--tint); }
.addon-price{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
/* Gleiche Sprache wie .changes-note: Olivenstrich als Fussnote zur Liste. */
.addon-note{
  margin-top:30px;
  font-size:14.5px; line-height:1.7; color:var(--ink-soft);
  padding-left:18px; border-left:2px solid var(--olive);
  max-width:72ch; text-wrap:pretty;
}

/* ---------- Bottom CTA ---------- */
.pr-cta{
  text-align:center;
  max-width:680px; margin-inline:auto;
}
.pr-cta .section-lead{ margin-inline:auto; }
.pr-cta .btn{ margin-top:34px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .offer{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .offer-plus{ justify-self:center; padding-block:2px; }
  .changes{ grid-template-columns:1fr; }
  .term{ grid-template-columns:1fr; gap:6px; }
}
@media (max-width:560px){
  .tot-step{ min-width:0; width:100%; }
  .tot-arrow{ width:1px; height:18px; }
  .tot-arrow::after{ right:-3px; top:auto; bottom:0; transform:rotate(135deg); }
}
@media (max-width:420px){
  .pay-btn{ padding:10px 16px; font-size:13.5px; }
}

/* ---------- Alternative: Einmalpaket ----------
   Bewusst ruhiger als das Hauptangebot oben: kein Rahmen, kein Akzent, nur
   Zahlen auf getoenter Flaeche. Die Summe oben bleibt das Hauptangebot. */
.alt-section{ background:var(--tint); }
.alt-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,3vw,40px); list-style:none; margin:0; padding:0;
}
.alt-card{ padding-top:22px; border-top:1px solid var(--line); }
.alt-price{ margin:0 0 10px; display:flex; flex-direction:column; gap:4px; }
.alt-amount{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.4rem); line-height:1; letter-spacing:-.02em;
}
.alt-unit{ font-size:13px; color:var(--ink-soft); letter-spacing:.01em; }
.alt-desc{ margin:0; font-size:15px; color:var(--ink-mid); max-width:34ch; }


/* ---------- IKE Mini: Karte und Vergleich mit/ohne eigene Domain ----------
   Seit 13.10.2026, nur auf istoselida-ike.html. Die rechte Spalte (eigene
   Domain) ist leicht hervorgehoben: sie ist das, was wir empfehlen. */
.mini-offer{ max-width:640px; margin:22px auto 0; text-align:center; }
.compare-wrap{ margin-top:clamp(48px,6vw,84px); }
.compare-title{
  margin:0 0 clamp(20px,2.6vw,30px);
  font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:500; letter-spacing:-.02em; color:var(--ink);
}
.compare{ width:100%; border-collapse:collapse; border-top:1px solid var(--line); }
.compare th, .compare td{
  text-align:left; vertical-align:top;
  padding:18px 20px; border-bottom:1px solid var(--line);
  font-size:1rem; line-height:1.5; font-weight:400; text-wrap:pretty;
}
.compare th:first-child{ padding-left:0; width:30%; color:var(--ink); }
.compare td{ width:35%; color:var(--ink-mid); overflow-wrap:anywhere; }
.compare thead th{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;
}
.compare th:last-child, .compare td:last-child{ background:var(--tint-olive); color:var(--ink); }
.compare-wrap .changes-note{ margin-top:22px; max-width:68ch; }
@media (max-width:760px){
  .compare, .compare thead, .compare tbody{ display:block; }
  .compare tr{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
  .compare th, .compare td{ width:auto; border-bottom:0; padding:12px 12px 16px; font-size:15px; }
  .compare thead th:first-child{ display:none; }
  .compare thead th{ padding-block:12px; }
  .compare tbody th:first-child{ grid-column:1 / -1; width:auto; padding:16px 0 2px; font-size:13px; color:var(--ink-soft); }
  .compare td:first-of-type, .compare thead th:nth-child(2){ padding-left:0; }
}

/* Drei IKE-Pakete nebeneinander, ohne den Abstandhalter .offer-plus */
.offer.offer-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.offer-3 .offer-card{ padding:clamp(24px,2.6vw,36px); }
.offer-3 .offer-title{ text-wrap:balance; }
.offer-3 .bd-v{ min-width:0; }
.offer-3 .breakdown li{ grid-template-columns:minmax(64px,auto) 1fr; gap:14px; }
.offer-section .compare-wrap{ margin-bottom:clamp(40px,5vw,64px); }
@media (max-width:1000px){ .offer.offer-3{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }

/* ---------- IKE Mini: Bestellformular ---------- */
.offer-btn{ margin-top:auto; align-self:flex-start; }
.offer-3 .offer-desc{ margin-bottom:24px; }
.order-steps{ margin-top:36px; }
.field-hint{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.field-group{
  margin:6px 0 -6px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.slug-row{ display:flex; align-items:center; gap:8px; }
.slug-pre{ font-size:15px; color:var(--ink-soft); white-space:nowrap; }
.slug-row input{ min-width:0; }
.form-note[hidden], .field-hint[hidden]{ display:none; }
.form-note{ margin:-6px 0 0; font-size:13px; color:var(--ink-soft); text-align:center; text-wrap:pretty; }
@media (max-width:420px){ .slug-row{ flex-direction:column; align-items:stretch; gap:6px; } }