:root {
  --bg: #fbfaf7;
  --paper: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #55565b;
  --ink-3: #8a8b91;
  --line: #e7e5df;
  --accent: #2f5bd3;
  --h0: #e5383b;   /* gerade eben */
  --h1: #f0643a;   /* Tage */
  --h2: #f59e2b;   /* Monate */
  --h3: #e6c84a;   /* knapp ein Jahr */
  --h4: #5bb46a;   /* > 1 Jahr */
  --heat-alpha: 34%;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141416; --paper: #1b1b1e; --ink: #ececee; --ink-2: #b2b3b8; --ink-3: #7c7d84;
    --line: #2c2c31; --accent: #8fa8ff; --heat-alpha: 40%;
  }
}
:root[data-theme="dark"] {
  --bg: #141416; --paper: #1b1b1e; --ink: #ececee; --ink-2: #b2b3b8; --ink-3: #7c7d84;
  --line: #2c2c31; --accent: #8fa8ff; --heat-alpha: 40%;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -.01em; }
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.search { position: relative; flex: 1; min-width: 0; max-width: 520px; display: flex; gap: 6px; }
.search select, .search input {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.search input { flex: 1; min-width: 0; }
.search input:focus, .search select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 0; }
.suggest {
  position: absolute; top: 100%; left: 58px; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.suggest li { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.suggest li[aria-selected="true"], .suggest li:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- Toolbar ---------- */
.toolbar {
  position: sticky; top: 55px; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 8px 24px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); font-size: 13px;
}
.toolbar[hidden] { display: none; }
.seg { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button {
  font: inherit; font-size: 13px; color: var(--ink-2); background: none; border: 0;
  padding: 5px 11px; border-radius: 6px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg.disabled { opacity: .4; pointer-events: none; }
.legend { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.legend .bar { width: 220px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--h0), var(--h1) 22%, var(--h2) 50%, var(--h3) 78%, var(--h4)); }
.legend .ticks { display: flex; justify-content: space-between; width: 232px; margin-left: -6px; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.legend .note { color: var(--ink-3); }

/* ---------- Layout ---------- */
main { max-width: 1040px; margin: 0 auto; padding: 32px 24px 120px; }
.intro { max-width: 640px; margin: 10vh auto 0; font-family: var(--serif); font-size: 19px; line-height: 1.6; }
.intro h1 { font-size: 44px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 18px; }
.intro .lede { margin: 0 0 28px; }
.intro .try { font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.intro .try p { margin: 0 0 4px; }
.intro .feat-h { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 44px 0 12px; }
.features { font-family: var(--sans); border-top: 1px solid var(--line); }
.features details { border-bottom: 1px solid var(--line); }
.features summary { display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; list-style: none; }
.features summary::-webkit-details-marker { display: none; }
.features summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border: solid var(--ink-3); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.features details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.features summary:hover b { color: var(--accent); }
.features summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.f-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.f-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f-ico svg .fill { fill: var(--accent); stroke: none; }
.f-ico svg .bar { stroke: var(--accent); stroke-width: 2.4; }
.f-ico:has(> i) { display: flex; gap: 3px; }
.f-ico > i { width: 6px; height: 18px; border-radius: 3px; background: var(--c); }
.f-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f-txt b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.f-txt span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.f-how { padding: 0 4px 18px 54px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.f-how p { margin: 0 0 8px; }
.f-how ul { margin: 0; padding-left: 18px; }
.f-how li { margin: 0 0 6px; }
.f-how b { color: var(--ink); font-weight: 600; }
.f-how .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); vertical-align: 0; }
.f-how kbd { font: 500 12px/1 var(--sans); padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--paper); color: var(--ink); }
.intro .note { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--ink-3); margin: 28px 0 0; }
@media (max-width: 640px) {
  .intro { margin-top: 4vh; font-size: 17px; }
  .intro h1 { font-size: 34px; }
  .f-how { padding-left: 4px; }
}
.chip { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--c) var(--heat-alpha), transparent); }
.status { text-align: center; color: var(--ink-2); padding: 60px 0; font-size: 15px; }
.status .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.status.error { color: var(--h0); }

.art-head { max-width: 720px; margin: 0 auto 28px; }
.art-head h1 { font-family: var(--serif); font-size: 42px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 700; }
.meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.meta a { color: var(--ink-2); }
.spark { margin-top: 14px; }
.spark svg { display: block; width: 100%; height: 44px; overflow: visible; }
.spark .lbl { font-size: 11px; color: var(--ink-3); display: flex; justify-content: space-between; margin-top: 3px; }

/* ---------- Article content ---------- */
.wl-content { max-width: 720px; margin: 0 auto; font-family: var(--serif); font-size: 19px; line-height: 1.68; }
.wl-content::after { content: ""; display: table; clear: both; }
.wl-content section { clear: none; }
.wl-content h2 { font-size: 28px; line-height: 1.25; margin: 2em 0 .5em; letter-spacing: -.01em; font-weight: 700; }
.wl-content h3 { font-size: 22px; margin: 1.6em 0 .4em; font-weight: 600; }
.wl-content h4, .wl-content h5 { font-family: var(--sans); font-size: 16px; margin: 1.4em 0 .3em; font-weight: 600; }
.wl-content p { margin: 0 0 1em; }
.wl-content ul, .wl-content ol { padding-left: 1.4em; }
.wl-content li { margin: .2em 0; }
.wl-content img { max-width: 100%; height: auto; }
.wl-content a { color: var(--accent); }
.wl-content a.new { color: #c04040; }
.wl-content sup, .wl-content sub { line-height: 0; }
.wl-content .mw-ref { font-family: var(--sans); font-size: 11px; }
.wl-content .mw-ref a { color: var(--ink-3); }
.wl-content blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--line); color: var(--ink-2); }
.wl-content dl dt { font-weight: 600; }

.wl-content figure, .wl-content .infobox, .wl-content table.float-right, .wl-content .float-right {
  float: right; clear: right; margin: 4px -140px 18px 28px; max-width: 300px;
}
.wl-content figure.mw-halign-left { float: left; clear: left; margin: 4px 28px 18px -140px; }
.wl-content figure.mw-halign-center, .wl-content figure.mw-halign-none { float: none; margin: 1.4em auto; max-width: 100%; }
.wl-content figure img { border-radius: 6px; display: block; }
.wl-content figcaption { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 6px; }
.wl-content .table-wrap { overflow-x: auto; margin: 1.2em 0; clear: both; }
.wl-content table { border-collapse: collapse; font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.wl-content table td, .wl-content table th { border: 1px solid var(--line); padding: 6px 9px; vertical-align: top; text-align: left; }
.wl-content table th { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.wl-content table.infobox, .wl-content .infobox { font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wl-content .infobox td, .wl-content .infobox th { border: 0; border-top: 1px solid var(--line); }
.wl-content .mw-references, .wl-content .references { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.wl-content .navbox, .wl-content .navframe, .wl-content .NavFrame, .wl-content .noprint.metadata, .wl-content .sisterproject,
.wl-content .mw-empty-elt, .wl-content [role="navigation"].navbox { display: none; }
.wl-content .hauptartikel, .wl-content .sieheauch, .wl-content .hatnote, .wl-content .dablink {
  font-family: var(--sans); font-size: 14px; color: var(--ink-2); font-style: italic; margin: 0 0 .8em;
}
.wl-content .thumb, .wl-content .gallery { font-family: var(--sans); font-size: 13px; }
.wl-content ul.gallery { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wl-content .mwe-math-fallback-image-inline { vertical-align: middle; }
.wl-content .mwe-math-mathml-inline, .wl-content .mwe-math-mathml-display { display: none; }

@media (max-width: 1100px) {
  .wl-content figure, .wl-content .infobox, .wl-content table.float-right, .wl-content .float-right { margin-right: 0; }
  .wl-content figure.mw-halign-left { margin-left: 0; }
}
@media (max-width: 640px) {
  .topbar, .toolbar { padding-left: 16px; padding-right: 16px; }
  .topbar { gap: 12px; }
  .toolbar { top: 55px; position: static; }
  main { padding: 20px 16px 80px; }
  .art-head h1 { font-size: 32px; }
  .wl-content { font-size: 17.5px; }
  .wl-content figure, .wl-content .infobox, .wl-content table.float-right, .wl-content .float-right,
  .wl-content figure.mw-halign-left { float: none; margin: 1em auto; max-width: 100%; }
  .legend .bar, .legend .ticks { width: 130px; }
}

/* ---------- Heatmap ---------- */
.wl-content .t { border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .15s; }
body.heat .wl-content .t[data-h] { background: color-mix(in srgb, var(--hc) var(--heat-alpha), transparent); cursor: pointer; }
body.heat .wl-content .t[data-h]:hover, body.heat .wl-content .t.hl { background: color-mix(in srgb, var(--hc) 70%, transparent); }
body.heat .wl-content .t.nomatch { color: var(--ink-3); }
body.heat .wl-content img { opacity: .55; filter: grayscale(.5); }
body.heat .wl-content section > h2, body.heat .wl-content section > h3, body.heat .wl-content section > h4 { position: relative; }
.sec-badge { display: none; }
body.heat .sec-badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-2);
  padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper);
}
.sec-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--hc); display: inline-block; }

/* ---------- Popover ---------- */
.pop {
  position: absolute; z-index: 40; width: 320px; max-width: calc(100vw - 32px);
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 12px 14px; font-family: var(--sans); font-size: 13px; line-height: 1.45;
}
.pop .when { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pop .when i { width: 10px; height: 10px; border-radius: 50%; background: var(--hc); }
.pop .sub { color: var(--ink-3); margin-top: 2px; }
.pop .row { margin-top: 8px; }
.pop .row b { font-weight: 500; color: var(--ink-2); }
.pop .comment { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2); font-style: italic; word-break: break-word; }
.pop .links { margin-top: 10px; display: flex; gap: 14px; }

/* ---------- Karte ---------- */
.nav-map {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0;
  font-size: 14px; color: var(--ink-2); padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.nav-map:hover { text-decoration: none; color: var(--ink); }
.nav-map[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.mapmode { overflow: hidden; }
.mapview {
  position: fixed; left: 0; right: 0; bottom: 0; top: 55px;
  display: grid; grid-template-columns: 360px 1fr;
}
.mapview[hidden] { display: none; }
.map { min-height: 0; background: var(--line); }
.map-side {
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
  padding: 14px 14px 0; border-right: 1px solid var(--line); background: var(--bg);
}
.place { display: flex; gap: 6px; }
.place input, .place button, .locate {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.place input { flex: 1; min-width: 0; }
.place input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 0; }
.place button { cursor: pointer; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.locate { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--accent); }
.locate:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
.locate:disabled { opacity: .6; cursor: progress; }
.near-status { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.near-status:empty { display: none; }
.near-status.error { color: var(--h0); }
.near-status .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
.near { list-style: none; margin: 0 -14px; padding: 0 8px 14px; overflow-y: auto; flex: 1; min-height: 0; }
.near button {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; width: 100%;
  font: inherit; text-align: left; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 6px; cursor: pointer;
}
.near li.hot button, .near button:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.near li.sel button { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.near .th { width: 48px; height: 48px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent) center / cover no-repeat; }
.near .tx { min-width: 0; }
.near b { display: block; font-family: var(--serif); font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.near .ds { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.near .di { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.leaflet-container { font-family: var(--sans); }
.geo-tiles { filter: saturate(.75) contrast(.95); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .geo-tiles { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.6); }
}
:root[data-theme="dark"] .geo-tiles { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.6); }
path.geo-pin { fill: var(--accent); fill-opacity: .9; stroke: var(--paper); stroke-width: 1.5; cursor: pointer; }
path.geo-pin.hot, path.geo-pin.sel { fill: var(--h0); fill-opacity: 1; }
path.geo-area { fill: var(--accent); fill-opacity: .035; stroke: var(--accent); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 4 4; }
path.geo-me { fill: #1a73e8; fill-opacity: 1; stroke: #fff; stroke-width: 3; }
path.geo-acc { fill: #1a73e8; fill-opacity: .1; stroke: #1a73e8; stroke-opacity: .3; stroke-width: 1; }
.mapview .leaflet-popup-content-wrapper, .mapview .leaflet-popup-tip { background: var(--paper); color: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.mapview .leaflet-popup-content-wrapper { border-radius: 10px; }
.mapview .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; }
.mapview .leaflet-container a.leaflet-popup-close-button { color: var(--ink-3); }
.gp img { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.gp-t { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.25; padding-right: 12px; }
.gp-d { color: var(--ink-3); margin-top: 2px; }
.gp-x { color: var(--ink-2); margin-top: 8px; }
.gp-x:empty { display: none; }
.gp-l { display: flex; gap: 14px; margin-top: 10px; }
.mapview .gp-l a { color: var(--accent); }
.mapview .leaflet-bar a { background: var(--paper); color: var(--ink); border-color: var(--line); }
.mapview .leaflet-control-attribution { background: color-mix(in srgb, var(--paper) 80%, transparent); color: var(--ink-3); }
.mapview .leaflet-control-attribution a { color: var(--ink-2); }

@media (max-width: 640px) {
  .nav-map span { display: none; }
  .nav-map { padding: 7px 9px; }
  .mapview { grid-template-columns: 1fr; grid-template-rows: 52% 48%; }
  .map { order: -1; }
  .map-side { border-right: 0; border-top: 1px solid var(--line); padding: 10px 16px 0; }
  .near { margin: 0 -16px; padding: 0 10px 14px; }
}

/* ---------- Abschnitts-Zeitleiste ---------- */
/* Feste Zeitachse: ein Jahr = --year-px (in app.js gesetzt), oben heute. Die Leiste scrollt für sich. */
:root { --ins: #2f9e5a; --del: #d64545; --mix: #c9a227; --tl-x: -100px; --tl-w: 70px; --tl-axis: 50px; }
.wl-content > section.has-tl { position: relative; scroll-margin-top: 118px; }
.tl { position: absolute; top: 0; bottom: 0; left: var(--tl-x); width: var(--tl-w); z-index: 2; }
.tl-in {
  position: sticky; top: 118px; height: min(100%, calc(100vh - 170px)); min-height: 90px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior-y: auto;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
}
.tl-in::-webkit-scrollbar { display: none; }
.tl-track { position: relative; }
.tl-line { position: absolute; left: var(--tl-axis); top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--line); }
.tl.loading .tl-more { display: block; }
.tl-tick { position: absolute; left: calc(var(--tl-axis) - 4px); width: 8px; height: 1px; background: var(--line); }
.tl-tick.yr { left: calc(var(--tl-axis) - 8px); width: 16px; height: 2px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.tl-lbl { position: absolute; right: calc(var(--tl-w) - var(--tl-axis) + 10px); transform: translateY(-50%); font: 500 9.5px/1 var(--sans); color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.tl-lbl.yr { font-weight: 700; font-size: 10.5px; color: var(--ink-2); }
.tl-now { position: absolute; top: 2px; right: calc(var(--tl-w) - var(--tl-axis) + 10px); font: 600 9.5px/1 var(--sans); color: var(--ink-2); }
.tl-end, .tl-more { position: absolute; left: 0; right: 0; font: 500 9.5px/1.3 var(--sans); color: var(--ink-3); text-align: right; padding-right: calc(var(--tl-w) - var(--tl-axis) + 10px); }
.tl-more { display: none; }
.tl-pt {
  position: absolute; left: var(--tl-axis); width: var(--s); height: var(--s); padding: 0; margin: 0;
  transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; border: 0;
  background: var(--pc); box-shadow: var(--rings), 0 0 0 calc(var(--r, 0px) + 1.5px) var(--bg);
  transition: transform .12s;
}
.tl-pt.pos { --pc: var(--ins); }
.tl-pt.neg { --pc: var(--del); }
.tl-pt.mix { --pc: var(--mix); }
.tl-pt:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 3; }
.tl-pt.faded { background: var(--bg); outline: 1.5px solid var(--pc); outline-offset: -1.5px; }
.tl-pt.active { z-index: 4; outline: 2px solid var(--ink); outline-offset: calc(var(--r, 0px) + 3px); }
.tl-pt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
section.tt-on > .tl .tl-line { background: color-mix(in srgb, var(--ink) 25%, transparent); }

.tl-tip {
  position: absolute; z-index: 45; max-width: 280px; pointer-events: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 8px 10px; font: 12.5px/1.45 var(--sans); color: var(--ink-2);
}
.tl-tip .tt-d { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.tl-tip .tt-d i { width: 8px; height: 8px; border-radius: 50%; background: var(--hc); }
.tl-tip .tt-c { margin-top: 4px; font-style: italic; color: var(--ink-3); }
.tl-tip .tt-r, .tt-bar .tt-r { color: var(--ink-3); font-style: italic; }
.plus { color: var(--ins); font-weight: 500; }
.minus { color: var(--del); font-weight: 500; }

.hist-status { color: var(--ink-3); }
.hist-status .spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 6px; }

/* Alte Fassung */
.tt { margin-bottom: 1.4em; }
.tt-bar {
  position: sticky; top: 112px; z-index: 6; margin: 0 0 18px;
  font: 13px/1.45 var(--sans); color: var(--ink-2);
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-left: 4px solid var(--hc); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.tt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tt-when { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 14px; }
.tt-when i { width: 9px; height: 9px; border-radius: 50%; background: var(--hc); flex: none; }
.tt-who { margin-top: 3px; }
.tt-cmt { margin-top: 5px; font-style: italic; color: var(--ink-3); word-break: break-word; }
.tt-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.tt-nav button, .tt-x {
  font: 500 12.5px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
}
.tt-nav button:disabled { opacity: .4; cursor: default; }
.tt-x { flex: none; }
.tt-pos { color: var(--ink-3); }
.tt-legend { margin-left: auto; display: inline-flex; gap: 6px; }
.tt-legend ins, .tt-legend del { font-size: 12px; padding: 0 5px; border-radius: 3px; }
.tt-body { opacity: 1; }
.tt-body .tt-note, .tt-body .tt-loading { font: 14px/1.5 var(--sans); color: var(--ink-3); font-style: italic; }
.tt-body .tt-loading .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 8px; }
.wl-content ins, .tt-legend ins { text-decoration: none; background: color-mix(in srgb, var(--ins) 24%, transparent); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ins) 70%, transparent); }
.wl-content del.tt-del, .tt-legend del { background: color-mix(in srgb, var(--del) 14%, transparent); color: color-mix(in srgb, var(--del) 75%, var(--ink)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--del) 80%, transparent); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tt-body img { opacity: 1 !important; filter: none !important; }
.tt-body .mw-heading { margin: 0; }

@media (max-width: 1080px) {
  :root { --tl-x: 0px; }
  .wl-content > section.has-tl { padding-left: 80px; }
}
@media (max-width: 640px) {
  :root { --tl-w: 34px; --tl-axis: 22px; }
  .wl-content > section.has-tl { padding-left: 38px; }
  .tl-lbl:not(.yr), .tl-now, .tl-end, .tl-more { display: none !important; }
  .tl-lbl.yr { right: auto; left: 0; transform: translateY(-140%); font-size: 9px; }
  .tt-bar { top: 60px; }
  .tt-legend { margin-left: 0; }
}
.wl-content ins.tt-mov, .tt-legend ins.tt-mov { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- Sprachvergleich ---------- */
.cmp-open {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px;
}
.cmp-open:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
body.cmpmode { overflow: hidden; }
.cmpview { position: fixed; left: 0; right: 0; bottom: 0; top: 55px; display: flex; flex-direction: column; }
.cmpview[hidden] { display: none; }
.cmp-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 24px; font-size: 13px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.cmp-pick { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.cmp-pick select {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; max-width: 220px;
}
.cmp-vs { color: var(--ink-3); }
.cmp-close {
  margin-left: auto; font: inherit; font-size: 13px; color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; cursor: pointer;
}
.cmp-close:hover { color: var(--ink); }
.cmp-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.cmp-pane { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 36px 120px; }
.cmp-pane + .cmp-pane { border-left: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 55%, var(--bg)); }
.cmp-pane .status { padding: 40px 0; }
.cmp-head { max-width: 680px; margin: 0 auto 22px; }
.cmp-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--ink-3); }
.cmp-tag b {
  font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--paper); background: var(--ink-2); border-radius: 4px; padding: 2px 5px;
}
.cmp-pane + .cmp-pane .cmp-tag b { background: var(--accent); }
.cmp-state { color: var(--accent); }
.cmp-state .spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-left: 8px; }
.cmp-state .err { color: var(--h0); font-style: normal; }
.cmp-state button { font: inherit; font-size: 12px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.cmp-head h1 { font-family: var(--serif); font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 8px 0 6px; font-weight: 700; }
.cmp-src { font-size: 12.5px; color: var(--ink-2); }
.cmp-pane .wl-content { max-width: 680px; font-size: 17.5px; line-height: 1.65; }
.cmp-pane .wl-content figure, .cmp-pane .wl-content .infobox, .cmp-pane .wl-content table.float-right, .cmp-pane .wl-content .float-right {
  margin: 4px 0 16px 22px; max-width: min(260px, 45%);
}
.cmp-pane .wl-content figure.mw-halign-left { margin: 4px 22px 16px 0; }
.cmp-pane .wl-content figure.mw-halign-center, .cmp-pane .wl-content figure.mw-halign-none { margin: 1.2em auto; max-width: 100%; }
.cmp-pane .tr-wait { opacity: .45; transition: opacity .2s; }
@media (max-width: 1100px) {
  .cmp-pane { padding: 22px 22px 100px; }
  .cmp-pane .wl-content figure, .cmp-pane .wl-content .infobox, .cmp-pane .wl-content table.float-right, .cmp-pane .wl-content .float-right,
  .cmp-pane .wl-content figure.mw-halign-left { float: none; margin: 1em auto; max-width: 100%; }
}
@media (max-width: 760px) {
  .cmp-bar { padding: 8px 16px; gap: 6px 10px; }
  .cmp-pick span, .cmp-close span { display: none; }
  .cmp-pick select { max-width: 130px; }
  .cmp-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .cmp-pane { padding: 14px 16px 60px; }
  .cmp-pane + .cmp-pane { border-left: 0; border-top: 2px solid var(--line); }
  .cmp-head { margin-bottom: 12px; }
  .cmp-head h1 { font-size: 24px; margin: 4px 0 2px; }
  .cmp-pane .wl-content { font-size: 16px; }
  .cmp-pane .wl-content span[style*="nowrap"] { white-space: normal !important; }
  .cmp-pane .wl-content table.infobox, .cmp-pane .wl-content .infobox { display: block; overflow-x: auto; }
}
.tt-edits { list-style: none; margin: 8px 0 0; padding: 0; max-height: 172px; overflow-y: auto; border-top: 1px solid var(--line); }
.tt-edits li { margin: 0; }
.tt-edits button {
  display: block; width: 100%; text-align: left; font: 12.5px/1.4 var(--sans); color: var(--ink-2);
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 5px 4px; cursor: pointer;
}
.tt-edits button:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tt-edits button.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.tt-edits .d { color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-edits .c { display: block; color: var(--ink-3); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }