:root{--app-space-xs: 0.25rem;--app-space-s: 0.5rem;--app-space-m: 1rem;--app-space-l: 1.5rem;--app-font-size-s: 0.875rem;--app-font-size-m: 1rem;--app-font-size-l: 1.125rem;--app-font-size-xl: 1.375rem;--app-font-size-xxl: 1.75rem;--app-radius-m: 0.375rem;--app-contrast-5pct: rgba(24,39,57,0.05);--app-secondary-text: rgba(27,43,65,0.69);--app-accent: #2563eb;--app-warning-text: #b45309}.page{display: flex;flex-direction: column;gap: var(--app-space-m);width: 100%;padding: var(--app-space-m);box-sizing: border-box}.page>h2{margin: 0;font-size: var(--app-font-size-xl)}@media (min-width: 48em){.page{max-width: 60em;margin: 0;padding: var(--app-space-l)}.page-wide{max-width: none}.page>h2{font-size: var(--app-font-size-xxl)}}.back-button{align-self: flex-start;margin-bottom: calc(-1 * var(--app-space-s))}.card-list{display: grid;grid-template-columns: 1fr;gap: var(--app-space-s);width: 100%}@media (min-width: 48em){.card-list{grid-template-columns: repeat(auto-fill,minmax(20em,1fr))}}@media (min-width: 48em){.card-list.card-list-single{grid-template-columns: 1fr}}.card-actions{display: flex;flex-wrap: wrap;gap: var(--app-space-xs)}.card-nav{display: grid;grid-template-columns: 1fr;gap: var(--app-space-s)}@media (min-width: 48em){.card-nav{display: flex;flex-wrap: wrap}}.join-code{display: flex;flex-direction: column;gap: var(--app-space-s);padding: var(--app-space-s);border-radius: var(--app-radius-m);background-color: var(--app-contrast-5pct)}.join-code-text{display: flex;flex-direction: column;gap: var(--app-space-xs)}.join-code-label{font-size: var(--app-font-size-s);color: var(--app-secondary-text)}.join-code-value{font-family: ui-monospace,"Cascadia Mono","Segoe UI Mono",monospace;font-size: var(--app-font-size-l);font-weight: 700;letter-spacing: 0.08em}@media (min-width: 48em){.join-code{flex-direction: row;align-items: center;gap: var(--app-space-m)}.join-code .card-actions{margin-left: auto;flex-shrink: 0}}.list-row{display: flex;align-items: center;gap: var(--app-space-s);min-height: 2.75rem}.list-row>:first-child{flex: 1;min-width: 0}.todo-list{display: flex;flex-direction: column;gap: var(--app-space-xs)}.todo-item{width: 100%;justify-content: flex-start;text-align: left;white-space: normal;height: auto;padding-block: var(--app-space-s)}.todo-marker{flex: none;width: 1.15em;height: 1.15em}.todo-done{opacity: 0.62}.todo-done .todo-marker{color: #15803d}.todo-due-soon{color: var(--app-warning-text);font-weight: 600}.todo-overdue{color: #b91c1c;font-weight: 600}.full-width-mobile{width: 100%}@media (min-width: 48em){.full-width-mobile{width: auto}}vaadin-button{min-height: 2.75rem}.hide-on-mobile{display: none}@media (min-width: 48em){.hide-on-mobile{display: initial}}@media (min-width: 48em){.mobile-only{display: none}}.app-title{margin: 0 var(--app-space-s);font-size: var(--app-font-size-m);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}@media (min-width: 48em){.app-title{margin: 0 var(--app-space-m);font-size: var(--app-font-size-l);flex-shrink: 0}}.month-sections{display: flex;flex-direction: column;gap: var(--app-space-xs)}.month-sections vaadin-details{margin: 0}.month-sections vaadin-details summary,.month-sections vaadin-details::part(summary){font-weight: 600;min-height: 2.75rem}.key-figures{display: grid;grid-template-columns: repeat(auto-fit,minmax(9em,1fr));gap: var(--app-space-s)}@media (min-width: 48em){.key-figures{grid-template-columns: repeat(auto-fit,11em);justify-content: start}}.key-figure{display: flex;flex-direction: column;padding: var(--app-space-s);border-radius: var(--app-radius-m);background-color: var(--app-contrast-5pct)}.key-figure-value{font-size: var(--app-font-size-xl);font-weight: 600}.key-figure-label{font-size: var(--app-font-size-s);color: var(--app-secondary-text)}.calendar-legend{display: flex;flex-wrap: wrap;gap: var(--app-space-s);align-items: center;font-size: var(--app-font-size-s)}.chip-feiertag,.chip-ferien{padding: 0.1em 0.7em;border-radius: 1em}.chip-feiertag{background: rgba(214,40,40,0.16)}.chip-ferien{background: rgba(37,99,235,0.14)}.chip-state,.chip-state-set{display: inline-block;padding: 0.2em 0.9em;border-radius: 1em;font-weight: 600;background: rgba(100,116,139,0.16)}.chip-state-set{background: rgba(22,163,74,0.18)}.emphasis{font-weight: 700}.chip-open,.chip-done,.chip-credit{display: inline-block;padding: 0.2em 0.9em;border-radius: 1em;font-weight: 700}.chip-open{background: rgba(180,83,9,0.18);color: var(--app-warning-text)}.chip-done{background: rgba(22,163,74,0.18);color: #15803d}.chip-credit{background: rgba(37,99,235,0.16);color: var(--app-accent)}vaadin-card.card-done{border: 2px solid rgba(22,163,74,0.55)}vaadin-card.card-settled{border: 2px solid rgba(24,39,57,0.75)}vaadin-grid::part(session-done){background-color: var(--app-contrast-5pct);color: var(--app-secondary-text);font-style: italic}.open-slots{font-weight: 700;color: var(--app-warning-text)}.hint{display: block;margin-top: var(--app-space-xs);font-size: var(--app-font-size-s);color: var(--app-secondary-text)}:root{--viz-cat-1: light-dark(#2a78d6,#3987e5);--viz-cat-2: light-dark(#eb6834,#d95926);--viz-cat-3: light-dark(#1baf7a,#199e70);--viz-cat-4: light-dark(#eda100,#c98500);--viz-cat-5: light-dark(#e87ba4,#d55181);--viz-cat-6: #008300;--viz-cat-7: light-dark(#4a3aa7,#9085e9);--viz-cat-8: light-dark(#e34948,#e66767);--viz-cat-rest: #898781}.dashboard-charts{display: grid;grid-template-columns: 1fr;gap: var(--app-space-m)}@media (min-width: 48em){.dashboard-charts{grid-template-columns: 1fr 1fr}}.donut{display: flex;flex-direction: column;gap: var(--app-space-s)}.donut svg{width: 10rem;max-width: 100%;margin: 0 auto}.donut-legend{list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: var(--app-space-xs)}.donut-legend li{display: flex;align-items: center;gap: var(--app-space-s)}.donut-legend-dot{width: 0.75rem;height: 0.75rem;border-radius: 50%;flex: none}.donut-legend-value{margin-left: auto;font-weight: 600;font-variant-numeric: tabular-nums}.session-mine{border: 2px solid var(--app-accent);border-radius: var(--app-radius-m)}.session-foreign{opacity: 0.62}.w-s,.w-m,.w-l,.w-xl{width: 100%}@media (min-width: 48em){.grid-fit{width: max-content;max-width: 100%}}@media (min-width: 48em){.w-s{width: 10em}.w-m{width: 16em}.w-l{width: 24em}.w-xl{width: 100%;max-width: 36em}}