/* Werkzeug-Oberflaeche: ruhige Neutraltoene mit leichtem Blaustich, Weinfarben nur fuer die Flight-Bloecke. */
:root {
  --bg: #f6f7f9; --panel: #ffffff; --fg: #1b1f27; --muted: #5d6573; --line: #dfe3ea; --hover: #eef1f6;
  --accent: #2f5d8a; --accent-fg: #ffffff;
  --good: #2e7d4f; --good-bg: #e3f2e8; --bad: #b3261e; --bad-bg: #fbe5e3; --free: #0b8ea8;
  --wine-white: #d7b54f; --wine-rose: #e3909f; --wine-red: #8e2c43; --wine-mixed: #8b929c;
  --radius: 8px; --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151b; --panel: #1a1e26; --fg: #e6e9ef; --muted: #9aa3b2; --line: #2c323d; --hover: #232935;
    --accent: #6b9bd1; --accent-fg: #0d1117;
    --good: #6cc48f; --good-bg: #173123; --bad: #f08a80; --bad-bg: #3a1a18; --free: #4cc3dc;
    --wine-white: #c9a845; --wine-rose: #d27f8e; --wine-red: #a3405a; --wine-mixed: #7d8590;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font); }
h1, h2 { margin: 0; text-wrap: balance; }
h1 { font-size: 1.45rem; font-weight: 600; }
h2 { font-size: 1rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.note { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
kbd { font: 600 .7rem var(--font); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; color: var(--muted); }

/* Kopfleiste */
.bar { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); }
.bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px max(16px, 2vw); }
.brand { font-size: 1rem; }
.bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-left: auto; }
.field-inline { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.field-inline select { max-width: min(60vw, 26rem); }
.export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Bedienelemente */
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px;
       background: var(--panel); color: var(--fg); font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger-quiet { color: var(--bad); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
textarea { width: 100%; resize: vertical; }

/* Seite */
.page { padding: var(--gap) max(16px, 2vw) 48px; display: flex; flex-direction: column; gap: var(--gap); }
.empty { max-width: 36rem; margin: 10vh auto; text-align: center; display: grid; gap: 12px; justify-items: center; }
#content { display: flex; flex-direction: column; gap: var(--gap); }
.run-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.run-head p { margin: 2px 0 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.tile .k { font-size: .75rem; color: var(--muted); }
.tile .v { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .s { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; display: flex; margin-top: 6px; }
.progress i { display: block; height: 100%; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--gap); align-items: start; }
.main-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.side-col { position: sticky; top: 64px; min-width: 0; }
@media (max-width: 1100px) { .layout { grid-template-columns: minmax(0, 1fr); } .side-col { position: static; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); color: var(--fg); font: inherit; padding: 4px 10px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .75rem; color: var(--muted); margin-bottom: 8px; }
.legend span::before, .legend .lg-kind::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--sw); }
.legend .lg-kind { border: 1px solid transparent; background: none; color: inherit; font: inherit; padding: 1px 6px; border-radius: 10px; cursor: pointer; }
.legend .lg-kind:hover { background: var(--hover); }
.legend .lg-kind[aria-pressed="true"] { border-color: var(--fg); color: var(--fg); background: var(--hover); }
.legend .lg-good::before { background: var(--panel); box-shadow: inset 0 -3px 0 var(--good); border: 1px solid var(--line); }
.legend .lg-bad::before { background: repeating-linear-gradient(135deg, var(--bad) 0 2px, transparent 2px 5px); border: 1px solid var(--line); }

/* Jury-Plan */
.plan { display: flex; flex-direction: column; gap: 4px; }
.prow { display: grid; grid-template-columns: 4.4rem minmax(min-content, 1fr) 3.4rem; gap: 8px; align-items: center; font-size: .75rem; }
.prow .lbl { color: var(--muted); white-space: nowrap; }
.prow .load { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.prow .load.over { color: var(--bad); font-weight: 600; }
.track { display: flex; gap: 2px; height: 1.75rem; background: var(--hover); border-radius: 4px; overflow: hidden; }
.dcell .track { height: 2.5rem; }
.plan { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.days { display: grid; grid-template-columns: repeat(var(--days), minmax(4.5rem, 1fr)); gap: 6px; min-width: 0; }
.phead { align-items: end; }
.dlbl { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.dcell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcell .dl { font-size: 9px; line-height: 1; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.dcell.over .track { box-shadow: inset 0 0 0 2px var(--bad); }
.dcell.over .dl { color: var(--bad); font-weight: 600; }
.slot-start { margin-left: 10px; }
.tile.warn .v, .tile.warn .s { color: var(--bad); }
/* alkoholfreie/-reduzierte Flights: Balken oben im Plan-Kaestchen, Kachel als Schalter */
.blk[data-free]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--free);
  border-bottom: 1px solid var(--panel); }
.legend .lg-free::before { background: var(--panel); box-shadow: inset 0 3px 0 var(--free); border: 1px solid var(--line); }
.tile-btn { cursor: pointer; }
.tile-btn:hover { border-color: var(--accent); }
.tile-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.blk { position: relative; flex: 0 0 auto; border: 0; padding: 0 2px; height: 100%; border-radius: 3px; cursor: pointer;
       font: 600 10px var(--font); font-variant-numeric: tabular-nums; color: #1d1d1f; overflow: hidden; white-space: nowrap; text-align: center; }
.blk[data-color="red"], .blk[data-color="mixed"] { color: #fff; }
.blk:hover { filter: brightness(1.1); }
.blk.sel { outline: 2px solid var(--fg); outline-offset: -2px; }
.blk[data-review="good"] { box-shadow: inset 0 -4px 0 var(--good); }
.blk[data-review="bad"]::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--bad) 0 2px, transparent 2px 6px); opacity: .85; }
.blk.dim { opacity: .2; }
.blk .c { position: absolute; top: 1px; right: 2px; font-size: 8px; }
.blk .num { position: absolute; inset: 0 0 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.blk .rk, .blk .sz { position: absolute; bottom: 1px; font-size: 9px; font-weight: 500; line-height: 1; opacity: .85; }
.blk .rk { left: 3px; }
.blk .sz { right: 3px; }
/* schmale Kaestchen: Rang nach oben links, damit er nicht an der Weinanzahl klebt */
.dcell .blk { container-type: inline-size; }
@container (max-width: 40px) {
  .blk .rk { bottom: auto; top: 2px; left: 2px; }
  .blk .sz { right: 2px; }
  .blk .num { inset: 4px 0 6px; font-size: 11px; }
}

/* Verschieben */
.blk[draggable="true"] { cursor: grab; }
.blk.dragging { opacity: .25; }
.dropmark { flex: 0 0 3px; align-self: stretch; margin: 0 -1px; border-radius: 2px; background: var(--fg); }
.dcell.drop .track { box-shadow: inset 0 0 0 2px var(--accent); }
.dcell.drop.drop-over .track { box-shadow: inset 0 0 0 2px var(--bad); }
.dcell.drop.drop-over .dropmark { background: var(--bad); }
.head-tools { display: flex; align-items: center; gap: 8px; }
.plan-msg { margin: 0 0 8px; min-height: 1.2em; font-size: .8rem; color: var(--muted); }
.plan-msg.warn { color: var(--bad); }

.tip { position: fixed; z-index: 20; pointer-events: none; max-width: 20rem; background: var(--panel); border: 1px solid var(--line);
       border-radius: 6px; box-shadow: 0 6px 20px rgb(0 0 0 / .18); padding: 6px 10px; font-size: .78rem; }
.tip .t { color: var(--muted); }

/* Tabellen */
.table-box { overflow: auto; max-height: 28rem; border-top: 1px solid var(--line); }
.table-box.tall { max-height: 34rem; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-weight: 600; color: var(--muted);
     padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th button { all: unset; cursor: pointer; }
th button:focus-visible { outline: 2px solid var(--accent); }
td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.n { text-align: right; }
.flights tbody tr { cursor: pointer; }
.flights td.n { white-space: nowrap; }
.flights tbody tr:hover { background: var(--hover); }
.flights tbody tr.sel { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: 6px; background: var(--sw); }
.pill { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: .72rem; font-weight: 600; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.search { width: min(100%, 16rem); }
td.dev { color: var(--bad); font-weight: 600; }

/* Detail */
.detail { display: flex; flex-direction: column; gap: 10px; }
.detail-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.detail-nav h2 { flex: 1; text-align: center; font-size: 1.05rem; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: .82rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.review { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.review[data-status="good"] { border-color: var(--good); background: var(--good-bg); }
.review[data-status="bad"] { border-color: var(--bad); background: var(--bad-bg); }
.review-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-good[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }
.rv-bad[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #fff; }
.rv-good[aria-pressed="true"] kbd, .rv-bad[aria-pressed="true"] kbd { color: #fff; border-color: rgb(255 255 255 / .5); }
.review-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; }

/* Dialog */
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 0; background: var(--panel); color: var(--fg); width: min(40rem, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .35); }
#run-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
legend { padding: 0 4px; font-weight: 600; }
.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.row select { flex: 1; min-width: 12rem; }
.stack { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--muted); }
.stack input { color: var(--fg); }
.grow { flex: 1; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 8px; align-items: end; }
.check-line { display: flex; gap: 6px; align-items: center; font-size: .9rem; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; }
.checks label { display: flex; gap: 6px; align-items: center; }
.file-btn { cursor: pointer; }
.error { margin: 0; color: var(--bad); background: var(--bad-bg); border-radius: 6px; padding: 8px 10px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* Wein-Details */
.wine-dialog { width: min(58rem, calc(100vw - 32px)); }
.wd { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.wd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wd-head h2 { margin: 0; font-size: 1.05rem; }
.wd h3 { margin: 8px 0 0; font-size: .9rem; }
.wd-why { margin: 0; padding-left: 1.2rem; font-size: .85rem; display: flex; flex-direction: column; gap: 3px; }
.wd .better { color: var(--good); font-weight: 600; }
#wd-alt tbody tr { cursor: pointer; }
#wd-alt tbody tr:hover { background: var(--hover); }
#wines tbody tr { cursor: pointer; }
#i-table tbody tr { cursor: pointer; }
#i-table td.i-suggest { color: var(--good); font-weight: 600; }
#i-table tbody tr:hover { background: var(--hover); }
.x-sec h3 { margin: 10px 0 2px; font-size: .88rem; }
.x-sec p { margin: 0; font-size: .85rem; }
.x-table { margin: 4px 0; font-size: .8rem; }
.x-table tr.x-mark td { box-shadow: inset 3px 0 0 var(--accent); background: var(--hover); font-weight: 600; }
.x-table tr.x-actual td { box-shadow: inset 3px 0 0 var(--good); background: var(--good-bg); }
#wines tbody tr:hover { background: var(--hover); }

/* Navigation */
.nav { display: flex; gap: 4px; }
.nav a { color: var(--muted); text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.nav a:hover { background: var(--hover); color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); background: var(--hover); font-weight: 600; }

/* Laenderbeziehungen */
.rel-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.rel-controls .note { flex-basis: 100%; }
.rel-range { display: flex; align-items: center; gap: 8px; }
.rel-range output { font-variant-numeric: tabular-nums; color: var(--fg); min-width: 2.5em; }
.rel-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.rel-legend span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: var(--sw); }
.rel-net svg { display: block; }
.rel-edge { stroke: var(--muted); stroke-opacity: .35; stroke-linecap: round; }
.rel-edge.prior { stroke-dasharray: 3 3; }
.rel-edge.active { stroke: var(--accent); stroke-opacity: .9; }
.rel-edge.dim { stroke-opacity: .08; }
.rel-edge:hover { stroke-opacity: .9; }
.rel-node { cursor: pointer; }
.rel-node circle { stroke: var(--panel); stroke-width: 1.5; }
.rel-node text { font: 10px var(--font); fill: var(--fg); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.rel-node.sel circle { stroke: var(--fg); stroke-width: 3; }
.rel-node.dim { opacity: .2; }
.rel-node:focus-visible circle { stroke: var(--accent); stroke-width: 3; }
.rel-matrix { overflow: auto; max-height: 80vh; }
.rel-matrix svg { display: block; }
.rel-mlabel { font: 9px var(--font); fill: var(--muted); cursor: pointer; }
.rel-mlabel.sel { fill: var(--fg); font-weight: 700; }
.rel-cell { cursor: pointer; }
.rel-cell.prior { opacity: .45; }
.rel-cell.hl { stroke: var(--fg); stroke-width: .6; }
.rel-cell:hover { stroke: var(--fg); stroke-width: 1.2; }
.rel-diag { fill: var(--line); }
.rel-bar { display: inline-block; width: 40px; height: 6px; margin-right: 6px; border-radius: 3px; vertical-align: 1px;
           background: linear-gradient(90deg, var(--accent) var(--w), var(--hover) var(--w)); }
/* Vergleich mit der Nutzerdatei */
.rel-cmp { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .rel-cmp { grid-template-columns: 1fr; } }
.rel-scatter svg { display: block; max-width: 320px; }
.rel-grid { stroke: var(--line); stroke-width: 1; }
.rel-axis { font: 9px var(--font); fill: var(--muted); }
.rel-diagonal { stroke: var(--muted); stroke-dasharray: 4 3; stroke-width: 1; }
.rel-dot { fill: var(--accent); fill-opacity: .6; cursor: pointer; }
.rel-dot.sel { fill-opacity: 1; stroke: var(--fg); stroke-width: 1.5; }
.rel-dot.dim { fill-opacity: .15; }
.rel-up { color: var(--good); font-weight: 600; }
.rel-down { color: var(--bad); font-weight: 600; }
#d-table tbody tr { cursor: pointer; }
#d-table tbody tr:hover { background: var(--hover); }

@media (prefers-reduced-motion: no-preference) {
  .blk, .btn { transition: filter .12s, opacity .15s, background-color .12s; }
}

/* Vergleich mit Historie */
.h-refs { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--fg); }
.h-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--gap); margin-bottom: 12px; }
.h-cols h3, #h-detail h3 { font-size: .95rem; margin: 8px 0 2px; }
.h-stale { color: var(--bad); }
#h-table tbody tr, #h-flights tbody tr, #h-d-flights tbody tr { cursor: pointer; }