:root {
    --background: #40707F;
    --panel: rgba(255, 255, 255, 0.035);
    --text: #ffffff;
    --border: rgba(255, 255, 255, 0.12);
    --accent: #1ed760;
    --hover: #b5b4b4;
    --muted: rgba(255, 255, 255, 0.75);

    --side-width: 190px;
    --center-width: 540px;
    --gap: 0.9rem;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--background);
    color: var(--text);
}

.app {
    width: min(100%, calc(var(--side-width) * 2 + var(--center-width) + var(--gap) * 2 + 2rem));
    margin: 0 auto;
    padding: 0.8rem 1rem 0.7rem;
}

.header {
    text-align: center;
    margin-bottom: 0.8rem;
}

.header h1 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.2;
}

.header p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
}

.trainer-grid {
    display: grid;
    grid-template-columns: var(--side-width) var(--center-width) var(--side-width);
    gap: var(--gap);
    align-items: start;
    justify-content: center;
}

.left-column,
.center-column,
.right-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}

.panel-box {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 0.75rem;
    min-width: 0;
}

legend {
    padding: 0 0.35rem;
    font-size: 0.9rem;
    color: var(--text);
}

label {
    display: block;
    margin: 0.35rem 0;
    line-height: 1.35;
}

select,
button,
input {
    font: inherit;
}

select {
    width: 100%;
    min-height: 2.25rem;
}

input[type="range"] {
    width: 100%;
}

output {
    display: block;
    margin-top: 0.35rem;
}

.solution-panel {
    width: 100%;
    height: 230px;
    min-height: 230px;
    max-height: 230px;

    border: 1px solid var(--border);
    background: var(--panel);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
    text-align: center;
    overflow: hidden;
}

.start-logo {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.start-logo img {
    display: block;

    max-width: min(90%, 480px);
    max-height: 180px;

    width: auto;
    height: auto;

    object-fit: contain;
}

.solution-text {
    width: 100%;
    height: 100%;
    max-height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: auto;

    white-space: pre-wrap;
    font-size: 24px;
    line-height: 1.35;
}

.noise-type-list label {
    margin-bottom: 0.35rem;
}

.muted {
    margin: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--muted);
}

/*
 * Buttonleiste:
 * Immer drei Buttons nebeneinander.
 */
.navigation {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

button {
    width: 100%;
    min-width: 0;

    padding: 0.55rem 0.7rem;

    cursor: pointer;

    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.35rem;

    background: #f2f2f2;
    color: #222;

    /*
     * Verhindert Umbruch in den Buttons.
     * Auf sehr schmalen Displays wird Text bei Bedarf gekürzt.
     */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/*
 * Footer:
 * Auf großen Displays genauso breit wie das Antwortfenster,
 * also wie die mittlere Spalte.
 */
.footer {
    width: var(--center-width);
    max-width: 100%;

    margin: 0.85rem auto 0;

    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
}

.footer:hover {
    color: var(--hover);
}

.cookie-notice {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--muted);
}

/* Tablets */
@media (max-width: 980px) {
    :root {
        --side-width: 170px;
    }

    .app {
        width: min(100%, 900px);
    }

    .trainer-grid {
        grid-template-columns: 170px minmax(360px, 1fr) 170px;
    }

    .footer {
        width: calc(100% - 340px - var(--gap) * 2);
        min-width: 360px;
        max-width: 100%;
    }
}

/* ==========================================================================
   Ladezustand im Anzeigefenster
   ========================================================================== */

/*
 * Das Anzeigefenster wird zum Positionierungsrahmen
 * für den Ladebalken.
 */
.solution-panel {
    position: relative;
}

/*
 * Der Ladezustand liegt nur innerhalb des Anzeigefensters,
 * nicht mehr über der gesamten Seite.
 */
.loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    background: transparent;
    backdrop-filter: none;

    pointer-events: none;
}

.loading-overlay[hidden] {
    display: none !important;
}

.loading-card {
    width: min(85%, 340px);

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.6rem;

    background: rgba(64, 112, 127, 0.96);
    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.22);

    padding: 1rem;

    text-align: center;
    color: var(--text);
}

.loading-text {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.loading-bar {
    position: relative;

    width: 100%;
    height: 0.55rem;

    overflow: hidden;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
}

.loading-bar-fill {
    position: absolute;
    top: 0;
    left: 0;

    width: 45%;
    height: 100%;

    border-radius: 999px;
    background: #ffffff;

    animation: loading-slide 1.1s ease-in-out infinite;
}

@keyframes loading-slide {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(240%);
    }
}

body.app-loading {
    cursor: wait;
}

/*
 * Die App wird während des Ladens weiterhin gesperrt,
 * aber optisch nicht abgedunkelt.
 */
body.app-loading .trainer-grid {
    pointer-events: none;
    user-select: none;
    opacity: 1;
}

/*
 * Der Ladebalken selbst bleibt sichtbar.
 * Er muss keine Klicks entgegennehmen.
 */
body.app-loading .loading-overlay {
    pointer-events: none;
}

/*
 * Barrierearmut:
 * Bei reduzierter Bewegung wird die Animation abgeschaltet.
 */
@media (prefers-reduced-motion: reduce) {
    .loading-bar-fill {
        animation: none;
        width: 100%;
        transform: none;
    }
}

/* Kleine Tablets und große Smartphones */
@media (max-width: 760px) {
    .app {
        width: min(100%, 620px);
        padding: 0.7rem;
    }

    /*
     * Mobile Ordnung:
     *
     * Stimme          Lautstärke
     * Listen          Listen
     * Anzeige         Anzeige
     * Navigation      Navigation
     * Störgeräusch    Schwierigkeit
     * Schriftgröße    Schriftgröße
     */
    .trainer-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "voice volume"
            "list list"
            "solution solution"
            "navigation navigation"
            "noise difficulty"
            "fontsize fontsize";
        gap: 0.65rem;
        align-items: start;
        justify-content: stretch;
    }

    /*
     * Alle Spalten-Wrapper werden aufgelöst,
     * damit die einzelnen Elemente frei im mobilen Grid platziert werden können.
     */
    .left-column,
    .center-column,
    .right-column {
        display: contents;
    }

    .voice-box {
        grid-area: voice;
    }

    .volume-box {
        grid-area: volume;
    }

    .list-box {
        grid-area: list;
    }

    .solution-panel {
        grid-area: solution;

        height: 210px;
        min-height: 210px;
        max-height: 210px;
    }

    .navigation {
        grid-area: navigation;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .noise-box {
        grid-area: noise;
    }

    .difficulty-box {
        grid-area: difficulty;
    }

    .font-size-box {
        grid-area: fontsize;
    }

    .panel-box {
        padding: 0.65rem;
    }

    .start-logo img {
        max-height: 165px;
    }

    .footer {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* Smartphones */
@media (max-width: 560px) {
    .app {
        width: 100%;
        padding: 0.6rem;
    }

    .header {
        margin-bottom: 0.6rem;
    }

    .trainer-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "voice volume"
            "list list"
            "solution solution"
            "navigation navigation"
            "noise difficulty"
            "fontsize fontsize";
        gap: 0.6rem;
        align-items: start;
        justify-content: stretch;
    }

    .left-column,
    .center-column,
    .right-column {
        display: contents;
    }

    .voice-box {
        grid-area: voice;
    }

    .volume-box {
        grid-area: volume;
    }

    .list-box {
        grid-area: list;
    }

    .solution-panel {
        grid-area: solution;

        height: 180px;
        min-height: 180px;
        max-height: 180px;
    }

    .navigation {
        grid-area: navigation;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    button {
        padding: 0.5rem 0.35rem;
        font-size: 0.9rem;
    }

    .noise-box {
        grid-area: noise;
    }

    .difficulty-box {
        grid-area: difficulty;
    }

    .font-size-box {
        grid-area: fontsize;
    }

    .panel-box {
        padding: 0.6rem;
    }

    legend {
        font-size: 0.85rem;
    }

    label {
        font-size: 0.9rem;
    }

    .muted {
        font-size: 0.78rem;
    }

    .start-logo img {
        max-height: 140px;
    }

    .footer {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 0.72rem;
    }

    .cookie-notice {
        font-size: 0.72rem;
    }
}

/* Sehr schmale Smartphones */
@media (max-width: 360px) {
    .trainer-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "voice"
            "volume"
            "list"
            "solution"
            "navigation"
            "noise"
            "difficulty"
            "fontsize";
    }

    /*
     * Auch auf sehr schmalen Displays bleiben die Buttons einreihig.
     */
    .navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.3rem;
    }

    button {
        padding: 0.45rem 0.25rem;
        font-size: 0.8rem;
    }
}