/*
 * Seite: Schülerarbeitsplatz
 * Alle seiten-spezifischen Styles für ?page=schuelerarbeitsplatz
 */

/* Druckschrift (lokal) für den Schülerarbeitsplatz */
@font-face {
    font-family: 'Druckschrift_BY_WOK';
    src: url('../fonts/Druckschrift_BY_WOK.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Standardschrift nur für diese Seiten */
.page-schuelerarbeitsplatz,
.page-startseite {
    font-family: 'Druckschrift_BY_WOK', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Listen ohne Bulletpoints (Schülerarbeitsplatz) */
.page-schuelerarbeitsplatz ul,
.page-startseite ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* Buttons (eigenständig, ohne Abhängigkeit von anderen Klassen) */
.sus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    padding: 9px 12px;
    border: 0;
    background-color: #fff;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    color: #111;
    text-align: center;
    font-weight: 600;
}

.sus-btn:hover { background-color: #f4f4f4; }

/* Buttons für Auswahl (Klasse/Schüler): orange */
.sus-btn-auswahl { background-color: #ffd3a6; }
.sus-btn-auswahl:hover { background-color: #ffbf8a; }

/* Kachel-Links (Klassenwahl/Schülerwahl): coole rote Kacheln */
.page-schuelerarbeitsplatz .sus-btn-kachel-rot,
.page-startseite .sus-btn-kachel-rot {
    background-color: #e03a3a;
    color: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    min-width: min(320px, 80vw);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.4px;
    box-shadow: 1px 3px 4px 0px #888;
    transition: filter 120ms ease, transform 120ms ease, background-color 120ms ease;
}

.page-schuelerarbeitsplatz .sus-btn-kachel-rot:hover,
.page-startseite .sus-btn-kachel-rot:hover {
    background-color: darkred;
    filter: brightness(1.05) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
    transform: translateY(-2px);
}

.page-schuelerarbeitsplatz .sus-btn-kachel-rot:active,
.page-startseite .sus-btn-kachel-rot:active {
    filter: brightness(1.02) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
    transform: translateY(-1px) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .page-schuelerarbeitsplatz .sus-btn-kachel-rot,
    .page-startseite .sus-btn-kachel-rot { transition: none; }
    .page-schuelerarbeitsplatz .sus-btn-kachel-rot:hover,
    .page-startseite .sus-btn-kachel-rot:hover { transform: none; }
}

/* Buttons für Spiele: Hintergrundbild komplett sichtbar, ohne Verzerrung */
.sus-btn-spiel {
    background-image: url('../../media/pics/arbeitsplatz/icoquiz.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;

    /* icolesen.png ist 704x704 => quadratisch */
    aspect-ratio: 1 / 1;
    width: 100%;

    /* kein Innenabstand: Bild + Text sollen den ganzen Button nutzen */
    padding: 0;

    /* Basis-Button setzt overflow/text-overflow; für SVG-Overlay nicht sinnvoll */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;

    color: #111;
    text-shadow: none;

    transition: filter 120ms ease, transform 120ms ease;
}

/* Fach-Icons */
.sus-btn-spiel.sus-fach-lesen { background-image: url('../../media/pics/arbeitsplatz/icolesen.png'); }
.sus-btn-spiel.sus-fach-rechnen { background-image: url('../../media/pics/arbeitsplatz/icorechnen.png'); }
.sus-btn-spiel.sus-fach-quiz { background-image: url('../../media/pics/arbeitsplatz/icoquiz.png'); }
.sus-btn-spiel.sus-fach-direktstart { background-image: url('../../media/pics/arbeitsplatz/icoeinstellungen.png'); }

/* Hover-Effekt für transparente Spiel-Buttons: Schatten auf der Grafik + leicht heller */
.sus-btn-spiel:hover {
    background-color: transparent;
    filter: brightness(1.06) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
    transform: translateY(-2px);
}

/* Tap/Active-Effekt (Touch): kurz „gedrückt“ */
.sus-btn-spiel:active,
.sus-btn-spiel.sus-tap-aktiv {
    background-color: transparent;
    filter: brightness(1.03) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
    transform: translateY(-1px) scale(0.98);
}

/* Tastatur-Fokus sichtbar, ohne permanenten Rahmen */
.sus-btn-spiel:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.55);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sus-btn-spiel { transition: none; }
    .sus-btn-spiel:hover { transform: none; }
}

/* Gebogene Beschriftung als SVG-Overlay */
.sus-btn-spiel { position: relative; }

.sus-btn-bogen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sus-btn-bogen-text {
    font-family: inherit;
    font-weight: 800;
    fill: #4d0000;
}

/* Zurück-Buttons (neutral) */
.sus-btn-zurueck {
    background-color: #fff;
}

/* Arbeitsfläche */
.page-schuelerarbeitsplatz .sus-haupt,
.page-startseite .sus-haupt {
    position: relative;
    margin: 0;
    width: 100vw;
    min-height: 100vh;
    padding: 18px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    background: none;
    font-family: inherit;
}

/* Hintergrundbild nur bei der Spieleauswahl */
.page-schuelerarbeitsplatz .sus-haupt-spiele,
.page-startseite .sus-haupt-spiele {
    /* CSS liegt in /public/css/, daher 2x hoch zum Projekt-Root */
    background-image: url('../../media/pics/arbeitsplatz/hgstat.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Auswahlansicht (Klassenwahl/Schülerwahl): eigener Hintergrund */
.page-schuelerarbeitsplatz .sus-haupt:not(.sus-haupt-spiele),
.page-startseite .sus-haupt:not(.sus-haupt-spiele) {
    background-image: url('../../media/pics/hgstat2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Schülerwahl-Überschrift: gleiche Schriftart/Farbe wie Spielewahl-Name */
.page-schuelerarbeitsplatz .sus-haupt-auswahl .sus-spielladen > h1,
.page-schuelerarbeitsplatz .sus-haupt:not(.sus-haupt-spiele) .sus-spielladen > h1,
.page-startseite .sus-haupt-auswahl .sus-spielladen > h1,
.page-startseite .sus-haupt:not(.sus-haupt-spiele) .sus-spielladen > h1 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    color: #fff;
}

/* Rendering: erst laden, dann komplett aufdecken */
.page-schuelerarbeitsplatz .sus-haupt-spiele,
.page-startseite .sus-haupt-spiele {
    opacity: 0;
    visibility: hidden;
}

.page-schuelerarbeitsplatz .sus-haupt-spiele.sus-grafik-bereit,
.page-startseite .sus-haupt-spiele.sus-grafik-bereit {
    opacity: 1;
    visibility: visible;
}

.page-schuelerarbeitsplatz .sus-haupt-spiele.sus-grafik-laden,
.page-startseite .sus-haupt-spiele.sus-grafik-laden {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.page-schuelerarbeitsplatz .sus-haupt-spiele.sus-grafik-laden::before,
.page-startseite .sus-haupt-spiele.sus-grafik-laden::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.96);
    z-index: 5;
}

.page-schuelerarbeitsplatz .sus-haupt-spiele.sus-grafik-laden::after,
.page-startseite .sus-haupt-spiele.sus-grafik-laden::after {
    content: 'Lade Anzeige…';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    font-size: clamp(24px, 3.8vw, 42px);
    font-weight: 700;
    color: #333;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}

/* Grundlayout (für Schülerauswahl & Spieleauswahl) */
.page-schuelerarbeitsplatz .sus-spielladen,
.page-startseite .sus-spielladen { margin-top: 120px; font-size: 22px; }
.page-schuelerarbeitsplatz .sus-spielladen h1,
.page-startseite .sus-spielladen h1 { margin: 0 0 12px; }
.page-schuelerarbeitsplatz .sus-knopf,
.page-startseite .sus-knopf { display: inline-block; margin: 12px; }

/* Startseite: temporäres Optionen-Modal */
body.sus-modal-offen {
    overflow: hidden;
}

.page-startseite .sus-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
}

.page-startseite .sus-modal.is-open {
    display: block;
}

.page-startseite .sus-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.page-startseite .sus-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1200px, 96vw);
    max-height: 92vh;
    margin: 3vh auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}

.page-startseite .sus-modal-kopf,
.page-startseite .sus-modal-fuss {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page-startseite .sus-modal-fuss {
    border-top: 1px solid #e5e5e5;
    border-bottom: 0;
    justify-content: center;
}

.page-startseite .sus-modal-kopf h2 {
    margin: 0;
    font-size: 24px;
}

.page-startseite .sus-modal-schliessen {
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    font-size: 24px;
    line-height: 1;
}

.page-startseite .sus-modal-inhalt {
    padding: 12px 16px;
    overflow: auto;
    font-size: 16px;
    line-height: 1.35;
}

.page-startseite .sus-modal-starten-btn {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    font-size: 0;
    background: transparent;
    border: 0;
}

.page-startseite .sus-modal-starten-btn:hover {
    background: transparent;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
}

.page-startseite .sus-modal-starten-btn:active,
.page-startseite .sus-modal-starten-btn.sus-tap-aktiv {
    background: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

.page-startseite .sus-modal-starten-icon {
    display: block;
    height: 84px;
    width: auto;
}

/* Schülername: Comic Sans + helle Buchstaben */
.page-schuelerarbeitsplatz .sus-schuelername,
.page-startseite .sus-schuelername {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-size: clamp(34px, 5.2vw, 64px);
    letter-spacing: 0.6px;
    margin: 0 0 18px;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.35),
        0 10px 16px rgba(0, 0, 0, 0.35);
}

/* Spieleauswahl: responsive Icons, bis zu 5 pro Zeile */
.page-schuelerarbeitsplatz .sus-haupt-spiele .sus-spielladen,
.page-startseite .sus-haupt-spiele .sus-spielladen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.page-schuelerarbeitsplatz .sus-haupt-spiele .sus-spielladen > h1,
.page-schuelerarbeitsplatz .sus-haupt-spiele .sus-spielladen > p,
.page-startseite .sus-haupt-spiele .sus-spielladen > h1,
.page-startseite .sus-haupt-spiele .sus-spielladen > p {
    flex: 0 0 100%;
}

.page-schuelerarbeitsplatz .sus-haupt-spiele .sus-knopf,
.page-startseite .sus-haupt-spiele .sus-knopf {
    display: block;
    margin: 0;

    /* 5 Spalten, 4 Gaps à 12px => 48px */
    flex: 0 0 calc((100% - 48px) / 5);
    min-width: 140px;
}