/* Jahresansicht – Monatsraster nach Modernist v2 (IMPLEMENTATION.md §1).
   Nutzt die Tokens aus modernist.css. Rot (--color-accent) ausschließlich als
   Verstoß-Marker; Betreuungsflächen tragen die rollenfreien Elternfarben. */

.jahr-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(238px, 1fr));
  gap: 0;
}

.monat {
  padding: 12px 12px 16px;
  border-right: 1px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}

.monat-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--color-divider);
  padding-bottom: 5px;
  margin-bottom: 4px;
}
.monat-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
}

.kw {
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  border-top: 1px solid var(--color-neutral-300);
  margin-top: 2px;
  padding-top: 1px;
}

.tag {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) 21px 18px;
  gap: 1px;
  align-items: center;
  min-height: 21px;
}
/* Urlaubsspalte ausgeblendet (Anzeige-Einstellung showUrlaub = false). */
.jahr-grid--no-urlaub .tag { grid-template-columns: 19px minmax(0, 1fr) 21px; }
.jahr-grid--no-urlaub .urlaub { display: none; }

.tag--we { background: var(--color-neutral-200); }
.tag--ferien { background: var(--color-neutral-300); }
.tag--feiertag { box-shadow: inset 3px 0 0 var(--color-text); }
.tag--feiertag .datum { font-weight: 800; }
/* Private Sekundär-Ferien (rechte 6px-Kante); Überlappung mit Primär betont. */
.tag--sek { box-shadow: inset -6px 0 0 var(--color-neutral-400); }
.tag--overlap { box-shadow: inset -6px 0 0 var(--color-accent-2); }

.datum {
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ev {
  font-size: 10px;
  color: var(--color-neutral-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag .ev:not(:empty) { color: var(--color-text); }

.zelle {
  height: 19px;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10px;
  color: var(--color-text);
  background: transparent;
}
.zelle--a { background: var(--color-parent-a); }
.zelle--b { background: var(--color-parent-b); }
.zelle--w {
  background: repeating-linear-gradient(45deg, var(--color-neutral-400) 0 2px, transparent 2px 4px);
}
/* Verstoß: 3px Unterkante in Akzentfarbe. Akzeptiert: dezenter, gepunktet. */
.zelle--viol { box-shadow: inset 0 -3px 0 var(--color-accent); }
.zelle--viol-akz { box-shadow: inset 0 -3px 0 var(--color-neutral-400); }

/* Urlaubszelle (tagbezogen). Leer = transparenter Rahmen; A/B/beide gefärbt. */
.urlaub {
  height: 19px;
  width: 100%;
  border: 1px solid var(--color-neutral-300);
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 8px;
  color: var(--color-text);
  background: transparent;
}
.urlaub--a { background: var(--color-parent-a); border-color: transparent; }
.urlaub--b { background: var(--color-parent-b); border-color: transparent; }
.urlaub--beide {
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-parent-a) 0 50%, var(--color-parent-b) 50% 100%);
}

@media (max-width: 1200px) {
  .jahr-grid { grid-template-columns: repeat(3, minmax(238px, 1fr)); }
}
@media (max-width: 720px) {
  .jahr-grid { grid-template-columns: 1fr; }
}

/* Ansicht: Kalender + Seitenleiste (Modernist v2 §1, Seitenleiste 348px). */
#ansicht { display: flex; align-items: flex-start; gap: 0; margin-top: var(--space-4); }
#kalender { flex: 1; min-width: 0; overflow-x: auto; }
#sidebar {
  width: 348px;
  flex: none;
  border-left: 2px solid var(--color-divider);
  padding: 0 0 0 var(--space-4);
  position: sticky;
  top: var(--space-4);
}

.sb-reiter { display: grid; grid-template-columns: 1fr 1fr; }
.sb-tab {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 11px 4px; color: var(--color-text);
  border-bottom: 2px solid var(--color-divider);
}
.sb-tab.aktiv { background: var(--color-text); color: var(--color-bg); }

.sb-inhalt { padding-top: var(--space-3); }
.sb-titel { font-size: 15px; margin: 0 0 var(--space-2); border-bottom: 2px solid var(--color-divider); padding-bottom: 3px; }
.sb-leer, .sb-hinweis { font-size: 12px; color: var(--color-neutral-600); }
.sb-liste { list-style: none; margin: 0; padding: 0; }
.sb-viol { border-bottom: 1px solid var(--color-neutral-300); }
.sb-viol-btn {
  width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 8px 4px;
  font: inherit; font-size: 12px; color: var(--color-accent-700);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.sb-viol-btn:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

.sb-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb-tabelle th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-neutral-600); border-bottom: 1px solid var(--color-neutral-300); padding: 4px;
}
.sb-tabelle td { padding: 6px 4px; border-bottom: 1px solid var(--color-neutral-300); }
.sb-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.sb-abw { color: var(--color-accent-2); font-weight: 800; }

/* Sprung-Hervorhebung einer Zelle aus der Prüfliste. */
.zelle--fokus { outline: 3px solid var(--color-text); outline-offset: -1px; }
/* Gewählter Wechseltag (zum Verschieben). */
.zelle--sel { outline: 3px solid var(--color-text); outline-offset: -1px; }
/* Bereichsanfang (Shift-Klick). */
.zelle--rangestart { outline: 3px dashed var(--color-text); outline-offset: -1px; }

/* Kontextmenü (Rechtsklick auf eine Zelle). */
.ctx {
  position: absolute;
  z-index: 50;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  color: var(--color-text);
}
.ctx-item:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

/* Gegenwechsel-Vorschau: Streifen der betroffenen Tage. */
.gegen-strip { display: flex; flex-wrap: wrap; gap: 1px; margin: var(--space-2) 0; }
.gegen-zelle {
  width: 16px; height: 18px; flex: none; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 8px;
  border: 1px solid var(--color-neutral-300);
}

/* Einstellungen (Dialog). */
.einst-dialog {
  width: min(560px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-4);
}
.einst-dialog::backdrop { background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); }
.einst-dialog-kopf {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3); border-bottom: 2px solid var(--color-divider); padding-bottom: var(--space-2);
}
.einst-kind {
  border: 1px solid var(--color-neutral-300);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.einst-kind-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.einst-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-2); }
.einst-soll { font-size: 12px; color: var(--color-neutral-700); margin: var(--space-2) 0 0; }

.muster-grid {
  display: grid;
  grid-template-columns: repeat(7, 26px);
  gap: 2px;
  margin-top: var(--space-2);
}
.muster-zelle {
  width: 26px; height: 26px;
  border: 1px solid var(--color-neutral-300);
  padding: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  color: var(--color-text); background: transparent;
}
.seg-opt.aktiv { background: var(--color-text); color: var(--color-bg); }

.einst-reiter { margin-bottom: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.einst-schalter { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 13px; cursor: pointer; }
.einst h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-neutral-600); margin: var(--space-3) 0 var(--space-1); }
.einst-ausgabe-btn { display: block; width: 100%; margin-bottom: var(--space-2); justify-content: flex-start; }

/* Onboarding-Karte (SPEC-UI §3): 720×480, links Checkliste, rechts Inhalt. */
.ob-karte {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: 720px;
  min-height: 480px;
  margin: var(--space-6) auto;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.ob-schritte { border-right: 2px solid var(--color-divider); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ob-schritt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-neutral-600); }
.ob-schritt.aktiv { color: var(--color-text); font-weight: 800; }
.ob-schritt.fertig { color: var(--color-text); }
.ob-nr {
  width: 17px; height: 17px; flex: none; display: grid; place-items: center;
  font-size: 10px; font-family: var(--font-heading); font-weight: 800;
  border: 1px solid var(--color-divider);
}
.ob-schritt.aktiv .ob-nr { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.ob-inhalt { padding: var(--space-4); display: flex; flex-direction: column; }
.ob-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.ob-titel { font-size: 23px; margin: 2px 0 var(--space-2); }
.ob-lead { font-size: 13px; color: var(--color-neutral-700); margin-bottom: var(--space-3); }
.ob-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-3); }
@media (max-width: 720px) {
  .ob-karte { grid-template-columns: 1fr; }
  .ob-schritte { border-right: 0; border-bottom: 2px solid var(--color-divider); flex-direction: row; flex-wrap: wrap; }
}

/* Druckvorschau (SPEC-UI §5): A4-quer-Papier, zwölf Monatsspalten. */
#druck {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: auto;
  background: var(--color-neutral-300);
  padding: var(--space-4);
}
#druckActions { justify-content: flex-end; margin-bottom: var(--space-3); }
.druck {
  width: 1122px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  color: #201e1d;
  padding: 38px 42px;
  box-shadow: var(--shadow-lg);
}
.druck-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #201e1d; padding-bottom: 6px; margin-bottom: 10px; }
.druck-titel { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.1; }
.druck-stand { font-size: 11px; }
.druck-monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.druck-monat-kopf { font-family: var(--font-heading); font-weight: 800; font-size: 9px; text-transform: uppercase; border-bottom: 1px solid #201e1d; padding-bottom: 2px; margin-bottom: 2px; }
.druck-tag { display: grid; grid-template-columns: 12px 1fr; gap: 2px; font-size: 7px; line-height: 1.35; }
.druck-tag.we { background: #ededed; }
.druck-tag.ferien { background: #f3ede0; }
.druck-tag.feiertag .druck-datum { font-weight: 800; }
.druck-datum { text-align: right; font-variant-numeric: tabular-nums; }
.druck-b { font-family: var(--font-heading); font-weight: 800; font-size: 7px; text-align: center; }
.druck-b.a { background: var(--color-parent-a); }
.druck-b.b { background: var(--color-parent-b); }
.druck-b.w { background: repeating-linear-gradient(45deg, #bbb 0 1px, transparent 1px 2px); }
.druck-fuss { display: flex; justify-content: space-between; margin-top: 10px; border-top: 1px solid #201e1d; padding-top: 4px; font-size: 9px; }

@page { size: A4 landscape; margin: 8mm; }
@media print {
  body > *, main > * { visibility: hidden; }
  #druck, #druck * { visibility: visible; }
  #druck { position: static; padding: 0; background: #fff; overflow: visible; }
  #druckActions { display: none !important; }
  .druck { width: auto; box-shadow: none; padding: 0; }
}
.einst-bereiche { margin-top: var(--space-3); }
.einst-bereiche h4 { font-size: 13px; margin: 0 0 var(--space-1); }
.einst-bereich { font-size: 12px; padding: 4px 2px; border-bottom: 1px solid var(--color-neutral-300); }
select.input { appearance: auto; }