/* ==========================================================================
   VS Sebastianplatz – seitenbezogene Stile: Termine (Abreißkalender),
   Galerie und Schülerbetreuung. Baut auf site.css auf (Tokens, Karten,
   Kategorien). Eingebunden per <link> in den jeweiligen Seitenvorlagen.

   1  Termine: Seitenkopf mit Abreißkalender
   2  Termine: Werkzeugleiste (Schuljahr, Filter, Ansicht)
   3  Termine: Monatsblätter und Einträge
   4  Termine: Monatsraster
   5  Termine: Legende und Abo
   6  Galerie
   7  Schülerbetreuung
   8  Bewegung, Druck
   ========================================================================== */

/* 1 ─ Seitenkopf mit Abreißkalender ─────────────────────────────────────── */
.kal-kopf { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.kal-kopf__raster { display: grid; gap: 2.5rem 4rem; align-items: center; }
.kal-kopf__raster > * { min-width: 0; }
.kal-kopf h1 { margin-bottom: .35em; }
.kal-kopf__knoepfe { margin-top: 1.5rem; }
.kal-pfeil { width: 1.1em; height: 1.1em; }
@media (min-width: 52rem) {
  .kal-kopf__raster { grid-template-columns: minmax(0, 1fr) 19rem; }
}

.kal-kopf__block { display: grid; gap: 1.5rem; justify-items: center; }

.abreiss {
  position: relative;
  width: min(15.5rem, 78vw);
  padding-top: .9rem;
  transform: rotate(2deg);
}
/* Ringbindung */
.abreiss__ringe {
  position: absolute;
  z-index: 4;
  top: 0; left: 1.2rem; right: 1.2rem;
  height: 1.9rem;
  background:
    radial-gradient(ellipse .42rem .8rem at 50% 50%, transparent 58%, var(--tinte) 62% 86%, transparent 90%)
    center top / 1.55rem 1.9rem repeat-x;
  pointer-events: none;
}
.abreiss__stapel { position: relative; }
/* darunterliegende Blätter */
.abreiss__stapel::before,
.abreiss__stapel::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--tinte);
  border-radius: 6px 6px 20px 12px / 6px 6px 14px 22px;
  background: var(--weiss);
}
.abreiss__stapel::before { transform: translate(9px, 9px) rotate(1.6deg); background: var(--gelb); }
.abreiss__stapel::after  { transform: translate(4px, 4px) rotate(.6deg); }

.abreiss__blatt {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 1rem 1.1rem;
  overflow: hidden;
  text-align: center;
  background: var(--weiss);
  border: 3px solid var(--tinte);
  border-radius: 6px 6px 20px 12px / 6px 6px 14px 22px;
}
.abreiss__blatt > * { margin: 0; }
.abreiss__monat {
  margin: 0 -1rem .35rem;
  padding: 1.35rem .5rem .45rem;
  background: var(--himbeer);
  color: var(--papier);
  border-bottom: 3px solid var(--tinte);
  font-weight: 700;
  font-size: var(--fs-klein);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.abreiss__tag {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(5.5rem, 4.4rem + 4vw, 7.5rem);
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
}
.abreiss__wt { font-family: var(--schrift-hand); font-weight: 600; font-size: var(--fs-hand); line-height: 1.1; color: var(--himbeer); }
.abreiss__blatt--weg { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.abreiss__falter {
  position: absolute;
  z-index: 5;
  right: -1.9rem; top: -1.3rem;
  width: 4.6rem;
  transform: rotate(16deg);
}

/* „Als Nächstes“ und Countdown */
.kal-bald { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; width: min(19rem, 100%); }
.kal-bald__eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .05rem .8rem;
  padding: .6rem .9rem;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  box-shadow: 4px 4px 0 var(--blau);
}
.kal-bald__eintrag > * { grid-column: 1 / -1; }
.kal-bald__eintrag.kat-schulfrei { box-shadow: 4px 4px 0 var(--gelb); }
.kal-bald__wann { font-size: var(--fs-klein); line-height: 1.3; }
.kal-bald__wann.hand { font-size: 1.45rem; line-height: 1; color: var(--himbeer); }
.kal-bald__titel { font-weight: 700; line-height: 1.3; color: var(--tinte); }
a.kal-bald__titel { text-decoration-color: var(--himbeer); }
.kal-bald__zahl {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center;
  min-width: 3.4rem; height: 3.4rem;
  padding: 0 .35rem;
  border: var(--strich) solid var(--tinte);
  border-radius: 46% 54% 42% 58% / 55% 42% 58% 45%;
  background-color: var(--kat-farbe);
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  position: relative;
  isolation: isolate;
}
.kal-bald__zahl ~ * { grid-column: 2; }

/* 2 ─ Werkzeugleiste ────────────────────────────────────────────────────── */
.kal-werkzeug { padding-bottom: .5rem; }
.kal-jahre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.kal-jahre__titel { font-weight: 700; font-size: var(--fs-klein); color: var(--bleistift); }
.kal-jahre__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kal-jahr {
  display: inline-flex; align-items: center;
  min-height: 2.5rem;
  padding: .3rem 1rem;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-rund);
  background: var(--weiss);
  color: var(--tinte);
  font-weight: 700;
  font-size: var(--fs-klein);
  text-decoration: none;
}
.kal-jahr:hover { color: var(--tinte); background: var(--papier-tief); text-decoration: none; }
.kal-jahr[aria-current="page"] { background: var(--tinte); color: var(--papier); box-shadow: 3px 3px 0 var(--gelb); }

.kal-filter {
  padding: clamp(1rem, .8rem + 1vw, 1.5rem);
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand);
  box-shadow: 6px 6px 0 var(--rosa);
}
.kal-filter__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.kal-filter__titel { margin: 0; font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; }
.kal-filter__knoepfe { display: flex; flex-wrap: wrap; gap: .85rem .6rem; margin-top: 1rem; }
.kal-filter .filter-knopf { position: relative; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.kal-filter .filter-knopf:hover { background: var(--papier-tief); }
.kal-filter .filter-knopf[aria-pressed="true"]:hover { background: var(--kat-farbe, var(--gelb)); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinte); }
.kal-filter__zahl {
  min-width: 1.75rem;
  padding: 0 .4rem;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-rund);
  background: var(--papier-tief);
  font-size: .875rem;
  line-height: 1.45;
  text-align: center;
}
.filter-knopf[aria-pressed="true"] .kal-filter__zahl { background: var(--weiss); }
.kal-filter__stapel { display: inline-flex; }
.kal-filter__stapel .kat-marke + .kat-marke { margin-left: -.55em; }

/* Buntstift-Strich unter aktiven Filtern */
.kal-kritzel {
  position: absolute;
  left: .9rem; bottom: -.62rem;
  width: calc(100% - 1.8rem) !important;
  height: .75rem !important;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.kal-kritzel path {
  fill: none;
  stroke: var(--himbeer);
  stroke-width: 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset .45s cubic-bezier(.6, .1, .3, 1);
}
.filter-knopf[aria-pressed="true"] .kal-kritzel path { stroke-dashoffset: 0; }

.kal-filter__status { margin: 1.1rem 0 0; font-size: var(--fs-klein); font-weight: 700; color: var(--bleistift); }

/* Ansicht Liste / Monat (erst ab Tablet) */
.kal-ansicht { display: none; }
@media (min-width: 48rem) {
  .kal-ansicht {
    display: inline-flex;
    border: var(--strich) solid var(--tinte);
    border-radius: var(--r-rund);
    background: var(--weiss);
    overflow: hidden;
  }
}
.kal-ansicht__knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.6rem;
  padding: .35rem 1rem;
  border: 0;
  background: transparent;
  color: var(--tinte);
  font: inherit; font-size: var(--fs-klein); font-weight: 700;
  cursor: pointer;
}
.kal-ansicht__knopf + .kal-ansicht__knopf { border-left: var(--strich) solid var(--tinte); }
.kal-ansicht__knopf svg { width: 1.2rem; height: 1.2rem; }
.kal-ansicht__knopf:hover { background: var(--papier-tief); }
.kal-ansicht__knopf[aria-pressed="true"] { background: var(--tinte); color: var(--papier); }
.kal-ansicht__knopf:focus-visible { outline-offset: -5px; border-radius: var(--r-rund); }

/* 3 ─ Monatsblätter und Einträge ────────────────────────────────────────── */
.kal-inhalt { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.kal-druckkopf { display: none; }
.kal-spalten { display: grid; gap: 3rem; align-items: start; }
.kal-spalten > * { min-width: 0; }
@media (min-width: 64rem) {
  .kal-spalten { grid-template-columns: minmax(0, 1fr) 19.5rem; gap: 3.5rem; }
}

.kal-blatt {
  --blatt-farbe: var(--gelb);
  position: relative;
  display: grid;
  gap: 1rem;
  padding-block: 1.75rem;
  scroll-margin-top: 1rem;
}
.kal-blaetter > .kal-blatt:first-child { padding-top: .5rem; }
.kal-blatt + .kal-blatt { border-top: 3px dashed var(--haarlinie); }
.kal-blatt--gelb    { --blatt-farbe: var(--gelb); }
.kal-blatt--rosa    { --blatt-farbe: var(--rosa); }
.kal-blatt--blau    { --blatt-farbe: var(--blau); }
.kal-blatt--wiese   { --blatt-farbe: var(--wiese); }
.kal-blatt--flieder { --blatt-farbe: var(--flieder); }
.kal-blatt--orange  { --blatt-farbe: var(--orange); }

/* Kopf als Abreißblatt */
.kal-blatt__kopf {
  position: relative;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .9rem;
  margin-top: .8rem;
  padding: 1.25rem 1rem .6rem;
  background: var(--weiss);
  border: 3px solid var(--tinte);
  border-radius: 6px 6px 18px 10px / 6px 6px 12px 18px;
  box-shadow: 5px 5px 0 var(--blatt-farbe);
}
.kal-blatt__kopf::before {
  content: "";
  position: absolute;
  top: -.95rem; left: .9rem; right: .9rem;
  height: 1.6rem;
  background:
    radial-gradient(ellipse .34rem .68rem at 50% 50%, transparent 56%, var(--tinte) 60% 86%, transparent 90%)
    left top / 1.3rem 1.6rem repeat-x;
}
.kal-blatt__titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .6rem;
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.05;
}
.kal-blatt__monat { font-weight: 800; letter-spacing: -.01em; }
.kal-blatt__jahr {
  font-family: var(--schrift-text);
  font-size: var(--fs-klein);
  font-weight: 700;
  padding: .05rem .6rem;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-rund);
  background: var(--blatt-farbe);
  letter-spacing: .02em;
}
.kal-blatt__anzahl { margin: 0; font-size: 1.4rem; line-height: 1.2; color: var(--himbeer); }

@media (min-width: 48rem) {
  .kal-blatt { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.75rem; }
  .kal-blatt__kopf {
    position: sticky;
    /* unter dem stehenden Kopf der Website haltmachen, nicht dahinter */
    top: calc(var(--kopf-sticky, 6.5rem) + 2.25rem);
    display: block;
    padding: 0 .6rem .8rem;
    text-align: center;
    transform: rotate(-1.4deg);
    transition: transform .25s ease;
  }
  .kal-blatt:nth-child(even) .kal-blatt__kopf { transform: rotate(1.2deg); }
  .kal-blatt:hover .kal-blatt__kopf { transform: rotate(0deg); }
  .kal-blatt__titel { display: flex; flex-direction: column-reverse; align-items: stretch; gap: .35rem; font-size: 1.75rem; }
  .kal-blatt__jahr {
    margin: 0 -.6rem;
    padding: 1.15rem .5rem .3rem;
    border: 0;
    border-bottom: 3px solid var(--tinte);
    border-radius: 3px 3px 0 0;
    font-size: var(--fs-klein);
    letter-spacing: .1em;
  }
  .kal-blatt__monat { overflow-wrap: anywhere; hyphens: manual; padding-top: .15rem; }
  .kal-blatt__anzahl { margin-top: .1rem; }
}

/* Einträge */
.kal-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.kal-termin {
  position: relative;
  display: grid;
  grid-template-columns: 4.7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: .75rem 1rem .75rem .75rem;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand-klein);
  scroll-margin-top: 1.5rem;
  transition: box-shadow .18s ease, transform .18s ease, opacity .2s ease;
}
.kal-termin:hover { box-shadow: 5px 5px 0 var(--kat-farbe, var(--gelb)); transform: translate(-2px, -2px); }
.kal-termin:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.kal-datum {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 5rem;
  padding: .95rem .2rem .45rem;
  overflow: hidden;
  border: var(--strich) solid var(--tinte);
  border-radius: 8px 10px 7px 11px;
  background: var(--kat-farbe, var(--papier-tief));
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  text-align: center;
}
.kal-datum__muster {
  position: absolute;
  inset: 0 0 auto 0;
  height: .6rem;
  border-bottom: var(--strich) solid var(--tinte);
  background-color: var(--kat-farbe, var(--papier-tief));
  background-image: var(--kat-muster, none);
  background-size: var(--kat-muster-groesse, auto);
}
.kal-datum__wt { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.kal-datum__tag { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.95rem; line-height: 1.05; }
.kal-datum__mon { font-size: .85rem; font-weight: 700; }
.kal-datum__bis {
  margin-top: .35rem;
  padding: .1rem .3rem;
  border-top: 1.5px dashed var(--tinte);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
/* mehrtägig: zweites Blatt dahinter */
.kal-termin--zeitraum .kal-datum { overflow: visible; box-shadow: 4px 4px 0 -1px var(--weiss), 4px 4px 0 1px var(--tinte); }
.kal-termin--zeitraum .kal-datum__muster { border-radius: 6px 8px 0 0; }

.kal-termin__inhalt { display: grid; gap: .35rem; min-width: 0; }
.kal-termin__titel {
  margin: .1rem 0 0;
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.kal-termin__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
  font-size: var(--fs-klein);
  color: var(--bleistift);
  font-variant-numeric: tabular-nums lining-nums;
}
.kal-termin__wann { color: var(--tinte); }
.kal-termin__tage { color: var(--bleistift); }

/* heute / vorbei */
.kal-termin--heute { border-width: 3px; box-shadow: 6px 6px 0 var(--himbeer); }
.kal-termin--heute:hover { box-shadow: 7px 7px 0 var(--himbeer); }
/* Angesprungener Termin (von der Startseite): Buntstift-Rahmen, der kurz
   aufleuchtet und dann als ruhige Markierung stehen bleibt. */
.kal-termin--ziel { outline: 4px solid var(--gelb); outline-offset: 4px; box-shadow: 6px 6px 0 var(--kat-farbe, var(--himbeer)); }
@media (prefers-reduced-motion: no-preference) {
  .kal-termin--ziel { animation: kal-ziel 1.2s ease-out 1; }
}
@keyframes kal-ziel {
  0%   { outline-color: var(--himbeer); outline-offset: 12px; transform: scale(1.015); }
  60%  { outline-color: var(--gelb); outline-offset: 4px; transform: scale(1); }
  100% { outline-color: var(--gelb); outline-offset: 4px; }
}
.kal-termin--vorbei { background: rgb(255 255 255 / .5); border-style: dashed; border-color: var(--bleistift); padding-right: 2.6rem; }
.kal-termin--vorbei .kal-datum { filter: saturate(.3); border-color: var(--bleistift); }
.kal-termin--vorbei .kal-termin__titel,
.kal-termin--vorbei .kal-termin__wann { color: var(--bleistift); }
.kal-termin--vorbei .abzeichen { filter: saturate(.35); }
.kal-termin--vorbei::after {
  content: "";
  position: absolute;
  top: .8rem; right: .8rem;
  width: 1.35rem; height: 1.35rem;
  background: var(--text-gruen);
  -webkit-mask: url("../img/zeichnungen/deko-haken.svg") center / contain no-repeat;
  mask: url("../img/zeichnungen/deko-haken.svg") center / contain no-repeat;
}

/* Heute-Markierung zwischen den Einträgen */
.kal-heute {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .15rem 0;
  color: var(--himbeer);
  scroll-margin-top: 2rem;
}
.kal-heute:focus { outline: none; }
.kal-heute:focus-visible .kal-heute__text { outline: 3px solid var(--fokus); outline-offset: 3px; }
.kal-heute::after {
  content: "";
  flex: 1;
  height: .8rem;
  background: var(--himbeer);
  -webkit-mask: url("../img/zeichnungen/deko-welle.svg") left center / 3.5rem 100% repeat-x;
  mask: url("../img/zeichnungen/deko-welle.svg") left center / 3.5rem 100% repeat-x;
}
.kal-heute__falter { width: 2.9rem; flex: none; transform: rotate(-12deg); }
.kal-heute__text { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kal-heute__text .hand { font-size: 1.9rem; line-height: 1; }
.kal-heute__datum { font-weight: 700; font-size: var(--fs-klein); color: var(--tinte); }

/* Details */
.kal-details summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: .1rem .15rem;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-klein);
  color: var(--himbeer);
  border-radius: 6px;
}
.kal-details summary::-webkit-details-marker { display: none; }
.kal-details summary::before {
  content: "";
  width: .9rem; height: .9rem;
  background: currentColor;
  -webkit-mask: url("../img/zeichnungen/deko-winkel.svg") center / contain no-repeat;
  mask: url("../img/zeichnungen/deko-winkel.svg") center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform .2s ease;
}
.kal-details[open] summary::before { transform: none; }
.kal-details summary:hover { color: var(--himbeer-tief); text-decoration: underline wavy; text-underline-offset: .2em; }
.kal-details__inhalt {
  margin-top: .4rem;
  padding: .8rem .95rem;
  background: var(--papier);
  border: 1.5px dashed var(--bleistift);
  border-radius: var(--r-hand-klein);
  font-size: var(--fs-klein);
}
.kal-details__text { font-size: var(--fs-klein); }
.kal-details__text > :first-child { margin-top: 0; }
.kal-details__text > :last-child { margin-bottom: 0; }
.kal-details__fuss { margin: .75rem 0 0; }
.kal-details__fuss:first-child { margin-top: 0; }

.kal-leer-filter { margin-top: 1rem; }

@media (max-width: 29.99rem) {
  .kal-termin { grid-template-columns: 4rem minmax(0, 1fr); gap: .8rem; padding: .65rem .75rem .65rem .6rem; }
  .kal-termin--vorbei { padding-right: 2.2rem; }
  .kal-datum__tag { font-size: 1.7rem; }
  .kal-termin__titel { font-size: 1.125rem; }
  .kal-termin__meta { gap: .3rem .75rem; }
}

/* 4 ─ Monatsraster ──────────────────────────────────────────────────────── */
.kal-raster {
  position: relative;
  margin-top: .8rem;
  padding: 1.6rem clamp(.75rem, .5rem + 1vw, 1.4rem) 1.25rem;
  background: var(--weiss);
  border: 3px solid var(--tinte);
  border-radius: 8px 8px var(--r-hand);
  box-shadow: 7px 7px 0 var(--blau);
}
.kal-raster::before {
  content: "";
  position: absolute;
  top: -1rem; left: 1.5rem; right: 1.5rem;
  height: 1.8rem;
  background:
    radial-gradient(ellipse .38rem .76rem at 50% 50%, transparent 56%, var(--tinte) 60% 86%, transparent 90%)
    center top / 2.2rem 1.8rem repeat-x;
}
.kal-raster__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.kal-raster__titel { margin: 0; font-family: var(--schrift-titel); font-weight: 800; font-size: var(--fs-h2); line-height: 1.1; }
.kal-raster__titel small { font-family: var(--schrift-text); font-size: var(--fs-klein); font-weight: 700; color: var(--bleistift); margin-left: .4rem; }
.kal-raster__nav { display: flex; gap: .5rem; }
.kal-raster__nav .knopf { min-width: 2.75rem; }
.kal-raster__hilfe { margin: 0 0 .6rem; font-size: .9375rem; color: var(--bleistift); }

.kal-raster__tabelle { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: .3rem; margin: 0 -.3rem; width: calc(100% + .6rem); }
.kal-raster__tabelle th { padding: .15rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleistift); text-align: center; }
.kal-raster__tabelle td { padding: 0; vertical-align: top; }

.kal-tag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  width: 100%;
  min-height: clamp(4.4rem, 3rem + 3vw, 6.25rem);
  padding: .3rem .35rem .4rem;
  border: 2px solid var(--haarlinie);
  border-radius: 8px 10px 7px 11px;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kal-tag:hover { border-color: var(--tinte); }
.kal-tag--we { background: var(--papier-tief); }
.kal-tag--hat { border-color: var(--tinte); }
/* Schulfreie Tage: mit gelbem Buntstift übermalt */
.kal-tag--frei {
  background-color: var(--weiss);
  background-image:
    repeating-linear-gradient(-62deg, rgb(255 210 63 / .85) 0 4px, rgb(255 210 63 / .45) 4px 6px, rgb(255 210 63 / .9) 6px 9px, rgb(255 210 63 / .55) 9px 11px);
}
.kal-tag__zahl {
  align-self: flex-start;
  display: grid; place-items: center;
  min-width: 1.8rem; height: 1.8rem;
  padding: 0 .2rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.kal-tag--heute { border-color: var(--himbeer); border-width: 3px; }
.kal-tag--heute .kal-tag__zahl { background: var(--himbeer); color: var(--papier); }
.kal-tag--vorbei .kal-tag__zahl { color: var(--bleistift); }
.kal-tag[aria-pressed="true"] { border-color: var(--tinte); box-shadow: 4px 4px 0 var(--tinte); transform: translate(-2px, -2px); z-index: 1; }
.kal-tag:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; z-index: 2; }
.kal-tag__kurz {
  display: none;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 69.99rem) { .kal-tag__kurz { display: none; } }
.kal-tag__streifen { display: grid; gap: 3px; margin-top: auto; }
.kal-streifen {
  display: block;
  height: .6rem;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-rund);
  background-color: var(--kat-farbe, var(--papier-tief));
  background-image: var(--kat-muster, none);
  background-size: var(--kat-muster-groesse, auto);
}
.kal-streifen--weiter-links  { margin-left: -.75rem; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.kal-streifen--weiter-rechts { margin-right: -.75rem; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.kal-tag__mehr { font-size: .75rem; font-weight: 700; line-height: 1; }

.kal-raster__auswahl { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 3px dashed var(--haarlinie); }
.kal-raster__auswahl-titel { margin: 0 0 .75rem; font-family: var(--schrift-titel); font-weight: 700; font-size: var(--fs-h4); }
.kal-raster__auswahl-leer { margin: 0; color: var(--bleistift); }

/* 5 ─ Legende und Abo ───────────────────────────────────────────────────── */
.kal-seite { display: grid; gap: 2.5rem; align-content: start; }
.kal-legende { box-shadow: 5px 5px 0 var(--wiese); }
.kal-legende li { align-items: center; }
.kal-legende__muster { color: var(--bleistift); font-size: .875rem; }

.kal-abo {
  position: relative;
  padding: 1.35rem 1.25rem 1.25rem;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: var(--r-hand);
  box-shadow: 6px 6px 0 var(--gelb);
  scroll-margin-top: 1.5rem;
}
.kal-abo:focus { outline: none; }
.kal-abo__bild { position: absolute; top: -1.6rem; right: -.6rem; width: 4.8rem; transform: rotate(10deg); }
.kal-abo__titel { margin: 0 0 .5rem; padding-right: 3.6rem; font-size: var(--fs-h3); }
.kal-abo__text { font-size: var(--fs-klein); }
.kal-abo__text p { margin: 0 0 .75rem; }
.kal-abo__knopf { width: 100%; }
.kal-abo__feld { margin-top: .5rem; }
.kal-abo__feld .feld__label { font-size: var(--fs-klein); }
.kal-abo__zeile { display: flex; flex-wrap: wrap; gap: .5rem; }
.kal-abo__zeile .eingabe { flex: 1 1 12rem; min-width: 0; min-height: 2.6rem; padding: .4rem .6rem; font-size: .875rem; }
.kal-abo__zeile .knopf { flex: 1 0 auto; }
.kal-abo__datei { margin: .9rem 0 0; font-size: var(--fs-klein); }
.kal-anleitung { margin-top: 1.1rem; padding-top: .9rem; border-top: 2px dashed var(--haarlinie); }
.kal-anleitung__titel { margin: 0 0 .3rem; font-family: var(--schrift-hand); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: var(--himbeer); }
.kal-anleitung details { border-bottom: 1px solid var(--haarlinie); }
.kal-anleitung summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 2.6rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: var(--fs-klein);
}
.kal-anleitung summary::-webkit-details-marker { display: none; }
.kal-anleitung summary::after {
  content: "";
  width: .85rem; height: .85rem; flex: none;
  background: var(--tinte);
  -webkit-mask: url("../img/zeichnungen/deko-winkel.svg") center / contain no-repeat;
  mask: url("../img/zeichnungen/deko-winkel.svg") center / contain no-repeat;
  transition: transform .2s ease;
}
.kal-anleitung details[open] summary::after { transform: rotate(180deg); }
.kal-anleitung__text { font-size: .9375rem; padding-bottom: .6rem; }
.kal-anleitung__text ol { margin: 0; padding-left: 1.25rem; }
.kal-anleitung__text li + li { margin-top: .3rem; }

/* 6 ─ Galerie ───────────────────────────────────────────────────────────── */
.alben-jahr + .alben-jahr { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.alben-jahr__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: 1.5rem; }
.alben-jahr__kopf h2 { margin: 0; }
.alben-jahr__kopf .hand { margin: 0; color: var(--himbeer); font-size: 1.5rem; }
.alben { list-style: none; margin: 0; padding: 0; }
.album .karte__bild { position: relative; aspect-ratio: 4 / 3; }
.album__anzahl {
  position: absolute; right: .7rem; bottom: .7rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .65rem;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-rund);
  background: var(--weiss);
  font-size: .9375rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.album__anzahl svg { width: 1rem; height: 1rem; }
.album__ohne-bild { display: grid; place-items: center; height: 100%; }
.album__ohne-bild .zeichnung { width: 45%; }
.album:nth-child(3n+2) { transform: rotate(.6deg); }
.album:nth-child(3n+3) { transform: rotate(-.5deg); }

.galerie-leer { max-width: 44rem; margin-inline: auto; padding-block: 2.5rem; }
.galerie-leer .zeichnung { width: 9rem; }
.galerie-leer .reihe { justify-content: center; margin: .75rem 0 0; }

.galerie-kopf__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 .75rem; font-weight: 700; color: var(--bleistift); font-size: var(--fs-klein); }
.galerie-detail__zurueck { margin: 0 0 1rem; }
.galerie-detail__zurueck a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.galerie-detail__zurueck svg { width: 1.1em; height: 1.1em; }
.galerie-detail__fuss { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.galerie--detail { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.galerie__bild:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* 7 ─ Schülerbetreuung ─────────────────────────────────────────────────── */
.module { list-style: none; margin: 0; padding: 0; }
.modul .karte__inhalt { gap: .65rem; }
.modul__kopf { display: flex; align-items: center; gap: .8rem; }
.modul__titel { margin: 0; }
.modul__name { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: break-word; hyphens: manual; }
.modul__buchstabe {
  flex: none;
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem;
  border: var(--strich) solid var(--tinte);
  border-radius: 46% 54% 42% 58% / 55% 42% 58% 45%;
  background: var(--karte-farbe);
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
}
.modul__zeit {
  display: flex; gap: .5rem; align-items: flex-start;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.modul__zeit svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .2rem; }
.modul__preis { margin: 0; padding: .45rem .7rem; background: var(--papier-tief); border-radius: var(--r-hand-klein); font-size: var(--fs-klein); }
.modul__text { margin: 0; font-size: var(--fs-klein); }

/* Ablauf eines Nachmittags als Zeitleiste */
.tageslauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
/* Geometrie: Zeitspalte 8,5rem | Lücke 4rem | Inhalt. Linie und Blatt-Marke
   sitzen mittig in der Lücke, dadurch bleibt links wie rechts ~1,3rem Luft
   zwischen Marke und Text. Vorher klebten Zeit, Strich und Titel aneinander. */
.tageslauf__schritt {
  --schritt-farbe: var(--gelb);
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 4rem;
  padding-bottom: 2.5rem;
}
.tageslauf__schritt:last-child { padding-bottom: 0; }
.tageslauf__schritt:nth-child(2) { --schritt-farbe: var(--blau); }
.tageslauf__schritt:nth-child(3) { --schritt-farbe: var(--wiese); }
.tageslauf__schritt:nth-child(4) { --schritt-farbe: var(--flieder); }
.tageslauf__schritt::before {
  content: "";
  position: absolute;
  left: calc(10.5rem - 1.5px);
  top: 1.9rem; bottom: .3rem;
  border-left: 3px dashed var(--tinte);
}
.tageslauf__schritt:last-child::before { display: none; }
.tageslauf__zeit { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; text-align: right; line-height: 1.35; padding-top: .15rem; }
.tageslauf__inhalt { position: relative; padding-left: 0; }
.tageslauf__inhalt::before {
  content: "";
  position: absolute;
  left: -2.675rem; top: .2rem;
  width: 1.35rem; height: 1.35rem;
  border: var(--strich) solid var(--tinte);
  border-radius: 62% 8% 62% 8%;
  background: var(--schritt-farbe);
}
.tageslauf__titel { margin: 0 0 .4rem; font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.tageslauf__text { margin: 0; color: var(--bleistift); line-height: 1.55; }
@media (max-width: 36rem) {
  /* Telefon: Zeit über dem Inhalt, Linie und Marke links am Rand. */
  .tageslauf__schritt { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding-left: 2.75rem; padding-bottom: 2rem; }
  .tageslauf__schritt::before { left: calc(.7rem - 1.5px); top: 1.7rem; }
  .tageslauf__zeit { text-align: left; }
  .tageslauf__inhalt::before { left: -2.725rem; top: -1.75rem; }
}

.betreuung-knoepfe { --reihe-abstand: .75rem 1rem; margin-top: 1.5rem; }
.betreuung-module-hinweis { margin-bottom: 2rem; }
.betreuung-essen { margin-top: 2.5rem; max-width: 48rem; }
.betreuung-essen .hinweis__zeichen { font-family: var(--schrift-text); font-weight: 700; }
.betreuung-team__foto::before { bottom: 3.5rem; }
.betreuung-ablauf { align-items: start; }
.betreuung-ablauf .zeichnung { margin-top: 1.5rem; }
.betreuung-personen { margin-top: 3.5rem; }
.betreuung-team__foto { max-width: 52rem; margin-inline: auto; }
.betreuung-kontakt .fliesstext p { margin-bottom: .75rem; }

/* 8 ─ Bewegung, Druck ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .abreiss__blatt--weg {
    transform-origin: 12% 0;
    animation: kal-abreissen 1.25s cubic-bezier(.5, 0, .75, .4) .7s forwards;
  }
  .abreiss__falter { animation: kal-landen 1.1s cubic-bezier(.2, .8, .3, 1) 1.5s both; }
  .abreiss__falter svg { transform-origin: 50% 50%; }
  .kal-blatt.ist-neu { animation: kal-umblaettern .5s cubic-bezier(.2, .7, .3, 1) both; }
  .kal-blatt.ist-neu .kal-blatt__kopf { transform-origin: 50% 0; }
  .kal-termin.ist-neu { animation: kal-einblenden .35s ease-out both; }
  .kal-heute__falter { animation: kal-wippen 3.2s ease-in-out infinite; }
  .kal-details[open] .kal-details__inhalt { animation: kal-aufklappen .22s ease-out; }
  .kal-blatt.ist-angesprungen .kal-blatt__kopf { animation: kal-wackeln .6s ease-in-out; }
  .kal-raster.ist-neu { animation: kal-einblenden .3s ease-out both; }
}
@keyframes kal-abreissen {
  0%   { transform: none; opacity: 1; }
  18%  { transform: rotate(-7deg) translateY(4px); }
  35%  { transform: rotate(-11deg) translate(-4px, 10px); opacity: 1; }
  100% { transform: rotate(-38deg) translate(-40%, 150%); opacity: 0; }
}
@keyframes kal-landen {
  0%   { transform: translate(-9rem, -5rem) rotate(-30deg) scale(.7); opacity: 0; }
  60%  { transform: translate(.4rem, .3rem) rotate(24deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(16deg); opacity: 1; }
}
@keyframes kal-umblaettern {
  from { opacity: 0; transform: perspective(900px) rotateX(-28deg) translateY(-10px); transform-origin: 50% 0; }
  to   { opacity: 1; transform: none; }
}
@keyframes kal-einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kal-aufklappen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes kal-wippen { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-4px); } }
@keyframes kal-wackeln { 0%, 100% { rotate: 0deg; } 25% { rotate: -3deg; } 60% { rotate: 2.5deg; } }

@media (prefers-reduced-motion: reduce) {
  .abreiss__blatt--weg { display: none; }
  .kal-termin:hover, .kal-tag[aria-pressed="true"] { transform: none; }
}

@media print {
  .kal-kopf__block, .kal-kopf__knoepfe, .kal-kopf .brotkrumen, .kal-werkzeug, .kal-seite, .kal-details,
  .kal-heute, .kal-raster-platz, .kal-leer-filter, .kal-termin--vorbei::after { display: none !important; }
  .kal-blaetter[hidden] { display: block !important; }
  .kal-kopf { padding-block: 0 .5rem; }
  .kal-kopf .einleitung { display: none; }
  .kal-druckkopf { display: block; margin: 0 0 .5rem; font-size: 9pt; color: #444; }
  .kal-inhalt { padding-top: 0; }
  .kal-spalten { display: block; }
  .kal-blatt { display: grid; grid-template-columns: 3.6cm 1fr; gap: .5cm; padding-block: .3cm; border-top: .5pt solid #999 !important; }
  .kal-blatt__kopf { position: static; transform: none !important; box-shadow: none; border: 0; padding: 0; text-align: left; margin: 0; display: block; }
  .kal-blatt__kopf::before { display: none; }
  .kal-blatt__titel { display: block; font-size: 16pt; }
  .kal-blatt__jahr { display: block; margin: 0; padding: 0; border: 0; background: none; font-size: 10pt; }
  .kal-blatt__anzahl { display: none; }
  .kal-liste { gap: 0; }
  .kal-termin {
    grid-template-columns: 1.4cm 1fr; gap: .3cm; padding: .12cm 0;
    border: 0; border-bottom: .5pt dotted #bbb; border-radius: 0; background: none;
    box-shadow: none !important; transform: none !important; break-inside: avoid;
  }
  .kal-termin--vorbei { opacity: 1; }
  .kal-termin--vorbei .kal-datum, .kal-termin--vorbei .abzeichen { filter: none; }
  .kal-termin--vorbei .kal-termin__titel, .kal-termin--vorbei .kal-termin__wann { color: #000; }
  .kal-datum { min-height: 0; padding: .3rem .1rem .2rem; box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kal-datum__muster { display: none; }
  .kal-datum__wt, .kal-datum__mon, .kal-datum__bis { font-size: 7pt; }
  .kal-datum__tag { font-size: 13pt; }
  .kal-termin__titel { font-size: 11pt; }
  .kal-termin__meta { font-size: 8.5pt; color: #333; }
  .kal-termin__meta .abzeichen { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 8pt; }
  .album { transform: none !important; }
}