/* ==========================================================================
   Verfügbarkeitskalender – aus dem Embed „Kalender" übernommen.
   Desktop unverändert; die Handy-Masse waren in vw (= Breite des Embeds)
   angegeben und sind hier in cqw (= Breite der Kalender-Sektion).
   ========================================================================== */
.kal { container-type: inline-size; container-name: kal; }
.kal-root {
  --navy: #142A4B; --navy-hi: #21416A; --navy-lo: #0B1F3B; --navy-tint: #E8EDF5;
  --slate: #646A76; --chevron: #8E929B;
  --gold: #B48D5C; --gold-hi: #C29E6E; --gold-lo: #A07A4A;
  --cream: #F8F7F3; --stone: #E3E3E0; --line: #ECECEA;
  --grey: #6B6F78; --muted: #B7B8BC;
  --idle-bg: #E4E5E8; --idle-text: #9A9EA8;
  --ink: #212E4F; --text: #5B606B;
  --green: #62B04F; --green-hi: #74BE5F; --green-lo: #4C9940;
  --booked-hi: #2B5A47; --booked-lo: #0E2933;
  --off: #D6D6D6;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color: var(--navy);
}
.kal-root :where(button) { font: inherit; color: inherit; }
.kal-root :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.kal-root .hidden { display: none !important; }
.kal-notice { margin: calc(48 * var(--k)) auto; max-width: calc(420 * var(--k)); text-align: center; font-size: calc(14 * var(--k)); line-height: 1.6; color: var(--grey); }

.kal-wrap {
  display: grid;
  grid-template-columns: minmax(calc(240 * var(--k)), calc(400 * var(--k))) minmax(calc(40 * var(--k)), 1fr) minmax(calc(420 * var(--k)), calc(588 * var(--k))) calc(24 * var(--k)) calc(200 * var(--k));
  grid-template-areas: "intro . cal . side";
  max-width: calc(1600 * var(--k));
  margin: 0 auto;
  padding: calc(4 * var(--k));
}
.kal-intro { grid-area: intro; align-self: start; padding-top: calc(12 * var(--k)); }
.kal-cal   { grid-area: cal; }
.kal-side  { grid-area: side; }

.kal-eyebrow {
  margin: 0 0 calc(14 * var(--k)); font-size: calc(15 * var(--k)); font-weight: 400; line-height: 1.3;
  letter-spacing: .3em; text-transform: uppercase; color: var(--text);
}
.kal-title {
  margin: 0 0 calc(24 * var(--k)); white-space: pre-line;
  font-family: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  font-weight: 500; font-size: calc(54 * var(--k)); line-height: 1; color: var(--ink);
}
.kal-text { margin: 0 0 calc(28 * var(--k)); max-width: calc(390 * var(--k)); font-size: calc(18 * var(--k)); line-height: 1.6; color: var(--text); }
.kal-legend { list-style: none; margin: 0; padding: 0 0 0 calc(4 * var(--k)); display: flex; flex-direction: column; gap: calc(15 * var(--k)); }
.kal-legend li { display: flex; align-items: center; gap: calc(12 * var(--k)); font-size: calc(14 * var(--k)); line-height: 1.2; color: var(--ink); }
.kal-root .kal-legend .dot { width: calc(16 * var(--k)); height: calc(16 * var(--k)); }

.kal-cal {
  align-self: start; background: #fff; border: 1px solid var(--stone); border-radius: calc(8 * var(--k)); overflow: hidden;
  box-shadow: 0 1px calc(3 * var(--k)) rgba(20, 42, 75, .05);
}
.kal-head { display: flex; align-items: center; justify-content: space-between; padding: calc(14 * var(--k)) calc(16 * var(--k)); }
.kal-month { font-size: calc(17 * var(--k)); font-weight: 600; margin: 0; }
.kal-nav {
  width: calc(36 * var(--k)); height: calc(36 * var(--k)); border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; color: var(--slate);
}
.kal-nav:hover:not(:disabled) { background: var(--navy-tint); color: var(--navy); }
.kal-nav:disabled { color: var(--off); cursor: default; }

.kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-root .wd {
  font-size: calc(12 * var(--k)); font-weight: 500; text-align: center;
  padding: calc(9 * var(--k)) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kal-root .wd + .wd, .kal-root .day:not(:nth-child(7n+1)) { border-left: 1px solid var(--line); }
.kal-root .day {
  height: calc(56 * var(--k)); border: 0; border-bottom: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--k));
  font-size: calc(13 * var(--k)); font-weight: 600; padding: 0; width: 100%;
}
.kal-root .kal-grid .day:nth-last-child(-n+7) { border-bottom: 0; }
.kal-root button.day { cursor: pointer; }
.kal-root button.day:hover { background: var(--cream); }
.kal-root .day.out .num, .kal-root .day.past .num { color: var(--muted); }
.kal-root .day.out .dot, .kal-root .day.past .dot { opacity: .45; }
.kal-root .day.selected { background: var(--navy-tint); box-shadow: inset 0 0 0 1.5px var(--navy); }
.kal-root .day.selected:hover { background: var(--navy-tint); }
.kal-root .num { line-height: 1; }
.kal-root .day.today .num {
  width: calc(30 * var(--k)); height: calc(30 * var(--k)); margin: calc(-8 * var(--k)) 0 -2px; border-radius: 50%;
  background: var(--gold); color: #fff; display: grid; place-items: center;
}

.kal-root .dot { width: calc(10 * var(--k)); height: calc(10 * var(--k)); border-radius: 50%; flex: none; }
.kal-root .s-frei      { background: linear-gradient(180deg, var(--green-hi), var(--green-lo)); }
.kal-root .s-zu        { background: var(--off); }
/* Nur ein Dienst frei: links = Frühdienst, rechts = Spätdienst (grün = frei, grau = nicht verfügbar) */
.kal-root .s-frueh     { background: linear-gradient(90deg, var(--green) 50%, var(--off) 50%); }
.kal-root .s-spaet     { background: linear-gradient(90deg, var(--off) 50%, var(--green) 50%); }

/* Anfrage-Leiste */
.kal-request {
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--k));
  min-height: calc(68 * var(--k)); padding: calc(12 * var(--k)) calc(16 * var(--k)); border-top: 1px solid var(--line); background: var(--cream);
}
.kal-request p { margin: 0; font-size: calc(13 * var(--k)); line-height: 1.5; color: var(--grey); }
.kal-request strong { color: var(--navy); font-weight: 600; }
.kal-request:not(.has-sel) .req-summary,
.kal-request:not(.has-sel) .kal-actions,
.kal-request.has-sel .req-hint { display: none; }
.kal-actions { display: flex; align-items: center; gap: calc(14 * var(--k)); flex: none; }
.kal-clear {
  border: 0; background: none; cursor: pointer; font-size: calc(13 * var(--k)); color: var(--grey);
  text-decoration: underline; text-underline-offset: calc(3 * var(--k)); padding: calc(4 * var(--k));
}
.kal-clear:hover:not(:disabled) { color: var(--navy); }
.kal-clear:disabled { color: var(--muted); cursor: default; }
.kal-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--k));
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  color: #fff; text-decoration: none; border: 0; cursor: pointer;
  font-size: calc(14 * var(--k)); font-weight: 500; letter-spacing: .01em;
  padding: calc(11 * var(--k)) calc(22 * var(--k)); border-radius: calc(999 * var(--k)); white-space: nowrap;
  box-shadow: 0 2px calc(6 * var(--k)) rgba(120, 88, 48, .25);
}
.kal-cta:hover { background: var(--gold-lo); }
.kal-cta[aria-disabled="true"] { opacity: .45; box-shadow: none; cursor: default; pointer-events: none; }

/* Monatsknöpfe */
.kal-side { display: flex; flex-direction: column; gap: calc(28 * var(--k)); }
.kal-months { display: flex; flex-direction: column; gap: calc(10 * var(--k)); margin: 0; padding: 0; list-style: none; }
.kal-month-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--stone); border-radius: calc(8 * var(--k));
  padding: calc(12 * var(--k)) calc(14 * var(--k)); font-size: calc(13 * var(--k)); font-weight: 600; cursor: pointer; text-align: left;
  box-shadow: 0 1px 2px rgba(20, 42, 75, .05);
}
.kal-month-btn svg { color: var(--chevron); flex: none; }
.kal-month-btn:hover { border-color: #D8C4A6; }
.kal-month-btn[aria-current="true"] {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  border-color: var(--gold-lo); color: #fff;
  box-shadow: 0 2px calc(6 * var(--k)) rgba(120, 88, 48, .25);
}
.kal-month-btn[aria-current="true"] svg { color: #fff; }

.kal-legend-in { display: none; }

/* Mittlere Breite: Text oben, Kalender und Monate darunter */
@container kal (max-width: 935px) {
  .kal-wrap {
    grid-template-columns: minmax(0, 1fr) calc(200 * var(--k));
    grid-template-areas: "intro intro" "cal side";
    column-gap: calc(24 * var(--k)); row-gap: calc(28 * var(--k));
    max-width: calc(820 * var(--k));
  }
  .kal-intro { padding-top: calc(4 * var(--k)); }
  .kal-title { font-size: calc(46 * var(--k)); margin-bottom: calc(18 * var(--k)); }
  .kal-text { max-width: calc(600 * var(--k)); font-size: calc(16 * var(--k)); margin-bottom: calc(20 * var(--k)); }
  .kal-legend { flex-direction: row; flex-wrap: wrap; gap: calc(10 * var(--k)) calc(26 * var(--k)); padding-left: 0; }
}

/* Handy: Gestaltung nach Vorlage (Text → Kalender mit Legende → Anfrage-Leiste) */
@container kal (max-width: 640px) {
  .kal-root {
    --m-ink: #19236A; --m-text: #27366A; --m-line: #EFEFED; --m-soft: #F9F8F4; --m-gold: #B88C52;
  }
  .kal-wrap { display: flex; flex-direction: column; gap: 0; padding: 0; }
  .kal-intro { padding: 0; }
  .kal-cal { order: 1; align-self: stretch; }
  .kal-side { order: 2; }
  .kal-months, .kal-intro .kal-legend { display: none; }
  .kal-notice { margin: calc(32 * var(--k)) auto; font-size: calc(13 * var(--k)); }

  .kal-eyebrow { margin: 0; font-size: 2.39cqw; font-weight: 500; line-height: 1.3; letter-spacing: .19em; color: var(--m-text); }
  .kal-title {
    margin: -0.56cqw 0 0.3cqw; white-space: normal;
    font-weight: 700; font-size: 6.99cqw; line-height: 1.12; color: var(--m-ink);
  }
  .kal-text {
    margin: 0 0 2.04cqw; max-width: none; white-space: pre-line;
    font-size: 2.75cqw; line-height: 1.392; color: var(--m-text);
  }

  .kal-cal { border-color: #ECECEA; border-radius: 1.1cqw; box-shadow: none; }
  .kal-head { height: 6.7cqw; padding: 0 1.67cqw; }
  .kal-month { font-size: 2.81cqw; font-weight: 700; color: var(--m-ink); }
  .kal-nav { width: 4.3cqw; height: 4.3cqw; color: var(--m-ink); }
  .kal-nav:disabled { color: var(--m-ink); opacity: .35; }
  .kal-nav svg { width: 3.44cqw; height: 3.44cqw; }

  .kal-root .wd {
    height: 4.67cqw; padding: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2.09cqw; font-weight: 500; color: var(--m-text);
    border-color: var(--m-line);
  }
  .kal-root .wd + .wd, .kal-root .day:not(:nth-child(7n+1)) { border-left-color: var(--m-line); }
  .kal-root .day, .kal-root .kal-grid .day:nth-last-child(-n+7) { border-bottom: 1px solid var(--m-line); }
  .kal-root .day { position: relative; height: 7.42cqw; gap: 0.96cqw; font-size: 2.03cqw; color: var(--m-ink); }
  .kal-root .day.spare { display: none; }
  .kal-root .num, .kal-root .day .dot { position: relative; }
  .kal-root .day .dot { width: 1.44cqw; height: 1.44cqw; }

  .kal-root .day.past .num, .kal-root .day.out .num { color: var(--m-ink); }
  .kal-root .day.past .dot, .kal-root .day.out .dot { opacity: 1; }
  .kal-root .day.out.lead .num { color: #C6C6C8; font-weight: 500; }
  .kal-root .day.out.lead .dot { visibility: hidden; }
  .kal-root .day.out:not(.lead) .dot { background: #D2D2D2; }

  .kal-root .day.today::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 6.94cqw; height: 6.94cqw; transform: translate(-50%, -50%);
    border-radius: 50%; background: var(--m-gold);
  }
  .kal-root .day.today .num { width: auto; height: auto; margin: 0; background: none; color: #fff; display: block; }

  .kal-root .day .s-frei      { background: #12933F; }
  .kal-root .day .s-zu        { background: #D0D0D0; }
  .kal-root .day .s-frueh     { background: linear-gradient(90deg, #12933F 50%, #D0D0D0 50%); }
  .kal-root .day .s-spaet     { background: linear-gradient(90deg, #D0D0D0 50%, #12933F 50%); }

  .kal-legend-in {
    display: flex; align-items: center; justify-content: space-between;
    height: 7.66cqw; margin: 0.96cqw 1.08cqw 0.84cqw; padding: 0 3.8cqw 0 2.15cqw;
    list-style: none; background: var(--m-soft); border-radius: 1.2cqw;
  }
  .kal-legend-in li { display: flex; align-items: center; gap: 1.67cqw; font-size: 2.05cqw; line-height: 1.2; color: var(--m-text); white-space: nowrap; }
  .kal-root .kal-legend-in .dot { width: 3.11cqw; height: 3.11cqw; }
  .kal-legend-in .s-frei      { background: #7BBA64; }
  .kal-legend-in .s-frueh     { background: linear-gradient(90deg, #7BBA64 50%, #DAD9D8 50%); }
  .kal-legend-in .s-spaet     { background: linear-gradient(90deg, #DAD9D8 50%, #7BBA64 50%); }
  .kal-legend-in .s-zu        { background: #DAD9D8; }

  .kal-request .req-hint { display: none; }
  .kal-request:not(.has-sel) .req-summary { display: block; }
  .kal-request:not(.has-sel) .kal-actions { display: flex; }
  .kal-request:not(.has-sel) .req-summary,
  .kal-request:not(.has-sel) .req-summary strong { color: var(--idle-text); }
  .kal-request {
    flex-direction: column; align-items: stretch; gap: 2.4cqw; min-height: 0;
    padding: 2.6cqw 2.9cqw; border-top-color: var(--m-line); background: var(--m-soft);
  }
  .kal-request p { font-size: max(calc(11 * var(--k)), 2.6cqw); color: var(--m-text); }
  .kal-request strong { color: var(--m-ink); }
  .kal-actions { flex-wrap: wrap; gap: 2cqw 3cqw; }
  .kal-actions .kal-cta { order: -1; flex: 1 1 auto; }
  .kal-clear { font-size: max(calc(11 * var(--k)), 2.6cqw); }
  .kal-cta { font-size: max(calc(12 * var(--k)), 2.8cqw); padding: 2.4cqw 4cqw; gap: 2cqw; }
  .kal-cta svg { width: max(calc(12 * var(--k)), 2.8cqw); height: max(calc(12 * var(--k)), 2.8cqw); }
}