/* App-Vergleich. Farben aus shared/theme.css (hell Default, dunkel per Umschalter). */
.vg{margin:0;background:var(--c-night);color:var(--c-bone);font:400 16px/1.65 var(--font-sans)}
.vg *,.vg *::before,.vg *::after{box-sizing:border-box}
.vg a{color:inherit}
.vg-wrap{max-width:72rem;margin:0 auto;padding:0 1rem}
.vg-hero{padding:3rem 0 1.5rem}
.vg-crumbs{font-size:.8rem;color:var(--c-dim);margin-bottom:1rem}
.vg-eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--c-signalhi);margin:0}
.vg h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.05;margin:.5rem 0 1rem;overflow-wrap:break-word;hyphens:auto}
.vg-teaser{max-width:46rem;font-size:1.2rem;line-height:1.5;color:var(--c-dim);margin:0}
.vg h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,3vw,2rem);line-height:1.15;margin:0 0 .75rem}
.vg h3{font-size:1.02rem;margin:1.25rem 0 .5rem}
.vg-lead{font-size:1.12rem;line-height:1.5}
.vg-small{font-size:.86rem;line-height:1.5;color:var(--c-dim)}
.vg-sec{margin:2.5rem 0}
.vg-verdict{background:var(--c-panel);border:1px solid var(--c-line);border-left:5px solid var(--c-linehi);border-radius:14px;padding:1.25rem;margin:1rem 0 2rem}
.vg-verdict--self{border-left-color:#1f9d55}
.vg-verdict--other{border-left-color:var(--c-signal)}
.vg-bars{list-style:none;margin:1rem 0 .5rem;padding:0;display:grid;gap:.45rem}
.vg-bars li{display:grid;grid-template-columns:minmax(0,12rem) 1fr 3rem;gap:.6rem;align-items:center;font-size:.88rem}
.vg-bars em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.vg-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--c-line)}
.vg-bar i{background:#1f9d55}.vg-bar u{background:var(--c-signal);margin-left:auto}
.vg-quick{display:grid;gap:.75rem;margin:1.1rem 0 0;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.vg-quick dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-dim)}
.vg-quick dd{margin:.1rem 0 0;font-size:.95rem}
.vg-article{max-width:46rem;font-size:1.08rem;line-height:1.72}
.vg-article::after{content:"";display:block;clear:both}
.vg-article p{margin:0 0 1.05rem}
.vg-article h2{margin-top:2rem}
.vg-shot{margin:.3rem 0 1.2rem 1.5rem;float:right;width:13.5rem}
.vg-shot--l{float:left;margin:.3rem 1.5rem 1.2rem 0}
.vg-shot img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--c-linehi);box-shadow:0 10px 30px rgba(10,37,56,.2)}
.vg-shot figcaption{font-size:.78rem;line-height:1.4;color:var(--c-dim);margin-top:.5rem}
.vg-shot figcaption span{display:block;opacity:.8}
/* Kästchen */
.vg-box{display:inline-block;flex:none;width:20px;height:20px;border-radius:5px;border:1.5px solid var(--c-linehi);position:relative;vertical-align:-4px}
.vg-y{background:#1f9d55;border-color:#1f9d55}
.vg-y::after{content:"";position:absolute;left:5.5px;top:1.5px;width:6px;height:11px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(42deg)}
.vg-p{border-color:#c98a00;background:linear-gradient(135deg,#e0a500 50%,transparent 50%)}
.vg-n{background:var(--c-signal);border-color:var(--c-signal)}
.vg-n::before,.vg-n::after{content:"";position:absolute;left:8px;top:2.5px;width:2.4px;height:12px;background:#fff;transform:rotate(45deg)}
.vg-n::after{transform:rotate(-45deg)}
.vg-u{border-style:dashed;opacity:.7}
.vg-legend{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding:0;margin:0 0 1rem;font-size:.84rem;color:var(--c-dim)}
.vg-ticks{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.vg-ticks li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;line-height:1.35}
/* Kriterien: Desktop drei Spalten, Handy gestapelt */
.vg-group{border:1px solid var(--c-line);border-radius:12px;background:var(--c-panel);margin-bottom:.8rem;overflow:hidden}
.vg-group summary{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.85rem 1rem;cursor:pointer;font-weight:600}
.vg-group summary em{font-style:normal;font-weight:400;font-size:.84rem;color:var(--c-dim);text-align:right}
.vg-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:1rem;padding:.65rem 1rem;border-top:1px solid var(--c-line)}
.vg-row--head{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--c-dim)}
.vg-cell{display:grid;grid-template-columns:20px 1fr;gap:.55rem;align-items:start}
.vg-cell small{font-size:.8rem;line-height:1.4;color:var(--c-dim)}
.vg-who{display:none}
.vg-label{font-size:.95rem}
.vg-prices,.vg-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.vg-price,.vg-pcol{background:var(--c-panel);border:1px solid var(--c-line);border-radius:12px;padding:1rem;min-width:0;overflow-wrap:anywhere}
.vg-price h3,.vg-pcol h3{margin-top:0}
.vg-price--self{border-color:var(--c-gold);border-width:2px}
.vg-num{font-size:2rem;font-weight:700;margin:0;line-height:1.1}
.vg-price p{margin:.25rem 0}
.vg-facts{padding-left:1.1rem;margin:0 0 .6rem;font-size:.9rem;display:grid;gap:.3rem}
.vg-strong ul{padding-left:1.2rem;display:grid;gap:.3rem}
.vg-note{font-size:.84rem;line-height:1.5;color:var(--c-dim);border-top:1px solid var(--c-line);padding-top:1rem;margin:2rem 0}
.vg-near{display:flex;flex-wrap:wrap;gap:.5rem}
.vg-near a{border:1px solid var(--c-linehi);border-radius:999px;padding:.4rem .85rem;font-size:.88rem;text-decoration:none}
.vg-near a:hover{background:var(--c-panel)}
.vg-cta{background:#0a2538;color:#eef2f6;border-radius:16px;padding:2rem 1.25rem;text-align:center;margin:2.5rem 0 3rem}
.vg-cta p{max-width:36rem;margin:0 auto 1.2rem;color:#c8d6e3}
.vg-btn{display:inline-block;background:var(--c-gold);color:#0a2538!important;font-weight:700;border-radius:999px;padding:.8rem 1.5rem;text-decoration:none}
/* Hub: Desktop-Matrix, Handy-Karten */
.vg-matrix-wrap{overflow:auto;max-height:80vh;border:1px solid var(--c-line);border-radius:12px;background:var(--c-panel)}
.vg-matrix{border-collapse:separate;border-spacing:0;font-size:.82rem}
.vg-matrix th,.vg-matrix td{border-bottom:1px solid var(--c-line);padding:.3rem .32rem;text-align:center;background:var(--c-panel)}
.vg-matrix thead th{position:sticky;top:0;z-index:2}
.vg-matrix thead tr:nth-child(2) th{top:2rem}
.vg-m-g{font-weight:600;white-space:nowrap;border-left:1px solid var(--c-linehi)}
.vg-m-k{height:10.5rem;vertical-align:bottom;font-weight:400}
.vg-m-k span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.vg-matrix .vg-m-app{position:sticky;left:0;z-index:1;text-align:left;min-width:12.5rem;max-width:14rem;font-weight:600}
.vg-matrix thead .vg-m-app{z-index:3}
.vg-m-self th,.vg-m-self td{background:color-mix(in srgb,var(--c-gold) 22%,var(--c-panel))}
.vg-cards{display:none;gap:.6rem}
.vg-card{border:1px solid var(--c-line);border-radius:12px;background:var(--c-panel);padding:.8rem 1rem}
.vg-card--self{border:2px solid var(--c-gold)}
.vg-card summary{cursor:pointer;display:grid;gap:.1rem}
.vg-card summary span{font-size:.84rem;color:var(--c-dim)}
.vg-card h4{margin:.9rem 0 .4rem;font-size:.86rem}
.vg-more{display:block;margin-top:1rem;font-weight:600}
.vg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.6rem}
.vg-item{display:grid;gap:.1rem;background:var(--c-panel);border:1px solid var(--c-line);border-radius:12px;padding:.8rem 1rem;text-decoration:none}
.vg-item span{font-size:.82rem;color:var(--c-dim)}
.vg-item:hover{border-color:var(--c-linehi)}
.vg-req{display:grid}
.vg-reqrow{padding:.8rem 1rem;border-top:1px solid var(--c-line)}
.vg-reqrow p{margin:.35rem 0 0}
.vg-reqhead{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.vg-reqhead code{font-size:.74rem;color:var(--c-dim)}
.vg-prio{font-size:.7rem;border-radius:999px;padding:.05rem .5rem;border:1px solid var(--c-linehi)}
.vg-prio--muss{background:#0a2538;color:#fff;border-color:#0a2538}
@media (max-width:820px){
  .vg-matrix-wrap{display:none}.vg-cards{display:grid}
  .vg-row{grid-template-columns:1fr;gap:.45rem}
  .vg-row--head{display:none}
  .vg-label{font-weight:600}
  .vg-cell{grid-template-columns:20px 1fr;}
  .vg-who{display:block;grid-column:2;font-size:.76rem;font-weight:600;color:var(--c-dim);margin-bottom:-.4rem}
  .vg-cell .vg-box{grid-row:1 / span 2}
  .vg-prices,.vg-pair{grid-template-columns:1fr}
  .vg-shot,.vg-shot--l{float:none;width:min(70%,15rem);margin:1rem auto 1.4rem}
  .vg-bars li{grid-template-columns:1fr 3rem}
  .vg-bars .vg-bar{grid-column:1 / -1;grid-row:2}
  .vg-hero{padding-top:1.75rem}
  .vg-teaser{font-size:1.08rem}
  .vg-article{font-size:1.04rem}
}

.vg-tracknav{margin-top:1.1rem}
.vg-tracknav a[aria-current]{background:#0a2538;color:#fff;border-color:#0a2538}
.vg-rollout{font-size:.9rem;line-height:1.5;color:var(--c-dim);border:1px solid var(--c-line);border-radius:8px;padding:.75rem 1rem;margin:1.5rem 0}
.vg-matrix .vg-m-n{text-align:center;font-weight:600;font-variant-numeric:tabular-nums;font-size:.85rem;max-width:4.5rem}
.vg-facts .vg-box{vertical-align:-.15em}