/* Kursseiten (Mathe Kaufleute) */
.home { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-family: var(--mono); font-weight: 600; color: var(--green); }
.home .logo { width: 36px; height: 36px; }
.course { margin: 1.6rem 0 .5rem; color: var(--pico-muted-color); }
.course .bi { color: var(--green); }
.week-title { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin: .4rem 0 1.4rem; font-size: clamp(1.5rem, 5vw, 2.2rem); }
.week-badge { font-family: var(--mono); color: var(--green); padding: .3rem 1.1rem; border: 1px solid rgba(157,191,168,.5); border-radius: 999px; font-size: .7em; white-space: nowrap; }
.weeks { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.6rem; }
.weeks li { margin: 0; padding: 0; list-style: none; flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; font-family: var(--mono); border: 1px solid rgba(157,191,168,.25); color: var(--pico-muted-color); }
.weeks li.done { background: rgba(157,191,168,.15); color: var(--green); }
.weeks li.current { background: var(--green-dark); border-color: var(--green); color: #fff; font-weight: 700; }
.intro { max-width: 46rem; color: var(--pico-color); }
.muted { color: var(--pico-muted-color); }

.quick { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.quick a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border: 1px solid var(--green); border-bottom-width: 3px; border-radius: .6rem; text-decoration: none; font-weight: 600; background: var(--green-dark); color: #f2f6f3; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s, background .15s, border-color .15s; }
.quick a .bi { margin: 0; }
.quick a:hover, .quick a:focus-visible { background: #5d8a6f; border-color: var(--red); transform: translateY(-2px); }
.quick a:active { transform: translateY(1px); border-bottom-width: 1px; }

/* Tagesablauf (kompakt, Details per Aufklappen) */
.h-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.h-row h2 { margin: 0; }
.mini { width: auto; margin: 0; padding: .3rem .8rem; font-size: .8rem; background: transparent; color: var(--green); border: 1px solid rgba(157,191,168,.4); border-radius: 999px; }
.mini:hover, .mini:focus-visible { background: rgba(157,191,168,.12); }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.timeline > li { margin: 0; padding: 0; list-style: none; border: 1px solid rgba(157,191,168,.15); border-left: 3px solid var(--green-dark); border-radius: .4rem; background: rgba(255,255,255,.02); }
.timeline details { margin: 0; }
.timeline summary, .timeline .row { display: grid; grid-template-columns: 3.3rem 1fr auto; align-items: center; column-gap: .8rem; padding: .4rem .8rem; margin: 0; line-height: 1.3; }
.timeline summary { grid-template-columns: 3.3rem 1fr auto 1rem; }
.timeline summary::after { margin: 0 0 0 .2rem; float: none; width: .9rem; height: .9rem; background-size: contain; background-repeat: no-repeat; opacity: .6; }
.timeline details[open] > summary { margin-bottom: 0; }
.timeline summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: .3rem; }
.timeline .time { font-family: var(--mono); font-weight: 600; color: var(--green); font-size: .9rem; }
.timeline .tt { font-weight: 500; }
.timeline .tt .bi { color: var(--green); }
.timeline .dur { font-size: .75rem; color: var(--pico-muted-color); font-family: var(--mono); white-space: nowrap; }
.timeline .more { padding: .1rem .8rem .7rem calc(3.3rem + 1.6rem); }
.timeline .more p { margin: 0; font-size: .92rem; color: var(--pico-muted-color); }
.timeline li.pause { border-left-color: #8a5856; opacity: .8; }
.timeline li.pause .tt .bi { color: var(--red); }
.timeline li.now { border-color: var(--green); background: rgba(157,191,168,.1); box-shadow: 0 0 0 1px var(--green); }
.timeline li.now .time::after { content: " ●"; color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; text-decoration: none; background: rgba(157,191,168,.12); color: var(--green); border: 0; width: auto; margin: 0; font-weight: 400; }
.chip .bi { margin: 0; }
a.chip:hover, button.chip:hover { background: rgba(157,191,168,.25); }
.chip.soon { opacity: .55; cursor: default; }

/* Material */
.mat-group { margin-bottom: 1.6rem; }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.mat { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; text-align: left; font: inherit; color: inherit; text-decoration: none; border: 1px solid rgba(157,191,168,.25); border-bottom-width: 3px; border-radius: .6rem; background: rgba(255,255,255,.03); cursor: pointer; transition: transform .15s, border-color .15s, background .15s; width: 100%; }
a.mat:hover, a.mat:focus-visible, button.mat:hover, button.mat:focus-visible { transform: translateY(-2px); border-color: var(--green); background: rgba(157,191,168,.08); }
.mat .ico { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: .5rem; background: var(--green-dark); color: #f2f6f3; font-size: 1.15rem; }
.mat .ico .bi { margin: 0; }
.mat b { display: block; line-height: 1.25; }
.mat small { display: block; color: var(--pico-muted-color); margin-top: .15rem; line-height: 1.35; }
.mat .go { margin-left: auto; color: var(--green); opacity: .8; }
.mat .go .bi { margin: 0; }
.mat.soon { cursor: default; opacity: .6; border-style: dashed; border-bottom-width: 1px; }
.mat.soon .ico { background: rgba(157,191,168,.12); color: var(--green); }
.mat .tag { display: inline-block; font-style: normal; font-size: .65rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 0 .4rem; border: 1px solid rgba(157,191,168,.35); border-radius: 999px; color: var(--pico-muted-color); vertical-align: .1em; white-space: nowrap; }
.mat.img { flex-direction: column; }
.mat.img img { width: 100%; max-height: 10rem; object-fit: cover; border-radius: .4rem; background: #1c2620; }
.mat.img .row { display: flex; gap: .8rem; width: 100%; align-items: flex-start; }

/* Spickzettel */
.steps { padding-left: 1.2rem; }
.steps li { margin-bottom: .4rem; }
.rule { margin: .4rem 0; padding: .5rem .8rem; border-radius: .4rem; background: rgba(196,114,111,.1); border-left: 3px solid var(--red); font-size: .95rem; }
.rule .bi { color: var(--red); }
.xl-wrap { overflow-x: auto; }
.xl { font-size: .85rem; margin-bottom: .8rem; }
.xl th, .xl td { padding: .3rem .6rem; white-space: nowrap; border: 1px solid rgba(157,191,168,.25); }
.xl thead th, .xl tbody th { background: rgba(157,191,168,.1); color: var(--green); font-weight: 500; text-align: center; }
.tips { list-style: none; padding: 0; margin: 0; }
.tips li { list-style: none; margin: 0 0 .4rem; font-size: .92rem; }
.tips .bi { color: var(--green); }

/* Lightbox */
#lightbox article { position: relative; margin: 0; max-width: min(96vw, 60rem); width: 100%; max-height: 94vh; overflow: auto; padding: 1rem; border: 1px solid rgba(157,191,168,.35); border-radius: .8rem; background: #1c2620; color: #e8efe9; }
#lightbox article img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: .4rem; background: #1c2620; }
.lb-cap { margin: .6rem 0 .3rem; color: var(--pico-muted-color); }
.lb-close { position: absolute; top: .5rem; right: .5rem; width: 2.4rem; height: 2.4rem; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--green-dark); border: 1px solid var(--green); color: #fff; z-index: 1; }
.lb-close .bi { margin: 0; }

@media (max-width: 576px) {
  .weeks li { width: 1.7rem; height: 1.7rem; }
  .quick a { flex: 1 1 100%; justify-content: center; }
}
.mat > span:nth-child(2) { flex: 1; min-width: 0; }
.mat .go { flex: none; }

/* Abstände Kursseiten */
.site-header + main section { margin-top: 2.6rem; }
.container > section > h2 { margin-bottom: 1rem; }
.mat-group { margin-bottom: 1.4rem; }
.mat-group h3 { margin-bottom: .7rem; }
@media (max-width: 576px) {
  .timeline summary, .timeline .row { grid-template-columns: 3rem 1fr auto; column-gap: .5rem; padding: .4rem .6rem; }
  .timeline summary { grid-template-columns: 3rem 1fr auto 1rem; }
  .timeline .more { padding-left: calc(3rem + 1.1rem); }
  .timeline .dur { display: none; }
  .week-title { margin-bottom: 1.1rem; }
}
@media (max-width: 576px) { .timeline .tt { font-size: .88rem; } .timeline .time { font-size: .82rem; } .timeline .tt .bi { margin-right: .15em; } }

/* Kursübersicht */
.week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .8rem; }
.wk { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 6rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit; border: 1px solid var(--green); border-bottom-width: 3px; border-radius: .6rem; background: rgba(157,191,168,.08); transition: transform .15s, border-color .15s, background .15s; }
a.wk:hover, a.wk:focus-visible { transform: translateY(-2px); border-color: var(--red); background: rgba(157,191,168,.14); }
a.wk:active { transform: translateY(1px); border-bottom-width: 1px; }
.wk-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wk-num { font-family: var(--mono); font-size: .8rem; color: var(--green); text-transform: uppercase; letter-spacing: .06em; }
.wk-title { font-size: 1.1rem; line-height: 1.3; }
.wk small { color: var(--pico-muted-color); line-height: 1.35; }
.wk-go { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .6rem; background: var(--green-dark); color: #fff; }
.wk-go .bi { margin: 0; }
.wk.soon { border: 1px dashed rgba(157,191,168,.3); border-bottom-width: 1px; background: rgba(255,255,255,.02); opacity: .65; cursor: default; }
.tag-soon { flex: none; font-size: .65rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 0 .5rem; border: 1px solid rgba(157,191,168,.35); border-radius: 999px; color: var(--pico-muted-color); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.crumbs .back { font-size: .9rem; color: var(--pico-muted-color); text-decoration: none; }
.crumbs .back:hover { color: var(--green); }

/* Zuklappbare Material-Kategorien */
details.mat-group { margin: 0 0 .8rem; border: 1px solid rgba(157,191,168,.18); border-radius: .6rem; background: rgba(255,255,255,.015); }
details.mat-group > summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0; padding: .7rem 1rem; font-family: var(--mono); font-size: 1rem; line-height: 1.3; }
details.mat-group > summary::after { flex: none; margin: 0; float: none; }
details.mat-group > summary .gt .bi { color: var(--red); }
details.mat-group > summary .cnt { margin-left: auto; font-size: .75rem; color: var(--pico-muted-color); }
details.mat-group > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: .5rem; }
details.mat-group[open] > summary { margin-bottom: 0; }
details.mat-group > .mat-grid { padding: .2rem 1rem 1rem; }