/* ===============================
   Analysis – Base Layout
   =============================== */

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  max-width:1100px;
  margin:24px auto;
  padding:0 16px;
  line-height:1.35;
}

h1{margin:0 0 6px}

.meta{opacity:.75;margin:0 0 18px}

code{
  background:rgba(0,0,0,.05);
  padding:2px 6px;
  border-radius:6px;
}

/* ===============================
   Content blocks / boxes
   =============================== */

.box{
  padding:12px 12px 10px;
  border-radius:8px;
  background:rgba(0,0,0,.02);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  margin:18px 0;
}

.note{opacity:.9}
.hint{opacity:.8;margin-top:6px}

/* Box-Titel */
.box > h2,
.box > h3,
.box > h4{
  margin:0 0 .6rem;
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(0,0,0,.12);
  font-weight:600;
  letter-spacing:.01em;
}

.box > h2{font-size:1.25rem}

/* ===============================
   Tables
   =============================== */

table{
  border-collapse:collapse;
  width:100%;
  margin:12px 0 0;
}

th,td{
  border-bottom:1px solid rgba(0,0,0,.12);
  padding:8px 10px;
  text-align:left;
}

td.num, th.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

th{background:rgba(0,0,0,.04)}

/* ===============================
   SVG charts (global)
   =============================== */

.chart-wrap{margin-top:10px}

svg{width:100%;height:auto;display:block}

.axis{
  stroke:rgba(0,0,0,.28);
  stroke-width:1;
  shape-rendering:crispEdges;
}

.gridline{
  stroke:rgba(0,0,0,.10);
  stroke-width:1;
  shape-rendering:crispEdges;
}

.lbl{font-size:12px;fill:rgba(0,0,0,.75)}
.lbl-small{font-size:11px;fill:rgba(0,0,0,.65)}

/* ===============================
   Linien / Bänder (Autokorr & Co.)
   =============================== */

.line1{fill:none;stroke:rgba(0,0,0,.70);stroke-width:2}
.line2{fill:none;stroke:rgba(192,57,43,.90);stroke-width:2.4}

/* Signifikanz / Median / Current */
.line{fill:none;stroke:rgba(0,0,0,.75);stroke-width:2.2}
.band{fill:rgba(0,0,0,.10);stroke:none}
.median{fill:none;stroke:rgba(0,0,0,.70);stroke-width:2}
.current{fill:none;stroke:rgba(192,57,43,.90);stroke-width:2.6}

/* ===============================
   Saison-Autokorrelation
   =============================== */

.w  {fill:none;stroke:rgba(52,152,219,.95);stroke-width:2.4}  /* Winter */
.sp {fill:none;stroke:rgba(46,204,113,.95);stroke-width:2.4}  /* Spring */
.su {fill:none;stroke:rgba(241,196,15,.95);stroke-width:2.4}  /* Summer */
.au {fill:none;stroke:rgba(230,126,34,.95);stroke-width:2.4}  /* Autumn */
.dash{stroke-dasharray:5 4}

/* ===============================
   Legends / Swatches
   =============================== */

.legend{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  opacity:.9;
  margin-top:8px;
}

.sw1{width:14px;height:0;border-top:2px solid rgba(0,0,0,.70)}
.sw2{width:14px;height:0;border-top:3px solid rgba(192,57,43,.90)}

.sw-band{width:14px;height:10px;border-radius:2px;background:rgba(0,0,0,.08)}
.sw-line{width:14px;height:0;border-top:2px solid rgba(0,0,0,.75)}
.sw-line2{width:14px;height:0;border-top:3px solid rgba(192,57,43,.92)}

.sw{width:18px;height:0;border-top:3px solid #000}
.sw-w{border-top-color:rgba(52,152,219,.95)}
.sw-sp{border-top-color:rgba(46,204,113,.95)}
.sw-su{border-top-color:rgba(241,196,15,.95)}
.sw-au{border-top-color:rgba(230,126,34,.95)}
.sw-dash{border-top-style:dashed;border-top-width:3px}

/* ===============================
   Kontextnavigation
   =============================== */

.context-nav{
  margin:12px 0 14px;
  padding:10px 12px;
  background:#fafafa;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  font-size:.95rem;
  line-height:1.4;
  opacity:.95;
}

.context-nav a,
.context-nav a:visited{
  color:#4a5fd2;
  font-weight:500;
  text-decoration:none;
}

.context-nav a:hover{ text-decoration:underline }

.context-nav a.active,
.context-nav a.active:visited{
  font-weight:700;
  text-decoration:underline;
}

/* ===============================
   Explain / Details (collapsible)
   =============================== */

.lag-explain{
  font-size:.95rem;
  line-height:1.35;
  color:#444;
  background:#fafafa;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  padding:14px 16px;
  margin:18px 0;
}

.lag-explain h4{
  margin:0 0 8px;
  font-size:1rem;
}

.lag-explain ul{
  margin:8px 0 6px 18px;
  padding:0;
}

.lag-explain li{margin:4px 0}

.lag-explain .note{
  margin-top:6px;
  font-size:.9rem;
  color:#666;
}

/* details / summary */
.lag-explain summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.02rem;
  color:#2c3e50;
  list-style:none;
}

.lag-explain summary::-webkit-details-marker{display:none}

.lag-explain summary::before{
  content:"▸";
  display:inline-block;
  margin-right:8px;
  opacity:.7;
}

.lag-explain[open] summary::before{content:"▾"}

/* ===============================
   Footer
   =============================== */

.footer{
  margin-top:48px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.15);
  font-size:.9em;
  opacity:.75;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}
/* ===============================
   Persistenz (Lag-Plots): Layout & Controls
   =============================== */

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
@media (min-width:900px){
  .grid{grid-template-columns:1fr 1fr}
}
.span-2{grid-column:1 / -1}

/* Controls row */
.controls{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}
.control{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.control label{
  opacity:.85;
  font-size:.95rem;
}
select{
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.8);
  padding:6px 10px;
  border-radius:999px;
  font:inherit;
}

/* Saison-Buttons */
.season-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.season-filters button{
  border:1px solid rgba(0,0,0,.18);
  background:rgba(0,0,0,.02);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
}
.season-filters button.on{background:rgba(0,0,0,.08)}

/* Lag-Plot spezifisch */
.diag{stroke:rgba(192,57,43,.55);stroke-width:1.5;stroke-dasharray:4 4}

.pt{fill:rgba(0,0,0,.18)}
.pt-current{fill:rgba(192,57,43,.85);stroke:rgba(192,57,43,.95);stroke-width:.6}

/* Jahr hervorheben */
.pt-year-dim{opacity:.12}
.pt-year-hi{opacity:1}

/* Saisonfilter: nur Referenzwolke einfärben, Rest ausgrauen */
body.filter-spring  .pt:not(.season-spring),
body.filter-summer  .pt:not(.season-summer),
body.filter-autumn  .pt:not(.season-autumn),
body.filter-winter  .pt:not(.season-winter){
  fill:rgba(0,0,0,.05);
}
body.filter-spring  .pt.season-spring{fill:rgba(46,204,113,.35)}
body.filter-summer  .pt.season-summer{fill:rgba(241,196,15,.35)}
body.filter-autumn  .pt.season-autumn{fill:rgba(230,126,34,.35)}
body.filter-winter  .pt.season-winter{fill:rgba(52,152,219,.35)}

/* Laufendes Jahr bleibt rot */
body.filter-spring  .pt-current,
body.filter-summer  .pt-current,
body.filter-autumn  .pt-current,
body.filter-winter  .pt-current{
  fill:rgba(192,57,43,.85);
}

/* Persistenz-Legende */
.swatch{width:12px;height:12px;border-radius:3px;background:rgba(0,0,0,.18)}
.swatch-current{
  width:12px;height:12px;border-radius:50%;
  background:rgba(192,57,43,.85);
  border:1px solid rgba(192,57,43,.95)
}
.swatch-diag{width:14px;height:0;border-top:2px dashed rgba(192,57,43,.55)}

.rho-ref code{font-weight:600}