/* offer.css – Startpakete (11.11.2026): Angebots-Block auf KI-Check-Bericht + KI-Duell-Ergebnis, Paket-Landingpages.
   Nur Tokens aus site.css. Eine Hauptaktion pro Ansicht: .pill-dark (hell) bzw. .kd-btn.red (Duell-Bühne). */

/* ---------- Landingpage ---------- */
.of-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:22px 0 0}
.of-price b{font:420 clamp(34px,3.4vw,44px)/1 var(--display);font-stretch:118%}
.of-price span{font-size:14px;color:var(--mute)}
.of-hero .tp-cta{margin-top:18px}
.of-trust{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-2)}
.of-trust li{display:flex;align-items:center;gap:6px}
.of-trust li::before{content:"✓";font-weight:700;color:var(--teal)}
.of-photo{position:relative}
.of-chip{position:absolute;left:-14px;bottom:-18px;max-width:300px;background:var(--white);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);font-size:14px;line-height:1.4}
.of-chip .t-label{display:block;margin:0 0 6px;font-size:11px}
.of-chip ol{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.of-chip li{display:grid;grid-template-columns:1.6em 1fr auto;gap:6px}
.of-chip li b{font-weight:600}
.of-chip li.me{color:#b3261e}
.of-chip small{display:block;margin-top:8px;color:var(--mute);font-size:12px}
@media(max-width:760px){.of-chip{position:relative;left:auto;bottom:auto;margin:-28px 12px 0;max-width:none}}
.of-get{display:grid;gap:var(--gutter)}
@media(min-width:900px){.of-get{grid-template-columns:1.3fr 1fr;align-items:start}}
.of-get .checks{gap:14px;font-size:17px}
.of-note{background:var(--white);border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px);display:grid;gap:12px}
.of-note p{margin:0}
.of-note .pk-g{margin:0}
/* Bestellen */
.of-order{display:grid;gap:var(--gutter);align-items:start}
@media(min-width:900px){.of-order{grid-template-columns:.8fr 1.2fr}}
.of-sum{background:var(--white);border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);border:1px solid var(--line)}
.of-sum h3{font:420 clamp(22px,2vw,28px)/1.15 var(--display);font-stretch:118%;margin:0 0 14px}
.of-sum dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-size:15px}
.of-sum dt{color:var(--ink-2)}.of-sum dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.of-sum .of-tot{border-top:1px solid var(--line);padding-top:10px;font-weight:600;color:var(--ink)}
.of-sum ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.of-form{background:var(--white);border:1px solid var(--line)}
.of-form .of-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink);font-weight:400;margin:0 0 14px}
.of-form .of-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.of-form textarea{min-height:84px}
.of-form button.pill{width:100%;justify-content:center;margin-top:6px}
.of-form .of-after{margin:12px 0 0}
.of-alt{margin:18px 0 0;font-size:15px}
.of-alt a{font-weight:600}

/* ---------- Bericht (KI-Check), helles System ---------- */
.of-next{display:grid;gap:var(--gutter);align-items:stretch}
@media(min-width:900px){.of-next{grid-template-columns:1.35fr 1fr}}
.of-card{background:var(--white);border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);box-shadow:0 0 0 2px var(--ink);display:flex;flex-direction:column;gap:14px}
.of-card h3{font:420 clamp(24px,2.3vw,32px)/1.1 var(--display);font-stretch:118%;margin:0}
.of-card .checks{font-size:16px;gap:10px;margin:0}
.of-card .of-price{margin:4px 0 0}
.of-card .of-price b{font-size:clamp(28px,2.6vw,36px)}
.of-card .pill{align-self:stretch;justify-content:center}
@media(min-width:620px){.of-card .pill{align-self:flex-start}}
.of-card .of-fine{font-size:13px;color:var(--mute);margin:0}
.of-talk{border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px}
.of-talk .of-face{display:flex;gap:12px;align-items:center}
.of-talk .of-face img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.of-talk h3{font:420 22px/1.2 var(--display);font-stretch:112%;margin:0}
.of-talk p{margin:0;color:var(--ink-2)}
.of-talk .pill{align-self:flex-start}
.of-talk .ck-callform{margin-top:6px;padding:0;background:none}
.of-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;padding:14px 18px;background:var(--white);border-radius:14px;border:1px dashed var(--line);font-size:15px}
.of-inline b{font-weight:600}
.of-inline a{font-weight:600}

/* Affiliate-Karte (gleiche Logik wie „Das Tool dazu“ in news.css, Affiliate-CRO 11.11.2026) */
.of-tc{background:var(--white);border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);display:grid;gap:8px;max-width:560px}
.of-tc .of-tc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0}
.of-tc .of-tc-name{font:420 20px/1.1 var(--display);font-stretch:118%}
.of-tc .of-tc-ben{margin:0;font-size:17px;line-height:1.45}
.of-tc .of-tc-price{margin:0;font-size:14px;color:var(--mute)}
.of-tc .pill{justify-self:start;margin-top:6px}
.of-tc .of-tc-fine{margin:4px 0 0;font-size:12.5px;color:var(--mute)}
.of-tc .of-tc-fine b{font-weight:600;color:var(--ink)}

/* ---------- KI-Duell (dunkle Bühne) ---------- */
.kd-offer{max-width:600px;width:100%;box-sizing:border-box;display:grid;gap:12px}
.kd-pkg{background:#000;border:1px solid var(--kd-you);border-radius:20px;padding:clamp(18px,2.6vw,26px);display:grid;gap:12px;box-shadow:0 20px 80px rgba(255,69,58,.18)}
.kd-pkg .kd-eye{margin:0}
.kd-pkg h3{font:800 clamp(21px,2.4vw,27px)/1.15 var(--kd-d);font-stretch:108%;margin:0;color:var(--kd-fg)}
.kd-pkg ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:400 15.5px/1.4 var(--kd-b);color:var(--kd-fg)}
.kd-pkg li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.kd-pkg li::before{content:"✓";color:var(--kd-gpt);font-weight:700}
.kd-pkg .kd-pp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:2px 0 0;color:var(--kd-mute);font:400 14px var(--kd-b)}
.kd-pkg .kd-pp b{font:800 30px/1 var(--kd-d);color:var(--kd-fg)}
.kd-pkg .kd-btn{text-align:center;text-decoration:none;display:block}
.kd-pkg .kd-fine{margin:0;font:400 13px/1.45 var(--kd-b);color:var(--kd-mute)}
.kd-talk{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;padding:14px 16px;border:1px solid var(--kd-line);border-radius:16px;background:rgba(255,255,255,.04)}
.kd-talk p{margin:0;font:400 15px/1.4 var(--kd-b);color:var(--kd-mute)}
.kd-talk p b{display:block;color:var(--kd-fg);font-weight:600}
.kd-talk a{font:600 15px var(--kd-b);color:var(--kd-fg);border:1px solid #4a4a52;border-radius:12px;padding:12px 16px;text-decoration:none;white-space:nowrap}
.kd-talk a:hover{border-color:var(--kd-fg)}
@media(max-width:520px){.kd-talk{grid-template-columns:1fr}.kd-talk a{text-align:center}}
.kd-tool{max-width:600px;width:100%;box-sizing:border-box;display:grid;gap:8px;padding:16px 18px;border:1px solid var(--kd-line);border-radius:16px;background:#0e0e11}
.kd-tool .kd-eye{margin:0}
.kd-tool .kd-eye span{display:block;margin-top:4px;color:var(--kd-mute);letter-spacing:.02em;text-transform:none;font-weight:400}
.kd-tool p{margin:0;font:400 15px/1.45 var(--kd-b);color:var(--kd-fg)}
.kd-tool .kd-tp{color:var(--kd-mute);font-size:13px}
.kd-tool a{justify-self:start;font:600 15px var(--kd-b);color:var(--kd-fg);border:1px solid #4a4a52;border-radius:12px;padding:10px 14px;text-decoration:none}
.kd-pkg a:focus-visible,.kd-talk a:focus-visible,.kd-tool a:focus-visible{outline:3px solid var(--kd-lead);outline-offset:3px}
.of-tc .pill:not(.pill-dark){border:1px solid var(--ink)}
/* Leistungsbedingungen */
.of-terms{max-width:820px}
.of-terms h2.t-h3{margin:28px 0 8px}
.of-terms p{margin:0 0 10px;line-height:1.6}
/* KI-Duell Ergebnis, Layout-Fix 11.11.2026 (Luigi): eine zentrierte Spalte, Frage + Paket + Gespräch in einer Karte */
#kd-card.kd-scr{align-items:center}
#kd-card.kd-scr>*{width:100%;max-width:640px;box-sizing:border-box}
#kd-card .kd-card,#kd-card .kd-rank,#kd-card .kd-offer,#kd-card .kd-tool{max-width:640px}
.kd-offer{margin-top:clamp(6px,1.2vw,14px)}
.kd-pkg{gap:14px}
.kd-pkg .kd-pkg-q{font:900 clamp(28px,3.4vw,40px)/1 var(--kd-d);font-stretch:112%;letter-spacing:-.025em;margin:0;color:var(--kd-fg);text-wrap:balance}
.kd-pkg .kd-pkg-sub{margin:-2px 0 2px;font:500 17px/1.4 var(--kd-b);color:#d9d6d0}
.kd-pkg .kd-talk{margin-top:4px;padding:16px 0 0;border:0;border-top:1px solid var(--kd-line);border-radius:0;background:none}
.of-talk .ck-row{align-items:end}