/* Cappa – Planung und alles, was über das Brandup-/Sondle-Grundgerüst (hub.css) hinausgeht. Farben nur aus tokens.css.
   Siehe DESIGN-SYSTEM.md (Delta): Kundenfarben = Horamic-Datenfarben, Überbuchung = Fehler-Triade, „eng mit Anfragen“ = Warnung. */

/* ---------- Rahmen: breite Kopfzeile mit Bereichen ---------- */
.bar__inner, .page { max-width: 1480px; }
.page--list > * { max-width: 1000px; }
.bar__inner { gap: 28px; justify-content: flex-start; }
.bar__logo { display: inline-flex; align-items: center; gap: 9px; height: 28px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--n900); }
.bar__logo img { height: 24px; width: 24px; }
.bar__nav { display: flex; gap: 4px; flex-grow: 1; min-width: 0; }
.bar__link { position: relative; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.1; color: var(--n600);
  transition: color var(--ease), background-color var(--ease); }
.bar__link:hover { color: var(--n900); background: var(--n50); }
.bar__link.is-active { color: var(--n900); }
.bar__link.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -17px; height: 2px; background: var(--n900); }
.login__word { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.login__word img { height: 30px; width: 30px; margin: 0; }

.titlebar.titlebar--switch { margin-bottom: 28px; }
.pgroup__title { font-size: 22px; line-height: 1.25; align-items: center; margin-bottom: 12px; }
.pgroup__title .linkbtn { align-self: center; margin-left: 4px; }
button.prow, button.card--add, button.erow { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
button.card--add { border: 1px dashed var(--n300); padding: 20px 22px; border-radius: 14px; }
.prow--proj { grid-template-columns: minmax(0, 1fr) 70px 200px 130px 20px; }
.prow--proj > .progress { width: 200px; }
.prow__people { display: flex; gap: 4px; }
.prow--add { border-top: 1px solid var(--n100); }
.is-overbudget .num { color: var(--error-text); }
.meter--over i { background: var(--error-base) !important; }
.chip--maybe { background: var(--n0); color: var(--n600); box-shadow: inset 0 0 0 1px var(--n300); }
.btn--del:hover { background: var(--error-surface); color: var(--error-text); }
.modes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checkrow { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.checkrow .checkline { gap: 8px; }
.check:disabled { opacity: 0.5; cursor: default; }
textarea.input { resize: vertical; min-height: 44px; font-family: inherit; }

/* Kundenfarbe: Punkt */
.cdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--c, var(--n300)); display: inline-block; }
.cdot--lg { width: 12px; height: 12px; }
.swatches { display: flex; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c); position: relative;
  transition: transform var(--ease), box-shadow var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch.is-selected { box-shadow: 0 0 0 2px var(--n0), 0 0 0 4px var(--n900); }

/* Tabellen dieser App */
.table__head.table--events, .table__row.table--events { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 90px minmax(0, 1fr) 20px; }
.table__row.erow { cursor: pointer; }
.table__row.erow:hover { background: var(--n50); }
.table__row.erow:hover .pcard__go { color: var(--n900); }
.erow__who { display: flex; align-items: center; gap: 7px; }
.table__head.table--team, .table__row.table--team { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.6fr) 96px; }
.capgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.capgrid__day { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--n500); text-align: center; }
.capgrid__in { text-align: center; padding-left: 4px; padding-right: 4px; }

/* Terminmarken (Zeitleiste und Terminliste) */
.ev__mark { flex-shrink: 0; width: 9px; height: 9px; background: var(--c, var(--n900)); transform: rotate(45deg); border-radius: 1.5px; display: inline-block; }
.evmark--deadline, .ev--deadline .ev__mark { background: var(--n0); box-shadow: inset 0 0 0 2px var(--c, var(--n900)); }
.evmark--termin, .ev--termin .ev__mark { transform: none; border-radius: 50%; width: 8px; height: 8px; }
.evmark--urlaub, .evmark--privat, .evmark--krank { transform: none; width: 14px; height: 8px; border-radius: 3px; background: var(--n200); }
.table__name .ev__mark { margin: 0 3px; }

/* ---------- Planung ---------- */
.page--plan { --plan-left: 252px; }
.planbar { margin-bottom: 16px; }
.planbar .h1 { margin-right: 4px; }
.rangenav { display: flex; align-items: center; gap: 6px; }
.circle:hover { color: var(--n900); box-shadow: inset 0 0 0 1px var(--n900); }
.circle--danger:hover { color: #fff; box-shadow: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 24px; background: var(--n0); box-shadow: inset 0 0 0 1px var(--n100); }
.seg__btn { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.1; color: var(--n600); padding: 7px 14px; border-radius: 20px; cursor: pointer;
  transition: color var(--ease), background-color var(--ease); }
.seg__btn:hover { color: var(--n900); }
.seg__btn.is-active { background: var(--n900); color: #fff; }

/* Speicherstatus wie im Brandup-Bogen: nur beim Speichern sichtbar */
.savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--n500); opacity: 0; transition: opacity var(--ease); min-height: 20px; }
.savestate.is-saving, .savestate.is-saved, .savestate.is-error { opacity: 1; }
.savestate.is-saved { color: var(--success-text); }
.savestate.is-error { color: var(--error-text); }
.savestate svg { width: 14px; height: 14px; }
.savestate__spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--n200); border-top-color: var(--n500); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Engpässe */
.alertslot { margin-bottom: 14px; }
.alertstack { display: flex; flex-direction: column; gap: 8px; }
.alertbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.alertbar--ok { padding: 2px 2px; color: var(--n600); }
.alertbar--over { background: var(--error-surface); color: var(--error-text); }
.alertbar--warn { background: var(--warning-surface); color: var(--warning-text); }
.alertbar__icon { display: inline-flex; }
.alertbar--over .alertbar__icon { color: var(--error-base); }
.alertbar--warn .alertbar__icon { color: var(--warning-base); }
.alertbar__title { font-size: 14px; font-weight: 700; margin-right: 4px; }
.alertbar__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alertbar__more { font-size: 12px; }
.alertchip { border: 0; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; padding: 5px 10px; border-radius: 10px; background: var(--n0); cursor: pointer; color: inherit;
  transition: box-shadow var(--ease); }
.alertchip b { font-weight: 700; color: var(--n900); }
.alertchip:hover { box-shadow: inset 0 0 0 1px currentColor; }

/* Raster */
.plan { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.plan__inner { position: relative; min-width: 100%; }
.plan__row { display: flex; align-items: stretch; }
.plan__label { position: sticky; left: 0; z-index: 4; flex: none; width: var(--plan-left); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px;
  background: var(--n0); border-right: 1px solid var(--n100); min-width: 0; }
.plan__cells { position: relative; display: flex; flex: none; }
.plan__row + .plan__row .plan__cells, .plan__row + .plan__row .plan__label { border-top: 1px solid var(--n100); }

.plan__months { height: 32px; }
.plan__month { flex: none; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--n900); overflow: clip; white-space: nowrap;
  border-left: 1px solid var(--n100); }
.plan__month:first-child { border-left: 0; }
.plan__month span { position: sticky; left: calc(var(--plan-left) + 10px); }
.plan__unit { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--n500); }
.plan__weeks { height: 42px; }
.plan__weeks .plan__label, .plan__weeks .plan__cells { border-top: 0 !important; }
.plan__week { width: var(--col, 76px); flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; color: var(--n500);
  border-left: 1px solid var(--n100); }
.plan__week:first-child, .load:first-child, .pc:first-child { border-left-color: transparent; }
.plan__week b { font-size: 12px; font-weight: 700; line-height: 1.2; }
.plan__week span { font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--n500); white-space: nowrap; }
.plan__week.is-now b { color: #fff; background: var(--n900); border-radius: 8px; padding: 1px 7px; }
.plan__week.is-now span { color: var(--n900); }
.plan__week.is-past { color: var(--n400); }
.plan__week.is-past span { color: var(--n400); }
.plan__week.is-flash { animation: weekFlash 1.4s ease; }
@keyframes weekFlash { 0%, 60% { background: var(--n100); } 100% { background: transparent; } }

/* Zeitleiste */
.plan__lane .plan__label { align-items: flex-start; padding-top: 10px; justify-content: space-between; }
.plan__section { font-size: 13px; font-weight: 700; color: var(--n900); }
.plan__lanebox { display: block; cursor: copy;
  background-image: linear-gradient(to right, var(--n100) 1px, transparent 1px); background-size: var(--col, 76px) 100%; background-position: -1px 0; }
.ev { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700;
  line-height: 1; color: var(--n900); white-space: nowrap; cursor: pointer; z-index: 3; }
.ev .ev__mark { margin-left: 1px; }
.ev__label { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 3px 5px 3px 0; transition: background-color var(--ease); }
.ev:not(.ev--abs):not(.ev--hol):hover .ev__label { text-decoration: underline; text-underline-offset: 3px; }
.ev__label em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.02em; width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--n0); box-shadow: inset 0 0 0 1px var(--n300); flex-shrink: 0; }
.ev--abs { color: var(--n600); font-weight: 600; gap: 6px; }
.ev__bar { display: block; height: 20px; border-radius: 6px; flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--n200) 0 4px, var(--n100) 4px 8px); transition: filter var(--ease); }
.ev--abs:hover .ev__bar { filter: brightness(0.94); }
.ev--abs:hover { color: var(--n900); }
.ev--abs.is-inside .ev__label { position: absolute; left: 6px; top: 0; bottom: 0; padding: 0; color: var(--n900); }
.ev--hol { cursor: default; font-size: 11px; font-weight: 600; color: var(--n500); gap: 5px; }
.ev--hol .ev__mark { transform: none; width: 3px; height: 14px; border-radius: 2px; background: var(--n300); margin-left: 4px; }

.plan__today { position: absolute; top: 74px; bottom: 0; width: 0; border-left: 1.5px solid var(--n900); z-index: 2; pointer-events: none; }
.plan__today span { position: absolute; top: 0; left: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--n900); color: #fff;
  padding: 2px 5px; border-radius: 0 5px 5px 0; line-height: 1.2; transform: translateX(-4px); }
.plan__mline { position: absolute; top: 74px; bottom: 0; width: 0; border-left: 1px dashed var(--n300); z-index: 1; pointer-events: none; }

/* Person: Auslastung je Woche */
.plan__person { height: 56px; }
.plan__person .plan__label, .plan__person .plan__cells { background: var(--n25); border-top: 1px solid var(--n200) !important; }
.pbadge--lg { width: 30px; height: 30px; font-size: 11px; }
.plan__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.plan__who b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan__who span { font-size: 12px; font-weight: 600; color: var(--n500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.load { width: var(--col, 76px); flex: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 9px; border-left: 1px solid var(--n100); cursor: default; }
.load__num { display: flex; align-items: baseline; gap: 1px; font-size: 13px; line-height: 1; }
.load__num b { font-weight: 700; }
.load__num span { font-size: 11px; font-weight: 600; color: var(--n500); }
.load__meter { position: relative; height: 4px; border-radius: 2px; background: var(--n200); overflow: hidden; }
.load__meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--n900); }
.load__meter i.is-maybe { background: repeating-linear-gradient(135deg, var(--n900) 0 2px, var(--n300) 2px 4px); }
.load.is-over { background: var(--error-surface); color: var(--error-text); }
.load.is-over .load__num span { color: var(--error-text); }
.load.is-over .load__meter { background: #fff; }
.load.is-over .load__meter i { background: var(--error-base); }
.load.is-warn { background: var(--warning-surface); color: var(--warning-text); }
.load.is-warn .load__num span { color: var(--warning-text); }
.load.is-warn .load__meter { background: #fff; }
.load.is-warn .load__meter i:not(.is-maybe) { background: var(--warning-base); }
.load.is-warn .load__meter i.is-maybe { background: repeating-linear-gradient(135deg, var(--warning-base) 0 2px, #fff 2px 4px); }
.load.has-off:not(.is-over):not(.is-warn) { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(16, 24, 32, 0.045) 5px 10px); }
.load.is-off .load__meter { visibility: hidden; }
.load.is-past:not(.is-over) { opacity: 0.55; }

/* Projektzeile */
.plan__proj { height: 40px; }
.plan__proj .plan__label { padding-left: 28px; gap: 9px; }
.plan__proj .cdot { background: var(--c); }
.plan__proj.is-maybe .cdot { background: var(--n0); box-shadow: inset 0 0 0 2.5px var(--c); }
.plan__pname { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; line-height: 1.25; }
.plan__pname b { font-size: 13px; font-weight: 700; color: var(--n900); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan__pname span { font-size: 11px; font-weight: 600; color: var(--n500); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan__pname:hover b { text-decoration: underline; text-underline-offset: 3px; }
.plan__mini { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 0; background: transparent; color: var(--n500); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--ease), color var(--ease), opacity var(--ease); }
.plan__mini svg { width: 14px; height: 14px; }
.plan__mini:hover { background: var(--n50); color: var(--n900); }
.plan__rm { opacity: 0; }
.plan__proj:hover .plan__rm, .plan__rm:focus-visible { opacity: 1; }
@media (hover: none) { .plan__rm { opacity: 1; } }
.plan__proj.is-done .plan__pname b { color: var(--n600); }

.pc { position: relative; width: var(--col, 76px); flex: none; padding: 5px 0; border-left: 1px solid var(--n100); }
.pcell { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--n900); text-align: center;
  padding: 0 4px; outline: none; transition: background-color var(--ease), box-shadow var(--ease); cursor: cell; }
.pc:hover .pcell { background: var(--n50); }
.pc.is-filled .pcell { background: color-mix(in srgb, var(--c) 26%, #fff); }
.pc.is-filled:hover .pcell { background: color-mix(in srgb, var(--c) 36%, #fff); }
.plan__proj.is-maybe .pc.is-filled .pcell { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, #fff) 0 5px, color-mix(in srgb, var(--c) 10%, #fff) 5px 10px); }
.plan__proj.is-done .pc.is-filled .pcell { background: var(--n100); color: var(--n600); }
.pc.is-start .pcell { border-top-left-radius: 8px; border-bottom-left-radius: 8px; margin-left: 4px; width: calc(100% - 4px); }
.pc.is-end .pcell { border-top-right-radius: 8px; border-bottom-right-radius: 8px; width: calc(100% - 4px); }
.pc.is-start.is-end .pcell { width: calc(100% - 8px); }
.pc.is-past .pcell { opacity: 0.55; }
.pcell:focus { box-shadow: inset 0 0 0 2px var(--n900); border-radius: 8px; position: relative; z-index: 3; opacity: 1 !important; }
.pc.is-sel::after { content: ''; position: absolute; inset: 2px 0; background: rgba(0, 0, 0, 0.07); box-shadow: inset 0 2px 0 var(--n900), inset 0 -2px 0 var(--n900); pointer-events: none; z-index: 2; }
.pc.is-bad .pcell { animation: badCell 0.5s ease; }
@keyframes badCell { 0%, 60% { box-shadow: inset 0 0 0 2px var(--error-base); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.pc__mark { position: absolute; top: 1px; width: 7px; height: 7px; margin-left: -3.5px; background: var(--n900); transform: rotate(45deg); border-radius: 1px; z-index: 3; }
.plan.is-dragging, .plan.is-dragging .pcell { user-select: none; -webkit-user-select: none; cursor: cell; }

.plan__add { height: 40px; }
.plan__add .plan__label { padding-left: 24px; }
.plan__addbtn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--n600); padding: 6px 8px; border-radius: 8px; cursor: pointer;
  transition: color var(--ease), background-color var(--ease); }
.plan__addbtn svg { width: 14px; height: 14px; color: var(--n500); }
.plan__addbtn:hover { color: var(--n900); background: var(--n50); }
.plan__addbtn:hover svg { color: var(--n900); }
.plan__add .plan__cells { flex: 1 1 auto; }

/* Legende */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 2px 0; font-size: 12px; font-weight: 600; color: var(--n600); }
.legend__item { display: inline-flex; align-items: center; gap: 7px; }
.legend__sw { width: 22px; height: 12px; border-radius: 4px; display: inline-block; }
.legend__sw--fix { background: color-mix(in srgb, var(--chart-3) 26%, #fff); }
.legend__sw--maybe { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--chart-3) 30%, #fff) 0 4px, color-mix(in srgb, var(--chart-3) 10%, #fff) 4px 8px); }
.legend__sw--over { background: var(--error-surface); box-shadow: inset 0 0 0 1px var(--error-base); }
.legend__sw--off { background: repeating-linear-gradient(135deg, var(--n200) 0 4px, var(--n100) 4px 8px); }
.legend__hint { color: var(--n500); margin-left: auto; }

/* Projekt wählen */
.picklist { display: flex; flex-direction: column; margin: 16px -10px 0; max-height: 46vh; overflow-y: auto; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--ease); }
.pick:hover { background: var(--n50); }
.pick__text { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; line-height: 1.3; }
.pick__text b { font-size: 14px; font-weight: 700; }
.pick__text span { font-size: 12px; font-weight: 600; color: var(--n500); }
.pick__go { color: var(--n400); display: inline-flex; }
.pick:hover .pick__go { color: var(--n900); }

/* ---------- schmal ---------- */
@media (max-width: 900px) {
  .page--plan { --plan-left: 168px; }
  .plan__label { padding-left: 12px; padding-right: 6px; gap: 8px; }
  .plan__proj .plan__label { padding-left: 12px; }
  .plan__add .plan__label { padding-left: 6px; }
  .plan__person .pbadge--lg { width: 26px; height: 26px; }
  .legend__hint { display: none; }
  .prow--proj { grid-template-columns: minmax(0, 1fr) auto; }
  .prow--proj .prow__main { grid-column: 1 / 3; }
  .prow--proj .prow__people { display: none; }
  .prow--proj > .progress { grid-column: 1; width: auto; }
  .prow--proj > .chip { grid-column: 2; justify-self: end; }
  .prow--proj > .pcard__go { display: none; }
  .modes--3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page--plan { --plan-left: 138px; }
  .plan__rm { width: 20px; margin-right: -2px; }
  .plan__proj .plan__label { padding-left: 10px; gap: 7px; }
  .plan__person .plan__label { padding-left: 8px; }
  .plan__who span { display: none; }
  .alertbar__title { flex: 1 1 60%; margin-right: 0; }
  .alertbar__chips { flex-basis: 100%; }
  .bar__inner { flex-wrap: wrap; gap: 10px 12px; padding-top: 12px; padding-bottom: 0; }
  .bar__logo { flex-grow: 1; font-size: 16px; }
  .bar__logo img { height: 22px; width: 22px; }
  .bar__nav { order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 -8px; padding-bottom: 8px; }
  .bar__link.is-active::after { bottom: -8px; }
  .planbar .grow { display: none; }
  .planbar .h1 { flex-basis: 100%; }
  .table__row.table--events, .table__row.table--team { grid-template-columns: minmax(0, 1fr) auto; }
  .table__row.table--events > :nth-child(2), .table__row.table--events > :nth-child(3), .table__row.table--events > :nth-child(4) { grid-column: 1; }
  .table__row.table--events > .pcard__go { grid-row: 1 / span 4; grid-column: 2; }
  .table__row.table--team > :nth-child(2), .table__row.table--team > :nth-child(3) { grid-column: 1; }
  .table__row.table--team .table__end { grid-row: 1 / span 3; grid-column: 2; }
  .capgrid { gap: 4px; }
  .pcell { font-size: 16px; }
}
@media print {
  .planbar .seg, .planbar .rangenav, .planbar .btn, .legend__hint, .plan__mini, .plan__add { display: none !important; }
  .plan { overflow: visible; }
}

/* ---------- Ausbau nach Vergleich mit ähnlichen Werkzeugen (siehe DESIGN-SYSTEM.md, Punkt 13) ---------- */
/* Engpässe kompakt in einer Reihe statt als gestapelte Banner */
.alertstack { flex-direction: row; flex-wrap: wrap; }
.alertbar { padding: 7px 8px 7px 12px; gap: 6px 10px; }
.alertbar--ok { padding: 2px; }
.alertbar__title { font-size: 13px; }

/* Kopfzeilen bleiben stehen: das Raster scrollt in sich */
@media (min-width: 721px) and (min-height: 560px) {
  .plan { max-height: max(420px, calc(100vh - 190px)); overflow-y: auto; }
  .plan__months, .plan__weeks { position: sticky; z-index: 6; }
  .plan__months { top: 0; }
  .plan__weeks { top: 32px; box-shadow: 0 1px 0 var(--n100); }
  .plan__months .plan__cells, .plan__weeks .plan__cells { background: var(--n0); }
  .plan__free { position: sticky; bottom: 0; z-index: 6; }
}

/* Abwesend als eigene Spur */
.plan__lane--off .plan__section { color: var(--n600); }

/* Person einklappen */
.plan__person .plan__label { padding-left: 6px; gap: 6px; }
.plan__fold { flex: none; width: 24px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--n500); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color var(--ease), color var(--ease), transform var(--ease); transform: rotate(90deg); }
.plan__fold svg { width: 16px; height: 16px; }
.plan__fold:hover { background: var(--n100); color: var(--n900); }
.plan__person.is-closed .plan__fold { transform: none; }
.plan__person .plan__who { margin-left: 4px; }

/* Noch frei (Fußzeile) */
.plan__free { height: 44px; }
.plan__free .plan__label, .plan__free .plan__cells { background: var(--n0); border-top: 1px solid var(--n200) !important; }
.plan__free .plan__label { padding-left: 18px; }
.free { width: var(--col, 76px); flex: none; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--n100); font-size: 13px; color: var(--success-text); cursor: default; }
.free:first-child { border-left-color: transparent; }
.free b { font-weight: 700; }
.free.is-none { color: var(--n400); }
.free.is-past { opacity: 0.45; }
@media (max-width: 720px) {
  .plan__person .plan__label { padding-left: 2px; gap: 4px; }
  .plan__free .plan__label { padding-left: 10px; }
  .plan__free .plan__who span { display: none; }
}
.plan__addbtn { white-space: nowrap; }
@media (max-width: 720px) { .plan__addbtn { font-size: 12px; gap: 5px; padding: 6px 4px; } }

/* ---------- Zoomstufen: Wochen (bearbeiten) · Monate · Quartale (Überblick) ---------- */
button.plan__week { border: 0; border-left: 1px solid var(--n100); background: none; font: inherit; padding: 0; cursor: pointer; transition: background-color var(--ease); }
button.plan__week:first-child { border-left-color: transparent; }
button.plan__week:hover { background: var(--n50); }
button.plan__week:hover b { color: var(--n900); }
.plan--m .plan__week b, .plan--q .plan__week b { font-size: 13px; }
.plan--m .plan__week span, .plan--q .plan__week span { font-size: 11px; }
.pcell--sum { cursor: pointer; font-family: inherit; line-height: 1; }
.pcell--sum:focus { box-shadow: none; border-radius: inherit; }
.pcell--sum:focus-visible { box-shadow: inset 0 0 0 2px var(--n900); border-radius: 8px; position: relative; z-index: 3; }
.plan--m .load, .plan--q .load { padding: 0 14px; }
.plan--m .load__num, .plan--q .load__num { font-size: 14px; }
/* Einheit umschalten (links oben im Raster) */
button.plan__unit { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 6px; margin-left: -6px; border-radius: 8px; font-family: inherit; cursor: pointer;
  transition: color var(--ease), background-color var(--ease); }
button.plan__unit:hover { color: var(--n900); background: var(--n50); }

/* ---------- „Passt das noch?“ ---------- */
.fit__people { display: flex; flex-direction: column; border: 1px solid var(--n100); border-radius: 12px; }
.fit__person { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: text; }
.fit__person + .fit__person { border-top: 1px solid var(--n100); }
.fit__name { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; line-height: 1.3; }
.fit__name b { font-size: 14px; font-weight: 700; }
.fit__name span { font-size: 12px; font-weight: 600; color: var(--n500); }
.fit__need { width: 84px; text-align: right; padding-top: 8px; padding-bottom: 8px; }
.fit__unit { width: 58px; font-size: 13px; font-weight: 600; color: var(--n600); }
.fit__empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--n300); border-radius: 12px; font-size: 13px; color: var(--n600); }
.fit__result { display: flex; flex-direction: column; gap: 12px; }
.fit__result:empty { display: none; }
.fit__save { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--n100); }
.verdict { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--n50); }
.verdict__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--n0); color: var(--n900); }
.verdict__icon svg { width: 16px; height: 16px; }
.verdict__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; }
.verdict__text { font-size: 13px; font-weight: 600; line-height: 1.45; margin-top: 2px; color: var(--n600); }
.verdict--ok { background: var(--success-surface); }
.verdict--ok .verdict__title, .verdict--ok .verdict__text, .verdict--ok .verdict__icon { color: var(--success-text); }
.verdict--no { background: var(--error-surface); }
.verdict--no .verdict__title, .verdict--no .verdict__text { color: var(--error-text); }
.verdict--no .verdict__icon { color: var(--error-base); }
.fitrows { display: flex; flex-direction: column; gap: 12px; }
.fitrow__head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fitrow__head b { font-weight: 700; }
.fitrow__head span:not(.pbadge) { color: var(--n600); }
.fitrow__weeks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.fitweek { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 48px; padding: 5px 6px; border-radius: 8px; background: var(--n50); line-height: 1.2; }
.fitweek span { font-size: 10px; font-weight: 600; color: var(--n500); }
.fitweek b { font-size: 13px; font-weight: 700; color: var(--n400); }
.fitweek.is-used { background: repeating-linear-gradient(135deg, var(--n200) 0 5px, var(--n100) 5px 10px); }
.fitweek.is-used span { color: var(--n600); }
.fitweek.is-used b { color: var(--n900); }
.fitweek--more { justify-content: center; font-size: 11px; font-weight: 600; color: var(--n500); background: none; }
@media (max-width: 720px) { .fit__unit { width: auto; } .fit__need { width: 68px; } }

/* ---------- Kalender-Abo (Termine) ---------- */
.abo__text { margin: 0 0 14px; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--n600); max-width: 640px; }
.abo__links { display: flex; flex-direction: column; gap: 16px; }
.abo__hint { margin: 14px 0 0; }
.abo__actions { display: flex; gap: 18px; margin-top: 12px; }

/* ---------- Kopfzeile: Bereiche mittig (Logo links, Konto rechts) ---------- */
.bar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.bar__nav { flex-grow: 0; justify-content: center; }
.bar__inner > .usermenu { justify-self: end; }
.bar__logo { justify-self: start; }
@media (max-width: 720px) {
  .bar__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .bar__nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

/* ---------- Engpässe kompakt: Chips neben der Überschrift, Wochen im Aufklapper ---------- */
.alertslot { margin: 0; display: inline-flex; }
.adrops { display: inline-flex; gap: 6px; }
.adrop { position: relative; display: inline-flex; }
.adrop--ok { align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--n500); }
.adrop__btn { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 10px; padding: 5px 6px 5px 8px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: box-shadow var(--ease); }
.adrop__btn b { font-weight: 700; }
.adrop__icon { display: inline-flex; }
.adrop__icon svg { width: 15px; height: 15px; }
.adrop__chev { display: inline-flex; transform: rotate(90deg); opacity: 0.7; transition: transform var(--ease); }
.adrop__chev svg { width: 14px; height: 14px; }
.adrop__btn[aria-expanded="true"] .adrop__chev { transform: rotate(-90deg); }
.adrop--over .adrop__btn { background: var(--error-surface); color: var(--error-text); }
.adrop--over .adrop__icon { color: var(--error-base); }
.adrop--warn .adrop__btn { background: var(--warning-surface); color: var(--warning-text); }
.adrop--warn .adrop__icon { color: var(--warning-base); }
.adrop__btn:hover, .adrop__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.adrop__pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 330px; max-width: calc(100vw - 32px); padding: 14px 8px 8px; background: var(--n0); border: 1px solid var(--n200); border-radius: 12px;
  box-shadow: var(--shadow-float); animation: hintIn .15s ease; }
.adrop__title { font-size: 13px; font-weight: 700; color: var(--n900); padding: 0 8px; }
.adrop__text { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--n600); margin: 3px 0 8px; padding: 0 8px; }
.adrop__list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border-top: 1px solid var(--n100); padding-top: 6px; }
.adrop__row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; color: var(--n600); transition: background-color var(--ease); }
.adrop__row:hover { background: var(--n50); }
.adrop__row b { font-weight: 700; color: var(--n900); }
.adrop__range { font-size: 12px; color: var(--n500); }
.adrop__by { font-weight: 700; }
.adrop--over .adrop__by { color: var(--error-text); }
.adrop--warn .adrop__by { color: var(--warning-text); }
@media (max-width: 720px) { .adrop--warn .adrop__pop { left: auto; right: 0; } }

/* ---------- TBA: Termin noch nicht fix – gestrichelter Zeitraum statt Marke ---------- */
.ev__span { display: block; height: 18px; border-radius: 6px; flex-shrink: 0; border: 1.5px dashed var(--c, var(--n900)); background: color-mix(in srgb, var(--c, var(--n900)) 8%, transparent); transition: background-color var(--ease); }
.ev--tba:hover .ev__span { background: color-mix(in srgb, var(--c, var(--n900)) 18%, transparent); }
.ev__label .ev__tba, .chip--tba { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; width: auto; height: auto; padding: 2px 5px; border-radius: 6px; background: var(--n0); color: var(--n600);
  box-shadow: inset 0 0 0 1px var(--n300); }
.chip--tba { font-size: 10px; padding: 2px 6px; }
.ev__mark.evmark--tba { background: transparent; box-shadow: none; border: 1.5px dashed var(--c, var(--n900)); }

/* ---------- Tagesansicht: eine Woche = sieben Tage à 34 px; geplant wird weiter je Woche ---------- */
.plan--d .plan__month { color: var(--n600); font-weight: 600; }
.plan--d .plan__month.is-now { color: var(--n900); font-weight: 700; }
.plan__week--days { flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 0; }
.plan__day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--n600); border-left: 1px solid var(--n100); }
.plan__day:first-child { border-left: 0; }
.plan__day i { font-style: normal; font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--n500); }
.plan__day b { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--n900); background: none !important; padding: 0 5px !important; border-radius: 8px; }
.plan__day.is-we b, .plan__day.is-we i, .plan__day.is-past b, .plan__day.is-past i { color: var(--n400); }
.plan__day.is-hol b { color: var(--n500); text-decoration: line-through; text-decoration-color: var(--n300); }
.plan__week--days .plan__day.is-today b { background: var(--n900) !important; color: #fff; }
.plan__week--days .plan__day.is-today i { color: var(--n900); }
.plan__daygrid { position: absolute; top: 74px; bottom: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(to right, var(--n100) 1px, transparent 1px); background-size: 34px 100%; opacity: 0.7; }
.plan__wkend { position: absolute; top: 74px; bottom: 0; z-index: 1; pointer-events: none; background: rgba(16, 24, 32, 0.035); }
.plan--d .load { position: relative; padding: 0 12px; }
.plan--d .load__num, .plan--d .load__meter { position: relative; z-index: 1; max-width: 146px; }
.load__days { position: absolute; inset: 0; display: flex; }
.load__days i { flex: 1 1 0; }
.load__days i.is-off { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(16, 24, 32, 0.07) 5px 10px); }
.plan--d .pcell { font-size: 14px; }

/* ---------- Zeitplan fürs Angebot (Phasen) ---------- */
.phase { position: absolute; bottom: 1px; height: 3px; border-radius: 2px; background: var(--c); z-index: 3; }
.plan__proj.is-maybe .phase { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 9px); }
.sched__proj { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--n600); }
.page--sched > .stack { max-width: 1200px; }
.sched__rows { display: flex; flex-direction: column; gap: 8px; }
.sched__row { display: grid; grid-template-columns: 22px minmax(0, 1.6fr) 170px 150px minmax(0, 1fr) 34px; gap: 10px; align-items: center; }
.sched__nr { font-size: 13px; font-weight: 700; color: var(--n500); text-align: right; }
.sched__dur { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--n600); }
.sched__weeks { width: 64px; text-align: center; }
.sched__info { font-size: 13px; font-weight: 600; color: var(--n500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--n100); }
.sched__foot .plan__addbtn { margin-left: -8px; }
.sched__foot .field__hint { flex: 1 1 320px; }
.sched__shift { font-size: 13px; color: var(--n600); }
.sched__empty { padding: 18px; border: 1px dashed var(--n300); border-radius: 12px; }
.sched__emptytext { margin: 0 0 12px; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--n600); max-width: 600px; }
.sched__preview .sched__emptytext { margin: 0; }
.sched__templates { display: flex; flex-wrap: wrap; gap: 8px; }
.sched__tools { flex-wrap: wrap; row-gap: 10px; }
.sched__tools .grow { flex-grow: 1; }
.sched__tools .btn { padding: 8px 16px; }
.sched__preview { border: 1px solid var(--n100); border-radius: 12px; overflow: hidden; background: #fff; }
.sched__preview svg { display: block; width: 100%; height: auto; }
.sched__preview > p { padding: 18px; }
.sched__marks { margin-top: 12px; font-size: 13px; color: var(--n600); }
.sched__tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.sched__tbl th { text-align: left; font-size: 13px; font-weight: 700; color: var(--n500); padding: 0 12px 10px 0; border-bottom: 1px solid var(--n100); }
.sched__tbl td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--n100); font-weight: 600; color: var(--n600); }
.sched__tbl td:first-child { font-weight: 700; color: var(--n900); }
.sched__tbl tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
  .sched__row { grid-template-columns: 18px minmax(0, 1fr) 34px; row-gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--n100); }
  .sched__row > input[type=date] { grid-column: 2; }
  .sched__row > .sched__dur { grid-column: 2; }
  .sched__row > .sched__info { grid-column: 2; }
  .sched__row > .circle { grid-row: 1; grid-column: 3; }
  .sched__tools .seg { flex-basis: 100%; }
}

/* ---------- Logo: Wortmarke Cappa (viewBox 386.69 × 102.77) – Kopfzeile 24 px, Anmeldung 34 px ---------- */
.bar__logo { height: 24px; }
.bar__logo img { height: 24px; width: auto; }
.login__word img { height: 34px; width: auto; }
@media (max-width: 720px) { .bar__logo, .bar__logo img { height: 20px; width: auto; } }

/* ---------- Kompakte Titelzeile + Werkzeugzeile als Kopf des Rasters ---------- */
.btn--md { padding: 8px 14px; font-size: 13px; gap: 6px; }
.btn--md svg { width: 15px; height: 15px; }
.btn--xs { padding: 5px 11px; font-size: 12px; }
.circle--xs { width: 28px; height: 28px; }
.circle--xs svg { width: 14px; height: 14px; }
.planbar { flex-wrap: nowrap; gap: 10px; margin-bottom: 12px; min-height: 40px; }
.planbar .h1 { font-size: 26px; flex: none; }
.plancard { display: flex; flex-direction: column; }
.plan__tools { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-bottom: 1px solid var(--n100); background: var(--n0); }
.plan__tools .grow { flex-grow: 1; }
.seg--sm { padding: 2px; box-shadow: inset 0 0 0 1px var(--n200); }
.seg--sm .seg__btn { padding: 5px 12px; font-size: 12px; }
.rangenav__text { font-size: 12px; font-weight: 600; color: var(--n500); margin-right: 6px; white-space: nowrap; }
@media (min-width: 721px) and (min-height: 560px) { .plan { max-height: max(380px, calc(100vh - 222px)); } }
@media (max-width: 900px) {
  .planbar { flex-wrap: wrap; }
  .rangenav__text { display: none; }
}
@media (max-width: 720px) {
  .planbar .h1 { flex-basis: auto; font-size: 22px; }
  .planbar .btn--md { flex: 1 1 auto; }
  .plan__tools { flex-wrap: wrap; }
}

/* ---------- Tagesplanung: eine Zelle je Tag ---------- */
.plan--d .pc--day { width: calc(var(--col) / 7); border-left: 0; padding: 5px 0; }
.plan--d .pc--day .pcell { font-size: 12px; padding: 0 1px; }
.pc--day.is-auto .pcell { background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--n600); font-weight: 600; }
.pc--day.is-auto:hover .pcell { background: color-mix(in srgb, var(--c) 20%, #fff); }
.plan__proj.is-maybe .pc--day.is-auto .pcell { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, #fff) 0 5px, color-mix(in srgb, var(--c) 5%, #fff) 5px 10px); }
.pc--day.is-zero .pcell { color: var(--n400); }
.pc--day.is-start .pcell { margin-left: 2px; width: calc(100% - 2px); border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.pc--day.is-end .pcell { width: calc(100% - 2px); border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.pc--day.is-start.is-end .pcell { width: calc(100% - 4px); }
.pc--day.is-offday:not(.is-filled) .pcell { cursor: default; }
/* Wochenansicht: Punkt = diese Woche ist tagesgenau geplant */
.pc.has-pins::before { content: ''; position: absolute; right: 9px; bottom: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--n900); opacity: 0.55; z-index: 3; pointer-events: none; }
/* Auslastung je Tag in der Personenzeile */
.plan--d .load { justify-content: flex-start; padding-top: 9px; }
.plan--d .load__meter { display: none; }
.load__days i { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--n500); font-variant-numeric: tabular-nums; }
.load__days i.is-full { color: var(--n900); font-weight: 700; }
.load__days i.is-over { background: var(--error-surface); color: var(--error-text); font-weight: 700; }
.load__days i.is-warn { background: var(--warning-surface); color: var(--warning-text); font-weight: 700; }
.plan--d .load.is-over, .plan--d .load.is-warn { background: transparent; }
.plan--d .load.is-over .load__num b, .plan--d .load.is-over .load__num span { color: var(--error-text); }
.plan--d .load.is-warn .load__num b, .plan--d .load.is-warn .load__num span { color: var(--warning-text); }

/* ---------- Archiv (Projekte) ---------- */
.archive { margin-top: 4px; }
.archive__sum { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--n600); padding: 6px 8px 6px 2px; border-radius: 8px; list-style: none;
  transition: color var(--ease); }
.archive__sum::-webkit-details-marker { display: none; }
.archive__sum:hover { color: var(--n900); }
.archive__chev { display: inline-flex; transition: transform var(--ease); }
.archive[open] .archive__chev { transform: rotate(90deg); }
.archive__count { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: var(--n0); box-shadow: inset 0 0 0 1px var(--n200); color: var(--n600); }
.archive__card { margin-top: 10px; }
.arow { display: flex; align-items: center; gap: 12px; padding: 12px 22px; }
.arow + .arow { border-top: 1px solid var(--n100); }
.arow .cdot { opacity: 0.5; }
.arow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; line-height: 1.35; }
.arow__main b { font-size: 14px; font-weight: 700; color: var(--n600); }
.arow__main span { font-size: 13px; font-weight: 600; color: var(--n500); }
.arow__main:hover b { color: var(--n900); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Anmeldung: Hintergrundbild für alle, Karte als Milchglas darüber (wie Sondle) ---------- */
.login { background: var(--n25) url('../img/login-bg.jpg') center / cover no-repeat; }
.login__card { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .login__card { background: rgba(255, 255, 255, 0.92); } }
.login__brand .label-quiet { color: var(--n600); }
.login .input { background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.9); }
.login .input:hover { border-color: var(--n300); }
.login .input:focus { border-color: var(--focus-color); background: #fff; }

/* ---------- Verfügbare Zeit im Kalender anpassen ---------- */
button.load { border: 0; border-left: 1px solid var(--n100); background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; align-items: stretch; transition: box-shadow var(--ease); }
button.load:first-child { border-left-color: transparent; }
button.load:hover, button.load:focus-visible { box-shadow: inset 0 0 0 1.5px var(--n300); outline: none; }
button.load:focus-visible { box-shadow: inset 0 0 0 2px var(--n900); }
button.load.is-over { background: var(--error-surface); }
button.load.is-warn { background: var(--warning-surface); }
.plan--d button.load.is-over, .plan--d button.load.is-warn { background: transparent; }
.load.is-adjusted .load__num span { text-decoration: underline dotted; text-underline-offset: 3px; color: var(--n900); font-weight: 700; }
.load.is-adjusted.is-over .load__num span { color: var(--error-text); }
.load__days i.is-own { box-shadow: inset 0 2px 0 var(--n900); }
.capgrid--week .capgrid__day span { white-space: nowrap; }
.capgrid__note { display: block; min-height: 14px; font-size: 10px; font-weight: 600; color: var(--n500); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .capgrid--week { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; } }

/* ---------- Werkzeugzeile: Sortierung, Projekte ein-/ausblenden ---------- */
.tdrop { position: relative; display: inline-flex; }
.tdrop__btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--n600); padding: 6px 6px 6px 10px; border-radius: 8px; cursor: pointer;
  transition: color var(--ease), background-color var(--ease); }
.tdrop__btn:hover, .tdrop__btn[aria-expanded="true"] { color: var(--n900); background: var(--n50); }
.tdrop__btn[aria-expanded="true"] .adrop__chev { transform: rotate(-90deg); }
.tdrop__badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: var(--n900); color: #fff; }
.tdrop__pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 280px; max-width: calc(100vw - 32px); padding: 14px 8px 10px; background: var(--n0); border: 1px solid var(--n200); border-radius: 12px;
  box-shadow: var(--shadow-float); animation: hintIn .15s ease; }
.tdrop__title { font-size: 13px; font-weight: 700; padding: 0 8px 8px; }
.tdrop__list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.tdrop__opt { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--n600); text-align: left; padding: 8px; border-radius: 8px; cursor: pointer;
  transition: background-color var(--ease), color var(--ease); }
.tdrop__opt:hover { background: var(--n50); color: var(--n900); }
.tdrop__opt.is-active { color: var(--n900); font-weight: 700; }
.tdrop__check { display: inline-flex; width: 16px; visibility: hidden; }
.tdrop__opt.is-active .tdrop__check { visibility: visible; }
.tdrop__check-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background-color var(--ease); }
.tdrop__check-row:hover { background: var(--n50); }
.tdrop__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tdrop__name b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdrop__name span { font-size: 12px; font-weight: 600; color: var(--n500); }
.tdrop__hint { font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--n500); margin: 8px 8px 0; padding-top: 8px; border-top: 1px solid var(--n100); }
.tdrop__pop > .linkbtn { margin: 8px 8px 0; }
.plan__hiddenhint { font-size: 12px; margin-left: 4px; }
/* Zeilen verschieben (eigene Reihenfolge) */
.plan__grip { flex: none; width: 16px; height: 26px; margin-left: -18px; border: 0; background: none; padding: 0; color: var(--n400); cursor: grab; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; touch-action: none;
  transition: color var(--ease), background-color var(--ease); }
.plan__grip:hover, .plan__grip:focus-visible { color: var(--n900); background: var(--n50); }
.plan__proj.is-dragging { opacity: 0.55; }
.plan__proj.is-dragging .plan__grip { cursor: grabbing; }
.plan__proj.is-drop-before .plan__label, .plan__proj.is-drop-before .plan__cells { box-shadow: inset 0 2px 0 var(--n900); }
.plan__proj.is-drop-after .plan__label, .plan__proj.is-drop-after .plan__cells { box-shadow: inset 0 -2px 0 var(--n900); }
@media (max-width: 900px) { .plan__grip { margin-left: -8px; } }
@media (max-width: 720px) { .plan__hide { display: none; } .tdrop__pop { width: 260px; } }
.plan__add .plan__label { flex-wrap: nowrap; }
.plan__hiddenhint { white-space: nowrap; align-self: center; }

/* ---------- Tooltip (Erklärung beim Überfahren) – Horamic: Fläche #111417 ---------- */
.tip { position: fixed; z-index: 80; max-width: 300px; padding: 8px 11px; border-radius: 9px; background: var(--inverse); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(16, 24, 32, 0.22); pointer-events: none; animation: tipIn 120ms ease; text-align: left; }
.tip__title { font-weight: 700; margin-bottom: 2px; }
.tip__title ~ .tip__line { color: #C6CED3; }
.tip__gap { height: 6px; }
@keyframes tipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
[data-tip] { -webkit-touch-callout: none; }

/* ---------- Meilensteine: Marke (Quadrat) und Liste im Zeitplan ---------- */
.evmark--meilenstein, .ev--meilenstein .ev__mark { transform: none; border-radius: 2px; width: 8px; height: 8px; }
.msrows { display: flex; flex-direction: column; margin: -4px 0 2px; }
.msrow { display: grid; grid-template-columns: 14px minmax(0, 1.4fr) minmax(0, 1.2fr) 110px 18px; gap: 12px; align-items: center; width: calc(100% + 16px); margin: 0 -8px; padding: 10px 8px;
  border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; color: var(--n900); cursor: pointer; transition: background var(--ease); }
.msrow:hover { background: var(--n50); }
.msrow b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msrow span { font-size: 13px; color: var(--n600); }
.msrow .ev__mark { justify-self: center; }
@media (max-width: 720px) {
  .msrow { grid-template-columns: 14px minmax(0, 1fr) 18px; row-gap: 2px; }
  .msrow__when, .msrow__type { grid-column: 2; }
  .msrow .pcard__go { grid-row: 1; grid-column: 3; }
}

/* ---------- Zahlen auf farbigen Flächen Ton in Ton: dunkler Ton der Kundenfarbe statt Schwarz/Grau ---------- */
.plan__proj { --c-ink: color-mix(in srgb, var(--c) 58%, #000); }
.pc.is-filled .pcell { color: var(--c-ink); }
.pc--day.is-auto .pcell { color: color-mix(in srgb, var(--c-ink) 68%, #fff); }
.pc.has-pins::before { background: var(--c-ink); opacity: 0.8; }
.plan__proj.is-done .pc.is-filled .pcell { color: var(--n600); }

/* ---------- Korrekturen aus der Durchsicht ---------- */
.page--sched > .titlebar { max-width: 1200px; }                     /* Titelzeile so breit wie die Karten darunter */
.table__name .evmark--urlaub, .table__name .evmark--privat, .table__name .evmark--krank { width: 11px; margin: 0 2px; }   /* Titel in einer Flucht mit den Projekt-Terminen */

/* ---------- Anmeldung: „Passwort vergessen?“ ---------- */
.login__forgot { align-self: center; font-size: 13px; }
.login__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--n700, var(--n600)); }
.main:has(> .login) { padding-bottom: 0; }      /* Anmeldeseite füllt genau das Fenster – kein grauer Streifen, kein Scrollen */

/* ---------- Korrekturen aus der Layout-Prüfung (dev/layoutcheck.py) ---------- */
/* „N ausgeblendet“: kleine Marke in der Namensspalte statt Text, der über die Spaltenlinie läuft */
.plan__hiddenhint { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 7px; border: 0; border-radius: 999px; background: var(--n100); color: var(--n600);
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--ease), color var(--ease); }
.plan__hiddenhint:hover { background: var(--n200); color: var(--n900); }
.plan__hiddenhint svg { width: 13px; height: 13px; }
.plan__add .plan__label { gap: 4px; }
.plan__addshort { display: none; }
@media (max-width: 900px) { .plan__addlong { display: none; } .plan__addshort { display: inline; } }
/* Projekt-Dialog: weitere Aktionen in eigener Zeile über Abbrechen/Speichern */
.modal__more { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--n100); }
.modal__more .grow { flex-grow: 1; }
/* Werkzeugzeile der Planung: bei wenig Platz umbrechen statt aus der Karte laufen */
@media (max-width: 1000px) { .plan__tools { flex-wrap: wrap; row-gap: 8px; } }
button.plan__unit { white-space: nowrap; }
@media (max-width: 720px) {
  button.plan__unit { font-size: 10px; letter-spacing: 0.02em; gap: 4px; padding: 4px; margin-left: -4px; }
  /* Menüs der Werkzeugzeile über die ganze Kartenbreite – sonst schneidet die Karte sie ab */
  .plan__tools { position: relative; }
  .tdrop { position: static; }
  .tdrop__pop { left: 8px; right: 8px; width: auto; max-width: none; top: calc(100% - 2px); }
}
/* Alle Dialoge auf dem Handy: Knöpfe untereinander, Hauptaktion oben (bisher nur die breiten Dialoge) */
@media (max-width: 600px) {
  .modal__actions { flex-wrap: wrap; }
  .modal__actions .grow { display: none; }
  .modal__actions .btn { flex: 1 1 100%; justify-content: center; }
  .modal__actions .btn--primary, .modal__actions .btn--danger { order: -1; }
}
/* Lange Titel: auf der Zeitleiste mit „…“ (Breite = LABEL_MAX in plan.js), in Tabellen umbrechen statt mitten im Wort abschneiden */
.ev__text { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table__name { white-space: normal; overflow: visible; }
.table__name > span:not(.chip):not(.pbadge) { min-width: 0; overflow-wrap: anywhere; }
.table__name > .chip, .table__name > .pbadge, .table__name > .ev__mark { flex: none; }

/* ---------- Zweite Runde der Layout-Prüfung ---------- */
/* Engpass-Liste: Name der Person kürzen statt die Spalten zu verschieben */
.adrop__row { grid-template-columns: 62px minmax(0, 1fr) minmax(0, auto) auto; }
.adrop__range, .adrop__who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adrop__who { max-width: 110px; }
@media (max-width: 720px) {
  /* Engpass-Liste über die ganze Breite unter die erste Zeile – sonst läuft sie rechts aus dem Bildschirm */
  .planbar { position: relative; }
  .adrop { position: static; }
  .adrop__pop, .adrop--warn .adrop__pop { left: 0; right: 0; top: 44px; width: auto; max-width: none; }
  .sched__foot .plan__addbtn { margin-left: -4px; }
}
/* Langer Kundenname: Punkt bleibt an der ersten Zeile, „Ändern“ rutscht nicht allein unter den Punkt */
.pgroup__title { flex-wrap: nowrap; align-items: baseline; }
.pgroup__title .cdot { flex: none; align-self: flex-start; margin-top: 0.42em; }
.pgroup__title .linkbtn { flex: none; align-self: baseline; }
.card--add__label { white-space: nowrap; }
/* Kopf eines Feldes (z. B. „Verfügbare Stunden … 40 h je Woche“): Summe nie mitten im Wert umbrechen */
.field__top { flex-wrap: wrap; row-gap: 2px; }
.field__top .label-quiet { white-space: nowrap; }
/* Datensicherung auf dem Handy: eine Sicherung = ein Block, Knöpfe rechts oben, kein Tabellenkopf */
@media (max-width: 720px) {
  .table__head.backups__grid { display: none; }
  .table__row.backups__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; }
  .table__row.backups__grid > [role="cell"] { grid-column: 1; min-width: 0; }
  .table__row.backups__grid > .table__end { grid-column: 2; grid-row: 1 / span 3; align-self: start; flex-direction: column; align-items: flex-end; }
}

/* ---------- Heute: Linie nur auf der Zeitleiste, darunter ein Streifen, der keine Zahl kreuzt ---------- */
.plan__lanebox .plan__today, .plan__lanebox .plan__mline { top: 0; bottom: 0; }
.plan__lanebox .plan__today span { top: 2px; }
.plan__nowband { position: absolute; bottom: 0; z-index: 1; pointer-events: none; background: rgba(17, 20, 23, 0.045);
  box-shadow: inset 1px 0 0 rgba(17, 20, 23, 0.14), inset -1px 0 0 rgba(17, 20, 23, 0.14); }