/* Brücken-Stylesheet für die Vergleichsseiten (vergleich/*.html).
   Diese 19 Seiten liefen bis 2026-08-29 auf einem eigenen Design-System
   (pilot-neu.css) mit eigenem Header und Footer — für Besucher war das eine
   fremde Website, und wegen ".reveal{opacity:0}" ohne zugehöriges Skript war
   der komplette Seitenkörper unsichtbar.
   Sie laufen jetzt auf styles.css. Diese Datei ergänzt nur die Bausteine,
   die es dort nicht gibt: Vergleichstabelle, Merkmalskacheln, schmaler
   Container. Reihenfolge: styles.css -> seo.css -> vergleich.css. */

:root{ --sans: var(--font); }

.container--narrow{ max-width:920px; }

.skip{ position:absolute; left:-999px; top:0; background:var(--blue-500); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; z-index:100; }
.skip:focus{ left:0; }

/* ---------- Vergleichstabelle ---------- */
.cmp{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.cmp th, .cmp td{ padding:13px 16px; text-align:left; font-size:.95rem; }
.cmp thead th{ background:var(--navy-800); color:#fff; font-weight:600; font-size:.85rem; }
.cmp thead th.us{ background:var(--teal-500); color:#04231a; }
.cmp tbody tr + tr{ border-top:1px solid var(--line); }
.cmp td.y{ color:#0c7a56; font-weight:700; }
.cmp td.n{ color:var(--muted); }
.cmp td.feat-name{ font-weight:600; color:var(--navy-800); }
/* Auf schmalen Displays scrollt die Tabelle in ihrem eigenen Rahmen,
   statt die Seite quer zu schieben. */
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:640px){
  .cmp th, .cmp td{ padding:10px 12px; font-size:.88rem; }
  .cmp{ min-width:520px; }
}

/* ---------- Merkmalskacheln ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; height:100%; }
.feat:hover{ border-color:var(--blue-300); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.feat .ic{ width:38px; height:38px; border-radius:10px; background:rgba(22,192,137,.12); color:#0c7a56;
  display:grid; place-items:center; font-weight:700; margin-bottom:12px; }
.feat h3, .feat h4{ font-family:var(--font); font-weight:700; font-size:1.05rem; margin:0 0 6px; }
.feat p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
@media (max-width:940px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .feat-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ (details/summary) ---------- */
.faq{ max-width:820px; margin:0 auto; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:2px 20px; margin-bottom:10px; }
.faq details summary{ cursor:pointer; font-weight:600; color:var(--navy-800); padding:16px 0;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq details summary::-webkit-details-marker{ display:none; }
.faq details summary::after{ content:"+"; color:var(--blue-500); font-size:1.3rem; flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:0 0 16px; color:var(--ink-soft); }

/* Trennlinien-Band unter dem Inhalt (ersetzt .ic-0fdc4e3c aus index-inline.css,
   das auf diesen Seiten nie geladen wurde) */
.band-lines{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------- Hero der Vergleichsseiten ---------- */
/* styles.css setzt .hero h1{max-width:15ch} fuer das zweispaltige Startseiten-
   Layout. Auf den zentrierten Vergleichs-Heros erzeugt das eine linksbuendige
   Ueberschrift ueber zentriertem Text. */
.hero.page-hero .center h1{ max-width:24ch; margin-left:auto; margin-right:auto; }
.hero.page-hero .center .lead{ max-width:68ch; margin-left:auto; margin-right:auto; }
.hero.page-hero .center .hero-actions{ justify-content:center; }
.hero.page-hero .container{ padding-top:70px; padding-bottom:78px; }
.hero h1 em{ font-style:italic; color:#3EE0A6; }
.hero .eyebrow{ color:#8FC9FF; letter-spacing:.14em; }

/* CTA-Band: die Vergleichsseiten nutzen .hero-actions statt eines eigenen
   Button-Containers — hier muss zentriert werden. */
.cta-band .hero-actions{ justify-content:center; margin-top:26px; }