/* Kalender – kompakt & hell, strikt gescoped (.cal-*) */

:root{
  --cal-text:#0f172a;
  --cal-muted:#5d6879;
  --cal-border:#e6ded2;
  --cal-head-bg:#faf9f7;

  /* kräftigere Statusfarben */
  --cal-free:#16a34a;
  --cal-booked:#dc2626;
  --cal-reserved:#b45309; /* dunkleres Orange */
  --cal-blocked:#475569;  /* dunkleres Grau/Slate */

  /* Tints stärker */
  --tint-free:rgba(22,163,74,.30);
  --tint-booked:rgba(220,38,38,.28);
  --tint-reserved:rgba(180,83,9,.35);
  --tint-blocked:rgba(71,85,105,.34);

  /* Heute */
  --today-ring:#1e3a8a;
  --today-glow:rgba(30,58,138,.22);
}

.cal-wrap{ position:relative }
.cal-header{
  display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:8px;
  background:var(--cal-head-bg); border:1px solid var(--cal-border); border-radius:10px;
  padding:6px 8px; margin-bottom:8px;
}
.cal-title{ font-family:"Playfair Display",serif; font-weight:700; font-size:18px; color:var(--cal-text); text-align:center; }
.cal-nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:1px solid var(--cal-border);
  background:#fff; cursor:pointer; transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
}
.cal-nav:hover{ background:#fafafa; box-shadow:0 3px 10px rgba(0,0,0,.04) }
.cal-actions{ display:flex; gap:8px; align-items:center }
.cal-today{
  padding:6px 10px; border-radius:8px; border:1px solid var(--cal-border);
  background:#fff; cursor:pointer; transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
}
.cal-today:hover{ background:#fafafa; box-shadow:0 3px 10px rgba(0,0,0,.04) }

.cal-grid{ margin-top:8px }
.cal-weekdays{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:0; padding:4px 6px 6px;
  color:var(--cal-muted); font-size:12px;
}
.cal-weekdays span{ text-align:center; user-select:none }

.cal-days{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:0;
  border:1px solid var(--cal-border); border-radius:10px; overflow:hidden;
}

.cal-day{
  position:relative; min-height:44px; padding:6px;
  border-right:1px solid var(--cal-border); border-top:1px solid var(--cal-border);
  background:transparent; transition:background .12s ease, transform .08s ease;
}
.cal-day:nth-child(7n){ border-right:none }
.cal-day:hover{ transform:translateY(-1px) }

.cal-day .date{ font-size:12px; font-weight:700; display:inline-block; padding:1px 5px; border-radius:6px }

/* Status-Hintergründe */
.cal-day.free{     background:linear-gradient(180deg, var(--tint-free) 0%, transparent 70%) }
.cal-day.booked{   background:linear-gradient(180deg, var(--tint-booked) 0%, transparent 70%) }
.cal-day.reserved{ background:linear-gradient(180deg, var(--tint-reserved) 0%, transparent 70%) }
.cal-day.blocked{  background:linear-gradient(180deg, var(--tint-blocked) 0%, transparent 70%) }

/* Status-Punkte */
.cal-badge{
  position:absolute; right:6px; top:6px; width:7px; height:7px; border-radius:50%;
  box-shadow:0 0 0 1px var(--cal-border) inset;
}
.cal-day.free .cal-badge{     background:var(--cal-free) }
.cal-day.booked .cal-badge{   background:var(--cal-booked) }
.cal-day.reserved .cal-badge{ background:var(--cal-reserved) }
.cal-day.blocked .cal-badge{  background:var(--cal-blocked) }

/* Heute: nur Ring/Glow – KEINE blaue Pille hinter der Zahl */
.cal-day.today .date{ background:transparent; outline:0 }
.cal-day.today::after{
  content:""; position:absolute; inset:4px; border-radius:12px; border:3px solid var(--today-ring); opacity:.9; z-index:1; pointer-events:none;
}
.cal-day.today::before{
  content:""; position:absolute; inset:0; border-radius:12px; background:radial-gradient(circle at 50% 55%, var(--today-glow), rgba(30,58,138,0) 60%); z-index:1; pointer-events:none;
}
.cal-day .date, .cal-badge{ position:relative; z-index:2 }

/* Legende */
.cal-legend{
  display:flex; gap:12px; align-items:center; font-size:12px; color:var(--cal-muted);
  margin:8px 2px 0; flex-wrap:wrap;
}
.legend-dot{ display:inline-block; width:8px; height:8px; border-radius:8px; margin:0 6px 0 10px; vertical-align:middle; box-shadow:0 0 0 1px var(--cal-border) inset }
.legend-dot.free{ background:var(--cal-free) } .legend-dot.booked{ background:var(--cal-booked) }
.legend-dot.reserved{ background:var(--cal-reserved) } .legend-dot.blocked{ background:var(--cal-blocked) }
.legend-dot.today{ background:#1e3a8a; box-shadow:0 0 0 3px rgba(30,58,138,.35) }

/* Animation */
.cal-days.cal-anim-out{ animation: calFadeOut .08s ease both }
.cal-days.cal-anim-in{  animation: calFadeIn  .10s ease both }
@keyframes calFadeOut{ from{opacity:1; transform:translateY(0)} to{opacity:.0; transform:translateY(2px)} }
@keyframes calFadeIn{  from{opacity:.0; transform:translateY(-2px)} to{opacity:1; transform:translateY(0)} }

@media (max-width:720px){
  .cal-title{ font-size:16px }
  .cal-header{ grid-template-columns:28px 1fr auto }
  .cal-day{ min-height:36px; padding:5px }
}
@media (prefers-reduced-motion: reduce){
  .cal-nav,.cal-day,.cal-days.cal-anim-out,.cal-days.cal-anim-in{ transition:none !important; animation:none !important }
}
/* ===== Compact Mobile Calendar ===== */
:root{
  --cal-font-sm: 12px;
  --cal-font-md: 14px;
  --cal-cell-min: 42px;     /* min. Zellenhöhe */
  --cal-gap: 2px;           /* Zellabstand */
  --cal-radius: 10px;
}

.cal-wrap{position:relative}
.cal-header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 6px;
  background:var(--card-bg, #0f172a0a); backdrop-filter:saturate(140%) blur(2px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.cal-title{font-weight:800; letter-spacing:.2px}

.cal-nav,
.cal-today{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:36px; padding:0 10px;
  border-radius:999px; border:1px solid #d6d3d1; background:#fff;
  font-weight:700; line-height:1; user-select:none; touch-action:manipulation;
}
.cal-nav{min-width:36px; padding:0}
.cal-nav:active, .cal-today:active{transform:translateY(1px)}

.cal-grid{margin-top:6px}
.cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:var(--cal-gap);
  font-size:var(--cal-font-sm); color:#6b7280; text-transform:uppercase;
}
.cal-days{
  display:grid; grid-template-columns:repeat(7,1fr); gap:var(--cal-gap);
}

/* einzelne Zellen */
.cal-day{
  min-height:var(--cal-cell-min);
  padding:6px 6px 8px; border-radius:var(--cal-radius);
  background:#ffffff; border:1px solid #ede9e4;
  display:flex; flex-direction:column; gap:6px;
}
.cal-day .dnum{font-weight:700; font-size:var(--cal-font-md)}
.cal-day.is-out{opacity:.45}

.cal-day.free    { background:#effaf2; border-color:#c7f0d4; }
.cal-day.booked  { background:#feecec; border-color:#f7c6c6; }
.cal-day.reserved{ background:#fff3e5; border-color:#ffd8a8; }
.cal-day.blocked { background:#f3f4f6; border-color:#e5e7eb; color:#6b7280; }
.cal-day.today   { outline:2px solid #0ea5e9; outline-offset:-2px; }

.cal-legend{margin-top:8px; font-size:var(--cal-font-sm)}
.legend-dot{width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:4px;}

/* ===== Breakpoints ===== */
@media (max-width: 960px){
  .cal-title{font-size:16px}
}

@media (max-width: 640px){
  :root{ --cal-cell-min: 38px; --cal-gap: 2px; }
  .cal-header{padding:6px}
  .cal-weekdays span{font-size:11px; letter-spacing:.5px}
  .cal-day{padding:6px}
  .cal-day .dnum{font-size:13px}
  /* Legende kompakt unter den Kalender */
  .cal-legend{display:flex; gap:10px; flex-wrap:wrap}
}

/* Barrierearm bei Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
  .cal-nav, .cal-today{transition:none}
}