/* css/kalender-leiste.css — Knopf «Termine» und kleines Fenster (js/kalender-leiste.js)   [NEUE-VERSION] Auftrag 144, Fenster KU
 * Ein Aussehen auf Ebene 1, 2 und 3. Der Knopf ist so hoch wie die anderen Kopf-Knöpfe (die Kopfzeile wird nicht höher). */
.kl-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; min-height: 44px; height: 44px; padding: 0 6px; margin-left: 4px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit;
  font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.kl-knopf:hover, .kl-knopf:focus-visible { border-color: rgba(0, 0, 0, 0.18); background: rgba(0, 0, 0, 0.04); }
.kl-knopf:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.kl-knopf__zeichen { font-size: 1.05rem; }
.kl-knopf__zahl { font-size: 0.78rem; font-weight: 700; min-width: 0; }
.kl-knopf--mit .kl-knopf__zahl { background: #1e40af; color: #fff; border-radius: 9px; padding: 1px 5px; }
@media (max-width: 420px) {
  .kl-knopf { flex-direction: column; gap: 0; padding: 0 2px; min-width: 44px; }
  .kl-knopf__zahl { font-size: 0.68rem; }
}

.kl-fenster {
  position: fixed; z-index: 4000; max-height: min(78vh, 640px); overflow: auto; box-sizing: border-box;
  background: #fff; color: #111827; border: 1px solid #cbd5e1; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22); padding: 8px 10px 10px; font-size: 0.95rem; text-align: left;
}
@media (max-width: 600px) {
  .kl-fenster { left: 8px !important; right: 8px; width: auto !important; top: auto !important; bottom: 8px !important; max-height: 82vh; }
}
.kl-kopf { display: flex; align-items: center; gap: 4px; }
.kl-kopf__titel { flex: 1 1 auto; font-weight: 700; }
.kl-kopf button { min-width: 44px; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; font: inherit; cursor: pointer; }
.kl-kopf__heute { padding: 0 10px; }
.kl-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 6px 0; }
.kl-raster__kopf { text-align: center; font-size: 0.75rem; color: #475569; font-weight: 600; }
.kl-tag {
  position: relative; min-height: 44px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
  font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px;
}
.kl-tag--heute { border-color: #1e40af; font-weight: 700; }
.kl-tag[aria-pressed="true"] { background: #dbeafe; border-color: #1e40af; box-shadow: inset 0 0 0 1px #1e40af; }
.kl-tag--ferien { background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 4px, #eef2f7 4px, #eef2f7 8px); color: #64748b; }
.kl-tag__punkt { font-size: 0.7rem; font-weight: 700; background: #1e40af; color: #fff; border-radius: 8px; padding: 0 5px; line-height: 1.3; }
.kl-tag__kopf { font-weight: 700; margin: 6px 0 2px; }
.kl-abschnitt { margin-top: 6px; }
.kl-abschnitt__titel { font-size: 0.9rem; margin: 4px 0; color: #334155; }
.kl-hinweis { color: #475569; font-size: 0.88rem; margin: 2px 0; }
.kl-eintrag { border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px 8px; margin: 4px 0; }
.kl-eintrag--hier { border-color: #1e40af; }
.kl-eintrag__kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.kl-eintrag__fach { font-weight: 700; }
.kl-eintrag__hier { font-size: 0.75rem; border: 1px solid #1e40af; color: #1e40af; border-radius: 6px; padding: 0 4px; }
.kl-eintrag__kachel { font-size: 0.85rem; color: #334155; overflow-wrap: anywhere; }
.kl-eintrag__fuss { display: flex; justify-content: flex-end; }
.kl-eintrag__oeffnen, .kl-klasse__namen, .kl-geben__oeffnen, .kl-band__nochmals, .kl-stand__uebernehmen {
  min-height: 44px; padding: 0 12px; border: 1px solid #1e40af; border-radius: 8px; background: #fff; color: #1e40af; font: inherit; cursor: pointer; margin-top: 4px;
}
.kl-ergaenzung { margin: 3px 0; font-size: 0.88rem; background: #f8fafc; border-left: 3px solid #94a3b8; padding: 2px 6px; overflow-wrap: anywhere; }
.kl-ergaenzung__frueher summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 0.85rem; color: #475569; }
.kl-stand { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kl-stand__wahl { flex: 1 1 30%; min-height: 48px; min-width: 48px; border: 1px solid #94a3b8; border-radius: 10px; background: #fff; font: inherit; cursor: pointer; padding: 2px 6px; }
.kl-stand__wahl--an { background: #1e40af; color: #fff; border-color: #1e40af; font-weight: 700; }
.kl-stand__vorschlag { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.88rem; }
.kl-klasse { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 0.88rem; }
.kl-klasse__liste { flex: 1 1 100%; margin: 2px 0 0 18px; padding: 0; }
.kl-band { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: #fef3c7; border: 1px solid #f59e0b; font-size: 0.88rem; }
.kl-geben-wrap { margin-top: 8px; border-top: 1px solid #e2e8f0; padding-top: 6px; }
.kl-geben__zeile { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; font-size: 0.88rem; }
.kl-geben__zeile .sch-input { min-height: 44px; box-sizing: border-box; width: 100%; font: inherit; }
.kl-geben__haken { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 0.88rem; }
.kl-geben__haken input { width: 22px; height: 22px; }
.kl-geben__eintragen { min-height: 44px; width: 100%; margin-top: 4px; }

/* In den Kopfzeilen der Kacheln (Ebene 1, 2, 3): sichtbar klein, damit die Kopfzeile nicht höher wird und nicht umbricht;
 * die Tippfläche bleibt über den unsichtbaren Rand (::after) mindestens 44 x 44 px. */
.thema-karte__kopf .kl-knopf, .arbeitsraum-tfkachel .kl-knopf, .arbeitsraum-themenfeld .kl-knopf, .kachel-uebersicht__karte .kl-knopf {
  position: relative; height: 26px; min-height: 26px; min-width: 20px; padding: 0; margin: -9px 0 -9px 0; gap: 0; border: 0;
}
.thema-karte__kopf .kl-knopf::after, .arbeitsraum-tfkachel .kl-knopf::after, .arbeitsraum-themenfeld .kl-knopf::after, .kachel-uebersicht__karte .kl-knopf::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.thema-karte__kopf .kl-knopf__zeichen, .arbeitsraum-tfkachel .kl-knopf__zeichen { font-size: 0.95rem; }
.thema-karte__kopf .kl-knopf__zahl, .arbeitsraum-tfkachel .kl-knopf__zahl { font-size: 0.68rem; }

/* Auftrag 155 (KU2): ruhiger Satz nach einem Sprung, der nicht sichtbar ankommt */
.kl-sprung-hinweis {
  position: fixed; z-index: 4001; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100vw - 32px); box-sizing: border-box;
  background: #fef3c7; color: #111827; border: 1px solid #f59e0b; border-radius: 10px; padding: 8px 12px; font-size: 0.95rem;
}

/* Auftrag 155 (KU2, PB F7): auf den Themenfeld-Kacheln (Ebene 2) sass der Knopf auf der oberen Kante (Mitte 18 px über KW-Feld/Auge).
 * Jetzt mittig auf der Zeile und die Tippfläche ist echt 44 x 44 px; der negative Rand hält die Kopfzeile gleich hoch. */
.arbeitsraum-tfkachel .thema-karte__kopf .kl-knopf, .arbeitsraum-tfkachel .kl-knopf {
  height: 44px; min-height: 44px; min-width: 44px; margin: -8px 0; align-self: center;
}
.arbeitsraum-tfkachel .kl-knopf::after { content: none; }

/* Ohne Auge in der Kopfzeile (Kind): der Knopf steht nicht auf einer eigenen Zeile über dem Titel, sondern rechts in der Titelzeile.
 * Auftrag 186 (3.11.2026): seit Auftrag 181 wohnt das Auge der Lehrperson im «⋯» (.sichtbarkeit-menue in der Leiste) statt im Kopf;
 * «kein Auge» heisst darum auch «kein Sichtbarkeits-Block an der Karte». Sonst traf die Regel Administrator und Lehrperson:
 * Kopf einzeilig, Titel 5 Zeichen breit und bis 34 Zeilen hoch (Riegel: werkzeuge/pruef-kachel-geometrie.js). */
.arbeitsraum-tfkachel:not(:has(.sichtbarkeit-menue)) .thema-karte__kopf:not(:has(.thema-sichtbarkeit-schnellschalter)):has(> .kl-knopf) { flex-wrap: nowrap; align-items: center; }
.arbeitsraum-tfkachel:not(:has(.sichtbarkeit-menue)) .thema-karte__kopf:not(:has(.thema-sichtbarkeit-schnellschalter)) > .kl-knopf { order: 2; margin: -12px -6px -12px 2px; }
.arbeitsraum-tfkachel:not(:has(.sichtbarkeit-menue)) .thema-karte__kopf:not(:has(.thema-sichtbarkeit-schnellschalter)) > .thema-zeile__titel { flex: 1 1 auto; min-width: 0; }