/* achsen.css — die zwei Leitern, örtlich und zeitlich. */

.achsen{
  position:fixed; right:14px; bottom:64px; z-index:47;
  width:min(340px,92vw); max-height:min(70vh,620px); overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  font-family:inherit; color:var(--txt);
}
.achsen[hidden]{display:none}

.ax-kopf{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel); z-index:1;
}
.ax-kopf b{font-size:12px; letter-spacing:1px}
.ax-zu{
  background:none; border:0; color:var(--mut); cursor:pointer;
  font-size:14px; font-family:inherit; padding:2px 6px;
}
.ax-zu:hover{color:var(--txt)}

.ax-satz{margin:10px 12px; font-size:11px; line-height:1.5; color:var(--les)}
.ax-teil{padding:0 12px 12px}
.ax-teil h3{
  margin:8px 0 7px; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan);
}

.ax-leiter{display:flex; gap:4px; flex-wrap:wrap}
.ax-sprosse{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center;
  gap:3px; cursor:pointer; font-family:inherit;
  background:var(--tief); border:1px solid var(--line); border-radius:8px;
  padding:7px 4px; color:var(--les);
}
.ax-sprosse i{font-style:normal; font-size:15px; line-height:1}
.ax-sprosse span{font-size:9px; letter-spacing:.3px; text-align:center; line-height:1.2}
.ax-sprosse:hover:not(:disabled){border-color:var(--gelb); color:var(--txt)}
.ax-sprosse.an{
  border-color:var(--gelb); background:var(--panel3); color:var(--txt);
  box-shadow:inset 0 -2px 0 var(--gelb);
}
/* Nicht verstecken, nur ausgrauen: man soll sehen, was gerade fehlt. */
.ax-sprosse.aus{opacity:.34; cursor:default}

.ax-was{
  margin:8px 0 0; font-size:11px; line-height:1.5; color:var(--les);
  min-height:2.6em;
}
.ax-fuss{
  margin:0; padding:10px 12px; border-top:1px solid var(--line);
  font-size:10px; line-height:1.5; color:var(--mut);
}

@media (max-width:640px){
  .achsen{right:8px; left:8px; width:auto; bottom:76px}
  .ax-sprosse span{font-size:8px}
}

/* Die Doktrin-Zeile: warum es hier kein Micro-Management gibt.
   Steht bei den Achsen, weil genau dort die Frage aufkommt. */
.ax-doktrin{ border-left:2px solid var(--gelb); padding-left:10px }
.ax-doktrin b{ color:var(--les) }