:root{
  --paper:#f6f7f4;
  --surface:#ffffff;
  --ink:#17221f;
  --ink-muted:#526059;
  --line:#dde1db;
  --accent:#0e6e64;
  --accent-ink:#ffffff;

  --seq-1:#d8ede9;
  --seq-2:#8fcabf;
  --seq-3:#3a978a;
  --seq-4:#145850;
  --seq-none:#c7cdc8;

  --seq-1-ink:#0d3630;
  --seq-2-ink:#0d3630;
  --seq-3-ink:#ffffff;
  --seq-4-ink:#ffffff;
  --seq-none-ink:#3a423d;

  --good:#3f8f5f;
  --good-bg:#e3f1e6;
  --warn:#b5791a;
  --warn-bg:#faedd6;
  --crit:#ad4a2f;
  --crit-bg:#fbe4dc;

  --font-display: ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --font-body: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#101815;
    --surface:#16201c;
    --ink:#e7ede9;
    --ink-muted:#93a39b;
    --line:#28342e;
    --accent:#5fd6c4;
    --accent-ink:#0b1512;

    --seq-1:#1b3d38;
    --seq-2:#2c6b61;
    --seq-3:#4fae9e;
    --seq-4:#a9ecdd;
    --seq-none:#3a423d;

    --seq-1-ink:#c9ece5;
    --seq-2-ink:#e7fbf6;
    --seq-3-ink:#06231d;
    --seq-4-ink:#06231d;
    --seq-none-ink:#d3d9d5;

    --good:#71c98d;
    --good-bg:#173322;
    --warn:#e0a542;
    --warn-bg:#3a2c10;
    --crit:#e2896a;
    --crit-bg:#3c2117;
  }
}
:root[data-theme="dark"]{
  --paper:#101815; --surface:#16201c; --ink:#e7ede9; --ink-muted:#93a39b; --line:#28342e; --accent:#5fd6c4; --accent-ink:#0b1512;
  --seq-1:#1b3d38; --seq-2:#2c6b61; --seq-3:#4fae9e; --seq-4:#a9ecdd; --seq-none:#3a423d;
  --seq-1-ink:#c9ece5; --seq-2-ink:#e7fbf6; --seq-3-ink:#06231d; --seq-4-ink:#06231d; --seq-none-ink:#d3d9d5;
  --good:#71c98d; --good-bg:#173322; --warn:#e0a542; --warn-bg:#3a2c10; --crit:#e2896a; --crit-bg:#3c2117;
}
:root[data-theme="light"]{
  --paper:#f6f7f4; --surface:#ffffff; --ink:#17221f; --ink-muted:#526059; --line:#dde1db; --accent:#0e6e64; --accent-ink:#ffffff;
  --seq-1:#d8ede9; --seq-2:#8fcabf; --seq-3:#3a978a; --seq-4:#145850; --seq-none:#c7cdc8;
  --seq-1-ink:#0d3630; --seq-2-ink:#0d3630; --seq-3-ink:#ffffff; --seq-4-ink:#ffffff; --seq-none-ink:#3a423d;
  --good:#3f8f5f; --good-bg:#e3f1e6; --warn:#b5791a; --warn-bg:#faedd6; --crit:#ad4a2f; --crit-bg:#fbe4dc;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--seq-2);color:var(--seq-2-ink);}

.wrap{max-width:1180px;margin:0 auto;padding:2.5rem 1.5rem 5rem;}

h1,h2,h3,.disp{font-family:var(--font-display); text-wrap:balance; letter-spacing:-0.01em;}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum";}

header.top{
  display:flex; flex-direction:column; gap:1.1rem;
  padding-bottom:1.75rem; border-bottom:1px solid var(--line); margin-bottom:1.75rem;
}
.eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
}
h1{font-size:2.35rem; font-weight:800; margin:0.15rem 0 0; line-height:1.05;}
.sub{color:var(--ink-muted); font-size:1.02rem; max-width:62ch; margin:0;}

.filterbar{display:flex; flex-wrap:wrap; gap:0.5rem; align-items:flex-start; margin:1.6rem 0 1.2rem; position:relative;}
.chip{
  font-family:var(--font-display); font-size:0.8rem; font-weight:600;
  padding:0.32rem 0.7rem; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-muted); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
  user-select:none;
}
.chip:hover{border-color:var(--accent);}
.chip.reset{color:var(--crit); font-weight:700;}

.fdropdown{position:static;}
.fbtn{
  font-family:var(--font-display); font-size:0.8rem; font-weight:600;
  padding:0.32rem 0.7rem; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-muted); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.fbtn::after{content:'\25BE'; margin-left:0.35em; font-size:0.75em;}
.fbtn:hover{border-color:var(--accent);}
.fbtn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.fpanel{
  display:none; position:absolute; z-index:1200;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:0.55rem 0.75rem; min-width:190px; max-width:calc(100vw - 20px); max-height:280px; overflow-y:auto;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
.fdropdown.open .fpanel{display:flex; flex-direction:column; gap:0.4rem;}
.fpanel label{
  display:flex; align-items:center; gap:0.55rem; font-family:var(--font-display);
  font-size:0.85rem; color:var(--ink); cursor:pointer; white-space:nowrap;
}
.fpanel input[type="checkbox"]{margin:0; accent-color:var(--accent);}

section{margin-top:2.6rem;}
.sectitle{display:flex; align-items:baseline; flex-wrap:wrap; gap:0.6rem; margin-bottom:0.9rem;}
.sectitle h2{font-size:1.3rem; font-weight:800; margin:0;}
.sectitle .cnt{font-family:var(--font-mono); color:var(--ink-muted); font-size:0.85rem;}

.mapcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1rem 0.6rem; position:relative;}
#map{width:100%; height:520px; border-radius:10px;}
.leaflet-popup-content{font-family:var(--font-display); font-size:0.82rem; line-height:1.4;}
.leaflet-popup-content b{display:block; font-size:0.88rem; margin-bottom:0.15rem;}
.maplegend{display:flex; gap:1rem; flex-wrap:wrap; padding:0.7rem 0.2rem 0.9rem; font-family:var(--font-display); font-size:0.76rem; color:var(--ink-muted);}
.maplegend .sw{display:inline-flex; align-items:center; gap:0.35rem; margin-right:0.2rem;}
.maplegend i{width:10px; height:10px; border-radius:50%; display:inline-block;}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface);}
table{width:100%; border-collapse:collapse; min-width:920px;}
thead th{
  text-align:left; font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:700; padding:0.75rem 0.9rem; border-bottom:1px solid var(--line);
  cursor:pointer; white-space:nowrap; position:sticky; top:0; background:var(--surface);
}
thead th:hover{color:var(--ink);}
thead th.sorted{color:var(--accent);}
thead th .arr{font-size:0.65rem; margin-left:2px;}
tbody td{padding:0.7rem 0.9rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:0.92rem;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.race:hover{background:color-mix(in srgb, var(--accent) 6%, transparent);}
tbody tr.race{cursor:pointer;}
tbody tr.detail{display:none;}
tbody tr.detail.open{display:table-row;}
tbody tr.detail td{background:color-mix(in srgb, var(--ink) 4%, var(--surface)); font-size:0.85rem; color:var(--ink-muted); font-family:var(--font-display);}
.racename{font-weight:700; font-family:var(--font-display); color:var(--ink);}
.racemeta{color:var(--ink-muted); font-size:0.8rem;}
.hmcell{cursor:pointer; border-bottom:1px dashed var(--ink-muted); white-space:nowrap;}
.hmcell:hover{color:var(--accent); border-bottom-color:var(--accent);}
.hmcell .pencil{opacity:0; font-size:0.75em; margin-left:3px; transition:opacity .1s;}
.hmcell:hover .pencil{opacity:0.7;}
.hmcell .editbadge{color:var(--accent); font-size:0.75em; margin-left:2px;}
.hmcell .hmrevert{color:var(--ink-muted); text-decoration:none; margin-left:4px; font-size:0.85em;}
.hmcell .hmrevert:hover{color:var(--crit);}
.hminput{width:70px; font-family:var(--font-mono); font-size:0.92rem; border:1px solid var(--accent); border-radius:5px; padding:0.1rem 0.3rem; background:var(--surface); color:var(--ink);}
#hmResetAll a{color:var(--accent); cursor:pointer;}
.cnt#hmResetAll{margin-left:0.4rem;}
.pill{display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-family:var(--font-display); font-size:0.72rem; font-weight:700;}
.pill.flach{background:var(--seq-1); color:var(--seq-1-ink);}
.pill.moderat{background:var(--seq-2); color:var(--seq-2-ink);}
.pill.anspruchsvoll{background:var(--seq-3); color:var(--seq-3-ink);}
.pill.extrem{background:var(--seq-4); color:var(--seq-4-ink);}
.pill.unbestimmt{background:var(--seq-none); color:var(--seq-none-ink);}
.status{display:inline-flex; align-items:center; gap:0.3rem; font-family:var(--font-display); font-size:0.74rem; font-weight:700;}
.status i{width:7px; height:7px; border-radius:50%; display:inline-block;}
.status.good i{background:var(--good);} .status.good{color:var(--good);}
.status.warn i{background:var(--warn);} .status.warn{color:var(--warn);}
.status.crit i{background:var(--crit);} .status.crit{color:var(--crit);}
.muted{color:var(--ink-muted);}
.srclink{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent);}
.srclink:hover{border-bottom-color:var(--accent);}
.detailgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.9rem;}
.detailgrid div b{display:block; color:var(--ink); font-family:var(--font-display); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.15rem;}

.loginbar{display:flex; align-items:center; gap:0.6rem; justify-content:flex-end; padding:0 0 0.9rem; margin-bottom:0.4rem; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:0.8rem;}
.loginbar input{
  font-family:var(--font-display); font-size:0.8rem; padding:0.32rem 0.7rem; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); color:var(--ink); width:160px;
}
.loginbar button{
  font-family:var(--font-display); font-weight:700; font-size:0.8rem;
  padding:0.32rem 0.7rem; border-radius:999px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); cursor:pointer;
}
.loginstatus{color:var(--ink-muted); display:flex; align-items:center; gap:0.5rem;}
.logoutbtn{background:transparent; color:var(--ink-muted); border:1px solid var(--line);}
.editmodebtn{
  font-family:var(--font-display); font-weight:700; font-size:0.8rem;
  padding:0.32rem 0.7rem; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink-muted); cursor:pointer;
  margin-left:auto;
}
.editmodebtn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

tr.race.editablerow{box-shadow:inset 3px 0 0 var(--accent);}
.editgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0.8rem 1rem;}
.editgrid label{display:flex; flex-direction:column; gap:0.3rem; font-family:var(--font-display); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-muted);}
.editgrid label.span2{grid-column:1/-1;}
.editgrid input, .editgrid select, .editgrid textarea{
  font-family:var(--font-body); font-size:0.92rem; font-weight:400; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:0.4rem 0.55rem; text-transform:none; letter-spacing:normal;
}
.editgrid input:focus, .editgrid select:focus, .editgrid textarea:focus{outline:none; border-color:var(--accent);}
.editgrid textarea{min-height:64px; resize:vertical; font-family:var(--font-body);}
.editactions{display:flex; align-items:center; justify-content:flex-end; gap:0.6rem; margin-top:1.1rem; flex-wrap:wrap;}
.editerror{color:var(--crit); font-size:0.82rem; margin-right:auto; font-family:var(--font-display);}
.editcancel{
  font-family:var(--font-display); font-weight:600; font-size:0.85rem;
  padding:0.4rem 0.9rem; border-radius:6px; border:1px solid var(--line);
  background:transparent; color:var(--ink-muted); cursor:pointer;
}
.editsave{
  font-family:var(--font-display); font-weight:700; font-size:0.85rem;
  padding:0.4rem 0.9rem; border-radius:6px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); cursor:pointer;
}
.editsave:disabled{opacity:0.6; cursor:default;}

.notecell{min-width:160px; max-width:260px; cursor:default; vertical-align:top;}
.notecell[title]:not([title=""]){cursor:pointer;}
.notetext{font-size:0.92rem; white-space:pre-wrap; word-break:break-word;}
.noteinput{
  width:100%; min-height:60px; font-family:var(--font-body); font-size:0.92rem;
  padding:0.4rem 0.5rem; border:1px solid var(--accent); border-radius:6px;
  background:var(--surface); color:var(--ink); resize:vertical; display:block; margin-bottom:0.35rem;
}
.notesave{
  font-family:var(--font-display); font-weight:700; font-size:0.76rem;
  padding:0.25rem 0.6rem; border-radius:6px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); cursor:pointer;
}

.clusters{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0.9rem;}
.clustercard{border-radius:14px; padding:1rem 1.1rem; border:1px solid var(--line);}
.clustercard h3{font-size:1rem; margin:0 0 0.15rem; font-weight:800;}
.clustercard .range{font-family:var(--font-mono); font-size:0.8rem; opacity:0.85; margin-bottom:0.7rem; display:block;}
.clustercard ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.3rem;}
.clustercard li{font-family:var(--font-display); font-size:0.86rem;}
.clustercard.flach{background:var(--seq-1); color:var(--seq-1-ink); border-color:transparent;}
.clustercard.moderat{background:var(--seq-2); color:var(--seq-2-ink); border-color:transparent;}
.clustercard.anspruchsvoll{background:var(--seq-3); color:var(--seq-3-ink); border-color:transparent;}
.clustercard.extrem{background:var(--seq-4); color:var(--seq-4-ink); border-color:transparent;}

.recs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem;}
.reccard{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:1rem 1.1rem;}
.reccard h3{font-size:1rem; margin:0 0 0.4rem; font-weight:800; font-family:var(--font-display);}
.reccard p{margin:0; font-size:0.9rem; color:var(--ink-muted);}

.caveat{display:flex; gap:0.8rem; background:var(--warn-bg); border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius:12px; padding:0.9rem 1.1rem; margin-bottom:0.8rem;}
.caveat.crit{background:var(--crit-bg); border-color:color-mix(in srgb, var(--crit) 40%, transparent);}
.caveat .mark{font-family:var(--font-display); font-weight:800; font-size:0.78rem; color:var(--crit); flex:none; padding-top:0.1rem;}
.caveat.warn .mark{color:var(--warn);}
.caveat p{margin:0; font-size:0.9rem; color:var(--ink);}
.caveat b{font-family:var(--font-display);}

footer{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--ink-muted); font-size:0.85rem;}
footer code{background:var(--surface); border:1px solid var(--line); padding:0.1rem 0.4rem; border-radius:5px; font-family:var(--font-mono); font-size:0.82rem;}
footer .raw-toggle{color:var(--accent); cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:0.85rem; border:none; background:none; padding:0; margin-top:0.6rem;}
#rawlist{display:none; margin-top:0.8rem; font-family:var(--font-mono); font-size:0.78rem; columns:2; gap:1.5rem;}
#rawlist.open{display:block;}
#rawlist div{break-inside:avoid; margin-bottom:0.3rem;}

.mobileonly{display:none;}
.detailclose{display:none;}

@media (max-width:720px){
  .wrap{padding:1.5rem 1rem 3rem;}
  h1{font-size:1.7rem;}
  .sub{font-size:0.95rem;}
  header.top{gap:0.8rem; padding-bottom:1.25rem; margin-bottom:1.25rem;}

  .loginbar{flex-wrap:wrap; justify-content:flex-end;}
  .loginbar input{width:130px;}

  .filterbar{gap:0.4rem;}

  #map{height:320px;}

  /* Ergebnistabelle als schlanke Karten (Name + Notiz), Rest per Antippen im Popup */
  .tablewrap{overflow-x:visible; border:none; background:none; border-radius:0;}
  table{min-width:0;}
  thead{display:none;}
  tbody tr.race{
    display:block; cursor:pointer;
    border:1px solid var(--line); border-radius:12px; background:var(--surface);
    margin-bottom:0.7rem; padding:0.7rem 0.9rem;
  }
  tbody td{
    display:flex; justify-content:space-between; align-items:flex-start; gap:0.8rem;
    padding:0.3rem 0; border-bottom:none; font-size:0.88rem;
  }
  tbody td[data-label]::before{
    content:attr(data-label); font-family:var(--font-display); font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); flex:none; padding-top:0.15rem;
  }
  tbody td.namecell{
    display:block; padding:0; margin-bottom:0;
  }
  /* Kompakte Karte: nur Name + Notiz, Rest nur im Popup (siehe .mobileonly) */
  tbody td[data-label]:not([data-label="Notiz"]){display:none;}
  tbody td.notecell{margin-top:0.5rem; padding-top:0.5rem; border-top:1px solid var(--line);}

  tbody tr.detail{display:none;}
  tbody tr.detail.open{
    display:flex; align-items:flex-start; justify-content:center;
    position:fixed; inset:0; z-index:60; margin:0; border:none; border-radius:0;
    background:rgba(0,0,0,0.55); padding:8vh 1rem 2rem; overflow-y:auto;
  }
  tbody tr.detail.open td{
    display:block; width:100%; max-width:440px; margin:0 auto;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:1.1rem; box-shadow:0 16px 48px rgba(0,0,0,0.35);
  }
  .mobileonly{display:block;}
  .detailclose{display:block; text-align:right; margin-bottom:0.4rem;}
  .detailclosebtn{
    font-family:var(--font-display); font-size:1rem; line-height:1; border:none;
    background:none; color:var(--ink-muted); cursor:pointer; padding:0.2rem 0.4rem;
  }

  #rawlist{columns:1;}

  .editgrid{grid-template-columns:1fr;}
  .editactions{justify-content:stretch;}
  .editactions button{flex:1;}
  .editerror{margin-right:0; width:100%;}
}