/* Mein Ausbildungsweg */
.gruppe { margin-top: 2rem; }
h2.mit-ic { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.5rem; margin: 0 0 .6rem; }
h2.mit-ic .ic { color: var(--akzent); width: 1.4rem; height: 1.4rem; }
.jahrgang { font-family: var(--schrift); font-size: .8rem; font-weight: 700; padding: .1rem .6rem; border-radius: var(--rund-pille); background: var(--akzent-hell); color: var(--akzent); }
.leise { color: var(--tinte-leise); }
.leise-klein { font-size: .88rem; color: var(--tinte-leise); }

/* Stand */
.stand { margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-top: 4px solid var(--akzent); background: color-mix(in srgb, var(--akzent-hell) 55%, var(--blatt)); }
.stand-kopf { display: flex; align-items: center; gap: .5rem; color: var(--tinte-leise); font-size: .92rem; }
.stand-kopf .ic { color: var(--akzent); }
.stand-satz { font-family: var(--titel-schrift); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: .3rem 0 .5rem; }
.stand-balken { height: 0.75rem; border-radius: var(--rund-pille); background: var(--blatt); border: 1px solid var(--linie); overflow: hidden; max-width: var(--lesebreite); }
.stand-balken span { display: block; height: 100%; background: var(--akzent); border-radius: var(--rund-pille); }
.als-naechstes { margin-top: .7rem; font-size: .95rem; }
.als-naechstes a { font-weight: 600; }

/* Zeitstrahl */
.zs-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: 14px; background: var(--blatt); padding: .8rem; }
.zs { position: relative; min-width: 1100px; /* gestaltung: ok – Zeitstrahl hat feste Länge und scrollt im Rahmen */ }
.zs-phasen, .zs-quartale { position: relative; height: 1.7rem; margin-bottom: 3px; }
.zs-phasen span, .zs-quartale span { position: absolute; top: 0; height: 100%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; border-radius: 6px; line-height: 1; }
.zs-phasen span { background: var(--akzent); color: var(--akzent-text); outline: 2px solid var(--blatt); }
.zs-quartale span { background: var(--akzent-hell); color: var(--akzent); outline: 2px solid var(--blatt); }
.zs-monate { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); border-bottom: 2px solid var(--linie-fest); }
.zs-monate span { display: grid; justify-items: center; padding: .25rem 0; border-left: 1px solid var(--linie); }
.zs-monate b { font-size: .8rem; }
.zs-monate small { font-size: .68rem; color: var(--tinte-leise); }
.zs-bahn { position: relative; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 18 - 1px), var(--linie) calc(100% / 18 - 1px), var(--linie) calc(100% / 18)); }
.zs-ferien { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--gold) 18%, transparent); border-left: 1px dashed var(--gold); border-right: 1px dashed var(--gold); }
.zs-ereignis { position: absolute; display: inline-flex; align-items: center; gap: .3rem; height: 1.9rem; padding: 0 .55rem; border-radius: var(--rund-pille); background: var(--akzent); color: var(--akzent-text); font-size: .74rem; font-weight: 600; text-decoration: none; white-space: nowrap; z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.zs-ereignis.zeitraum { border-radius: 10px; min-width: max-content; }
.zs-ereignis .ic { width: 0.875rem; height: 0.875rem; flex: none; }
.zs-ereignis.frist { background: var(--blatt); color: var(--akzent); border: 2px solid var(--akzent); }
.zs-ereignis.vorbei { opacity: .45; }
.zs-ereignis:hover { opacity: 1; filter: brightness(1.08); z-index: 3; }
.zs-heute { position: absolute; top: -2.2rem; bottom: 0; width: 0; border-left: 3px solid var(--rot); z-index: 2; }
.zs-heute span { position: absolute; top: -1.3rem; left: -1.6rem; padding: .05rem .45rem; border-radius: var(--rund-pille); background: var(--rot); color: var(--blatt); font-size: .72rem; font-weight: 700; }
.zs-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .5rem; font-size: .82rem; color: var(--tinte-leise); }
.zs-legende i { display: inline-block; width: 0.875rem; height: 0.625rem; border-radius: 3px; vertical-align: -1px; margin-right: .2rem; }
.lg-ferien { background: color-mix(in srgb, var(--gold) 30%, transparent); border: 1px dashed var(--gold); }
.lg-termin { background: var(--akzent); }
.lg-frist { border: 2px solid var(--akzent); }
.lg-heute { background: var(--rot); width: 4px !important; }

/* Termine */
.termine { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: var(--lesebreite); }
.termin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--blatt); scroll-margin-top: 1rem; }
.termin .sym { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); line-height: 1; }
.termin .sym .ic { width: 1.125rem; height: 1.125rem; }
.termin p { margin: .15rem 0 0; font-size: .93rem; }
.termin-kopf { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.termin-kopf .wann { font-size: .85rem; font-weight: 600; color: var(--akzent); }
.marke-jetzt { font-size: .72rem; font-weight: 700; padding: .05rem .5rem; border-radius: var(--rund-pille); background: var(--rot); color: var(--blatt); }
.termin.vorbei { opacity: .6; }
.termin.naechstes { border: 2px solid var(--akzent); box-shadow: 0 2px 0 var(--akzent-hell); }
.termin.frist .sym { background: var(--blatt); border: 2px solid var(--akzent); }
.termin:target { outline: 3px solid var(--akzent); }

/* Abhaken */
.fortschritt-gesamt { display: flex; align-items: center; gap: .8rem; margin: .6rem 0 1rem; max-width: var(--lesebreite); }
.fortschritt-gesamt .spur { flex: 1; height: 0.625rem; border-radius: var(--rund-pille); background: var(--akzent-hell); overflow: hidden; }
.fortschritt-gesamt .fuell { display: block; height: 100%; background: var(--akzent); }
.aufgaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalte); align-items: start; }
@media (max-width: 800px) { .aufgaben { grid-template-columns: minmax(0, 1fr); } }
.aufgabengruppe { padding: .8rem .9rem; }
.ag-kopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.ag-kopf .ic { color: var(--akzent); width: 1.25rem; height: 1.25rem; }
.ag-kopf h3 { margin: 0; font-size: 1.15rem; flex: 1; }
.ag-kopf .fachname { flex: 1; min-width: 0; font: inherit; font-family: var(--titel-schrift); font-size: 1.1rem; padding: .2rem .5rem; border: 1px dashed var(--linie-fest); border-radius: 8px; background: transparent; color: var(--tinte); }
.ag-zahl { font-size: .8rem; font-weight: 700; color: var(--akzent); background: var(--akzent-hell); border-radius: var(--rund-pille); padding: .05rem .55rem; }
.abhaken { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.abhaken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .4rem .5rem; border-radius: 8px; }
.abhaken li.ok { background: color-mix(in srgb, var(--gruen) 12%, transparent); }
.abhaken li.bald small { color: var(--gold); font-weight: 600; }
.abhaken li.ueber small { color: var(--rot); font-weight: 600; }
.haken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; cursor: pointer; }
.haken input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--akzent); }
.haken b { display: block; font-size: .93rem; font-weight: 600; }
.abhaken li.ok b { text-decoration: line-through; text-decoration-color: var(--tinte-leise); }
.haken small { font-size: .8rem; color: var(--tinte-leise); }
.abhaken .datum { font: inherit; font-size: .82rem; padding: .15rem .3rem; border: 1px solid var(--linie-fest); border-radius: 6px; background: var(--blatt); color: var(--tinte); max-width: 9.5rem; }
@media (max-width: 480px) { .abhaken li { grid-template-columns: minmax(0, 1fr); } .abhaken .datum { justify-self: start; margin-left: 1.7rem; } }
.reiter { margin-top: 1.6rem; }
.tab { margin-top: .4rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reiter-zahl { font-size: .75rem; font-weight: 700; padding: 0 .45rem; border-radius: var(--rund-pille); background: var(--akzent-hell); color: var(--akzent); }
.reiter button[aria-selected="true"] .reiter-zahl { background: color-mix(in srgb, var(--akzent-text) 25%, transparent); color: var(--akzent-text); }
.gruppe:first-of-type { margin-top: 1.2rem; }

/* Auf dieser Seite gibt die Zeitleiste die Breite vor: alle Elemente laufen über die volle Breite */
main.rahmen { --lesebreite: 100%; }
.termine { display: grid; gap: 1rem; }
.quartal h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: .4rem 0 .5rem; padding-bottom: .3rem; border-bottom: 2px solid var(--akzent-hell); font-size: 1.2rem; }
.quartal .q-nr { color: var(--akzent); }
.quartal .q-zeit { font-family: var(--schrift); font-size: .85rem; color: var(--tinte-leise); }
.quartal.aktuell h3 { border-bottom-color: var(--akzent); }
.termine-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eng) var(--spalte); align-items: start; }
@media (max-width: 800px) { .termine-liste { grid-template-columns: minmax(0, 1fr); } }

/* Was gerade drängt (im Kasten „Heute“) */
.knapp { margin-top: 1rem; padding: .8rem 1rem .9rem; border-radius: 12px; border: 1px solid var(--linie); border-left: 4px solid var(--gold); background: var(--blatt); max-width: var(--lesebreite); }
.knapp.ueber { border-left-color: var(--rot); }
.knapp-titel { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 700; }
.knapp-titel .ic { width: 1.25rem; height: 1.25rem; color: var(--gold); }
.knapp.ueber .knapp-titel .ic { color: var(--rot); }
.knapp-text { margin: .3rem 0 .5rem; font-size: .93rem; color: var(--tinte-leise); }
.knapp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.knapp-liste a { display: grid; gap: .05rem; padding: .4rem .6rem; border-radius: 8px; background: color-mix(in srgb, var(--akzent-hell) 45%, var(--blatt)); color: var(--tinte); text-decoration: none; }
.knapp-liste a:hover { background: var(--akzent-hell); }
.knapp-liste small { color: var(--tinte-leise); font-size: .82rem; }
.knapp .leise-klein { margin: .5rem 0 0; }