/* ==========================================================
   Belegungskalender – modernes Design (Kalenderart 3 und 4)
   Markup: util.ModernKalender + seiten/default/snippets/kalenderModern.jsp
   Namensraum „fwk-“; das klassische Design (kalender.css) bleibt unberührt.
   Farben kommen aus den Kalendereinstellungen des Kunden (--cal-*-bg/-color,
   ausgegeben von HTMLCalendar.getStyleTag); Rückfall ist die Teal-Palette.
   ========================================================== */

.fwk {
  --fwk-frei: var(--cal-frei-bg, #E2EBEC);
  --fwk-frei-text: var(--cal-frei-color, #263238);
  --fwk-res: var(--cal-reserviert-bg, #AFD6DE);
  --fwk-res-text: var(--cal-reserviert-color, #16323F);
  --fwk-bel: var(--cal-belegt-bg, #1E6E8C);
  --fwk-bel-text: var(--cal-belegt-color, #FFFFFF);
  --fwk-eigen: var(--cal-eigen-bg, #8FB9A8);
  --fwk-eigen-text: var(--cal-eigen-color, #0F2430);
  --fwk-heute: var(--cal-heute-bg, #F3E3B8);
  --fwk-heute-text: var(--cal-heute-color, #16323F);
  --fwk-feiertag: var(--cal-feiertag-bg, #C99A3B);
  --fwk-feiertag-text: var(--cal-feiertag-color, #FFFFFF);
  --fwk-text: #263238;
  --fwk-text-soft: #5B6B70;
  --fwk-rand: #DCE5E7;
  --fwk-karte: var(--cal-main-bg, #FFFFFF);
  --fwk-marke: #1E6E8C;
  --fwk-marke-dunkel: #124D61;

  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--fwk-text);
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
}
.fwk *, .fwk *::before, .fwk *::after { box-sizing: border-box; }

/* ---------- Monate in Kästen ---------- */
.fwk-monate {
  --fwk-spalten: 4;
  display: grid;
  gap: 16px;
  /* höchstens so viele Spalten wie eingestellt, auf schmalen Bildschirmen automatisch weniger */
  grid-template-columns: repeat(auto-fill, minmax(max(230px, calc((100% - (var(--fwk-spalten) - 1) * 16px) / var(--fwk-spalten))), 1fr));
  max-width: calc(var(--fwk-spalten) * 290px + (var(--fwk-spalten) - 1) * 16px);
  margin: 0 auto;
}
.fwk-monat {
  border: 1px solid var(--fwk-rand);
  border-radius: 10px;
  padding: 12px;
  background: var(--fwk-karte);
}
.fwk .fwk-monat-titel {
  margin: 0 0 8px;
  text-align: center;
  font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--fwk-text);
}
.fwk-wt, .fwk-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.fwk-wt span { font-size: 11px; color: var(--fwk-text-soft); text-align: center; padding: 2px 0; }
.fwk-tage .fwk-tag, .fwk-tage .fwk-leer { aspect-ratio: 1; min-height: 28px; }

/* ---------- Tageszellen (beide Ansichten) ---------- */
.fwk-tag {
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  /* Wochenenden (kwe) heller wie im klassischen Kalender: weiße Ebene über der Statusfarbe */
  --fwk-we: linear-gradient(transparent, transparent);
  background: var(--fwk-we), var(--fwk-frei);
  color: var(--fwk-frei-text);
  user-select: none;
  -webkit-user-select: none;
}
.fwk-tag a { color: inherit; text-decoration: none; display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.fwk-tag.kr { background: var(--fwk-we), var(--fwk-res); color: var(--fwk-res-text); }
.fwk-tag.kb { background: var(--fwk-we), var(--fwk-bel); color: var(--fwk-bel-text); font-weight: 600; }
.fwk-tag.ke { background: var(--fwk-we), var(--fwk-eigen); color: var(--fwk-eigen-text); font-weight: 600; }
.fwk-tag.kh { background: var(--fwk-we), var(--fwk-heute); color: var(--fwk-heute-text); font-weight: 700; }
.fwk-tag.kf { background: var(--fwk-we), var(--fwk-feiertag); color: var(--fwk-feiertag-text); font-style: italic; font-weight: 600; }
.fwk-tag.kwe { --fwk-we: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)); }
.fwk-tag.khlfr { box-shadow: inset 0 0 0 2px var(--fwk-marke); }

/* An-/Abreisetage: diagonal geteilte Zelle (freie Hälfte + Status) */
.fwk-tag[class*=" kan_"], .fwk-tag[class*=" kab_"], .fwk-tag[class*=" ka_"] {
  color: #0F2430; font-weight: 700; text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.fwk-tag.kan_b { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-frei) 50%, var(--fwk-bel) 50%); }
.fwk-tag.kab_b { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-bel) 50%, var(--fwk-frei) 50%); }
.fwk-tag.kan_r { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-frei) 50%, var(--fwk-res) 50%); }
.fwk-tag.kab_r { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-res) 50%, var(--fwk-frei) 50%); }
.fwk-tag.kan_e { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-frei) 50%, var(--fwk-eigen) 50%); }
.fwk-tag.kab_e { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-eigen) 50%, var(--fwk-frei) 50%); }
/* Ab- und Anreise am selben Tag: erst Abreisestatus, dann Anreisestatus (Trennlinie bei gleichem Status) */
.fwk-tag.ka_b_b { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-bel) calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), var(--fwk-bel) calc(50% + 1px)); }
.fwk-tag.ka_r_r { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-res) calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), var(--fwk-res) calc(50% + 1px)); }
.fwk-tag.ka_e_e { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-eigen) calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), var(--fwk-eigen) calc(50% + 1px)); }
.fwk-tag.ka_b_r { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-bel) 50%, var(--fwk-res) 50%); }
.fwk-tag.ka_b_e { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-bel) 50%, var(--fwk-eigen) 50%); }
.fwk-tag.ka_r_b { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-res) 50%, var(--fwk-bel) 50%); }
.fwk-tag.ka_r_e { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-res) 50%, var(--fwk-eigen) 50%); }
.fwk-tag.ka_e_b { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-eigen) 50%, var(--fwk-bel) 50%); }
.fwk-tag.ka_e_r { background: var(--fwk-we), linear-gradient(135deg, var(--fwk-eigen) 50%, var(--fwk-res) 50%); }

/* Auswahl per Klicken & Ziehen (kalender-drag.js setzt .kal-sel) */
.fwk-tag.kal-sel { box-shadow: inset 0 0 0 2px var(--fwk-marke); background: #CFE6EC; color: var(--fwk-marke-dunkel); text-shadow: none; }

/* ---------- Monate in Zeilen ---------- */
.fwk-zeilen-rahmen {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--fwk-rand);
  border-radius: 10px;
  background: var(--fwk-karte);
}
/* Tabelle füllt den Rahmen; die 31 Tagesspalten teilen sich die Breite gleichmäßig
   (vorher feste 28 px je Tag → breiter als der Inhaltsbereich, rechts abgeschnitten).
   Erst unterhalb der Mindestbreite (ca. 22 px je Tag) scrollt der Rahmen waagerecht. */
table.fwk-zeilen {
  border-collapse: separate; border-spacing: 3px; margin: 6px;
  table-layout: fixed; width: calc(100% - 12px); min-width: calc(110px + 31 * 22px);
}
table.fwk-zeilen th.fwk-zeile-monat { width: 110px; }
table.fwk-zeilen th {
  font-size: 11px; font-weight: 500; color: var(--fwk-text-soft); text-align: center; padding: 2px 0;
}
table.fwk-zeilen th.fwk-zeile-monat {
  position: sticky; left: 0; z-index: 1;
  background: var(--fwk-karte);
  text-align: right; white-space: nowrap;
  padding: 0 10px 0 4px;
  font-size: 13px; font-weight: 600; color: var(--fwk-text);
}
table.fwk-zeilen td.fwk-tag, table.fwk-zeilen td.fwk-leer { height: 28px; padding: 0; text-align: center; overflow: hidden; }
table.fwk-zeilen td.fwk-tag { display: table-cell; vertical-align: middle; }
table.fwk-zeilen td.fwk-tag a { display: inline; }
/* Kalenderart „Modern – In Zeilen“: auf schmalen Bildschirmen (Smartphone) Kästen untereinander
   statt der breiten Zeilentabelle (beide Fassungen werden ausgegeben, sichtbar ist je nach Breite eine) */
.fwk .fwk-nur-schmal { display: none; }
@media (max-width: 760px) {
  .fwk .fwk-nur-breit { display: none; }
  .fwk .fwk-monate.fwk-nur-schmal { display: grid; }
}
.fwk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Legende, Fußzeile, Hinweis ---------- */
.fwk-legende {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin: 16px 0 0; font-size: 13px; color: var(--fwk-text-soft);
}
.fwk-legende span { display: inline-flex; align-items: center; gap: 7px; }
.fwk-farbe { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--fwk-frei); }
.fwk-farbe.k { box-shadow: inset 0 0 0 1px var(--fwk-rand); }
.fwk-farbe.kr { background: var(--fwk-res); }
.fwk-farbe.kb { background: var(--fwk-bel); }
.fwk-farbe.ke { background: var(--fwk-eigen); }
.fwk-farbe.kan_b { background: linear-gradient(135deg, var(--fwk-frei) 50%, var(--fwk-bel) 50%); }
.fwk-farbe.kh { background: var(--fwk-heute); }
.fwk-farbe.kf { background: var(--fwk-feiertag); }
.fwk-fuss {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; font-size: 12.5px; color: var(--fwk-text-soft);
}
.fwk-fuss a { color: var(--fwk-marke-dunkel); }
.fwk-hinweis { margin: 10px 0 0; font-size: 13px; color: var(--fwk-text-soft); }

/* ---------- Ganze Kalenderseite im modernen Design ---------- */
body.fwk-seite {
  margin: 0;
  padding: 24px 16px 40px;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #263238;
  -webkit-font-smoothing: antialiased;
}
body.fwk-seite > h2 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
  font-weight: 600; font-size: 22px; color: #0F2430; margin: 0 0 14px;
}
/* Kundentexte: unverändert ausgeben, nur ruhig einfassen */
body.fwk-seite > p { max-width: 1180px; margin: 0 auto 16px !important; padding: 0 4px; line-height: 1.55; }
body.fwk-seite > div[align=center] { max-width: 1180px; margin: 0 auto 20px; }

/* Anfrageformular (Feldnamen und Logik unverändert, nur Darstellung) */
.fwk-seite .kf-fieldset { border-color: #DCE5E7; border-radius: 10px; box-shadow: 0 1px 2px rgba(15,36,48,.06), 0 2px 8px rgba(15,36,48,.04); }
.fwk-seite .kf-legend { color: #0F2430; font-family: inherit; font-weight: 600; }
.fwk-seite .kf-form { font-family: inherit; color: #263238; }
.fwk-seite .kf-label { font-size: 13px; font-weight: 600; color: #16323F; }
.fwk-seite .kf-field input[type="text"], .fwk-seite .kf-field input[type="date"], .fwk-seite .kf-field textarea,
.fwk-seite .kf-field select, .fwk-seite .kf-inline select, .fwk-seite .kf-inline input[type="text"], .fwk-seite .kf-inline input[type="date"] {
  border-color: #C3D1D4; border-radius: 6px; background: #fff; font-family: inherit; color: #263238;
}
.fwk-seite .kf-field input:focus, .fwk-seite .kf-field select:focus, .fwk-seite .kf-field textarea:focus {
  border-color: #1E6E8C; box-shadow: 0 0 0 3px #E3F0F4;
}
.fwk-seite .kf-submit {
  background: #1E6E8C; color: #fff; border: 0; border-radius: 6px;
  padding: 10px 24px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.fwk-seite .kf-submit:hover:not(:disabled) { background: #124D61; }
.fwk-seite .kf-submit:disabled { background: #C3D1D4; cursor: not-allowed; }
.fwk-seite input[type=checkbox] { accent-color: #1E6E8C; }

.fwk a:focus-visible, .fwk-seite a:focus-visible, .fwk-seite input:focus-visible,
.fwk-seite select:focus-visible, .fwk-seite textarea:focus-visible { outline: 2px solid #1E6E8C; outline-offset: 2px; }

@media (pointer: coarse) {
  .fwk-tage .fwk-tag { min-height: 34px; }
  table.fwk-zeilen td.fwk-tag, table.fwk-zeilen td.fwk-leer { height: 32px; }
  table.fwk-zeilen { min-width: calc(110px + 31 * 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .fwk *, .fwk-seite * { transition: none !important; animation: none !important; }
}