/* Lehrplan-Seiten (/lehrplan/, /lehrplan/<land>/) und die Deutschlandkarte (auch auf /lehrkraefte/).
   Erzeugt von werkzeuge/seiten_lehrplan.py. */

/* ---------- Deutschlandkarte ---------- */
.dkarte { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px 28px; align-items: center;
  background: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.1); margin: 18px 0; }
.dkarteBild { position: relative; }
.dkarte svg { display: block; width: 100%; height: auto; max-height: 64vh; overflow: visible; }
.dkarte .land path { fill: #e4e9f1; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; transition: fill .2s; }
.dkarte .land.bald { cursor: default; }
.dkarte .land.bald:hover path, .dkarte .land.bald.an path { fill: #d2d9e5; }
.dkarte a.land path { fill: var(--land, var(--orange)); transition: filter .15s; }
.dkarte a.land:hover path, .dkarte a.land:focus path { filter: brightness(1.15) drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.dkarte a.land:focus { outline: none; }
.dkarte a.land:focus-visible path { stroke: var(--lila); stroke-width: 4; }
.dkarte .schrift text { font: 800 12px 'Nunito', sans-serif; fill: #8d97aa; text-anchor: middle; pointer-events: none; }
.dkarte .schrift text.klein { font-size: 10px; }
.dkarte .schrift text.name { font: 400 19px 'Lilita One', sans-serif; fill: var(--tinte); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.dkarte .schrift text.name.klein { font-size: 12px; stroke-width: 3px; }
.dkarte .karteInfo { margin: 4px 0 0; min-height: 1.6em; font-size: 21px; text-align: center; max-width: none; }
.dkarteListe h3 { margin-top: 0; }
.dkarte .laender { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 18px; font-size: 16px; }
.dkarte .laender li { break-inside: avoid; margin: 0 0 7px; max-width: none; line-height: 1.3; }
.dkarte .laender span { color: var(--bleistift); }
.dkarte .laender small { display: block; font-size: 12px; color: var(--grau); font-weight: 700; }
.dkarte .laender a.fertig { display: inline-block; font-weight: 800; text-decoration: none; background: var(--gelb); border-radius: 8px; padding: 2px 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.15); transform: rotate(-1.5deg); }
.dkarte .laender a.fertig::after { content: ' →'; }
.dkarte .laender a.fertig:hover { transform: rotate(0) scale(1.05); }
.dkarte .legende { font-size: 14px; color: var(--grau); margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dkarte .legende .punkt { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; }
.dkarte .legende .punkt.bald { background: #e4e9f1; margin-left: 10px; box-shadow: inset 0 0 0 1px #cfd6e2; }
.dkarte .legende .punkt.fertig { background: var(--orange); }
@media (max-width: 720px) {
  .dkarte { grid-template-columns: 1fr; padding: 14px; }
  .dkarte svg { max-height: none; max-width: 420px; margin: 0 auto; }
}

/* ---------- Lehrplan-Seiten ---------- */
.lehrplan section.ohneAbstand { padding-top: 0; }
.lehrplan .inhalt { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.lehrplan .inhalt li { margin: 0; }
.lehrplan .inhalt a { display: inline-block; text-decoration: none; font-weight: 800; font-size: 15px; background: #fff; border-radius: 20px; padding: 5px 12px; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.lehrplan .inhalt a:hover { background: var(--gelb); }
.steckbrief dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 16px; }
.steckbrief dt { font-weight: 800; }
.steckbrief dd { margin: 0; }
.steckbrief .klein { font-size: 14px; color: var(--grau); margin: 10px 0 0; }
.lehrplan .kurz li { margin-bottom: 10px; }
.lehrplan .jahrgaenge { font-size: 17px; }
.lehrplan .hinweis { font-size: 16px; color: var(--bleistift); }

.stufe .ziel { font-size: 19px; }
.stufe .stunden { font-size: 15px; color: var(--grau); margin-top: -4px; }
.lernbereich { background: #fff; border-radius: 14px; padding: 16px 20px 18px; margin: 22px 0; box-shadow: 0 4px 14px rgba(0,0,0,.08); border-left: 8px solid var(--lb); }
.lernbereich h3 { margin-top: 0; }
.lernbereich h3 small { display: block; font: 800 14px 'Nunito', sans-serif; color: var(--lb); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.lernbereich > p { font-size: 17px; }
.vorschlagTitel { font: 400 20px 'Gochi Hand', cursive; color: var(--bleistift); margin: 12px 0 4px; }
.wahlKurz { font-size: 15px; color: var(--grau); }

/* Vorschläge als Karten mit Art-Etikett */
.vorschlaege { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; max-width: none; }
.text .vorschlaege li { margin: 0; max-width: none; }
.vorschlaege a { display: flex; flex-direction: column; gap: 4px; height: 100%; background: #fbfaf5; border-radius: 12px; padding: 10px 14px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); text-decoration: none; color: var(--tinte); transition: transform .15s, background .15s; }
.vorschlaege a:hover { transform: scale(1.03); background: #fff6e0; }
.vorschlaege .art { align-self: flex-start; font: 800 12px/1 'Nunito', sans-serif; color: #fff; background: var(--art); border-radius: 20px; padding: 4px 9px; text-transform: uppercase; letter-spacing: .05em; }
.vorschlaege strong { font: 400 19px/1.15 'Lilita One', sans-serif; }
.vorschlaege .satz { font-size: 14px; line-height: 1.4; color: var(--bleistift); }
.vorschlaege.klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.vorschlaege.klein strong { font-size: 17px; }

.wahlRaster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.wahl { background: #fff; border-radius: 14px; padding: 14px 18px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.wahl h3 { margin-top: 0; font-size: 23px; }
.wahl p { font-size: 15px; margin: 4px 0 8px; }
.wahl .stufen { color: var(--grau); font-weight: 800; font-size: 13px; }
.wahl .luecke { font-size: 13px; color: var(--grau); margin-top: 8px; }

.auswahl li { margin-bottom: 8px; }
.monate { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; max-width: none; }
.text .monate li { background: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin: 0; max-width: none; }
.monate strong { display: block; font: 400 22px 'Lilita One', sans-serif; }
.monate span { display: block; font-size: 14px; color: var(--grau); font-weight: 800; }
.monate p { margin: 6px 0 0; font-size: 16px; }

.kern { list-style: none; padding: 0; display: grid; gap: 16px; }
.text .kern li { background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,.08); max-width: none; }
.kern > li > strong { font: 400 22px 'Lilita One', sans-serif; display: block; }
.kern > li > span { display: block; font-size: 16px; margin-bottom: 6px; }

.lehrplan .faq details { background: #fff; border-radius: 12px; padding: 12px 16px; margin: 10px 0; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lehrplan .faq summary { cursor: pointer; font-weight: 800; }
.lehrplan .faq p { margin: 8px 0 0; font-size: 16px; }
.lehrplan .quelle { font-size: 17px; margin-top: 40px; }

@media (max-width: 520px) {
  .steckbrief dl { grid-template-columns: 1fr; gap: 0; }
  .steckbrief dd { margin-bottom: 6px; }
  .lernbereich { padding: 14px 14px 16px; border-left-width: 6px; }
}
@media print {
  .vorschlaege a, .lernbereich, .wahl, .monate li { box-shadow: none; border: 1px solid #ddd; }
}