/* Plantafel und belegbare Energiebilanz. Nutzt ausschliesslich die
   bestehenden limou-/Mandanten-Tokens; auf Mobilgeraeten steht die Agenda. */
.plan-achse {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--linie);
  background: var(--flaeche-karte);
  margin-block: var(--raum-4);
}
.plan-raster { min-width: max(100%, var(--plan-mindestbreite)); }
.plan-zeile { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-bottom: 1px solid var(--linie); }
.plan-zeile:last-child { border-bottom: 0; }
.plan-ressource { position: sticky; left: 0; z-index: 2; padding: var(--raum-3); color: var(--schrift-stark); background: var(--flaeche-vertieft); overflow-wrap: anywhere; font-weight: 600; }
.plan-kopf { position: sticky; top: 0; z-index: 1; }
.plan-stunden { position: relative; min-height: 44px; background: var(--flaeche-karte); color: var(--schrift-leise); font-size: var(--grad-2); }
.plan-stunden span { position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.plan-stunden span:first-child { transform: translateY(-50%); padding-left: var(--raum-1); }
.plan-stunden span:last-child { transform: translate(-100%, -50%); padding-right: var(--raum-1); }
.plan-bahn { position: relative; background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--plan-stundenanzahl) - 1px), var(--linie-leise) calc(100% / var(--plan-stundenanzahl) - 1px), var(--linie-leise) calc(100% / var(--plan-stundenanzahl))); }
.plan-fahrt.knopf { position: absolute; min-width: 0; min-height: 56px; height: 56px; display: flex; flex-direction: column; align-items: stretch; padding: var(--raum-1); gap: var(--raum-1); white-space: nowrap; overflow: hidden; justify-content: center; text-align: left; color: var(--schrift-stark); background: var(--flaeche-still); border-color: var(--linie-stark); font-size: var(--grad-2); }
.plan-fahrt.knopf[draggable="true"] { cursor: grab; }
.plan-fahrt.knopf[draggable="true"]:active { cursor: grabbing; }
.plan-fahrt.knopf > span { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-fahrt-zeit { font-family: var(--schriftfamilie-fest); font-weight: var(--fett-stark); }
.plan-fahrt-titel { font-weight: var(--fett-normal); }
.plan-agenda { display: none; }
.plan-listenalternative { margin-block: var(--raum-4); }
.plan-listenalternative > summary { min-height: 44px; padding-block: var(--raum-3); color: var(--schrift-akzent); cursor: pointer; }
.plan-listenalternative .plan-agenda { display: grid; gap: var(--raum-3); }
.plan-agendakarte { display: grid; gap: var(--raum-2); padding: var(--raum-4); border: 1px solid var(--linie); background: var(--flaeche-karte); }
.plan-agendakarte > .knopf { min-height: 44px; text-align: left; white-space: normal; }
.plan-direktwahl { margin-block: var(--raum-4); }
.plan-direktwahl > summary, .energie-intervalle > summary { padding-block: var(--raum-3); min-height: 44px; cursor: pointer; color: var(--schrift-akzent); }
.plan-direktgruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-4); }
.plan-direktgruppen fieldset { min-width: 0; display: flex; flex-direction: column; gap: var(--raum-2); border: 1px solid var(--linie); padding: var(--raum-3); }
.plan-direktgruppen .knopf { min-height: 44px; text-align: left; justify-content: flex-start; white-space: normal; }
.energie-vergleich { padding-block: var(--raum-3); border-top: 1px solid var(--linie); }
.energie-wert { color: var(--schrift-stark); font-size: var(--grad-6); font-weight: var(--fett-stark); margin-top: var(--raum-1); }
.energie-intervalle { min-width: 0; }
@media (max-width: 760px) {
  .plan-achse { display: none; }
  .plan-listenalternative { display: none; }
  .plan-agenda { display: grid; gap: var(--raum-3); }
  .plan-direktgruppen { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .plan-achse { display: none; }
  .plan-listenalternative { display: none; }
  .plan-agenda { display: grid; gap: var(--raum-3); }
}