.kalendar-page{}

.kalendar-hero-inner{
max-width:720px;
margin-inline:auto;
text-align:center;
display:flex;
flex-direction:column;
gap:var(--space-4);
}

.kalendar-controls{
position:sticky;
top:0;
z-index:5;
background:var(--color-surface);
border-bottom:1px solid var(--color-border);
}

.kalendar-view-switch{
display:flex;
gap:var(--space-2);
}

.kalendar-view-switch button{
min-width:0;
}

.kalendar-filters{
border-bottom:1px solid var(--color-border);
}

.kalendar-filter-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:var(--space-3);
align-items:end;
}

.kalendar-module .kalendar-grid{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:var(--space-2);
}

.kalendar-grid .day{
border:1px solid var(--color-border);
border-radius:var(--radius-md);
padding:var(--space-2);
min-height:100px;
display:flex;
flex-direction:column;
gap:var(--space-2);
}

.kalendar-grid .event{
background:var(--color-surface-alt);
padding:4px 6px;
border-radius:var(--radius-sm);
font-size:var(--fs-7);
}

.kalendar-legend-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-4);
}

.kalendar-usage-inner{
max-width:700px;
margin-inline:auto;
display:flex;
flex-direction:column;
gap:var(--space-4);
text-align:center;
}

.kalendar-disclaimer-inner{
max-width:600px;
margin-inline:auto;
text-align:center;
}

@media (max-width:900px){
.kalendar-filter-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.kalendar-module .kalendar-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:600px){
.kalendar-filter-grid{
grid-template-columns:1fr;
}
.kalendar-module .kalendar-grid{
grid-template-columns:1fr;
}
}