/* Seitenspezifische Stile fuer /funktionen/kalender/ -- nur diese Seite. */

/* --- Diagramm: breite / schmale Fassung --------------------------------- */
.kal-flow--wide { display: none; }
.kal-flow--narrow { display: block; max-width: 420px; margin: 0 auto; }
@media (min-width: 720px) {
  .kal-flow--wide { display: block; }
  .kal-flow--narrow { display: none; }
}

.kal-tech-more { margin-top: 22px; }
.prose > .status { margin-bottom: 4px; }

/* Mobile-Ausschnitt der Hero-Aufnahme (art direction ueber <picture>) */
.shot picture { display: block; }
.shot picture img { display: block; width: 100%; height: auto; }

/* --- Nachbildung: Serienplaner ------------------------------------------ */
.figure--plan { max-width: 640px; }
.kal-plan__body { position: relative; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.kal-plan__filter { display: inline-flex; align-self: flex-start; padding: 2px; border-radius: 8px; background: #f3f4f6; font-size: 12px; }
.kal-plan__seg { padding: 3px 10px; border-radius: 6px; color: var(--text-muted); }
.kal-plan__seg--on { background: #fff; color: var(--text-heading); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.kal-plan__grid {
  display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr));
  grid-auto-rows: 34px; gap: 0;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
}
.kal-plan__grid > * { border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.kal-plan__corner, .kal-plan__day, .kal-plan__hour { background: #fff; }
.kal-plan__day { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-strong); }
.kal-plan__hour { display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px 6px 0 0; font-size: 10px; color: var(--text-meta); font-variant-numeric: tabular-nums; }
.kal-plan__cell { background: #fff; }
.kal-plan__cell--cursor { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }

/* Belegungs-Rampe der App (12 Wochen, Terrakotta ueber Weiss) */
.r0 { background: #fff; }
.r2 { background: #ecdcd4; }
.r3 { background: #e8d5cc; }
.r4 { background: #e5cdc3; }
.r6 { background: #ddc0b2; }
.r8 { background: #d6b1a1; }
.r10 { background: #cea490; }
.r12 { background: #c7957f; }

.kal-plan__bubble {
  position: absolute; top: 192px; left: calc(44px + 16px + (100% - 44px - 32px) / 5 + 4px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(124, 90, 72, .14); font-size: 12px; line-height: 1.35; white-space: nowrap;
}
.kal-plan__bubble b { font-weight: 600; color: var(--text-heading); }
.kal-plan__bubble span { color: var(--text-muted); }

.kal-plan__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 11px; color: var(--text-meta); }
.kal-plan__ramp { display: inline-flex; border: 1px solid var(--border-light); border-radius: 4px; overflow: hidden; }
.kal-plan__ramp i { display: block; width: 18px; height: 10px; }

@media (max-width: 420px) {
  .kal-plan__bubble { left: calc(44px + 16px + (100% - 44px - 32px) / 5 - 20px); }
}

/* Terminpanel- und Abwesenheits-Aufnahme: hochkant bzw. klein, nicht aufblasen */
.kal-duo-panel { align-items: start; }
.kal-duo-panel .figure { max-width: 480px; justify-self: center; width: 100%; }
#abwesenheiten .duo { align-items: start; }
#abwesenheiten .figure { max-width: 520px; justify-self: center; width: 100%; }
@media (min-width: 1024px) {
  .kal-duo-panel .figure, #abwesenheiten .figure { position: sticky; top: 96px; }
}