/* ───────────────────────── correlation.css ─────────────────────────
   Spezial-Styles für die Korrelationsanalyse-Seite
   Version 2025-06-05
   ----------------------------------------------------------------- */

/* ---------- Formular ---------- */
.an-form{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(.6rem,1.5vw,.9rem);
  align-items:flex-end;
  margin-bottom:2.2rem;
  padding:.8rem .9rem 1rem;
  background:rgba(46,47,50,.58);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--an-radius-md);
  box-shadow:0 4px 10px hsla(0 0% 0% /.22);
    z-index: 55; !important;
}

/* Label */
.an-form label{
  font-size:.95rem;
  font-weight:600;
  margin-right:.25rem;
  white-space:nowrap;
}

/* Select-Menüs */
.an-form select{
  appearance:none;
  font:inherit;
  padding:.45em 1.9em .45em .8em;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--an-radius-md);
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.05)),
    rgba(31,32,35,.65);
  color:var(--an-text-light);
  cursor:pointer;
  transition:background .25s,border .25s,box-shadow .25s;

}
body.dark .an-form select{
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.05)),
    rgba(46,47,50,.65);
}
.an-form select:hover{
  border-color:var(--an-accent);
  box-shadow:0 0 0 2px hsla(4 100% 60% /.35);
}
.an-form select:focus{
  outline:none;
  border-color:var(--an-accent);
  box-shadow:0 0 0 3px hsla(4 100% 60% /.45);
}

/* ▼ kleines Custom-Arrow (Pseudo-Element) */
.an-form select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fafafa' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .65em center;
  background-size:.8em;
}

/* Button */
.an-form button{
  font:inherit;
  padding:.55em 1.5em;
  border:none;
  border-radius:var(--an-radius-md);
  background:var(--an-accent);
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .25s,box-shadow .25s;
}
@media(hover:hover){
  .an-form button:hover{
    transform:translateY(-2px);
    box-shadow:0 .5em 1.2em -.3em var(--an-accent);
  }
}
@media(hover:none){
  .an-form button:active{
    transform:scale(.96);
  }
}

/* ---------- Plot-Bereich ---------- */
.an-plot{
  position:relative;
  background:rgba(31,32,35,.68);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--an-radius-lg);
  box-shadow:0 6px 18px hsla(0 0% 0% /.28);
  padding:1rem;
  overflow:auto;                 /* Plotly-o. Ä. kann größer sein */
  min-height:52vh;               /* Grund-Höhe für “nackte” Seiten */
}

/* Responsives Verhalten */
@media(max-width:768px){
  .an-form{
    flex-direction:column;
    align-items:stretch;
  }
  .an-plot{
    padding:.8rem;
    min-height:48vh;
  }
}

/* Print-Friendly (Diagramm allein) */
@media print{
  body *{visibility:hidden}
  .an-plot,
  .an-plot *{visibility:visible}
  .an-plot{position:absolute;inset:0;margin:0;box-shadow:none;border:none}
}