/* Startseite V3.18: nur der Kompass. Farben wie im Intranet (Navy, Teal, Orange). */
:root{--tief:#0b2438;--navy:#163a5f;--teal:#167c78;--orange:#f79239;--hell:#f1f5f7;--linie:#5d7d9c}
*{box-sizing:border-box}
html,body{height:100%}
body.kompass-seite{margin:0;background:var(--tief);color:#fff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.kompass-buehne{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2.5rem,7vh,4.5rem);padding:2rem 1rem 3rem}
.kompass-titel{margin:0;font-size:clamp(1.25rem,3.6vw,1.9rem);font-weight:800;letter-spacing:.01em;text-align:center}

.kompass{position:relative;width:min(64vw,56vh,520px);aspect-ratio:1}
.kompass-rose{position:absolute;inset:0;width:100%;height:100%;display:block}
.ring-aussen{fill:none;stroke:var(--linie);stroke-width:2}
.ring-innen{fill:#0f2d47;stroke:#2a4a69;stroke-width:1.5}
.teilung line{stroke:#44627f;stroke-width:1.5}
.teilung line.lang{stroke:#9fb6cc;stroke-width:2.5}
.stern polygon{fill:#1b4166}
.nadel{transform-origin:200px 200px;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.nadel-spitze{fill:var(--orange)}
.nadel-ende{fill:#8ea5bb}
.nabe{fill:var(--tief);stroke:#fff;stroke-width:3}

/* Die drei Ziele sitzen auf dem Ring: oben, unten rechts, unten links */
.kompass-ziel{position:absolute;transform:translate(-50%,-50%);display:block;min-width:9.5rem;padding:.7rem 1.1rem;text-align:center;text-decoration:none;
  background:#fff;color:var(--navy);border:3px solid #fff;border-radius:999px;line-height:1.2;transition:background .15s,color .15s,border-color .15s}
.kompass-ziel b{display:block;font-size:1.05rem;font-weight:800;white-space:nowrap}
.kompass-ziel small{display:block;font-size:.8rem;color:#4c6377;white-space:nowrap}
.kompass-ziel:hover,.kompass-ziel:focus-visible,.kompass-ziel.aktiv{background:var(--orange);border-color:var(--orange);color:#14222e}
.kompass-ziel:hover small,.kompass-ziel:focus-visible small,.kompass-ziel.aktiv small{color:#3b2a12}
.kompass-ziel:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ziel-login{left:50%;top:0}
.ziel-kontakt{left:93.3%;top:75%}
.ziel-mitglied{left:6.7%;top:75%}

@media (max-width:520px){
  .kompass{width:min(60vw,46vh)}
  .kompass-ziel{min-width:0;padding:.55rem .85rem}
  .kompass-ziel b{font-size:.95rem}
  .kompass-ziel small{font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){.nadel,.kompass-ziel{transition:none}}