/* ==========================================================
   PianoPi – GLOBAL LOW GRAPHICS MODE
   017CV
   ========================================================== */

html.lowgfx *,
html.lowgfx *::before,
html.lowgfx *::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;

    box-shadow: none !important;
    text-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    background-attachment: scroll !important;
}

html.lowgfx body,
html.lowgfx body::before,
html.lowgfx body::after,
html.lowgfx main,
html.lowgfx main::before,
html.lowgfx main::after {
    background-image: none !important;
}

/* Kontrastreiche einfache Grundflächen */
html.lowgfx body {
    background: #e9e5dc !important;
    color: #202020 !important;
}

html.lowgfx main,
html.lowgfx section,
html.lowgfx article,
html.lowgfx .panel,
html.lowgfx .card,
html.lowgfx .tile {
    color: #202020 !important;
}

/* normale Bedienelemente */
html.lowgfx button,
html.lowgfx .btn {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Klavierlehrer / Spielmodus */
html.lowgfx #train-screen,
html.lowgfx #train-screen > .panel {
    background: #e9e5dc !important;
    color: #202020 !important;
}

html.lowgfx .staff-wrap {
    background: #ffffff !important;
    color: #202020 !important;
    box-shadow: none !important;
}

html.lowgfx #train-screen .piano-wrap {
    position: static !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: auto !important;

    margin: 3px 0 0 !important;
    padding: 3px 7px 4px !important;

    background: #e9e5dc !important;
    box-shadow: none !important;
}

html.lowgfx #train-screen .piano-keyboard {
    background: #e9e5dc !important;
    box-shadow: none !important;
}

html.lowgfx #train-screen .piano-key {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

html.lowgfx #train-screen .piano-key.white {
    background: #ffffff !important;
    color: #111111 !important;
}

html.lowgfx #train-screen .piano-key.black {
    background: #202020 !important;
    color: #ffffff !important;
}

/* PIANOPI_017CW_CONTRAST_BEGIN */

/* Zentrale Steuerung nur in den erweiterten Einstellungen. */
.graphics-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 9px 0;
    font-weight: 700;
}
.graphics-mode-buttons {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.graphics-mode-buttons button {
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 7px 11px;
}
.graphics-mode-buttons button.active {
    background: #6b3b20 !important;
    border-color: #6b3b20 !important;
    color: #fff !important;
}
@media (max-width: 620px) {
    .graphics-mode-row { align-items: stretch; flex-direction: column; gap: 6px; }
    .graphics-mode-buttons { width: 100%; }
}

/*
 Low Graphics:
 nicht nur schnell, sondern auch gut lesbar.
*/

html.lowgfx h1,
html.lowgfx h2,
html.lowgfx h3,
html.lowgfx h4,
html.lowgfx .title,
html.lowgfx .page-title,
html.lowgfx .hero-title,
html.lowgfx .headline {
    color: #202020 !important;
    text-shadow: none !important;
}

/*
 Sekundärtexte nicht mehr hellgrau auf hellem Hintergrund.
*/
html.lowgfx .muted,
html.lowgfx .subtle,
html.lowgfx .secondary,
html.lowgfx .meta,
html.lowgfx .version,
html.lowgfx .updated,
html.lowgfx .status,
html.lowgfx small {
    color: #444444 !important;
    text-shadow: none !important;
}

/*
 Trainer: schwache/statistische Hinweise ausreichend dunkel.
*/
html.lowgfx #training-stats,
html.lowgfx #midi-status,
html.lowgfx #mnemonic-text,
html.lowgfx [class*="weak"],
html.lowgfx [id*="weak"] {
    color: #3d3d3d !important;
    opacity: 1 !important;
}

/*
 Links auf hellen Low-GFX-Flächen.
*/
html.lowgfx a:not(.btn) {
    color: #183d66 !important;
}

/* PIANOPI_017CW_CONTRAST_END */

/* PIANOPI_017CX_PLAY_LOW_GFX_BEGIN */

/*
 Spielmodus:
 unabhängig von dessen eigener CSS-Struktur keine
 große Hintergrundgrafik oder teure Compositing-Effekte.
*/
html.lowgfx,
html.lowgfx body,
html.lowgfx body::before,
html.lowgfx body::after,
html.lowgfx #app,
html.lowgfx #game,
html.lowgfx #play,
html.lowgfx .game,
html.lowgfx .play,
html.lowgfx .game-screen,
html.lowgfx .play-screen,
html.lowgfx [class*="game"],
html.lowgfx [class*="play"] {
    background-image: none !important;
    background-attachment: scroll !important;

    box-shadow: none !important;
    text-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

html.lowgfx body {
    background-color: #e9e5dc !important;
}

/* PIANOPI_017CX_PLAY_LOW_GFX_END */

/* PIANOPI_017CY_TRAINER_PUBLIC_BEGIN */

/*
 Alter Spielmodus /trainer/
 Auf schwachen Geräten große Hintergrundflächen und
 Compositing-Effekte konsequent abschalten.
*/

html.lowgfx body,
html.lowgfx body::before,
html.lowgfx body::after,
html.lowgfx #app,
html.lowgfx .app,
html.lowgfx .container,
html.lowgfx .trainer,
html.lowgfx .trainer-container,
html.lowgfx .screen,
html.lowgfx .panel,
html.lowgfx .options-panel,
html.lowgfx .training-panel,
html.lowgfx .expedition-himalaya {
    background-image: none !important;
    background-attachment: scroll !important;

    box-shadow: none !important;
    text-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

html.lowgfx body {
    background-color: #e9e5dc !important;
    color: #202020 !important;
}

html.lowgfx h1,
html.lowgfx h2,
html.lowgfx h3,
html.lowgfx .title,
html.lowgfx .subtitle,
html.lowgfx .stats,
html.lowgfx .stat,
html.lowgfx small {
    color: #202020 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* PIANOPI_017CY_TRAINER_PUBLIC_END */

/* PIANOPI_017DA_STAFF_CONTRAST_BEGIN */

/*
 Low Graphics darf Lerninhalte niemals abschwächen.
 Notenfeld bewusst kontrastreich halten.
*/

html.lowgfx #staff-svg {
    opacity: 1 !important;
    filter: none !important;
}

/* Notenköpfe und Kreise */
html.lowgfx #staff-svg circle,
html.lowgfx #staff-svg ellipse {
    fill: #202020 !important;
    stroke: #202020 !important;
    opacity: 1 !important;
}

/* Notenhälse, Notenlinien und sonstige Linien */
html.lowgfx #staff-svg line,
html.lowgfx #staff-svg polyline {
    stroke: #4a4a4a !important;
    opacity: 1 !important;
}

/*
 Pfade enthalten u.a. Notensymbole.
 Schwarz/dunkel statt nahezu unsichtbar.
*/
html.lowgfx #staff-svg path {
    stroke: #202020 !important;
    opacity: 1 !important;
}

/* SVG-Texte */
html.lowgfx #staff-svg text {
    fill: #202020 !important;
    stroke: none !important;
    opacity: 1 !important;
}

/* PIANOPI_017DA_STAFF_CONTRAST_END */
/* PIANOPI_20260905_SHARED_LOW_GFX_BEGIN
   Gemeinsamer Performance-Modus: Layout und Funktionen bleiben erhalten;
   teures Compositing wird fuer schwache/alte GPUs konsequent vermieden. */
html.lowgfx .pp-page-header,
html.lowgfx .pp-content-surface,
html.lowgfx .pp-page-shell :is(.play-sound-statusbar,.sound-profile-wrap,.demo-progress,.assistant-step,.assistant-selection-card,.assistant-live-card,.learning-hub-choice,.panel,.card,.mini-status) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}
html.lowgfx .pp-page-header { background: #4a2d1d !important; }
html.lowgfx .pp-content-surface,
html.lowgfx .pp-page-shell :is(.panel,.card,.mini-status,.assistant-step,.assistant-selection-card,.learning-hub-choice) {
    background: #f4eee4 !important;
}
html.lowgfx .pp-page-shell :is(button,a,.mini-button,.compact-action,.ghost-button,.advanced-link,.track-action-link) {
    transition: none !important;
    box-shadow: none !important;
}
html.lowgfx .pp-led-guide * { animation: none !important; transition: none !important; }
/* Der Notenfluss bleibt erhalten; im Unified-Trainer wird nur die Note verschoben,
   nicht das gesamte SVG neu aufgebaut. */
/* PIANOPI_20260905_SHARED_LOW_GFX_END */


/* PIANOPI_20260905_LOWGFX_READABILITY_FIX_BEGIN */
/* Dark low-GFX page headers need light copy; generic low-GFX heading rules are dark. */
html.lowgfx .pp-page-header,
html.lowgfx .pp-page-header h1,
html.lowgfx .pp-page-header h2,
html.lowgfx .pp-page-header .pp-page-kicker,
html.lowgfx .pp-page-header .kicker {
    color: #fff9ed !important;
}
html.lowgfx .pp-page-header .muted,
html.lowgfx .pp-page-header .lead,
html.lowgfx .pp-page-header .intro,
html.lowgfx .pp-page-header .topbar-meta,
html.lowgfx .pp-page-header .musicbox-topbar-meta {
    color: #eadfD2 !important;
    opacity: 1 !important;
}

/* Responsive header geometry remains owned by pianopi_core/app-shell.css. */
/* PIANOPI_20260905_LOWGFX_READABILITY_FIX_END */