/* Vergleichsseite: nur Seitenkomposition.
   Wiederverwendbare Filter, Produktkarten, Hinweise, Dialoge und Tabellen
   leben in components.css. Farben, Radien und Schatten kommen aus tokens.css. */

.comparison-page{
  padding-bottom:var(--space-10);
}

.comparison-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:clamp(var(--space-7),5vw,var(--space-10));
  align-items:center;
}

.comparison-hero::after{
  background:radial-gradient(circle,color-mix(in srgb,var(--color-primary-bright) 24%,transparent),transparent 70%);
}

.comparison-hero-copy{
  min-width:0;
}

.comparison-hero h1{
  max-width:760px;
}

.comparison-hero .page-lead{
  max-width:740px;
}

.comparison-hero-cta{
  display:inline-flex;
  width:auto;
  min-height:var(--control-height);
  align-items:center;
  gap:var(--space-3);
  margin-top:var(--space-6);
  padding-inline:var(--space-6);
  text-decoration:none;
}

.comparison-content{
  display:grid;
  gap:clamp(var(--space-9),6vw,80px);
  padding-top:var(--space-3);
}

.comparison-primer,
.decision-section,
.catalog-section,
.editorial-section,
.faq-section,
.comparison-table-section{
  min-width:0;
}

.type-guide{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.decision-picks{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.catalog-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
}

.catalog-filters{
  grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(140px,1fr));
}

.catalog-filters .search{
  grid-column:span 2;
}

.catalog-head-actions{
  display:grid;
  justify-items:end;
  gap:var(--space-3);
}

.view-switch{
  display:inline-grid;
  grid-template-columns:repeat(3,auto);
  padding:var(--space-1);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg-subtle);
}

.view-switch button{
  min-height:36px;
  padding:var(--space-2) var(--space-3);
  border:0;
  border-radius:calc(var(--radius-md) - var(--space-1));
  background:transparent;
  color:var(--color-text-muted);
  font:inherit;
  font-size:var(--text-12);
  font-weight:var(--weight-semibold);
  cursor:pointer;
  transition:background var(--transition-base),color var(--transition-base);
}

.view-switch button[aria-selected="true"]{
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:var(--shadow-xs);
}

.view-switch button:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.catalog-view-panel{
  min-width:0;
  margin-top:var(--space-6);
}

.catalog-view-panel[hidden]{
  display:none;
}

#catalog-filter-shell[hidden]{
  display:none;
}

.catalog-view-note{
  margin:0 0 var(--space-3);
  color:var(--color-text-muted);
  font-size:var(--text-13);
}

#catalog-index-panel .seo-product-directory{
  padding:var(--space-6);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-bg-subtle);
}

@media(min-width:1201px){
  .catalog-filters{
    grid-template-columns:minmax(220px,1.6fr) repeat(5,minmax(140px,1fr));
  }

  .catalog-filter-actions{
    display:grid;
    grid-column:6;
    grid-row:1/span 2;
    grid-template-rows:repeat(2,var(--control-height));
    align-content:space-between;
    justify-content:stretch;
    gap:var(--space-3);
    padding:var(--space-6) 0 0;
    border-top:0;
  }

  .catalog-filter-actions .btn{
    width:100%;
    height:var(--control-height);
    padding-inline:var(--space-2);
    white-space:nowrap;
  }
}

.editorial-section{
  width:100%;
  max-width:1080px;
}

.editorial-section>p{
  color:var(--color-text-muted);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
}

.editorial-section h3{
  margin-top:var(--space-7);
}

.seo-product-directory{
  margin:0;
}

.directory-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-7);
  margin-top:var(--space-6);
}

.directory-group{
  min-width:0;
}

.directory-group h3{
  margin:0 0 var(--space-3);
}

.directory-links{
  display:grid;
  gap:var(--space-2);
}

.directory-link{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
}

.directory-link b{
  overflow-wrap:anywhere;
}

.directory-link span{
  white-space:nowrap;
}

@media(max-width:1000px){
  .comparison-hero{
    grid-template-columns:1fr;
  }

  .comparison-stats{
    max-width:720px;
  }

  .catalog-filters{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .comparison-content{
    gap:var(--space-9);
  }

  .type-guide,
  .decision-picks,
  .directory-groups{
    grid-template-columns:1fr;
  }

  .catalog-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .catalog-filters .search{
    grid-column:1/-1;
  }

  .catalog-head-actions{
    width:100%;
    justify-items:stretch;
  }

  .view-switch{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .view-switch button{
    padding-inline:var(--space-2);
  }

  .directory-link{
    grid-template-columns:1fr;
  }

  .directory-link span{
    white-space:normal;
  }
}

@media(max-width:520px){
  .comparison-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .comparison-stats div:nth-child(3){
    grid-column:auto;
    border-top:0;
  }

  .surface-inverse .comparison-stats div:nth-child(3){
    border-color:var(--surface-inverse-line);
  }

  .comparison-stats div{
    min-height:78px;
    padding:var(--space-3);
  }

  .comparison-stats span{
    overflow-wrap:anywhere;
    font-size:var(--text-11);
  }

  .catalog-filters{
    grid-template-columns:1fr;
  }

  .catalog-filters .search{
    grid-column:auto;
  }
}