/* wochenplan.css – inchstones.ch Kalender · Wochenplan · Version 1.5.0
   V1.5.0: Speicherstatus (.status-punkt) neben den Knöpfen, Einstellungen als erste Gruppe.
   V1.4.0: Raster passt auf das Handy (sieben Tage ohne seitliches Scrollen: Tage kurz «Mo», Zeit nur «06:00»); Bereichs-Chips dezenter wie die Pillen im Notentool
           (dünner Rand in der Akzentfarbe, runde Form, nicht schwarz); grössere Tippflächen (Farbpunkt 28 px, Stift 36 px).
   V1.3.0: schreibgeschützte Ansicht für den Lese-Link (.wp-lesen, .wp-feld, Legende .wp-leg).
   V1.2.1: Chip beim Bearbeiten sauber (Eingabefeld füllt den Chip, nur ein Fokusrahmen), Schalter über dem Raster (.wp-schalter).
   V1.2.0: Bereichs-Chips (Farbpunkt, Name, Stift, Namensfeld im Button), «+ Bereich», Eingabefeld direkt im Raster; Liste der Bereiche in den Einstellungen entfällt.
   V1.1.0: zwölf Farben (Nummer = Farbe, nicht Bereich), Mint für Training, Lachs für Freizeit; Farbfeld mit Farbname; markierter Zeitraum (.wp-fenster); Werkzeug «Text ändern».
   Editor des Wochenplans (kalender/wochenplan.php und Admin-Reiter «Wochenplan»). Die zwölf Farben (Blau BDD7EE, Orange FFC000, Hellgrün C6E0B4, Mint 8FD3B0, Lila D9D2E9,
   Lachs F8CBAD, Gelb FFD757, Türkis B7E1E4, Rosa F4C6DB, Hellblau DDEBF7, Sand E7DAC3, Grau EDEDED) sind gleich in PDF, Excel und Word (Palette des Jahresplans plus Ergänzungen).
   Zusammen mit plan.css (Auswahl- und Formularbausteine) geladen. Keine Inline-Styles nötig (strenge CSP). */

.w-0 { background: #BDD7EE; }
.w-1 { background: #FFC000; }
.w-2 { background: #C6E0B4; }
.w-3 { background: #8FD3B0; }
.w-4 { background: #D9D2E9; }
.w-5 { background: #F8CBAD; }
.w-6 { background: #FFD757; }
.w-7 { background: #B7E1E4; }
.w-8 { background: #F4C6DB; }
.w-9 { background: #DDEBF7; }
.w-10 { background: #E7DAC3; }
.w-11 { background: #EDEDED; }

.wp-schritt { border: 0; margin: 0 0 18px; padding: 0; }
.wp-schritt legend { font-weight: 700; margin-bottom: 6px; }
.wp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wp-tool { appearance: none; font: inherit; color: var(--text, #000); border: 1px solid var(--akzent, #576371); border-radius: 22px; padding: 8px 16px; min-height: 44px; cursor: pointer; }
.wp-tool[hidden] { display: none; }
.wp-tool[aria-pressed="true"] { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: 2px; font-weight: 700; }
.wp-tool:focus-visible { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: 2px; }
.wp-radierer { background: #fff; border-style: dashed; }
.wp-text { max-width: 22rem; }

.wp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; background: #fff; margin: 8px 0; }
table.wp { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 12px; }
table.wp th, table.wp td { border: 1px solid #000; padding: 0; color: #000; }
table.wp thead th { padding: 6px 2px; text-align: center; font-weight: 700; background: #fff; }
table.wp th.wp-zeit { width: 92px; font-weight: 400; font-size: 11px; text-align: left; padding: 0 4px; white-space: nowrap; background: #fff; }
table.wp tr[hidden] { display: none; }
.wp-zelle { appearance: none; display: block; width: 100%; height: 34px; margin: 0; padding: 0 2px; border: 0; border-radius: 0; font: inherit; font-size: 11px; line-height: 1.1; color: #000;
            background: #fff; cursor: pointer; overflow: hidden; text-align: center; }
.wp-zelle:hover { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.wp-zelle:focus-visible { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: -3px; }
.wp-zelle.wp-anker { box-shadow: inset 0 0 0 3px #000; }
.wp-zelle.w-0 { background: #BDD7EE; }
.wp-zelle.w-1 { background: #FFC000; }
.wp-zelle.w-2 { background: #C6E0B4; }
.wp-zelle.w-3 { background: #8FD3B0; }
.wp-zelle.w-4 { background: #D9D2E9; }
.wp-zelle.w-5 { background: #F8CBAD; }
.wp-zelle.w-6 { background: #FFD757; }
.wp-zelle.w-7 { background: #B7E1E4; }
.wp-zelle.w-8 { background: #F4C6DB; }
.wp-zelle.w-9 { background: #DDEBF7; }
.wp-zelle.w-10 { background: #E7DAC3; }
.wp-zelle.w-11 { background: #EDEDED; }
.wp-zelle.wp-fenster { box-shadow: inset 0 0 0 3px #000; }
.wp-schalter { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0 0 6px; }

.wp-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; border: 1px solid var(--akzent, #576371); border-radius: 22px; padding: 0 4px 0 8px; }
.wp-chip[hidden] { display: none; }
.wp-chip:has(.wp-tool[aria-pressed="true"]) { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: 2px; }
.wp-chip .wp-tool { border: 0; border-radius: 16px; background: transparent; min-height: 36px; padding: 4px 8px; }
.wp-chip .wp-tool[aria-pressed="true"] { outline: 0; font-weight: 700; }
.wp-chipfarbe { appearance: none; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(0, 0, 0, .55); border-radius: 50%; cursor: pointer; background: #fff; }
.wp-chip.w-0 .wp-chipfarbe { background: #BDD7EE; } .wp-chip.w-1 .wp-chipfarbe { background: #FFC000; } .wp-chip.w-2 .wp-chipfarbe { background: #C6E0B4; } .wp-chip.w-3 .wp-chipfarbe { background: #8FD3B0; }
.wp-chip.w-4 .wp-chipfarbe { background: #D9D2E9; } .wp-chip.w-5 .wp-chipfarbe { background: #F8CBAD; } .wp-chip.w-6 .wp-chipfarbe { background: #FFD757; } .wp-chip.w-7 .wp-chipfarbe { background: #B7E1E4; }
.wp-chip.w-8 .wp-chipfarbe { background: #F4C6DB; } .wp-chip.w-9 .wp-chipfarbe { background: #DDEBF7; } .wp-chip.w-10 .wp-chipfarbe { background: #E7DAC3; } .wp-chip.w-11 .wp-chipfarbe { background: #EDEDED; }
.wp-chipfarbe:focus-visible, .wp-stift:focus-visible { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: 2px; }
.wp-chipname { display: none; width: 11rem; min-height: 36px; margin: 0; padding: 2px 8px; font: inherit; border: 0; border-radius: 4px; outline: 0; background: #fff; color: #000; box-shadow: none; }
.wp-chip.wp-bearbeiten, .wp-chip.wp-bearbeiten:has(.wp-tool[aria-pressed="true"]) { outline: 0; }
.wp-chip.wp-bearbeiten { padding: 2px; box-shadow: 0 0 0 3px var(--orange-dark, #b36b00); }
.wp-chip.wp-bearbeiten .wp-chipname { display: inline-block; }
.wp-chip.wp-bearbeiten .wp-chipfarbe { display: none; }
.wp-chip.wp-bearbeiten .wp-tool { display: none; }
.wp-stift { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #000; cursor: pointer; }
.wp-stift:hover { background: rgba(255, 255, 255, .6); }
.wp-chip.wp-bearbeiten .wp-stift { display: none; }
.wp-neu { appearance: none; font: inherit; color: var(--text, #000); min-height: 44px; padding: 8px 14px; border: 1px dashed var(--akzent, #576371); border-radius: 22px; background: #fff; cursor: pointer; }
.wp-neu:focus-visible { outline: 3px solid var(--orange-dark, #b36b00); outline-offset: 2px; }
.wp-zellinput { display: block; width: 100%; height: 34px; margin: 0; padding: 0 4px; border: 0; border-radius: 0; font: inherit; font-size: 11px; color: #000; background: #fff; box-shadow: inset 0 0 0 3px #000; text-align: center; }

.wp-ziele { border: 0; margin: 0 0 10px; padding: 0; }
.wp-ziele legend { font-weight: 700; margin-bottom: 4px; }
.wp-link { margin-top: 14px; }
.wp-link input[type=text] { width: 100%; }
.wp-form .btn-row { margin-top: 10px; }

@media (max-width: 600px) {
  .wp-tool { flex: 1 1 40%; }
}

/* Ansicht für den Lese-Link (nur lesen) */
table.wp-lesen td.wp-feld { height: 30px; padding: 2px; font-size: 11px; line-height: 1.1; text-align: center; vertical-align: middle; overflow: hidden; word-break: break-word; }
.wp-legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.wp-leg { display: inline-block; padding: 2px 12px; border: 1px solid #000; border-radius: 4px; font-size: 12px; color: #000; }

/* Tage und Zeit: breit lang («Montag», «06:00 - 07:00»), schmal kurz («Mo», «06:00»), damit alle sieben Tage auf das Handy passen */
.tag-kurz { display: none; }
@media (max-width: 700px) {
  .tag-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tag-kurz { display: inline; }
  .wp-bis { display: none; }
  table.wp { font-size: 10px; }
  table.wp thead th { padding: 6px 0; }
  table.wp th.wp-zeit { width: 40px; padding: 0 2px; font-size: 10px; text-align: center; }
  .wp-zelle { font-size: 9px; padding: 0 1px; height: 38px; }
  table.wp td.wp-feld { font-size: 9px; height: 32px; }
}

/* V1.5.0: Speicherstatus neben den Knöpfen */
.wp-form > .aktionsleiste { align-items: center; }
.wp-form > .aktionsleiste .status-punkt { margin-left: auto; }