/* compare.css (O38-WEB, 17.10.2026): Vergleich „Warum eine App statt PDF, Ratgeber, Videokurs oder Agentur?“
   Startseite (voll) und Kaufseite (kompakt), Markup aus _tools/compare_lib.cjs. Tokens aus site.css (hell/dunkel).
   Ab 900 px Tabelle mit hervorgehobener Spalte „Unser Dubai“, darunter Karten je Kriterium. Keine Bewegung ausser Reveal (site.css). */
.cmp{margin-top:44px}
.cmp-t{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.4;color:var(--t-ink)}
.cmp-cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cmp-t th,.cmp-t td{text-align:left;vertical-align:top}
.cmp-t small{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--t-ink-3)}
.cmp-t .us small{color:var(--t-ink-2)}
.cv{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:14px}
.cv .ico{width:18px;height:18px;flex:none}
.cv-y{color:var(--t-ink)} .cv-y .ico{color:var(--t-accent)}
.cv-p{color:var(--t-ink-2)} .cv-p .ico{color:var(--t-ink-3)}
.cv-n{color:var(--t-ink-3)} .cv-n .ico{color:var(--t-ink-3);opacity:.8}
.cmp-note{margin:18px 0 0;max-width:760px;font-size:13px;line-height:1.5;color:var(--t-ink-3)}

/* Karten (Handy, Tablet hochkant) */
@media (max-width:899px){
  .cmp-t,.cmp-t tbody,.cmp-t tr,.cmp-t th,.cmp-t td{display:block}
  .cmp-t thead{display:none}
  .cmp-r{margin:0 0 14px;padding:18px 18px 8px;border:1px solid var(--t-line);border-radius:var(--t-r-lg);background:var(--t-surface);box-shadow:var(--t-s2)}
  .cmp-r th{font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.3;margin:0 0 12px}
  .cmp-r td{display:grid;grid-template-columns:minmax(118px,40%) 1fr;column-gap:12px;align-items:start;padding:9px 0;border-top:1px solid var(--t-line)}
  .cmp-r td::before{content:attr(data-l);grid-row:span 2;font-size:13px;font-weight:600;color:var(--t-ink-3);padding-top:1px}
  .cmp-r td small{margin-top:2px}
  .cmp-r td.us{margin:0 -10px 4px;padding:12px 10px;border:1px solid var(--t-accent);border-radius:var(--t-r-md);background:var(--t-accent-soft)}
  .cmp-r td.us::before{color:var(--t-accent-ink);font-weight:700}
  .cmp-r td.us + td{border-top:0}
  .cmp-cost td .cv{display:none}
}

/* Tabelle (Desktop) */
@media (min-width:900px){
  .cmp{border:1px solid var(--t-line);border-radius:var(--t-r-xl);background:var(--t-surface);box-shadow:var(--t-s2);padding:8px 10px 6px}
  .cmp-t th,.cmp-t td{padding:16px 14px;border-bottom:1px solid var(--t-line)}
  .cmp-t tbody tr:last-child th,.cmp-t tbody tr:last-child td{border-bottom:0}
  .cmp-t thead th{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink-3);padding-top:18px;padding-bottom:14px;border-bottom:1px solid var(--t-line-2)}
  .cmp-t tbody th{width:24%;font-weight:650;font-size:15.5px;letter-spacing:-.005em}
  .cmp-t td{width:15.2%}
  .cmp-t .us{background:var(--t-accent-soft);box-shadow:inset 1px 0 0 var(--t-accent),inset -1px 0 0 var(--t-accent)}
  .cmp-t thead th.us{color:var(--t-accent-ink);border-radius:var(--t-r-md) var(--t-r-md) 0 0;box-shadow:inset 1px 0 0 var(--t-accent),inset -1px 0 0 var(--t-accent),inset 0 1px 0 var(--t-accent)}
  .cmp-t tbody tr:last-child td.us{border-radius:0 0 var(--t-r-md) var(--t-r-md);box-shadow:inset 1px 0 0 var(--t-accent),inset -1px 0 0 var(--t-accent),inset 0 -1px 0 var(--t-accent)}
  .cmp-t tbody tr:hover th,.cmp-t tbody tr:hover td:not(.us){background:var(--t-surface-2)}
  .cmp-cost th,.cmp-cost td{font-weight:600}
  .cmp-cost td small{font-size:13.5px;color:var(--t-ink-2);margin-top:0}
  .cmp-cost td.us small{color:var(--t-ink);font-weight:700}
}

/* Kompakt (Kaufseite) */
.cmp-compact{margin-top:20px}
@media (min-width:900px){ .cmp-compact .cmp-t th,.cmp-compact .cmp-t td{padding:12px 12px} .cmp-compact .cmp-t tbody th{font-size:14.5px} }
.buy-cmp{margin-top:clamp(40px,5vw,64px)}
.buy-cmp h2{font-size:clamp(22px,2.4vw,28px)}
.buy-cmp .lede{margin-top:10px;font-size:16px}
.buy-cmp .lede a{color:var(--t-ink);text-decoration-color:var(--t-accent);text-underline-offset:3px}