/* ==========================================================================
   timemywork — Preise-Seite (Karten-Basis in app.scss)
   Dezente Akzente: Editionsfarben (Basic stahlblau hell, Plus stahlblau,
   Pro gold), Staffel mit Ersparnis, aufklappbarer Vergleich mit Filter.
   ========================================================================== */
.page-pricing .ed-basic{--ec:#80A2BE}
.page-pricing .ed-plus{--ec:var(--brand)}
.page-pricing .ed-pro{--ec:#E0A100}

/* ------------------------------ HERO ------------------------------ */
.ed-hero{position:relative;isolation:isolate;padding:clamp(40px,6vw,76px) 0 clamp(48px,6vw,72px)}
.ed-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--brand) 16%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--brand) 16%,transparent) 1px,transparent 1px);
  background-size:34px 34px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 75%);mask-image:linear-gradient(to bottom,#000 30%,transparent 75%);
}
.eh-head{text-align:center;max-width:720px;margin:0 auto}
.eh-head .promo-pill{margin-bottom:22px}
.ed-hero .ed-grid{margin-top:52px}

/* Karten: farbiger Streifen oben, Pro mit Gold-Akzent */
.page-pricing .ed-card{overflow:visible}
.page-pricing .ed-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:var(--radius) var(--radius) 0 0;background:var(--ec)}
.page-pricing .ed-card .ed-tag{color:var(--ec)}
.page-pricing .ed-pro .ed-tag{color:#B87F00}
[data-theme="dark"] .page-pricing .ed-pro .ed-tag{color:#F7C948}
.page-pricing .ed-card li svg{color:var(--ec)}
.page-pricing .ed-pro li svg{color:#C98B00}
.page-pricing .ed-price .amt{font-size:2.5rem}
.ed-flag-pro{display:inline-flex;align-items:center;gap:5px;left:auto;right:30px;background:linear-gradient(135deg,#F7C948,#E08A00);color:#2A1A00}
.ed-flag-pro svg{width:12px;height:12px;stroke-width:3}
.page-pricing .ed-pro:hover{box-shadow:0 26px 60px -30px rgba(224,138,0,.55)}

/* ------------------------------ STAFFEL ------------------------------ */
.tier-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;max-width:980px;margin:0 auto}
/* Treppe: jede Stufe etwas höher → "je mehr, desto günstiger" */
.tier-step{
  display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  padding-top:calc(22px + var(--step) * 22px);transition:transform .22s,box-shadow .22s;
}
.tier-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.tier-step:last-child{border-color:color-mix(in srgb,var(--teal) 45%,var(--border));background:linear-gradient(170deg,color-mix(in srgb,var(--teal) 8%,var(--surface)),var(--surface) 60%)}
.tier-users{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.02rem}
.tier-users svg{width:20px;height:20px;color:var(--teal)}
.tier-prices{display:flex;flex-direction:column;gap:8px}
.tier-price{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:var(--surface-2);border-left:3px solid var(--ec)}
.tp-name{font-size:.84rem;font-weight:600;color:var(--text-muted);min-width:44px}
.tier-price b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.tp-save{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--surface));padding:3px 8px;border-radius:999px}
.tiers-note{max-width:980px;margin:18px auto 0;text-align:center;font-size:.86rem;color:var(--text-muted)}
.addons-lead{color:var(--text-muted);margin:-6px 0 18px;font-size:.96rem}
.ed-addons{margin-top:52px}

/* ------------------------------ VERGLEICH ------------------------------ */
.compare-sec{background:var(--surface-2);border-top:1px solid var(--border)}
.cmp-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cmp-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.cmp-seg button{border:none;background:none;padding:8px 16px;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--text-muted);transition:background .18s,color .18s}
.cmp-seg button.on{background:var(--brand);color:#fff}
[data-theme="dark"] .cmp-seg button.on{color:#0B1218}
.cmp-toggle-all{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:600;color:var(--text)}
.cmp-toggle-all:hover{border-color:var(--brand);color:var(--brand)}

/* overflow:clip statt auto, damit der Tabellenkopf beim Scrollen kleben bleibt */
.cmp-wrap{overflow:clip;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;font-size:.95rem}
.cmp thead th{
  position:sticky;top:74px;z-index:3;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(8px);
  padding:16px 20px;text-align:center;font-size:1.05rem;border-bottom:2px solid var(--border);
}
.cmp thead th:first-child{text-align:left;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.cmp thead th[class*="ed-"]{box-shadow:inset 0 3px 0 var(--ec)}
.cmp thead th.hl{color:var(--brand)}
.cmp thead th small{display:block;font-size:.76rem;font-weight:500;color:var(--text-muted);margin-top:3px}
/* Plus-Spalte dezent hinterlegt */
.cmp td.ed-plus,.cmp thead th.ed-plus{background-color:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.cmp tbody th{text-align:left;font-weight:500;padding:12px 20px;border-bottom:1px solid var(--border);color:var(--text)}
.cmp tbody td{text-align:center;padding:12px 20px;border-bottom:1px solid var(--border)}
.cmp-row{transition:background .15s}
.cmp-row:hover th,.cmp-row:hover td{background-color:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.cmp .yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ec);color:#fff}
.cmp .yes svg{width:15px;height:15px;stroke-width:3}
.cmp .no{display:inline-grid;place-items:center;color:var(--border)}
.cmp .no svg{width:18px;height:18px}
.addon-pill{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--teal-soft);color:var(--teal)}

/* Gruppenzeile: aufklappbar, mit Zusammenfassung je Edition */
.cmp .cmp-group th,.cmp .cmp-group td{background:var(--surface-2);padding:10px 20px;border-bottom:1px solid var(--border)}
.cmp .cmp-group td.ed-plus{background:color-mix(in srgb,var(--brand) 7%,var(--surface-2))}
.cmp-g-btn{display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;padding:0;text-align:left;color:var(--text);font-weight:600;font-size:.95rem}
.cmp-g-ic{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.cmp-g-ic svg{width:17px;height:17px}
.cmp-g-n{font-size:.72rem;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 8px}
.cmp-g-chev{width:16px;height:16px;margin-left:auto;color:var(--text-muted);transition:transform .2s}
.cmp-g.closed .cmp-g-chev{transform:rotate(-90deg)}
.cmp-g.closed .cmp-row{display:none}
.cmp-g-btn:hover .cmp-g-name{color:var(--brand)}
.cmp-sum{display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.cmp-sum i{display:block;width:56px;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--ec) var(--pct),var(--border) var(--pct))}
/* Filter „Nur Unterschiede“ */
.cmp.diff .cmp-row.same{display:none}
.cmp.diff .cmp-g.all-same{display:none}

.footnotes{margin-top:24px;font-size:.84rem;color:var(--text-muted)}
.footnotes h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:var(--text-muted)}
.footnotes p{margin-bottom:6px}

/* ------------------------------ BETRIEB ------------------------------ */
.hosting{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.host-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.host-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:34px 30px;transition:transform .22s,box-shadow .22s}
.host-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.host-icon{width:54px;height:54px;border-radius:15px;background:linear-gradient(145deg,var(--brand-light),var(--brand-strong));color:#fff;display:grid;place-items:center;margin-bottom:22px;box-shadow:0 12px 26px -14px var(--brand)}
.host-card:nth-child(2) .host-icon{background:linear-gradient(145deg,#4FB8B8,var(--teal));box-shadow:0 12px 26px -14px var(--teal)}
.host-icon svg{width:27px;height:27px}
.host-card h3{margin-bottom:10px}
.host-card p{color:var(--text-muted);font-size:.98rem}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width:920px){
  .host-grid{grid-template-columns:1fr}
  .tier-steps{grid-template-columns:1fr;max-width:480px}
  .tier-step{padding-top:22px}
}
@media (max-width:720px){
  /* schmal: kompakte Spalten statt Seitwärts-Scrollen, Kopf klebt weiter */
  .cmp{min-width:0;font-size:.82rem;table-layout:fixed}
  .cmp thead th:first-child,.cmp tbody th{width:auto}
  .cmp thead th:not(:first-child),.cmp td{width:64px}
  .cmp tbody th,.cmp tbody td,.cmp thead th,.cmp .cmp-group th,.cmp .cmp-group td{padding:9px 6px}
  .cmp tbody th{padding-left:12px;line-height:1.35}
  .cmp thead th{font-size:.86rem}
  .cmp thead th:first-child{font-size:.66rem;padding-left:12px}
  .cmp thead th small{font-size:.64rem}
  .cmp .yes{width:22px;height:22px}
  .cmp .yes svg{width:13px;height:13px}
  .addon-pill{font-size:.56rem;padding:3px 5px}
  .cmp-g-btn{gap:8px;font-size:.84rem}
  .cmp-g-ic{width:26px;height:26px}
  .cmp-g-n,.cmp-g-chev{display:none}
  .cmp-sum i{width:34px}
  .cmp-tools{justify-content:center}
}