/* Öffentlicher Belegungskalender – Optik wie der bisherige Kalender auf www.kellerstoeckl.eu */
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url(../fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url(../fonts/lato-700.woff2) format("woff2"); }

:root {
  /* werden je Kellerstöckl aus prices.json gesetzt */
  --kopf: #b81616;
  --belegt: #dd7171;
  --belegt-text: #0c1416;
  --reserviert: #ebadad;
  --frei: #f4f4f4;
  --line: #dfdfdf;
  --muted: #686868;
  --ink: #0c1416;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: transparent; }
button, select { font: inherit; }

.kb { padding: 4px 0 8px; }
.kb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kb-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kb-haus select { min-height: 42px; padding: 6px 36px 6px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 700; max-width: 100%; }
.kb-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kb-nav span { min-width: 9.5em; text-align: center; font-weight: 700; }
.kb-nav button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--kopf); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.kb-nav button:disabled { opacity: .35; cursor: default; }
.kb-fehler { padding: 12px; border-radius: 8px; background: #fdeceb; color: #9b1c1c; margin-bottom: 12px; }

.kb-monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px 20px; }
.kb-monat h3 { margin: 0 0 6px; padding: 6px 8px; font-size: 1rem; text-align: center; color: #fff; background: var(--kopf); border-radius: 6px; }
.kb-monat table { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.kb-monat th { font-size: .75rem; color: var(--muted); font-weight: 700; padding: 2px 0; }
.kb-monat td { height: 32px; padding: 0; text-align: center; font-size: .85rem; color: var(--muted); background: var(--frei); border-radius: 3px; }
.kb-monat td.leer { background: transparent; }
.kb-monat td.bel { background: var(--belegt); color: var(--belegt-text); }
.kb-monat td.res { background: var(--reserviert); color: var(--ink); }
.kb-monat td.vorbei { color: #b5b5b5; background: #fafafa; }
.kb-monat td.heute { outline: 2px solid var(--ink); outline-offset: -2px; font-weight: 700; }

.kb-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.kb-legende li { display: flex; align-items: center; gap: 6px; }
.kb-legende i { width: 18px; height: 18px; border-radius: 3px; background: var(--frei); }
.kb-legende .kb-l-res { background: var(--reserviert); }
.kb-legende .kb-l-bel { background: var(--belegt); }
.kb-legende .kb-l-halb { background: linear-gradient(to bottom right, var(--belegt) 50%, var(--frei) 50%); }