/* ───────────── analysis_navbar.css ─────────────
   Glasige Dark-Mode-Navbar – Namensraum: an-
   100 % fluid, ausschliesslich relative Grössen
   ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');

:root{
  --an-nav-h        : clamp(5.75rem, 8.5vh + 1rem, 8.25rem);
  --an-nav-pad-x    : clamp(1.25rem, 3vw + .5rem, 3.5rem);

  --an-btn-pad-y    : .45em;
  --an-btn-pad-x    : 1.5em;
  --an-btn-br       : 9999rem;
  --an-btn-bw       : .14rem;

  --an-title-fs     : clamp(1.6rem, 2.6vw + .5rem, 2.4rem);
  --an-logo-h       : clamp(2.8rem, 6vw, 4.2rem);
}

*,*::before,*::after{box-sizing:border-box}

.an-navbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  height:var(--an-nav-h);

  padding:
    env(safe-area-inset-top)
    calc(var(--an-nav-pad-x) + env(safe-area-inset-right))
    0
    calc(var(--an-nav-pad-x) + env(safe-area-inset-left));

  backdrop-filter:var(--an-blur);
  -webkit-backdrop-filter:var(--an-blur);
  background:hsla(230 4% 14% /.55);
  box-shadow:0 .07em .7em hsla(0 0% 0% /.45);
  transition:transform .35s ease,box-shadow .35s ease;
}

/* ───── Zurück-Button ───── */
.an-nav-btn{
  display:inline-flex;align-items:center;gap:.4em;
  padding:var(--an-btn-pad-y) var(--an-btn-pad-x);
  border:var(--an-btn-bw) solid var(--an-accent);
  border-radius:var(--an-btn-br);
  background:transparent;color:var(--an-accent);
  text-decoration:none;font-size:1rem;font-weight:600;
  font-family:inherit;cursor:pointer;

  transition:background .3s,color .3s,transform .3s,box-shadow .3s;
}
@media (hover:hover){
  .an-nav-btn:hover{
    background:var(--an-accent);color:#fff;
    transform:translateY(-.125em);
    box-shadow:0 .35em .85em -.25em var(--an-accent);
  }
}
@media (hover:none){
  .an-nav-btn:active{
    background:var(--an-accent);color:#fff;
    transform:scale(.96);
  }
}

/* ───── Titel ───── */
.an-nav-title{
  flex:1 1 auto;
  text-align:center;
  font-size:var(--an-title-fs);
  line-height:1;
  font-weight:700;
  color:var(--an-accent);
  user-select:none;pointer-events:none;
  padding-inline:.5em;
}

/* ───── Logo ───── */
.an-logo img{
  height:var(--an-logo-h);width:auto;display:block;
}

/* Kompaktere Variante für extrem niedrige Viewports */
@media (max-height:30rem){
  :root{
    --an-nav-h    : clamp(4.5rem, 8vh, 5.5rem);
    --an-title-fs : clamp(1.4rem, 2.2vw + .4rem, 1.9rem);
    --an-logo-h   : clamp(2.4rem, 5.8vw, 3.6rem);
  }
}