/* ===========================================================
   admin-scale_styles.css – Seiteneigene Ergänzungen für admin-scale.html
   common.css muss VOR dieser Datei eingebunden werden.
   =========================================================== */

html,body{ height:100%; }
body{
  padding:24px 14px 60px;
  background: #1c1512;
}
.wrap{ max-width:900px; margin:0 auto; position:relative; }

.top-link{
  display:inline-block; color:rgba(255,255,255,.9); font-size:13px;
  margin-bottom:14px; text-decoration:none;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.top-link:hover{ color:#fff; }
.header-panel{
  background:rgba(20,10,8,.35);
  backdrop-filter: blur(3px);
  border-radius:16px;
  padding:14px 16px 16px;
  margin-bottom:18px;
}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; text-align:center; color:rgba(255,255,255,.85); margin:0 0 6px;
}
h1{
  font-family:'Cinzel', serif; font-weight:700; font-size:clamp(22px,6vw,30px);
  text-align:center; color:#fffaf0; margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}

/* Überschreibt common.css: hier etwas geringeres Innenpolster (22px statt 24px) */
.card{ padding:22px 20px; }

/* Überschreibt common.css button.ghost vollständig: hier ohne volle
   Breite, kleinere Schrift, heller statt transparenter Hintergrund
   (wird hier als einzelner Toolbar-Button verwendet, nicht als
   volle Zeile wie auf den anderen beiden Seiten) */
button.ghost{
  width:auto;
  font-family:'Work Sans',sans-serif; font-weight:500; font-size:13.5px; 
  padding:10px 16px; border-radius:12px; cursor:pointer;
  background:rgba(221, 218, 218, 0.85); border:1.5px solid var(--border); color:#413e3e;
  text-align: center;
}

.toolbar{
  display:flex; justify-content:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;
}

/* ---------- Die Skala ---------- */

/* Hinweis: "position:center top 100px;" ist kein gültiger Wert für
   die CSS-Eigenschaft "position" und wird vom Browser ignoriert.
   1:1 aus der Ausgangsdatei übernommen, um nichts ungefragt an der
   aktuellen Optik zu ändern – siehe Erklärung im Chat. */
.scale-outer{
  /* position:center top 100px;*/
  position:relative;
  max-width:680px;
  margin:0 auto;
  height:min(88vh, 1000px);
  min-height:460px;
}
.scale-frame{
  position:absolute; 
  inset:0 0 0 64px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.25);
  background-image: url('../sources/HH_Rangliste_Hintergrund.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.band-zone{
  position:absolute; left:0; right:0;
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
}
.band-zone .zone-icon{ width:30px; height:30px; flex:none; opacity:.9; }
.band-zone .zone-icon svg{ width:100%; height:100%; }
.band-zone .zone-label{
  font-family:'Cinzel', serif; font-weight:800; font-size:18px;
  color:#ffffff; text-shadow:rgba(0,0,0,1) 0 0 20px;
  letter-spacing:.02em;
}
.band-zone .zone-range{
  font-family:'JetBrains Mono', monospace; font-size:14px;
  color:rgba(255,255,255,.75); margin-left:auto; text-shadow:rgba(0,0,0,1) 0 0 10px;
}

.band-divider{
  position:absolute; left:0; right:0; height:1px;
  background:rgba(255,255,255,.35);
}

.axis-ticks{
  position:absolute; left:0; top:0; bottom:0; width:64px;
}
.tick{
  position:absolute; left:0; right:6px; display:flex; align-items:center; justify-content:flex-end;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:hsla(0, 0%, 0%, 0.6);
  transform: translateY(-50%);
}
.tick::after{
  content:''; position:absolute; right:-8px; width:8px; height:1px; background:rgba(0,0,0,.35);
}

.center-axis{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:rgba(255,255,255,.4);
  transform:translateX(-1px);
}

.marker{ position:absolute; left:50%; transform:translate(-50%, 50%); }
.marker .dot{
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:2.5px solid #241512;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  position:relative; z-index:2;
}
.marker .label{
  position:absolute; top:50%; display:flex; align-items:center; gap:6px;
  background:rgba(255,250,240,.96); border-radius:10px; padding:7px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  white-space:nowrap; transform:translateY(-50%);
}
.marker .label.right{ left:16px; }
.marker .label.left{ right:16px; }
.marker .label .icon{ width:22px; height:22px; flex:none; }
.marker .label .icon svg{ width:100%; height:100%; }
.marker .label .name{ font-weight:600; font-size:17px; }
.marker .label .pts{
  font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--muted);
}

@media (max-width: 560px){
  .scale-frame{ inset:0 0 0 46px; }
  .axis-ticks{ width:46px; }
  .tick{ font-size:9.5px; }
  .marker .label{ padding:4px 7px; }
  .marker .label .name{ font-size:11.5px; }
  .marker .label .pts{ font-size:10px; }
  .band-zone .zone-label{ font-size:12px; }
  .band-zone .zone-range{ font-size:9px; }
}