/* =====================================================================
   Jahresplan (Seite termine.html) – gehört nach css/jahresplan.css
   Baut auf den Farben aus style.css auf (Variablen --sun, --pink ...).
   Aufbau: 1 Farben je Klassenstufe · 2 Filter/Legende · 3 Monatsband
           4 Ganzjahr · 5 Zeitstrahl und Termine · 6 Markierungen · 7 Desktop
   ===================================================================== */

/* 1 ── FARBEN JE KLASSENSTUFE ─────────────────────────────────────── */
.jp .k6{--k:var(--sun);--kp:var(--sun-pale);--kd:var(--sun-deep)}
.jp .k7{--k:var(--sky);--kp:var(--sky-pale);--kd:var(--sky-deep)}
.jp .k8{--k:var(--blue);--kp:var(--blue-pale);--kd:var(--blue-deep)}
.jp .k9{--k:var(--pink);--kp:var(--pink-pale);--kd:var(--pink-deep)}
.jp .k10{--k:var(--hill);--kp:var(--hill-pale);--kd:var(--hill-deep)}
.jp .kmix{--k:var(--mint);--kp:var(--mint-pale);--kd:var(--mint-deep)}
.jp [hidden]{display:none!important}
.jp > .lead{max-width:44rem;margin-bottom:0}
.jp h2{margin-top:0}
.punkt{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:50%;background:var(--k,var(--slate));border:1.5px solid var(--ink)}

/* 2 ── FILTER (nur mit JavaScript) UND LEGENDE (nur ohne JavaScript) ─ */
.jp-filter{display:none;margin:1.4rem 0 0}
.js .jp-filter{display:block}
.jp-filter__titel{margin:0 0 .5rem;font-weight:700}
.jp-filter ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.jp-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;min-width:2.75rem;padding:.3rem 1rem;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:600 1rem var(--font-text);cursor:pointer}
.jp-btn:hover{background:var(--paper-2)}
.jp-btn[aria-pressed="true"]{background:var(--ink);color:#fff}
.jp-legende{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.jp-legende li{display:inline-flex;align-items:center;gap:.5rem}
.js .jp-legende{display:none}

/* 3 ── MONATSBAND (springt zum Monat) ─────────────────────────────── */
.jp-band{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.jp-band a,.jp-band .leer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.6rem;padding:.35rem .2rem;border:1.5px solid var(--ink);border-radius:14px;background:var(--slate-pale);color:var(--ink);text-decoration:none;font-weight:700;line-height:1.2;text-align:center}
.jp-band a:hover{background:var(--slate)}
.jp-band small{font-size:.8rem;font-weight:500;color:var(--ink-soft)}
.jp-band .leer,.jp-band a.leer{border:1.5px dashed #8a949a;background:transparent;color:#5b676e;font-weight:500}
.jp-band a.leer:hover{background:transparent}
.jp-band li.aktuell a,.jp-band li.aktuell .leer{background:var(--sun);box-shadow:inset 0 0 0 2px var(--ink)}
.jp-band li.aktuell small{color:var(--ink)}

/* 4 ── DAS GANZE JAHR ─────────────────────────────────────────────── */
.jp section{margin-top:2.6rem}
.jp-jahr{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem}
.jp-jahr li{display:grid;gap:.3rem;padding:1rem 1.2rem 1.1rem;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--kp)}
.jp-jahr li::before{content:"";width:3rem;height:.8rem;margin-bottom:.2rem;background:var(--kd);-webkit-mask:var(--welle) no-repeat center/100% 100%;mask:var(--welle) no-repeat center/100% 100%}
.jp-jahr p{margin:0}
.jp-jahr__wann{font-weight:700;font-size:1.2rem;line-height:1.25}
.jp-jahr__titel{font-size:1.02rem}

/* 5 ── ZEITSTRAHL UND TERMINE ─────────────────────────────────────── */
.jp-zeit{margin-top:1.4rem}
.jp .jp-monat{position:relative;margin-top:0;padding:0 0 .6rem 2.1rem}
.jp-monat::before{content:"";position:absolute;left:.6rem;top:1.1rem;bottom:0;border-left:2px solid var(--ink)}
.jp-mh{position:relative;margin:0 0 .8rem;font-size:clamp(1.7rem,6vw,2.2rem)}
.jp-mh::before{content:"";position:absolute;left:calc(-2.1rem + 1px);top:.55rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--sun);border:2px solid var(--ink)}
.jp-monat.aktuell .jp-mh::before{background:var(--ink);box-shadow:0 0 0 3px var(--sun)}
.jp-jahrzahl{font:500 1rem var(--font-text);color:var(--ink-soft)}
.jp-events{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}

.termin{position:relative;display:grid;grid-template-columns:4.8rem 1fr;gap:.9rem;align-items:start;padding:.8rem .9rem .8rem .8rem;border-radius:var(--radius);background:var(--kp)}
.termin::before{content:"";position:absolute;left:calc(-1.9rem + 1px);top:1.5rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--k);border:1.5px solid var(--ink)}
.datum{padding:.35rem .2rem .45rem;border:1.5px solid var(--ink);border-radius:14px;background:var(--k);text-align:center;line-height:1.1}
.datum__tag{display:block;font-size:.8rem;font-weight:600}
.datum__zahl{display:block;font-size:1.6rem;font-weight:700}
.datum--bereich .datum__zahl{font-size:1.2rem}
.termin__text{min-width:0}
.termin__titel{margin:0;font-weight:700;font-size:1.08rem;line-height:1.3;-webkit-hyphens:auto;hyphens:auto}
.termin__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.45rem 0 0}
.termin__hinweis{margin:.4rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.1rem .7rem;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font-size:.88rem;font-weight:600;line-height:1.5}
.tag--frist{background:var(--sun-pale);border-style:dashed}
.termin--frist .datum{border-style:dashed}

/* 6 ── MARKIERUNGEN (setzt das Skript je nach heutigem Datum) ─────── */
.jp .marke{display:inline-flex;align-items:center;padding:.1rem .7rem;border:1.5px solid var(--ink);border-radius:999px;font-size:.88rem;font-weight:700;line-height:1.5}
.jp .marke--naechster{background:var(--ink);color:#fff}
.jp .marke--jetzt{background:var(--sun)}
.jp .marke--vorbei{border-color:#8a949a;color:#46545c;font-weight:600}
.termin--vorbei{background:var(--paper-2)}
.termin--vorbei::before{background:var(--paper-2);border-color:#8a949a}
.termin--vorbei .datum{background:var(--paper);border-color:#8a949a;color:#46545c}
.termin--vorbei .termin__titel{color:#46545c}
.termin--naechster{box-shadow:0 0 0 2px var(--ink)}
.jp-status{min-height:1.5rem;margin:1.6rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.jp-ende{margin-top:.4rem}

/* 7 ── GRÖSSERE BILDSCHIRME ───────────────────────────────────────── */
@media (min-width:30rem){.jp-band{grid-template-columns:repeat(6,1fr)}}
@media (min-width:40rem){
  .jp-jahr{grid-template-columns:repeat(2,1fr)}
  .termin{grid-template-columns:5.6rem 1fr;padding:.9rem 1.1rem .9rem .9rem}
}
@media (min-width:50rem){
  .jp-events{grid-template-columns:repeat(2,1fr)}
  /* Zeitstrahl-Punkt nur in der linken Spalte, sonst schwebt er mitten auf der Seite */
  .jp-events .termin:nth-child(even)::before{display:none}
}
@media (min-width:48rem){.jp-band{grid-template-columns:repeat(11,1fr)}}
@media print{.jp-filter{display:none!important}.termin{break-inside:avoid}}