/* VRAM-Rechner (Addon) — Komponenten-Styles.
   Farben ausschliesslich aus den Site-Tokens (tokens.css) — keine Hardcodes,
   Ausnahme: die Daten-Palette der Budget-Segmente (wird per JS/CSSOM gesetzt,
   in beiden Modi geprueft). Layout-Basis: base.css + components.css der Site. */

.vram-app{ display:grid; gap:1.25rem; }
.vram-app > h1{ margin:0; }
.vram-app .lead{ margin:0; }
.vram-app .card{ list-style:none; }
.vram-app .card h2{ margin:0 0 .6rem; font-size:1.2rem; }
.klein{ font-size:.82rem; color:var(--muted); margin:.6rem 0 0; }

/* Haftungsausschluss-Box */
.disclaimer{
  margin:0; font-size:.85rem; color:var(--text);
  background:var(--surface); border:1px solid var(--gold);
  border-radius:8px; padding:.6rem .85rem;
}
.disclaimer strong{ color:var(--gold); }

/* Kurz-Hilfe innerhalb eines Rechenblocks */
.rb-hilfe{ margin:.1rem 0 .55rem; }

/* Sekundaer-Button (Ghost) als Ergaenzung zum .btn der Site */
.btn-ghost{
  font:inherit; font-weight:600; cursor:pointer;
  color:var(--primary); background:transparent;
  border:1px solid var(--border); border-radius:999px; padding:.55rem 1.1rem;
}
.btn-ghost:hover{ border-color:var(--gold); }
.btn-mini{
  font:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
  color:var(--primary); background:transparent;
  border:1px solid var(--border); border-radius:999px; padding:.2rem .7rem;
}
.btn-mini:hover{ border-color:var(--gold); }
.btn-mini.ist-gefahr:hover{ border-color:var(--danger); color:var(--danger); }

/* Quellen-Panels */
[role="tabpanel"]{ padding-top:1rem; }
.q-zeile{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; }
.q-zeile .field{ flex:1 1 12rem; }
.q-zeile .q-wachsen{ flex:2 1 18rem; }
.q-zeile .btn, .q-zeile .btn-ghost{ flex:0 0 auto; }
.feinheiten{ margin-top:.7rem; }
.feinheiten summary{ cursor:pointer; font-size:.85rem; color:var(--muted); }
.feinheiten > *:not(summary){ margin-top:.6rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; }
.chips button{
  font:inherit; font-size:.82rem; cursor:pointer;
  color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:.3rem .8rem;
}
.chips button:hover{ border-color:var(--gold); }

/* Status- und Trefferlisten */
.status{ display:none; margin-top:.7rem; font-size:.88rem; border-radius:8px; padding:.6rem .8rem; background:var(--surface); }
.status.info{ display:block; border:1px solid var(--primary); }
.status.ok{ display:block; border:1px solid var(--primary); color:var(--primary); }
.status.fehler{ display:block; border:1px solid var(--danger); color:var(--danger); }
.status ul{ margin:.4rem 0 0; padding-left:1.2rem; color:var(--text); }
.status code{ color:var(--text); }

.treffer{ display:grid; gap:.35rem; margin-top:.7rem; max-height:18rem; overflow-y:auto; }
.treffer button{
  font:inherit; font-size:.88rem; text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem;
}
.treffer button:hover{ border-color:var(--gold); }
.treffer .meta{ color:var(--muted); font-size:.78rem; }

/* Modell-Karten (angelehnt an .cv-entry) */
.modell{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  margin-top:.7rem;
}
.modell__kopf{ display:flex; align-items:center; gap:.6rem .8rem; flex-wrap:wrap; padding:.6rem .9rem; }
.modell__kopf .farb-punkt{ width:.8rem; height:.8rem; border-radius:3px; flex:0 0 auto; }
.modell__kopf .name{ font-weight:700; }
.modell__kopf .summe{ margin-left:auto; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.primaer-label{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); }
.primaer-label input{ accent-color:var(--primary); }
.modell__koerper{ border-top:1px solid var(--border); padding:.8rem .9rem 1rem; }
.modell__koerper[hidden]{ display:none; }

/* Rechenweg-Bloecke in der Modell-Karte */
.rechenblock{ border:1px solid var(--border); border-radius:8px; padding:.6rem .8rem .7rem; margin-top:.7rem; }
.rechenblock h4{
  margin:0 0 .4rem; font-size:.7rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--primary);
}
.formel{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.3rem .45rem; margin-top:.3rem; }
.f-input{ display:grid; gap:.1rem; justify-items:center; }
.f-input input, .f-input select{
  width:6.2rem; font:inherit; font-size:.92rem; text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:8px; padding:.3rem .45rem;
}
.f-input select{ text-align:left; width:auto; min-width:6.2rem; }
.f-input label, .f-input .mini-label{ font-size:.72rem; color:var(--muted); font-weight:600; text-align:center; }
.f-input .mark{ display:block; font-size:.68rem; font-weight:700; }
.f-input .mark.ist-quelle{ color:var(--primary); }
.f-input .mark.ist-geaendert, .f-input .mark.ist-geschaetzt{ color:var(--gold); }
.f-op{ padding-top:.4rem; font-weight:700; color:var(--muted); }
.f-konst{ padding-top:.4rem; font-weight:600; font-variant-numeric:tabular-nums; }
.f-text{ padding-top:.4rem; font-size:.92rem; font-variant-numeric:tabular-nums; }
.f-erg{ padding-top:.4rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.f-erg.ist-final{ color:var(--primary); font-weight:700; }
.f-erg.ist-inaktiv{ color:var(--muted); text-decoration:line-through; }
.swa-info{ margin:.4rem 0 0; font-size:.8rem; color:var(--muted); }
.modell-summe{
  margin-top:.7rem; padding-top:.5rem; border-top:1px solid var(--border);
  font-size:.95rem; font-variant-numeric:tabular-nums;
}
.modell-summe b{ color:var(--primary); }

/* Feintuning-Bereich der Modell-Karte */
.feintuning-gitter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.7rem .9rem; margin-top:.5rem; }
.feintuning-gitter .field label{ font-size:.78rem; font-weight:600; }
.feintuning-gitter .field input{ padding:.35rem .5rem; font-size:.92rem; }
.check-zeile{ display:flex; align-items:center; gap:.45rem; font-size:.86rem; color:var(--text); font-weight:400; }
.check-zeile input{ accent-color:var(--primary); width:1rem; height:1rem; }
.modell-aktionen{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }

/* Globale Einstellungen */
.global-gitter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem 1.2rem; }
.schieber-paar{ display:grid; grid-template-columns:1fr 6rem; gap:.6rem; align-items:center; }
.schieber-paar input[type="range"]{ width:100%; accent-color:var(--primary); }

/* Metric-Cards */
.metriken{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.7rem; }
.metrik{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:.8rem .6rem; text-align:center;
}
.metrik b{ display:block; font-size:1.35rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.metrik span{ display:block; font-size:.76rem; color:var(--muted); margin-top:.15rem; }
.metrik.ist-rot b{ color:var(--danger); }
.metrik.ist-gruen b{ color:var(--primary); }

/* Budget-Leiste */
.budget{ position:relative; padding:1.5rem 0 1.7rem; margin-top:.7rem; }
.budget__leiste{
  display:flex; height:2.4rem; overflow:hidden; position:relative;
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
}
.budget__leiste.ist-ueber{ border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
.budget__segment{ height:100%; }
.budget__marker{ position:absolute; top:1.2rem; height:3rem; width:0; border-left:2px dashed var(--text); opacity:.75; pointer-events:none; }
.budget__label{ position:absolute; transform:translateX(-50%); font-size:.72rem; color:var(--muted); white-space:nowrap; }
.budget__label.ist-oben{ top:0; }
.budget__label.ist-unten{ bottom:0; }
.legende{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.punkt{ display:inline-block; width:.75rem; height:.75rem; border-radius:3px; margin-right:.35rem; vertical-align:-1px; }

/* Rechenweg (Ergebnis) */
.rechenweg-titel{ margin:1.2rem 0 .4rem; font-size:.95rem; color:var(--text); }
.rechenweg{
  border:1px solid var(--border); border-radius:8px; padding:.7rem .9rem;
  background:var(--bg); display:grid; gap:.35rem;
  font-size:.9rem; font-variant-numeric:tabular-nums;
}
.rechenweg .rw-zeile{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .4rem; }
.rechenweg .rw-op{ color:var(--muted); font-weight:700; }
.rechenweg .rw-erg{ font-weight:700; color:var(--primary); }
.rechenweg .rw-erg.ist-rot{ color:var(--danger); }
.rechenweg .rw-summe{ border-top:1px solid var(--border); padding-top:.4rem; margin-top:.15rem; }
.rechenweg .rw-notiz{ font-size:.78rem; color:var(--muted); flex-basis:100%; }

/* Hinweise */
.hinweise{ display:grid; gap:.4rem; margin-top:.9rem; }
.hinweis{ font-size:.85rem; border:1px solid var(--border); border-radius:8px; padding:.5rem .75rem; background:var(--bg); }
.hinweis.ist-warnung{ border-color:var(--gold); }
.hinweis.ist-kritisch{ border-color:var(--danger); color:var(--danger); font-weight:600; }
.hinweis.ist-dezent{ color:var(--muted); }

.aktionen{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }

@media (max-width:560px){
  .metrik b{ font-size:1.1rem; }
  .schieber-paar{ grid-template-columns:1fr 5rem; }
  .f-input input{ width:5.2rem; }
}