/* Vergleichsseite (us-llc-vergleich.html) und Cockpit-Bilder – ergänzt main.css */

.cmp-wrap { margin-top: 8px; border: 1px solid var(--border-2); border-radius: var(--radius-xl); overflow: hidden; background: rgba(255,255,255,0.015); }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-weight: 500; background: rgba(255,255,255,0.02); }
.cmp tbody th { font-weight: 600; color: var(--text); width: 18%; }
.cmp td { color: var(--text-2); }
.cmp .is-us { background: rgba(124,58,237,0.09); color: var(--text); }
.cmp thead .is-us { color: #c4b5fd; background: rgba(124,58,237,0.16); }
.cmp .mark { display: inline-flex; align-items: center; gap: 8px; }
.cmp .mark svg { width: 16px; height: 16px; flex: none; }
.cmp .yes svg { color: #34d399; }
.cmp .part svg { color: #fbbf24; }
.cmp .no svg { color: #6b7280; }
.cmp-note { margin-top: 14px; font-size: 0.85rem; color: var(--dim); }

@media (max-width: 860px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tr { border-bottom: 1px solid var(--border-2); padding: 6px 0 10px; }
  .cmp tr:last-child { border-bottom: 0; }
  .cmp tbody th { width: auto; padding: 14px 16px 6px; font-size: 1.02rem; }
  .cmp td { border: 0; padding: 6px 16px; display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; }
  .cmp td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
  .cmp td.is-us { border-radius: 8px; margin: 4px 0; }
}

.shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-2); background: #050816; box-shadow: 0 30px 80px -30px rgba(76, 29, 149, 0.55); }
.shot img { display: block; width: 100%; height: auto; }
.shot-caption { margin-top: 10px; font-size: 0.82rem; color: var(--dim); }
.shot-hero { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: end; }
.shot-phone { border-radius: 28px; border-width: 6px; border-color: #1f2937; }
@media (max-width: 860px) {
  .shot-hero { grid-template-columns: 1fr; }
  .shot-phone { display: none; }
}

.feature-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.feature-shot h3 { font-size: 1.15rem; margin: 16px 0 6px; }
.feature-shot p { color: var(--text-2); font-size: 0.95rem; margin: 0; }
@media (max-width: 760px) { .feature-shots { grid-template-columns: 1fr; } }

.q-list { display: grid; gap: 14px; counter-reset: q; }
.q-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.q-item::before { counter-increment: q; content: counter(q, decimal-leading-zero); font-family: var(--font-mono); color: #a78bfa; font-size: 0.9rem; padding-top: 3px; }
.q-item h3 { font-size: 1.05rem; margin: 0 0 6px; }
.q-item p { margin: 0; color: var(--text-2); font-size: 0.95rem; }

/* Preisliste (leistungen.html) */
.cmp-preise tbody th { width: 30%; }
.cmp-preise tbody th a { color: var(--text); text-decoration: none; }
.cmp-preise tbody th a:hover { color: var(--purple-2); }
.cmp-preise td.is-us { white-space: nowrap; font-weight: 600; width: 22%; }
.cmp-group th { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-2) !important; background: rgba(255,255,255,0.02); padding-top: 22px !important; }
@media (max-width: 860px) {
  .cmp-preise td.is-us { white-space: normal; width: auto; }
  .cmp-group th { padding: 18px 16px 6px !important; }
}