/* Prüfungs- und Testkompass — Darstellung. Keine Sachdaten. */
.wg-weg{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:1.5rem 0;padding:0;position:relative}
.wg-weg::before{content:"";position:absolute;left:8%;right:8%;top:1.35rem;height:3px;background:var(--linie);border-radius:2px}
.wg-weg::after{content:"";position:absolute;left:8%;top:1.35rem;height:3px;width:0;background:var(--akzent);border-radius:2px;animation:wg-linie 1.6s ease .3s forwards}
.wg-schritt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding:0 .6rem;position:relative;z-index:1;opacity:0;animation:wg-auf .5s ease forwards}
.wg-schritt:nth-child(1){animation-delay:.2s}.wg-schritt:nth-child(2){animation-delay:.8s}.wg-schritt:nth-child(3){animation-delay:1.4s}
.wg-nr{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--akzent);color:var(--papier);font-family:var(--mono);font-weight:700;border:4px solid var(--papier)}
.wg-schritt:nth-child(n+2) .wg-nr{background:var(--flaeche);color:var(--akzent);border-color:var(--akzent);border-width:2px}
.wg-schritt strong{font-size:1.1rem;margin-top:.3rem}
.wg-schritt span:last-child{font-size:.9rem;color:var(--weich);max-width:16rem}
.wg-trainer{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;background:var(--flaeche);border:2px solid var(--akzent);border-radius:12px;padding:1rem 1.3rem}
.wg-trainer h2{margin:.1rem 0 .3rem}
.wg-trainer p{margin:.2rem 0;max-width:42rem}
.wg-filterzeile{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 .4rem}
.wg-filter{font:inherit;font-size:.95rem;cursor:pointer;padding:.45rem .95rem;border-radius:999px;border:2px solid var(--linie);background:var(--flaeche);color:var(--tinte);transition:background .2s,border-color .2s,color .2s}
.wg-filter .mono{margin-left:.3rem}
.wg-filter:hover{border-color:var(--akzent)}
.wg-filter[aria-pressed=true]{background:var(--akzent);border-color:var(--akzent);color:var(--papier)}
.wg-filter[aria-pressed=true] .mono{color:var(--papier)}
html:not(.js) .wg-filterzeile,html:not(.js) #wg-zahl{display:none}
.wg-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:1rem;margin:1rem 0;align-items:start}
.wg-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:1rem 1.1rem;transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease}
.wg-karte:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.wg-karte[hidden]{display:none}
.wg-karte.wg-neu{animation:wg-auf .35s ease both}
.wg-karte h3{margin:.1rem 0 .5rem;font-size:1.15rem;line-height:1.3}
.wg-marke{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--akzent);margin:0}
.wg-bei-uns{margin:.3rem 0 .6rem}
.wg-bei-uns .mono{display:block}
.wg-karte details{border-top:1px solid var(--linie);margin-top:.7rem;padding-top:.5rem}
.wg-karte summary{cursor:pointer;font-family:var(--mono);font-size:.82rem;color:var(--weich)}
.wg-karte table{width:100%;font-size:.9rem;margin:.5rem 0}
.wg-karte th{width:6.5rem;text-align:left;vertical-align:top;font-weight:600;padding:.2rem .5rem .2rem 0}
.wg-karte td{padding:.2rem 0;overflow-wrap:anywhere}
.wg-karte details p{font-size:.9rem}
@keyframes wg-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wg-linie{to{width:84%}}
@media (max-width:640px){
  .wg-weg{grid-template-columns:1fr;gap:.9rem}
  .wg-weg::before,.wg-weg::after{display:none}
  .wg-schritt{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:baseline;gap:.2rem .6rem}
  .wg-schritt span:last-child{flex-basis:100%;max-width:none;padding-left:3.3rem}
}
@media (prefers-reduced-motion:reduce){
  .wg-weg::after{animation:none;width:84%}
  .wg-schritt,.wg-karte.wg-neu{animation:none;opacity:1}
  .wg-karte{transition:none}
}