/* plan.css – inchstones.ch Kalender · Version 1.11.1
   V1.11.1: Zahlenfeld «Jahr» wie die anderen Felder, Semester-Kacheln einzeilig (die Basis macht jedes label in .field zum Block), Beginn nicht über die ganze Breite.
   V1.11.0: Zeitraum als Kacheln: Jahr und Semester nur bei Art Semester/Jahr, Beginn und Monate nur bei «Eigener Zeitraum» (:has, ohne JavaScript).
   V1.10.1: Ausblenden/Einblenden als Icon-Button (.plan-aus-aktion).
   V1.10.0: Editor im Plan wie im Wochenplan: Tage anklicken (.plan-anker, .plan-fenster), Textfeld in der Zelle (.plan-zellinput), Texte fest/lokal (.plan-fix, .plan-lokal); Hover ohne filter (der erzeugte eine eigene Ebene und liess das Feld flackern); Popup, Hinweisleiste und Feld mit Knöpfen entfallen.
   V1.9.0: Text direkt in der Zelle des Plans (.plan-inline).
   V1.8.0: Tage im Plan anklicken (Zeile hervorgehoben, Beginn markiert), Hinweisleiste unten (.plan-auswahl), «+» nur ohne JavaScript, Kategorien im Popup als einfache Auswahl.
   V1.7.0: Aktionsleiste (Export, Speichern) am Ende des Plans, Schritte und Hilfe-Symbole im Formular.
   V1.6.0: Kategorien wie im Wochenplan (Farbpunkt wechselt die Farbe, Stift ändert den Namen), Leiste «Kategorien und Farben», eigene Einträge im Plan anklickbar (.plan-eig-link), Knopf «Eintrag löschen».
   V1.5.0: Popup (<dialog>) und Formular für Einträge im Stil des Wochenplans (Kategorie-Chips, Farbpunkt, nummerierte Schritte); die Farbfelder als Auswahl entfallen.
   V1.4.0: eigene Einträge: Farben p-c0 … p-c11 (Palette), «+» pro Tag (.plan-plus), Formular «Eintrag am …» mit Farbwahl (.plan-farben), Liste der eigenen Einträge (.plan-eig-liste),
           Liste «Ferien und Feiertage im Plan» zum Ausblenden (.plan-aus-liste).
   V1.3.0: Ansicht in Monatsblöcken (am Computer nebeneinander und seitlich scrollbar, auf dem Handy untereinander mit Monatsauswahl .plan-monatsnav); eingeklappte Anleitung (.anleitung-box)
           und eingeklapptes Formular (.plan-einst); Zeile «Als Datei herunterladen» (.datei-knoepfe) für Jahresplan und Wochenplan.
   V1.2.2: Auswahl Kantone/Schulen auf den Portalseiten: «.portal [hidden] { display: none !important }» (portal.css) verdeckte die gewählte Liste, die Schulen waren im öffentlichen Jahresplan nicht anwählbar; die Regel für die gewählte Liste gilt jetzt ebenfalls mit !important und höherer Genauigkeit.
   V1.2.1: schmale Auswahlfelder (.field-kurz, z. B. Anzahl Monate).
   V1.2.0: «Weitere Einstellungen» (details) im Formular.
   V1.1.1: Auswahl Kantone/Schulen: die gewählte Liste wird sichtbar, auch wenn sie als «hidden» ausgeliefert wurde (ohne Skript); Tage mit fester Höhe, Texte geklippt (Tooltip), KW-Zahl überlagert.
   V1.1.0: Samstag, Ferien in einigen Orten, Violett für schulfreie Tage; Textspalte eigene Farbe; Auswahl wie im Abo-Konfigurator (auch im Admin-Bereich).
   Jahresplan im Browser (kalender/plan.php und Admin-Reiter «Plan»): Raster 12 Monate × 31 Tage wie die Excel-Vorlage.
   Farben wie in Excel und PDF (Sonntag FFD757, Samstag FFE8A0, Feiertag FFC000, Ferien BDD7EE/DDEBF7, schulfrei D9D2E9, teilfrei E9E5F3, Anlass EDEDED, eigene C6E0B4).
   Keine Inline-Styles nötig (strenge CSP). */

.plan-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; background: #fff; margin: 12px 0; }
.plan-monate { display: flex; min-width: 1900px; }
.plan-m { flex: 1 1 0; min-width: 0; }
table.plan { border-collapse: separate; border-spacing: 0; font-size: 11px; line-height: 1.2; width: 100%; table-layout: fixed; }
h3.plan-kopf { margin: 0; font-size: 12px; font-weight: 700; text-align: center; padding: 4px 2px; border: 1px solid #000; background: #fff; color: #000; }
.plan-monatsnav { display: none; margin: 8px 0 0; }
table.plan td { padding: 0; height: 34px; vertical-align: top; border-bottom: 1px solid #d0d0d0; color: #000; }
table.plan td.plan-d { width: 44px; padding: 2px 3px; border-left: 1px solid #000; white-space: nowrap; }
table.plan td.plan-t { border-right: 1px solid #000; }
table.plan tbody tr:last-child td { border-bottom: 1px solid #000; }
.plan-x { position: relative; height: 34px; overflow: hidden; padding: 2px 3px; font-size: 9px; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
.plan-kw { font-weight: 700; color: #b0b0b0; }
.plan-kw-gross { position: absolute; right: 3px; bottom: -2px; font-size: 16px; line-height: 1; font-family: "Arial Black", Arial, sans-serif; font-weight: 900; }
.plan-kw-text { font-size: 9px; font-weight: 400; color: #7f7f7f; }

.p-so { background: #FFD757; }
.p-sa { background: #FFE8A0; }
.p-h  { background: #FFC000; }
.p-f  { background: #BDD7EE; }
.p-f1 { background: #DDEBF7; }
.p-s  { background: #D9D2E9; }
.p-t  { background: #E9E5F3; }
.p-a  { background: #EDEDED; }
.p-e  { background: #C6E0B4; }
/* eigene Einträge: die zwölf Farben der Palette (gleich in Excel, PDF und im Wochenplan) */
.p-c0 { background: #BDD7EE; } .p-c1 { background: #FFC000; } .p-c2 { background: #C6E0B4; } .p-c3 { background: #8FD3B0; } .p-c4 { background: #D9D2E9; } .p-c5 { background: #F8CBAD; }
.p-c6 { background: #FFD757; } .p-c7 { background: #B7E1E4; } .p-c8 { background: #F4C6DB; } .p-c9 { background: #DDEBF7; } .p-c10 { background: #E7DAC3; } .p-c11 { background: #EDEDED; }

/* Handy: Monate untereinander, Text voll lesbar, Monatsauswahl oben */
@media (max-width: 700px) {
  .plan-monatsnav { display: flex; }
  .plan-wrap { overflow: visible; border: 0; background: transparent; }
  .plan-monate { display: block; min-width: 0; }
  .plan-m { margin-bottom: 16px; background: #fff; scroll-margin-top: 12px; }
  table.plan { font-size: 13px; }
  table.plan td { height: auto; }
  table.plan td.plan-d { width: 56px; }
  .plan-x { height: auto; min-height: 34px; overflow: visible; font-size: 12px; }
}

/* Eingeklappte Anleitung und eingeklapptes Formular (öffentliche Seiten und Admin) */
.anleitung-box > summary, .plan-einst > summary { cursor: pointer; padding: 4px 0; }
.anleitung-box[open] > summary, .plan-einst[open] > summary { margin-bottom: 10px; }
.plan-einst > .plan-form { border: 0; padding: 0; box-shadow: none; margin: 0; }

/* Zeile «Als Datei herunterladen» (Jahresplan und Wochenplan) */
.datei-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.datei-knoepfe .klein { margin-right: 4px; }

button.plan-plus { appearance: none; display: inline-block; margin: 0 0 0 3px; padding: 0; min-width: 16px; height: 16px; line-height: 14px; font: inherit; font-weight: 700; text-align: center; color: var(--akzent-dunkel, #3b4652); background: transparent; border: 0; border-radius: 3px; cursor: pointer; opacity: .55; }
.plan-plus-form { display: none; }
.plan-plus-form input { display: none; }
@media (max-width: 700px) { button.plan-plus { min-width: 28px; height: 28px; line-height: 26px; font-size: 18px; } }
.plan-plus:hover, .plan-plus:focus-visible { opacity: 1; background: rgba(255, 255, 255, .8); outline: 2px solid var(--orange-dark, #b36b00); }
table.plan td.plan-d { white-space: nowrap; }

/* Formular «Eintrag am …» */
/* Popup und Formular für Einträge: Chips, Farbpunkt und Schritte wie im Wochenplan (wochenplan.css: .wp-chip, .wp-chipfarbe, .wp-tool, .wp-schritt) */
.wp-chip { position: relative; cursor: pointer; }
.wp-chip input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wp-chip:has(input:checked) { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: 2px; }
.wp-chip:has(input:checked) .wp-tool { font-weight: 700; }
.wp-chip:has(input:focus-visible) { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: 2px; }
.plan-eintrag .wp-chipfarbe { cursor: pointer; }
.wp-chip .wp-chipfarbe:not(button) { cursor: pointer; }
.plan-farbzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.plan-farbchip { cursor: default; }
html.js .ohne-js { display: none; }
.plan-eintrag .feld-zeile { display: flex; flex-wrap: wrap; gap: 12px; }

/* Liste eigener Einträge und Liste zum Ausblenden */
.plan-eig-liste, .plan-aus-liste { list-style: none; margin: 8px 0; padding: 0; }
.plan-eig-liste li, .plan-aus-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.plan-eig-datum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-eig-aktionen { margin-left: auto; display: inline-flex; gap: 4px; }
.plan-aus-weg { opacity: .65; }
.plan-aus-aktion { margin-left: auto; white-space: nowrap; }
.plan-aus > summary { cursor: pointer; padding: 4px 0; }

.plan-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 8px 0 4px; font-size: .9rem; }
.plan-legende li { display: flex; align-items: center; gap: 6px; }
.plan-farbe { display: inline-block; width: 18px; height: 12px; border: 1px solid #000; }
/* Auswahl Kantone/Schulen: gleiche Regeln wie im Portal (portal.css), damit sie auch im Admin-Bereich gelten */
.plan-form .radio-opt:has(input:checked) { border-color: var(--orange); background: var(--orange-light); }
.plan-form .radio-opt:has(input:checked) .radio-dot { border-color: var(--orange-dark); background: var(--orange); }
.plan-form .radio-opt:has(input:focus-visible) { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.plan-form:has(input[name="wahl"][value="sc"]:checked) .nur-kt,
.plan-form:has(input[name="wahl"][value="kt"]:checked) .nur-sc { display: none; }
/* Die Listen werden mit hidden ausgeliefert (je nach Stand); die Wahl der Kacheln macht die passende sichtbar (sonst liessen sich Schulen nicht ankreuzen) */
.plan-form:has(input[name="wahl"][value="sc"]:checked) .nur-sc,
.plan-form:has(input[name="wahl"][value="kt"]:checked) .nur-kt { display: block; }
.portal .plan-form:has(input[name="wahl"][value="sc"]:checked) .nur-sc,
.portal .plan-form:has(input[name="wahl"][value="kt"]:checked) .nur-kt { display: block !important; }   /* schlägt «.portal [hidden]» aus portal.css */
.plan-form .schul-gruppe h3 { font-size: 1rem; margin: 10px 0 2px; }
.plan-form fieldset { border: 0; margin-bottom: 18px; }
.plan-form legend { font-weight: 700; margin-bottom: 6px; }
.plan-mehr { margin-bottom: 18px; }
.plan-mehr > summary { cursor: pointer; padding: 6px 0; }
.plan-mehr[open] > summary { margin-bottom: 10px; }
.plan-form .field-kurz { flex: 0 0 auto; }
.plan-form .field-kurz select { width: auto; min-width: 6rem; max-width: 9rem; }

/* V1.6.0: Kategorien (Pillen wie im Wochenplan) und anklickbare Einträge */
html:not(.js) .wp-chip .js-nur, html:not(.js) .plan-kategorien { display: none; }
.plan-kategorien { margin: 8px 0 4px; }
.plan-kat-label { display: block; font-weight: 700; margin-bottom: 6px; }
.plan-kat-chips { margin-bottom: 4px; }
.plan-kat-chips .wp-chip { cursor: default; }
.plan-eintrag .plan-kat-chips .wp-chip { cursor: pointer; }
.plan-eintrag .wp-chipname { width: 9rem; }
table.plan td.plan-t { position: relative; }
.plan-eig { position: absolute; inset: 0; display: flex; }
.plan-eig-link { flex: 1 1 0; display: block; cursor: pointer; text-decoration: none; }
.plan-eig-link:hover { background: rgba(255, 255, 255, .35); outline: 2px solid var(--orange-dark, #b36b00); outline-offset: -2px; }
.plan-eig-link:focus-visible { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: -3px; background: rgba(255, 255, 255, .35); }
.plan-dialog .plan-loeschen, .plan-eintrag .plan-loeschen { margin-left: auto; }
.plan-dialog .plan-loeschen[hidden] { display: none; }

/* V1.7.0: Aktionsleiste am Ende des Plans (Export, Speichern), Schritte im Formular */
.card > .aktionsleiste, .wp-form > .aktionsleiste { margin-top: 12px; }
.aktionsleiste .datei-knoepfe { margin: 0; }
.plan-form .schritte { margin-bottom: 12px; }
.plan-form legend .hilfe-sym, .wp-schritt legend .hilfe-sym { vertical-align: middle; }

/* V1.10.0: Editor im Plan (wie im Wochenplan) */
html.js .plan-wrap[data-plan-bearbeiten] .plan-plus { display: none; }
html.js .plan-wrap[data-plan-bearbeiten] .plan-eig { display: none; }
html.js .plan-eigene { display: none; }
.plan-wrap[data-plan-bearbeiten] table.plan tbody tr { cursor: pointer; }
.plan-wrap[data-plan-bearbeiten] table.plan tbody tr:hover td { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .06); }
table.plan tr.plan-anker td { box-shadow: inset 0 2px 0 var(--orange-dark, #b36b00), inset 0 -2px 0 var(--orange-dark, #b36b00); }
table.plan tr.plan-anker td:first-child { box-shadow: inset 0 2px 0 var(--orange-dark, #b36b00), inset 0 -2px 0 var(--orange-dark, #b36b00), inset 3px 0 0 var(--orange-dark, #b36b00); }
table.plan tr.plan-fenster td { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .35), inset 0 2px 0 var(--orange-dark, #b36b00), inset 0 -2px 0 var(--orange-dark, #b36b00); }
.plan-lokal { display: inline; }
.plan-zellinput { position: absolute; top: 0; left: 0; z-index: 20; width: max(100%, 14rem); max-width: calc(100vw - 24px); box-sizing: border-box; min-height: 34px; margin: 0; padding: 4px 8px; font: inherit; font-size: 16px; color: #000; background: #fff; border: 2px solid var(--orange-dark, #b36b00); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.plan-kategorien { margin: 8px 0 12px; }
.plan-kategorien .wp-schritt { margin-bottom: 8px; }

/* Zeitraum: je nach gewählter Art nur die passenden Felder (ohne :has zeigt der Browser alle) */
.plan-form:has(input[name="zr"][value="eg"]:checked) .nur-jahr,
.plan-form:not(:has(input[name="zr"][value="eg"]:checked)) .nur-eigen,
.plan-form:not(:has(input[name="zr"][value="se"]:checked)) .nur-sem { display: none; }
.plan-form .field input[type=number] { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--rand-feld); border-radius: 4px; font-size: 1rem; font-family: inherit; color: var(--text); background: #fff; }
.plan-form .field-kurz input[type=number] { width: 7rem; }
.plan-form fieldset.field { padding: 0; margin: 0 0 18px; min-width: 0; }
.plan-form .field .radio-opt { display: inline-flex; margin-bottom: 0; font-weight: 400; }
.plan-form .field .radio-opt .radio-dot { flex-shrink: 0; }
.plan-form .nur-eigen .field:not(.field-kurz) { flex: 0 1 18rem; }