/* Kompass-Menü für Start, Bitcoin und Ratgeber (Alwins Wahl 10.10.2026, Variante A des Prototyps).
   Eingebaut von seiten/menue.py; Seitenwechsel mit View Transitions nur zwischen diesen drei Seiten (menue.js). */

.kompass{
  --k-void:#02070A; --k-glas:rgba(8,18,20,.72);
  --k-gruen:#6BD3AA; --k-ink:#E9F2EF; --k-dim:#8FA3A0; --k-leise:#6E817E;
  --k-linie:rgba(107,211,170,.24); --k-soft:rgba(255,255,255,.09);
  --k-raus:cubic-bezier(.23,1,.32,1);      /* kräftiges ease-out */
  --k-weg:cubic-bezier(.77,0,.175,1);      /* ease-in-out für Bewegung über den Schirm */
  --k-nadel:cubic-bezier(.3,1.32,.55,1);   /* die Nadel schwingt leicht über */
  --k-fd:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --k-fb:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-family:var(--k-fb); color:var(--k-ink); -webkit-font-smoothing:antialiased;
}
.kompass *,.kompass *::before,.kompass *::after{box-sizing:border-box;}
.kompass a{color:inherit;text-decoration:none;}
.kompass button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
.kompass :focus-visible{outline:2px solid var(--k-gruen);outline-offset:3px;}
html.kompass-offen{overflow:hidden;}

/* ---------- Seitenwechsel: das angeklickte Bild wächst zum Kopfbild der neuen Seite ---------- */
@view-transition{navigation:auto;}
html:not(.kompass-geht) #ibs-lp .buehne-foto,
html:not(.kompass-geht) #ibs-rg .held-bild,
html:not(.kompass-geht) #ibs-btc .buehne-foto{view-transition-name:kompass-bild;}
html.kompass-geht .kompass-quelle{view-transition-name:kompass-bild;}
.kompass-knopf{view-transition-name:kompass-knopf;}
::view-transition-group(kompass-bild){animation-duration:.72s;animation-timing-function:cubic-bezier(.77,0,.175,1);}
::view-transition-old(root){animation:kompass-vt-raus .38s cubic-bezier(.23,1,.32,1) both;}
::view-transition-new(root){animation:kompass-vt-rein .55s cubic-bezier(.23,1,.32,1) .12s both;}
@keyframes kompass-vt-raus{to{opacity:0;transform:scale(.985);filter:blur(6px);}}
@keyframes kompass-vt-rein{from{opacity:0;transform:scale(1.012);filter:blur(6px);}}

/* ---------- Knopf oben rechts ---------- */
.kompass-knopf{position:fixed;z-index:1200;top:calc(14px + env(safe-area-inset-top,0px));right:clamp(14px,3vw,32px);
  display:flex;align-items:center;gap:10px;padding:5px 5px 5px 16px;border-radius:999px;
  background:var(--k-glas);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--k-soft);box-shadow:0 12px 40px -16px rgba(0,0,0,.8);
  transition:border-color .25s ease,transform .16s var(--k-raus);}
.kompass-knopf:active{transform:scale(.97);}
.kompass-wort{font-family:var(--k-fd);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--k-dim);transition:color .25s ease;}
.kompass-dial{width:38px;height:38px;border-radius:50%;display:block;background:radial-gradient(circle at 50% 40%,#10262A,#050C0E 70%);
  border:1px solid var(--k-linie);}
.kompass-dial svg{width:100%;height:100%;display:block;}
.kompass-dial .strich{stroke:var(--k-leise);stroke-width:1;}
.kompass-dial .strich.gross{stroke:var(--k-dim);stroke-width:1.6;}
.kompass-dial .nadel{fill:var(--k-gruen);transform-origin:50px 50px;transform:rotate(var(--k-w,0deg));}
.kompass-dial .nadel-gegen{fill:var(--k-leise);}
@media (hover:hover) and (pointer:fine){
  .kompass-knopf:hover{border-color:var(--k-linie);}
  .kompass-knopf:hover .kompass-wort{color:var(--k-ink);}
  .kompass-knopf:hover .nadel{animation:kompass-zittern .9s var(--k-raus);}
}
@keyframes kompass-zittern{0%{transform:rotate(var(--k-w))}25%{transform:rotate(calc(var(--k-w) + 14deg))}55%{transform:rotate(calc(var(--k-w) - 7deg))}100%{transform:rotate(var(--k-w))}}

/* ---------- Geöffnet: großer Kompass ---------- */
.kompass-buehne{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(16,42,44,.86),rgba(2,7,10,.96) 62%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s;}
.kompass.offen .kompass-buehne{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s;}
.kompass-instrument{--gr:min(76vmin,600px);position:relative;width:var(--gr);height:var(--gr);
  transform:scale(.9);opacity:0;transition:transform .5s var(--k-raus),opacity .35s ease;}
.kompass.offen .kompass-instrument{transform:none;opacity:1;}
.kompass-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.kompass-ring .skala{transform-origin:200px 200px;transform:rotate(-40deg);transition:transform .9s var(--k-raus);}
.kompass.offen .kompass-ring .skala{transform:none;}
.kompass-ring .strich{stroke:rgba(143,163,160,.35);stroke-width:1;}
.kompass-ring .strich.gross{stroke:var(--k-dim);stroke-width:1.8;}
.kompass-ring .kreis{fill:none;stroke:var(--k-linie);stroke-width:1;}
.kompass-ring .kreis.innen{stroke:var(--k-soft);}
.kompass-ring .zeiger{transform-origin:200px 200px;transform:rotate(var(--k-w,0deg));transition:transform .85s var(--k-nadel);}
.kompass-ring .zeiger .spitze{fill:var(--k-gruen);filter:drop-shadow(0 0 8px rgba(107,211,170,.7));}
.kompass-ring .zeiger .ende{fill:rgba(143,163,160,.45);}
.kompass-mitte{position:absolute;left:50%;top:50%;width:48%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 7%;text-align:center;pointer-events:none;
  background:radial-gradient(circle at 50% 35%,#0E2124,#03090B 72%);border:1px solid var(--k-linie);
  box-shadow:0 0 0 10px rgba(2,7,10,.55),0 24px 60px -20px #000;}
.kompass-mitte > span{transition:filter .2s ease,opacity .2s ease;}
.kompass-mitte.wechsel > span{filter:blur(3px);opacity:.25;}
.kompass-mitte .eyebrow{display:block;font-family:var(--k-fd);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--k-gruen);}
.kompass-mitte .titel{display:block;margin:10px 0 8px;font-family:var(--k-fd);font-weight:500;font-size:clamp(17px,2.4vmin,24px);line-height:1.15;color:var(--k-ink);text-wrap:balance;}
.kompass-mitte .zeile{display:block;font-size:clamp(12px,1.6vmin,14px);line-height:1.5;color:var(--k-dim);}

/* Die drei Ziele sitzen auf dem Ring; die Beschriftung zeigt immer nach außen */
.kompass-ziel{--r:calc(var(--gr) * .5);position:absolute;left:50%;top:50%;width:clamp(120px,22vmin,190px);
  transform:translate(-50%,-50%) rotate(var(--w)) translateY(calc(var(--r) * -1)) rotate(calc(var(--w) * -1)) scale(.6);
  opacity:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  transition:transform .6s var(--k-raus),opacity .35s ease;transition-delay:calc(var(--i) * 70ms + 120ms);}
.kompass-ziel.oben{flex-direction:column-reverse;}
.kompass.offen .kompass-ziel{transform:translate(-50%,-50%) rotate(var(--w)) translateY(calc(var(--r) * -1)) rotate(calc(var(--w) * -1));opacity:1;}
.kompass-bild{width:clamp(70px,13vmin,116px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:var(--fokus,center);
  border:1px solid var(--k-linie);box-shadow:0 0 0 6px rgba(2,7,10,.7),0 18px 40px -18px #000;
  filter:grayscale(.55) brightness(.75);transition:filter .3s ease,box-shadow .3s ease,transform .3s var(--k-raus);}
.kompass-name{display:flex;flex-direction:column;gap:3px;font-family:var(--k-fd);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.35;color:var(--k-dim);transition:color .2s ease;}
.kompass-hier{color:var(--k-gruen);font-size:9.5px;letter-spacing:.2em;}
.kompass-ziel:not([aria-current="page"]) .kompass-hier{display:none;}
.kompass-ziel.aktiv .kompass-bild,.kompass-ziel:focus-visible .kompass-bild{filter:none;transform:scale(1.06);
  box-shadow:0 0 0 6px rgba(2,7,10,.7),0 0 0 7px var(--k-gruen),0 0 40px rgba(107,211,170,.35);}
.kompass-ziel.aktiv .kompass-name{color:var(--k-ink);}
.kompass-zu{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:clamp(14px,3vw,32px);
  font-family:var(--k-fd);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--k-dim);
  padding:12px 18px;border:1px solid var(--k-soft);border-radius:999px;transition:color .2s ease,border-color .2s ease;}
.kompass-zu:hover{color:var(--k-ink);border-color:var(--k-linie);}
.kompass-tipp{position:absolute;z-index:1;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:0;right:0;margin:0;text-align:center;font-size:12.5px;color:var(--k-leise);}
@media (max-width:600px){
  .kompass-knopf{padding:4px 4px 4px 13px;gap:8px;}
  .kompass-wort{font-size:10px;letter-spacing:.18em;}
  .kompass-instrument{--gr:min(66vw,56vh);}
  .kompass-ziel{width:118px;}
  .kompass-bild{width:68px;}
  .kompass-name{font-size:9.5px;letter-spacing:.12em;}
  .kompass-mitte{width:56%;}
  .kompass-mitte .zeile{display:none;}
  .kompass-tipp{display:none;}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  .kompass *,.kompass *::before,.kompass *::after{transition-duration:.01ms !important;animation:none !important;}
}