/* ============================================================
   Kühlbox-Planer — Premium Design-System (geteilt von allen Seiten).
   Scope: alles unter .kp. Apple/Linear-Stil: hell, Tiefe, Glow, edle Typo.
   ============================================================ */
.kp{
  --ink:#0b1220; --ink2:#1e293b; --muted:#5b6b82; --faint:#94a3b8;
  --line:#e6edf5; --brand:#0284c7; --sky:#0ea5e9; --ind:#6366f1; --ok:#10b981; --amber:#d97706;
  --panel:#ffffff; --bg:#fbfdff;
  color:var(--ink2);
}
.kp ::selection{background:#bae6fd}
.kp-focus:focus-visible{outline:3px solid #0ea5e9;outline-offset:3px;border-radius:14px}

/* ---------- premium Tool-Header (ersetzt den grauen tools/base-Header) ---------- */
.kp-top{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(100% 120% at 85% -30%, #e0f2fe 0%, rgba(224,242,254,0) 55%), linear-gradient(180deg,#fbfdff,#fff)}
.kp-top-in{max-width:1120px;margin:0 auto;padding:26px 20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.kp-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#64748b;width:100%}
.kp-crumb a{color:#64748b;text-decoration:none}.kp-crumb a:hover{color:#0284c7}
.kp-top h1{margin:0;font-size:clamp(1.5rem,3.6vw,2rem);font-weight:820;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.kp-top .kp-sub{margin:2px 0 0;color:var(--muted);font-size:.98rem}
.kp-top-cta{margin-left:auto}

/* ---------- Typo ---------- */
.kp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#075985;background:rgba(14,165,233,.10);border:1px solid rgba(14,165,233,.22);padding:7px 14px;border-radius:999px}
.kp-eyebrow2{font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#0284c7}
.kp-h1{margin:0;font-weight:830;letter-spacing:-.025em;line-height:1.04;color:var(--ink);font-size:clamp(2.2rem,6vw,3.7rem)}
.kp-h2{margin:0;font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:810;letter-spacing:-.02em;color:var(--ink)}
.kp-h3{margin:0;font-size:1.15rem;font-weight:750;color:var(--ink)}
.kp-grad{background:linear-gradient(108deg,#0ea5e9 10%,#6366f1 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kp-lead{margin:0;color:var(--muted);font-size:1.05rem;line-height:1.6}
.kp-fine{font-size:12px;color:#64748b}

/* ---------- Buttons ---------- */
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:15px;
  font-weight:750;font-size:1rem;text-decoration:none;cursor:pointer;border:0;transition:transform .15s ease,box-shadow .2s ease,background .2s}
.kp-btn:active{transform:scale(.98)}
.kp-btn-primary{color:#fff;background:linear-gradient(120deg,#0ea5e9,#2563eb);box-shadow:0 12px 30px -10px rgba(37,99,235,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.kp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(37,99,235,.6)}
.kp-btn-buy{color:#fff;background:linear-gradient(120deg,#059669,#10b981);box-shadow:0 12px 30px -10px rgba(5,150,105,.5)}
.kp-btn-buy:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(5,150,105,.6)}
.kp-btn-ghost{color:#0f172a;background:#fff;border:1.5px solid var(--line)}
.kp-btn-ghost:hover{transform:translateY(-2px);border-color:#bae6fd;box-shadow:0 12px 26px -16px rgba(2,40,80,.35)}
.kp-btn-sm{min-height:42px;padding:0 16px;font-size:.9rem;border-radius:12px}

/* ---------- Cards / Panels / Glass ---------- */
.kp-panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.kp-glass{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.4));border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(6px);border-radius:24px;box-shadow:0 30px 70px -34px rgba(2,32,71,.4),inset 0 1px 0 rgba(255,255,255,.7)}
.kp-card{position:relative;display:flex;flex-direction:column;border-radius:22px;padding:24px;background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .18s ease,box-shadow .25s ease,border-color .2s}
.kp-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(2,40,80,.4);border-color:#bae6fd}
.kp-ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:25px;
  background:linear-gradient(180deg,#f0f9ff,#e0f2fe);border:1px solid #d8eefe}
.kp-ic.amber{background:linear-gradient(180deg,#fffbeb,#fef3c7);border-color:#fde68a}

/* ---------- Badges / Pills ---------- */
.kp-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:999px;background:#f1f5f9;color:#334155}
.kp-pill-sky{background:#e0f2fe;color:#075985}
.kp-pill-amber{background:#fef3c7;color:#92400e}
.kp-pill-rose{background:#ffe4e6;color:#9f1239}
.kp-affil{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#64748b}
.kp-affil b{font-weight:800;color:#92400e;background:#fef3c7;border-radius:5px;padding:1px 6px}
.kp-feat{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#92400e;background:#fef3c7;border:1px solid #fde68a;padding:3px 9px;border-radius:999px}

/* ---------- Inputs ---------- */
.kp-input,.kp-select{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:13px;padding:0 14px;font-size:16px;
  background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.kp-input:focus,.kp-select:focus{outline:none;border-color:#7dd3fc;box-shadow:0 0 0 4px rgba(14,165,233,.14)}
.kp-label{display:block;font-size:.82rem;font-weight:650;color:#475569;margin-bottom:5px}

/* ---------- Layout helpers ---------- */
.kp-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.kp-stack > * + *{margin-top:18px}
.kp-glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(99,102,241,.4),rgba(14,165,233,.18),transparent 72%);filter:blur(26px);pointer-events:none}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-reveal].kp-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .kp-float{animation:none!important}
}
.kp-float{animation:kp-float 6.5s ease-in-out infinite}
@keyframes kp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}