*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--md-sys-typescale-font);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    background: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--md-sys-color-primary);
}

/* Sichtbarer Fokusring fuer vollstaendige Tastaturbedienbarkeit. */
:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.md-typescale-display-large {
    font-size: var(--md-sys-typescale-display-large-size);
    line-height: var(--md-sys-typescale-display-large-line-height);
    font-weight: var(--md-sys-typescale-display-large-weight);
}
.md-typescale-headline-large {
    font-size: var(--md-sys-typescale-headline-large-size);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    font-weight: var(--md-sys-typescale-headline-large-weight);
}
.md-typescale-headline-small {
    font-size: var(--md-sys-typescale-headline-small-size);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    font-weight: var(--md-sys-typescale-headline-small-weight);
}
.md-typescale-title-large {
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
    font-weight: var(--md-sys-typescale-title-large-weight);
}
.md-typescale-title-medium {
    font-size: var(--md-sys-typescale-title-medium-size);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.md-typescale-body-medium {
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.md-typescale-label-large {
    font-size: var(--md-sys-typescale-label-large-size);
    line-height: var(--md-sys-typescale-label-large-line-height);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.md-typescale-label-medium {
    font-size: var(--md-sys-typescale-label-medium-size);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    font-weight: var(--md-sys-typescale-label-medium-weight);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.md-surface {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.md-surface-container {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-medium);
}
.md-surface-container-high {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-medium);
}

.md-elevation-1 {
    box-shadow: var(--md-sys-elevation-level1);
}
.md-elevation-2 {
    box-shadow: var(--md-sys-elevation-level2);
}
.md-elevation-3 {
    box-shadow: var(--md-sys-elevation-level3);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- App-Shell-Layout ---------- */
.app-shell {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    min-height: 100vh;
}

.app-shell__content {
    padding: 24px clamp(16px, 4vw, 40px);
    max-width: 1100px;
    width: 100%;
}

@media (max-width: 839px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        padding-bottom: 80px;
    }
    .app-shell__content {
        padding: 16px;
    }
}