/* © 2026 Dennis Thielsch – Alle Rechte vorbehalten / All rights reserved.
   Gemeinsames Stylesheet für Klassik-Simulator (index.html), Spielerprofil (profil.html)
   und Abenteuer-Planer (planer.html). Farbgebung angelehnt an den klassischen DSO-
   Kampfsimulator (2013): Pergament/Sepia, Salbeigrün als Hintergrund, dunkles Braun. */
:root { --bg:#cfe1d1; --fg:#392719; --mut:#745238; --acc:#745238;
        --bar:#6f8f4f; --bar-loss:#b03b23; --card:#f2ead7; --line:#cdbb95;
        --inp:#fbf7ec; --inp2:#e7dcc3; --hl:#e3ead7; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
.wrap { max-width: 1000px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 22px; margin: 0; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.lang { display:flex; gap:6px; flex:0 0 auto; }
.flag { font-size:20px; line-height:1; background:none; border:1px solid transparent; border-radius:6px;
        cursor:pointer; padding:3px 7px; filter:grayscale(.7); opacity:.55; }
.flag:hover { opacity:.85; }
.flag.on { filter:none; opacity:1; border-color:var(--line); background:var(--inp2); }
.beta { margin:-2px 0 18px; padding:9px 12px; border:1px solid #b8901f; border-left-width:3px;
        border-radius:8px; background:rgba(212,175,55,.20); color:#5a3f28; font-size:13.5px; }
.beta:empty { display:none; }
.beta a { color:inherit; font-weight:600; text-decoration:underline; }
.foot { margin-top:36px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; }
.foot a { color:var(--mut); text-decoration:none; }
.foot a:hover { color:var(--acc); }

/* Seiten-Navigation (Simulator | Profil | Planer) */
.nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.nav a { padding:5px 11px; border:1px solid var(--line); border-radius:7px; background:var(--inp);
         color:var(--mut); text-decoration:none; font-size:13px; }
.nav a:hover { border-color:var(--acc); color:var(--fg); }
.nav a.on { background:var(--acc); color:#fff; border-color:var(--acc); }

.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:12px 14px; }
.panel.a { border-top:2px solid var(--bar); }
.panel.b { border-top:2px solid var(--bar-loss); }
.ph3 { font-weight:600; margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ph3 .hint { color:var(--mut); font-weight:400; font-size:13px; }
.ph3-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.panel h5 { margin:10px 0 4px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); font-weight:600; }

.ic { display:inline-flex; }
.ic-ph { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
         font-size:10px; font-weight:600; color:var(--fg); border:1.5px solid rgba(57,39,25,.4);
         background:rgba(57,39,25,.06); border-radius:50%; }
.ic-img { width:28px; height:28px; object-fit:contain; }

.modetoggle { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; font-weight:400; }
.modebtn { padding:3px 11px; border:0; background:var(--inp); color:var(--mut); cursor:pointer; font:inherit; font-size:12px; }
.modebtn + .modebtn { border-left:1px solid var(--line); }
.modebtn.on { background:var(--acc); color:#fff; }
.genrow[hidden] { display:none; }   /* hidden-Attribut schlägt .genrow display:flex */
.urow.auto .field { justify-content:flex-end; }
.urow.auto input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:var(--acc); }
.wavetabs { display:flex; flex-wrap:wrap; gap:4px; margin:2px 0 8px; align-items:center; }
.wavetab { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border:1px solid var(--line);
           border-radius:6px; background:var(--inp); color:var(--mut); cursor:pointer; font:inherit; font-size:13px; }
.wavetab.on { border-color:var(--acc); color:var(--fg); background:var(--hl); }
.wavetab .wx { color:var(--mut); font-size:11px; line-height:1; padding:1px 3px; border-radius:4px; }
.wavetab .wx:hover { color:var(--bar-loss); background:rgba(255,93,93,.12); }
.waveadd { padding:4px 9px; border:1px dashed var(--line); border-radius:6px; background:none;
           color:var(--acc); cursor:pointer; font:inherit; font-size:13px; }
.waveadd:hover { border-color:var(--acc); }
.genrow { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:3px 2px; margin-bottom:2px; }
.genrow select { min-width:210px; padding:5px 7px; border:1px solid var(--line); border-radius:6px;
                 background:var(--inp); color:var(--fg); font:inherit; }
.tip { position:fixed; z-index:50; max-width:300px; padding:7px 9px; pointer-events:none;
       background:var(--card); border:1px solid var(--acc); border-radius:7px; font-size:12.5px;
       line-height:1.45; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.tip .h { font-weight:600; margin-bottom:3px; }
.tip .r { color:var(--mut); }
.tip .e { color:var(--fg); }
.talentbtn { width:100%; margin:4px 0 2px; padding:5px 8px; border:1px solid var(--line);
             border-radius:6px; background:var(--inp); color:var(--fg); font:inherit; cursor:pointer; text-align:left; }
.talentbtn:hover { border-color:var(--acc); }
.talents { border:1px solid var(--line); border-radius:8px; padding:7px; margin-bottom:6px; background:var(--inp); }
.thead { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mut); margin-bottom:6px; }
.thead b { color:var(--fg); }
.thead a { margin-left:auto; color:var(--acc); cursor:pointer; font-size:12px; }
.trow { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:5px; }
.trow.locked { opacity:.4; }
.tcell { border:1px solid var(--line); border-radius:6px; padding:4px 5px; cursor:pointer;
         background:var(--card); min-height:40px; display:flex; flex-direction:column; justify-content:space-between; }
.trow.locked .tcell { cursor:not-allowed; }
.tcell:hover { border-color:var(--acc); }
.tcell.active { border-color:var(--acc); background:var(--hl); }
.tcell.nocombat { opacity:.62; }
.tcell .tn { font-size:11px; line-height:1.2; }
.tcell .pips { display:flex; gap:3px; margin-top:3px; }
.tcell .pips i { width:7px; height:7px; border-radius:50%; border:1px solid var(--mut); }
.tcell .pips i.on { background:var(--acc); border-color:var(--acc); }
.advbox { display:flex; flex-direction:column; gap:5px; min-width:210px; }
.advbox select { min-width:0; width:100%; }
.advbox input { padding:5px 7px; border:1px solid var(--line); border-radius:6px;
                background:var(--inp); color:var(--fg); font:inherit; width:100%; }
.advbox input:focus { border-color:var(--acc); outline:none; }
.capinfo { font-size:12px; color:var(--mut); text-align:right; margin:0 2px 6px; }
.capinfo.over { color:var(--bar-loss); }
.automax { display:inline-flex; align-items:center; gap:5px; margin-left:12px; font-size:13px; color:var(--mut); cursor:pointer; }
.automax input { cursor:pointer; }

.urow { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; padding:3px 2px; }
.urow .nm { font-size:13px; }
.urow input { width:64px; padding:5px 7px; text-align:right; border:1px solid var(--line);
              border-radius:6px; background:var(--inp); color:var(--fg); font:inherit; }
.urow input:focus { border-color:var(--acc); outline:none; }
.urow input:not([value=""]):not([value="0"]) { border-color:var(--line); }
.field { display:flex; align-items:center; gap:4px; }
.arrows { display:flex; }
.arrows button { width:20px; height:28px; padding:0; line-height:1; font-size:9px; cursor:pointer;
                 border:1px solid var(--line); background:var(--inp2); color:var(--mut); }
.arrows button:first-child { border-radius:5px 0 0 5px; }
.arrows button:last-child { border-radius:0 5px 5px 0; margin-left:-1px; }
.arrows button.solo { border-radius:5px; margin-left:0; }
.arrows button:hover { color:var(--fg); border-color:var(--acc); }

.opts { display:flex; gap:10px; margin-top:16px; }
.opts > div { flex:1; }
label.fld { display:block; font-size:13px; color:var(--mut); margin-bottom:3px; }
select, input.adv { width:100%; padding:8px 10px; border-radius:7px; border:1px solid var(--line);
  background:var(--card); color:var(--fg); font:inherit; }
button.go { width:100%; margin-top:12px; padding:12px; border:0; border-radius:8px; background:var(--acc);
  color:var(--card); font-weight:600; font-size:15px; cursor:pointer; }
button.go:hover { filter:brightness(1.08); }
button.go2 { width:100%; margin-top:8px; padding:10px; border:1px solid #b8901f; border-radius:8px;
  background:linear-gradient(180deg,#f7dd7a,#d4af37); color:#3a2c00; font-weight:700;
  font-size:14px; cursor:pointer; text-shadow:0 1px 0 rgba(255,255,255,.25); }
button.go2:hover { filter:brightness(1.07); }
button.go:disabled, button.go2:disabled { opacity:.5; cursor:not-allowed; filter:none; }
button.go:disabled:hover, button.go2:disabled:hover { filter:none; }
.reset { background:none; border:0; color:var(--mut); font-size:12px; cursor:pointer; }
.reset:hover { color:var(--bar-loss); }

#out { margin-top:22px; }
/* Ergebnis/Hall-of-Fame in einem Pergament-Kasten wie die Einheitenauswahl (besserer Kontrast).
   Beim zweigeteilten Ergebnis übernehmen .res-summary/.res-detail die Kästen selbst – die äußere
   #out-Box entfällt dann, damit sie diese ersetzen statt sie zu umschließen. */
#out:not(:empty):not(:has(.res-summary)) { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:14px 16px; }
.res-summary, .res-detail { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:14px 16px; }
.busy { display:flex; align-items:center; gap:12px; color:var(--mut); }
.spinner { width:18px; height:18px; flex:0 0 auto; border:3px solid var(--line);
           border-top-color:var(--acc); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.cancel-btn { padding:6px 14px; border:1px solid var(--line); border-radius:7px;
              background:var(--inp2); color:var(--fg); cursor:pointer; font:inherit; }
.cancel-btn:hover { border-color:var(--bar-loss); color:var(--bar-loss); }
.share { display:flex; gap:8px; margin-bottom:16px; }
.share input { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:7px;
               background:var(--inp); color:var(--mut); font:13px ui-monospace, monospace; }
.share button { padding:8px 14px; border:0; border-radius:7px; background:var(--inp2); color:var(--fg);
                cursor:pointer; white-space:nowrap; }
.share button:hover { background:#dccbad; }
/* Forum-#2: Ergebnis zweigeteilt – Zusammenfassung (Share + Übersicht) und davon
   abgesetzt der Detailbereich mit den Histogrammen. Gleiche Kartenoptik wie .res-summary,
   dazwischen ein Abstand, durch den der Seitenhintergrund durchscheint (wie zwischen
   Buttons, #out und Einheitenauswahl). */
.res-detail { margin-top:22px; }
/* „Minimale und maximale Verluste" – Tabelle Einheit · min · Ø · max je Seite. */
.overview { margin-bottom:4px; }
.ovh { font-size:16px; font-weight:600; margin:2px 0 6px; padding-bottom:4px; border-bottom:2px solid var(--line); }
.ovwh { margin:14px 0 2px; font-size:14px; font-weight:600; }
.lotab { border-collapse:collapse; font-size:13px; width:100%; }
.lotab th { color:var(--mut); font-weight:500; font-size:11px; padding:2px 0 2px 14px; text-align:right; }
.lotab th:first-child { text-align:left; }
.lotab td { padding:1px 0 1px 14px; font-variant-numeric:tabular-nums; text-align:right; }
.lotab td.lo-tn { text-align:left; padding-left:0; display:flex; align-items:center; gap:7px; }
/* Icons in gleicher Größe wie in der Einheitenauswahl (.ic-img/.ic-ph = 28px) – Konsistenz. */
.lo-side { margin-bottom:6px; }
.lo-side-t { font-weight:700; font-size:14px; margin:8px 0 2px; }
.lo-side-t .lo-meta { font-weight:400; font-size:12px; color:var(--mut); }
.lo-none { color:var(--mut); margin:2px 0; }
.summary table { border-collapse:collapse; }
.summary th, .summary td { padding:3px 14px 3px 0; text-align:left; }
.summary th { color:var(--mut); font-weight:500; }
.summary .meta { color:var(--mut); font-size:13px; }
.wavehd { margin:22px 0 4px; padding-bottom:4px; border-bottom:2px solid var(--line); font-size:16px; }
.wavetotal { border:1px solid var(--acc); border-radius:8px; padding:10px 12px; background:var(--hl); }
.wavetotal h3 { margin:0 0 4px; font-size:15px; }
.sides { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:14px; }
h4 { margin:8px 0 6px; border-bottom:1px solid var(--line); padding-bottom:4px; }
.unit { margin: 10px 0 16px; }
.unit .sub { color:var(--mut); font-size:12px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px; }
.hist .hl { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }
.hist .hl .hr { text-transform:none; letter-spacing:0; color:var(--fg); font-variant-numeric:tabular-nums; }
.hrow { display:grid; grid-template-columns:34px 1fr 78px; align-items:center; gap:6px; font-size:12px; }
.hrow .k { text-align:right; color:var(--mut); }
.hrow .bar { height:9px; background:var(--bar); border-radius:2px; min-width:1px; }
.hrow .bar.loss { background:var(--bar-loss); }
.hrow .p { text-align:right; color:var(--mut); font-variant-numeric:tabular-nums; }
.err { color:var(--bar-loss); }
.sg-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.sg-head h4 { margin:0; border:0; padding:0; }
.sg-filters { display:flex; gap:14px; flex-wrap:wrap; }
.sgfilter { margin-bottom:12px; }
.sgf-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.sgf-lbl { flex:0 0 64px; font-size:12px; color:var(--mut); padding-top:7px; }
.sgf-icons { display:flex; flex-wrap:wrap; gap:4px; }
.sgf-ic { padding:2px; border:1px solid var(--line); border-radius:7px; background:var(--inp);
          cursor:pointer; line-height:0; }
.sgf-ic:hover { border-color:var(--acc); }
.sgf-ic.off { opacity:.3; filter:grayscale(1); }
.sgf-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
            margin-top:8px; flex-wrap:wrap; }
.sgf-apply { padding:6px 14px; border:1px solid var(--acc); border-radius:7px;
             background:var(--inp2); color:var(--fg); cursor:pointer; font:inherit; }
.sgf-apply:hover { filter:brightness(.97); }
.sg-filter { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--mut); font-weight:400; cursor:pointer; }
.sgbadge { display:inline-block; font-size:10px; font-weight:700; color:var(--acc); border:1px solid var(--acc);
           border-radius:4px; padding:0 5px; margin-bottom:3px; }
.sgwv { font-size:12px; line-height:1.4; }
.sg-empty { color:var(--mut); }
.sgtable { border-collapse:collapse; width:100%; font-size:13px; }
.sgtable th, .sgtable td { padding:6px 10px; border-bottom:1px solid var(--line); text-align:left; }
.sgtable th { color:var(--mut); font-weight:500; }
.sgtable td.num, .sgtable th.num { text-align:right; font-variant-numeric:tabular-nums; }
.sgtable td.loss { font-size:12px; line-height:1.35; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sgtable td.tal { font-size:12px; line-height:1.4; }
.sgtable tr:hover td { background:var(--hl); }
.sgtable .apply { padding:4px 10px; border:1px solid var(--line); border-radius:6px;
                  background:var(--inp2); color:var(--fg); cursor:pointer; font:inherit; white-space:nowrap; }
.sgtable .apply:hover { border-color:var(--acc); color:var(--acc); }

/* ---- Spielerprofil (profil.html) ---- */
.pcard { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:12px 14px; margin-bottom:12px; }
.pcard-head { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:8px; }
.pcard-head .nm { font-weight:600; }
.pcard-del { background:none; border:0; color:var(--mut); cursor:pointer; font-size:13px; }
.pcard-del:hover { color:var(--bar-loss); }
.uchips { display:flex; flex-wrap:wrap; gap:5px; }
.uchip { padding:3px; border:1px solid var(--line); border-radius:7px; background:var(--inp);
         cursor:pointer; line-height:0; position:relative; }
.uchip:hover { border-color:var(--acc); }
.uchip.off { opacity:.32; filter:grayscale(1); }
.umode-h { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); font-weight:600; margin:8px 0 4px; }
.pbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.pbtn { padding:7px 13px; border:1px solid var(--line); border-radius:7px; background:var(--inp);
        color:var(--fg); cursor:pointer; font:inherit; font-size:13px; }
.pbtn:hover { border-color:var(--acc); }
.pbtn.prim { background:var(--acc); color:#fff; border-color:var(--acc); }
.lbl-in { padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--inp);
          color:var(--fg); font:inherit; min-width:160px; }

/* ---- Abenteuer-Planer (planer.html) ---- */
#advmap { display:flex; align-items:center; justify-content:center; margin-bottom:14px;
          border-radius:9px; overflow:hidden; }
#advmap:empty { display:none; }                 /* kein Karten-Bild → Box ausblenden */
#advmap img { max-width:100%; height:auto; display:block; border-radius:9px; }
.plan-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 14px; }
.plan-bar .go { margin-top:0; }
.modebadge { display:inline-block; font-size:11px; font-weight:700; border-radius:5px; padding:1px 7px;
             border:1px solid var(--acc); color:var(--acc); }
.modebadge.special { border-color:#b8901f; color:#8a6a0f; background:rgba(212,175,55,.15); }
.ctable { border-collapse:collapse; width:100%; font-size:13px; }
.ctable th, .ctable td { padding:6px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.ctable th { color:var(--mut); font-weight:500; }
.ctable td.num, .ctable th.num { text-align:right; font-variant-numeric:tabular-nums; }
.ctable tr.computing td { background:var(--hl); }
.ctable .best { font-size:12px; line-height:1.4; }
.ctable td.loss { font-size:12px; line-height:1.35; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ctable .cstatus { font-size:12px; color:var(--mut); }
.ctable .cbar { height:6px; border-radius:3px; background:var(--inp2); overflow:hidden; margin-top:3px; }
.ctable .cbar > i { display:block; height:100%; background:var(--bar); width:0; }
.wsel { padding:3px 5px; border:1px solid var(--line); border-radius:5px; background:var(--inp); color:var(--fg); font:inherit; font-size:12px; }

@media (max-width:640px){ .cols2,.sides,.cols{grid-template-columns:1fr;} }