/* ==========================================================================
   Kalender verwalten – Ergänzungen zum Startseiten-Kalender (kalender.css)
   Farben und Masse aus kalender.css (.kal-root) und site.css übernommen.
   ========================================================================== */
.sec-verwalten { padding: calc(56 * var(--k)) 0 calc(72 * var(--k)); min-height: 62vh; }

/* Abgemeldet: nur Text und Anmeldung */
.kal-wrap:not(.is-admin) .kal-legend { display: none; }

/* ---------- Anmeldung ---------- */
.adm-login {
  display: flex; flex-direction: column; gap: calc(12 * var(--k));
  padding: calc(26 * var(--k)) calc(28 * var(--k)) calc(24 * var(--k));
}
.adm-login__title { margin: 0 0 calc(2 * var(--k)); font-size: calc(17 * var(--k)); font-weight: 600; color: var(--navy); }
.adm-login__lead { margin: 0; font-size: calc(13 * var(--k)); line-height: 1.6; color: var(--grey); }
.adm-login label { margin-top: calc(6 * var(--k)); font-size: calc(13 * var(--k)); font-weight: 600; color: var(--navy); }
.adm-login input[type="password"] {
  font: inherit; font-size: calc(15 * var(--k)); color: var(--navy);
  padding: calc(11 * var(--k)) calc(12 * var(--k));
  background: #fff; border: 1px solid var(--stone); border-radius: calc(6 * var(--k));
}
.adm-login input[type="password"]:focus-visible { outline: 2px solid var(--navy); outline-offset: 0; border-color: transparent; }
.adm-login .kal-cta { margin-top: calc(6 * var(--k)); align-self: stretch; }
.adm-login .kal-cta:disabled { opacity: .6; cursor: progress; }
.adm-login__msg { margin: 0; font-size: calc(13 * var(--k)); line-height: 1.6; color: var(--grey); }
.adm-login__msg.is-error { color: #A33A2B; }
.adm-login .kal-clear { align-self: flex-start; padding-left: 0; }

/* ---------- Verwaltungs-Leiste unter dem Kalender ---------- */
.kal-admin {
  display: flex; flex-direction: column; gap: calc(12 * var(--k));
  padding: calc(14 * var(--k)) calc(16 * var(--k)) calc(16 * var(--k));
  border-top: 1px solid var(--line); background: var(--cream);
}
.adm-top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--k)); }
.adm-top p { margin: 0; font-size: calc(13 * var(--k)); line-height: 1.5; color: var(--grey); }
.adm-top strong { color: var(--navy); font-weight: 600; }
.adm-state { font-size: calc(12 * var(--k)); font-weight: 500; color: var(--grey); white-space: nowrap; }
.adm-state.ok { color: #4F7F37; }
.adm-state.err { color: #A33A2B; white-space: normal; text-align: right; }

.adm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--k)); }
.adm-tools .kal-clear { margin-left: auto; }
.adm-chip {
  font: inherit; font-size: calc(13 * var(--k)); font-weight: 500; color: var(--navy);
  padding: calc(7 * var(--k)) calc(14 * var(--k));
  background: #fff; border: 1px solid var(--stone); border-radius: 999px; cursor: pointer;
}
.adm-chip:hover { border-color: #D8C4A6; }
.adm-chip[aria-pressed="true"] { background: linear-gradient(180deg, var(--navy-hi), var(--navy-lo)); border-color: var(--navy-lo); color: #fff; }

.adm-set {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--k));
  padding-top: calc(12 * var(--k)); border-top: 1px dashed var(--stone);
}
.adm-set-label { flex-basis: 100%; font-size: calc(13 * var(--k)); font-weight: 600; color: var(--navy); }
.adm-set-btn {
  display: inline-flex; align-items: center; gap: calc(8 * var(--k));
  font: inherit; font-size: calc(13 * var(--k)); font-weight: 500; color: var(--navy);
  padding: calc(9 * var(--k)) calc(12 * var(--k));
  background: #fff; border: 1px solid var(--stone); border-radius: calc(6 * var(--k)); cursor: pointer;
}
.adm-set-btn:hover:not(:disabled) { border-color: var(--gold); background: #F5EBDC; }
.adm-set-btn:disabled { opacity: .5; cursor: progress; }

/* Beginn eines Zeitraums */
.kal-root .day.anchor { box-shadow: inset 0 0 0 2.5px var(--gold-lo); }

/* ---------- Seitenleiste ---------- */
.is-admin .kal-months { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--k)); }
.is-admin .kal-month-btn { justify-content: center; padding: calc(9 * var(--k)) calc(6 * var(--k)); font-size: calc(12 * var(--k)); }
.is-admin .kal-month-btn svg { display: none; }

.adm-settings {
  display: flex; flex-direction: column; gap: calc(8 * var(--k));
  padding: calc(14 * var(--k));
  background: #fff; border: 1px solid var(--stone); border-radius: calc(8 * var(--k));
  box-shadow: 0 1px 2px rgba(20, 42, 75, .05);
}
.adm-settings label { font-size: calc(13 * var(--k)); font-weight: 600; color: var(--navy); }
.adm-settings select {
  font: inherit; font-size: calc(13 * var(--k)); color: var(--navy);
  padding: calc(8 * var(--k)) calc(10 * var(--k));
  background: #fff; border: 1px solid var(--stone); border-radius: calc(6 * var(--k));
}
.adm-settings p { margin: 0; font-size: calc(12 * var(--k)); line-height: 1.5; color: var(--grey); }
.adm-settings .kal-clear { align-self: flex-start; padding: calc(4 * var(--k)) 0; margin-top: calc(6 * var(--k)); }

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  .sec-verwalten { padding: 28px 0 40px; }
}
@container kal (max-width: 640px) {
  .adm-login { padding: 5cqw 4.5cqw; gap: 2.4cqw; }
  .adm-login__title { font-size: max(16px, 3.4cqw); color: var(--m-ink); }
  .adm-login__lead, .adm-login label, .adm-login__msg, .adm-login .kal-clear { font-size: max(13px, 2.8cqw); }
  .adm-login input[type="password"] { font-size: 16px; padding: 12px; }
  .kal-wrap:not(.is-admin) .kal-cal { margin-top: 3cqw; }

  /* Monate als Leiste über dem Kalender, Einstellungen darunter */
  .is-admin .kal-side { display: contents; }
  .is-admin .kal-months {
    display: flex; flex-direction: row; order: 1; overflow-x: auto; gap: 8px;
    margin: 3cqw 0 2.4cqw; padding-bottom: 2px;
  }
  .is-admin .kal-months li { flex: none; }
  .is-admin .kal-month-btn { width: auto; padding: 9px 12px; font-size: 12px; white-space: nowrap; }
  .is-admin .kal-cal { order: 2; }
  .adm-settings { order: 3; margin-top: 4cqw; }

  .kal-admin { padding: 3cqw 2.9cqw; background: var(--m-soft); border-top-color: var(--m-line); }
  .adm-top { flex-direction: column; gap: 4px; }
  .adm-top p, .adm-state { font-size: max(12px, 2.6cqw); color: var(--m-text); }
  .adm-top strong { color: var(--m-ink); }
  .adm-state.err { text-align: left; }
  .adm-chip { font-size: 12px; padding: 7px 12px; }
  .adm-set-btn { flex: 1 1 calc(50% - 8px); justify-content: center; font-size: 12px; padding: 10px 8px; }
}