/* Lokale Schriften (OFL-Lizenz): Bricolage Grotesque, Inter, JetBrains Mono - nur Latin-Zeichensatz (inkl. ä ö ü ß) */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/BricolageGrotesque-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Inter-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/JetBrainsMono-latin-700.woff2') format('woff2'); }

/* ============== GENERAL STYLING ============== */
:root {
    --hit-line-glow: #ffc300;
    --light-gray: #e0e0e0;
    --dark-gray: #a0a0a0;
    --accent-rust: #b6432c;
    --accent-olive: #8a9270;

    /* --- Neues Redesign 2026: Farbsystem & Typografie --- */
    --nd-black: #000000;
    --nd-box: #1c1c1e;
    --nd-white: #ffffff;
    --nd-tan: #eac6b3;
    --nd-brown: #573c2d;
    --nd-gold-1: #7d6137;
    --nd-tone: #c88a65;
    --nd-bass: #8c5b41;
    --nd-slap: #d4ac0d;
    --nd-menu-bg: rgba(255, 253, 250, 0.95);
    --nd-muted: rgba(255, 255, 255, 0.62);
    --nd-hairline: rgba(234, 198, 179, 0.16);
    /* Level-/Feedback-Farben: gemeinsame Basis fuer F&A-Punkte-Leiste,
       Quiz-Antwort-Buttons UND (neu) den Rhythmus-Level-Gradient. Vorher an
       allen drei Stellen als roher, wiederholter Hex-Wert eingetragen. */
    --nd-green: #13451f;
    --nd-yellow: #bc641e;
    --nd-red: #671314;
    --nd-font-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
    --nd-font-body: 'Inter', 'Helvetica Neue', sans-serif;
}

body {
    font-family: var(--nd-font-body);
    background-color: var(--nd-black);
    color: var(--nd-brown);
    margin: 0;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- Icon-Utility: rekoloriert einfarbige SVGs (icons/) per CSS-Mask --- */
.icon-mask {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
}
.icon-award { -webkit-mask-image: url('icons/i_award-solid-full.svg'); mask-image: url('icons/i_award-solid-full.svg'); }
.icon-clock { -webkit-mask-image: url('icons/i_clock-solid-full.svg'); mask-image: url('icons/i_clock-solid-full.svg'); }
.icon-djembe { -webkit-mask-image: url('icons/i_djembe.svg'); mask-image: url('icons/i_djembe.svg'); }
.icon-dundun { -webkit-mask-image: url('icons/i_dundun.svg'); mask-image: url('icons/i_dundun.svg'); }
.icon-gamepad { -webkit-mask-image: url('icons/I_gamepad-solid-full.svg'); mask-image: url('icons/I_gamepad-solid-full.svg'); }
.icon-hands-play { -webkit-mask-image: url('icons/i_hands-play.svg'); mask-image: url('icons/i_hands-play.svg'); }
.icon-lernen { -webkit-mask-image: url('icons/navi_practice.svg'); mask-image: url('icons/navi_practice.svg'); }
.icon-music { -webkit-mask-image: url('icons/i_music-solid-full.svg'); mask-image: url('icons/i_music-solid-full.svg'); }
.icon-handschlag { -webkit-mask-image: url('icons/i_handschlag.svg'); mask-image: url('icons/i_handschlag.svg'); }
.icon-crosshairs { -webkit-mask-image: url('icons/i_crosshairs-solid-full.svg'); mask-image: url('icons/i_crosshairs-solid-full.svg'); }
.icon-headphones { -webkit-mask-image: url('icons/i_headphones-solid-full.svg'); mask-image: url('icons/i_headphones-solid-full.svg'); }
.icon-heart-pulse { -webkit-mask-image: url('icons/i_heart-pulse-solid-full.svg'); mask-image: url('icons/i_heart-pulse-solid-full.svg'); }
.icon-music { -webkit-mask-image: url('icons/i_music-solid-full.svg'); mask-image: url('icons/i_music-solid-full.svg'); }
.icon-eye { -webkit-mask-image: url('icons/i_eye-solid-full.svg'); mask-image: url('icons/i_eye-solid-full.svg'); }
.icon-eye-slash { -webkit-mask-image: url('icons/i_eye-slash-solid-full.svg'); mask-image: url('icons/i_eye-slash-solid-full.svg'); }
.icon-flame { -webkit-mask-image: url('icons/i_flame.svg'); mask-image: url('icons/i_flame.svg'); }
.icon-schellen { -webkit-mask-image: url('icons/i_schellen.svg'); mask-image: url('icons/i_schellen.svg'); }
.icon-hand { -webkit-mask-image: url('icons/i_hand.svg'); mask-image: url('icons/i_hand.svg'); }
.icon-pfeil { -webkit-mask-image: url('icons/i_pfeil.svg'); mask-image: url('icons/i_pfeil.svg'); }
.icon-readme { -webkit-mask-image: url('icons/i_readme-brands-solid-full.svg'); mask-image: url('icons/i_readme-brands-solid-full.svg'); }
.nav-icon-basics { -webkit-mask-image: url('icons/navi_basics.svg'); mask-image: url('icons/navi_basics.svg'); }
.nav-icon-games { -webkit-mask-image: url('icons/navi_games.svg'); mask-image: url('icons/navi_games.svg'); }
.icon-navi-games { -webkit-mask-image: url('icons/navi_games.svg'); mask-image: url('icons/navi_games.svg'); }
.nav-icon-home { -webkit-mask-image: url('icons/navi_home.svg'); mask-image: url('icons/navi_home.svg'); }
.nav-icon-practice { -webkit-mask-image: url('icons/navi_practice.svg'); mask-image: url('icons/navi_practice.svg'); }
.nav-icon-status { -webkit-mask-image: url('icons/navi_status.svg'); mask-image: url('icons/navi_status.svg'); }

/* --- Gold-Badge (Masterclass) --- */
.badge-gold {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(45deg, var(--nd-gold-1) 33%, var(--nd-tan) 67%);
    color: #2a1c12;
    font-family: var(--nd-font-body);
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 7px 14px 7px 12px;
    border-radius: 30px;
    margin-bottom: 16px;
}
.badge-gold .icon-mask { width: 0.85em; height: 0.85em; background-color: #2a1c12; }

/* ============== APP SHELL / SPA NAVIGATION ============== */
.app-shell { display: flex; flex-direction: column; height: 100vh; max-width: 480px; margin: 0 auto; box-shadow: 0 0 20px rgba(0,0,0,0.08); position: relative; }

.app-main { flex: 1; position: relative; overflow: hidden; }

.app-screen { display: none; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.app-screen.active { display: block; }

.screen-inner { padding: 24px 20px 110px; }

.section-header { margin-bottom: 20px; }
.section-header h1 { font-size: 1.8em; margin: 0 0 6px; }

.bottom-nav { display: flex; justify-content: space-around; align-items: center; background-color: var(--nd-box); position: absolute; left: 0; right: 0; bottom: 0; margin: 15px 15px 5px; padding: 5px 0; border: none; border-radius: 40px; z-index: 5; }
.bottom-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 100%); z-index: 4; pointer-events: none; }
.nav-btn { position: relative; flex: 1 1 0; min-width: 0; height: 70px; display: flex; align-items: center; justify-content: center; background: none; border: none; text-decoration: none; font-family: var(--nd-font-body); font-size: 16px; cursor: pointer; padding: 0; }
.nav-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: var(--nd-tan); transform: translate(-50%, -50%); transition: width 0.15s ease, height 0.15s ease; z-index: 0; }
.nav-btn.active::before { width: 70px; height: 70px; }
.nav-btn-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #ffffff; transition: color 0.15s ease; }
.nav-icon-wrap { display: flex; align-items: center; justify-content: center; }
.nav-btn .icon-mask { width: 21px; height: 21px; background-color: #ffffff; }
.nav-label { font-size: 12px; font-weight: 600; color: #ffffff; }

.nav-btn.active .nav-btn-inner { color: #000000; }
.nav-btn.active .icon-mask { background-color: #000000; }
.nav-btn.active .nav-label { color: #000000; }

/* Spiele-Screens (DjembeHero, Frage&Antwort, Rhythmus-Quiz) haben waehrend
   des eigentlichen Gameplays oben einen eigenen Back-Button -> Bottom-Nav +
   Fade-Overlay werden dort ausgeblendet. Auf der Spiele-Startseite (Rhythmus/
   Loops waehlen, .game-start-menu) bleibt die Nav dagegen sichtbar. */
.app-main:has(.game-screen-root.active .hero-view.active:not(.game-start-menu)) ~ .bottom-nav,
.app-main:has(.game-screen-root.active .hero-view.active:not(.game-start-menu)) ~ .bottom-fade { display: none; }

/* ============== HERO SCREEN (sub-views) ============== */
.game-screen-root { padding: 0; background: var(--nd-black); }
.hero-view { display: none; width: 100%; height: 100%; overflow: hidden; }
.hero-view.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.game-start-menu.hero-view.active { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ============== START MENU ============== */
.game-start-menu { background-color: var(--nd-black); text-align: left; width: 100%; height: 100%; }
.start-menu-content { max-width: none; padding: 0; }

.game-hero { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.game-hero::after { content: none; }
.game-hero .back-btn { z-index: 2; }
.game-hero .rules-btn { position: absolute; top: 20px; right: 16px; z-index: 2; margin: 0; background: none; border: none; color: var(--nd-white); font-family: var(--nd-font-body); font-weight: 700; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px; gap: 8px; }
.game-hero .rules-btn:hover { color: var(--nd-white); border-color: transparent; }

.game-start-body { background: none; padding: 24px 20px 140px; margin-top: -90px; position: relative; z-index: 1; }
#screen-hero .game-start-body { margin-top: -60px; }
#screen-frageantwort .game-start-body { margin-top: -80px; }
.menu-section { margin-bottom: 28px; }
.rhythm-select-section { margin-bottom: 20px; }
.menu-section h2 { font-family: var(--nd-font-display); font-weight: 700; font-size: 14px; color: var(--nd-tan); text-align: center; margin-bottom: 16px; }

.select-container { display: flex; justify-content: center; gap: 10px; }

/* NEU: Styling für das Dropdown-Menü */
#rhythm-selection {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 67%;
    max-width: none;
    padding: 11px 20px;
    border: none;
    border-top: 2px solid var(--nd-tan);
    border-radius: 999px;
    background-color: var(--nd-box);
    color: var(--nd-white);
    font-family: var(--nd-font-body);
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eac6b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 22px;
}

/* Stufen-Auswahl als Tier-Avatar-Karten statt Text-Pillen */
.tempo-picks { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 22px; }
.tempo-pick { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; background: none; border: none; padding: 28px 6px 14px; cursor: pointer; font-family: inherit; }
.tempo-picks .tempo-pick:first-child { transform: translate(20px, 30px); }
.tempo-picks .tempo-pick:last-of-type { transform: translate(-20px, 30px); }
.tempo-arc-badge { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); overflow: visible; pointer-events: none; z-index: 1; }
.tempo-arc-text { font-family: var(--nd-font-body); font-weight: 700; font-size: 12px; fill: #eac6b3; letter-spacing: 0.02em; opacity: 0.5; }
.tempo-pick.active .tempo-arc-text { opacity: 1; }
.tempo-pick-avatar { position: relative; z-index: 2; border-radius: 50%; overflow: hidden; margin: 6px 0 10px; border: 2px solid #1c1c1e; background: var(--nd-black); }
.tempo-pick.active .tempo-pick-avatar { border-color: var(--nd-tan); }
.tempo-pick-avatar-outer { width: 80px; height: 80px; }
.tempo-pick-avatar-mid { width: 100px; height: 100px; }
.tempo-pick-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); transition: filter 0.2s ease; }
.tempo-pick.active .tempo-pick-avatar img { filter: grayscale(0%); }
.tempo-pick-bpm { font-family: var(--nd-font-display); font-weight: 700; font-size: 0.85em; color: var(--nd-white); opacity: 0.5; }
.tempo-pick.active .tempo-pick-bpm { opacity: 1; }
.sr-only-info { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Loop-Auswahl als eine durchgehende Pillen-Leiste */
/* 5 eigenständige, gleich breite Pillen mit sichtbarem Abstand (nicht mehr
   zusammenhängend wie bei der Schritt-4-Toolbar) - "5" ist nur etwas höher/
   größer, aber genauso breit wie die anderen (flex:1 für alle). */
/* 5 Buttons, prozentual relativ zu .loop-pills (nicht fix in px!) - die App
   ist responsiv, es gibt keine feste Bildschirmbreite. Werte sind 1:1 aus dem
   480px-Modell umgerechnet (100px Breite / 40px Overlap / 20px Textversatz),
   nur eben als Prozent des tatsächlichen Containers, damit sich alles korrekt
   mitskaliert: 100/480=20.833%, 40/480=8.333%, 20/480=4.167%. */
.loop-pills { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 auto; }
.loop-pills .select-option { flex: 0 0 20.833%; width: 20.833%; height: 40px; display: flex; align-items: center; justify-content: center; background: #000; border: 2px solid var(--nd-tan); border-radius: 20px; box-shadow: 0 0 0 3px #000; color: var(--nd-tan); font-family: var(--nd-font-display); font-weight: 700; font-size: 14px; cursor: pointer; position: relative; z-index: 1; transition: background-color 0.15s ease, color 0.15s ease; }
.loop-pills .select-option:nth-child(1) { margin-right: -8.333%; z-index: 1; justify-content: flex-start; padding-left: calc(4.167% + 10px); }
.loop-pills .select-option:nth-child(2) { margin-right: -8.333%; z-index: 2; justify-content: flex-start; padding-left: calc(4.167% + 10px); }
.loop-pills .select-option:nth-child(4) { margin-left: -8.333%; z-index: 2; justify-content: flex-end; padding-right: calc(4.167% + 10px); }
.loop-pills .select-option:nth-child(5) { margin-left: -8.333%; z-index: 1; justify-content: flex-end; padding-right: calc(4.167% + 10px); }
.loop-pills .loop-mid { height: 50px; border: 2px solid var(--nd-tan); border-radius: 25px; box-shadow: 0 0 0 3px #000, 0 6px 14px rgba(0,0,0,0.35); position: relative; z-index: 3; }
.select-option.active { background: var(--nd-brown); color: var(--nd-white); }

.loop-num { display: inline-block; }

.metronome-toggle-row { display: flex; align-items: center; gap: 14px; width: 56.66%; height: 40px; margin: 0 auto 28px; background: var(--nd-box); border: 1.5px solid rgba(234, 198, 179, 0.3); border-radius: 20px; padding: 14px 20px; box-sizing: border-box; text-align: left; }
.metronome-icon { width: 20px; height: 20px; color: var(--nd-tan); flex-shrink: 0; }
.metronome-toggle-title { flex: 1; min-width: 0; margin: 0; font-family: var(--nd-font-body); font-weight: 700; font-size: 12px; color: var(--nd-tan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#start-game-btn, #qa-start-game-btn, #quiz-start-game-btn { display: flex; align-items: center; justify-content: flex-start; gap: 0; width: 70.83%; margin: 8px auto 0; padding: 0 0 0 24px; font-family: var(--nd-font-body); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--nd-white); background-color: #000; border: 2px solid var(--nd-white); border-radius: 20px; cursor: pointer; height: 40px; box-sizing: border-box; transition: background-color 0.2s ease; }
#start-game-btn .play-btn-label, #qa-start-game-btn .play-btn-label, #quiz-start-game-btn .play-btn-label { flex: 1; text-align: center; }
#start-game-btn:hover, #qa-start-game-btn:hover, #quiz-start-game-btn:hover { background-color: #1a1a1a; }
#start-game-btn .play-btn-icon, #qa-start-game-btn .play-btn-icon, #quiz-start-game-btn .play-btn-icon { width: 40px; height: 40px; margin: 0; flex-shrink: 0; border-radius: 50%; background: var(--nd-white); color: #000; font-size: 0.75em; display: flex; align-items: center; justify-content: center; }

/* CTA-Card "Spiel starten" (nur Djembe-Hero-Start). Card-Breite = Breite der
   Bottom-Nav: .game-start-body hat 20px Seiten-Padding, die Nav aber nur
   15px Margin - daher -5px Negativ-Margin, um die Card exakt auf Nav-Breite
   zu ziehen. Button-Breite = Breite der Loop-Section darueber (= volle
   Content-Breite von .game-start-body): 5px Card-Innenabstand gleicht die
   zuvor gewonnenen 5px pro Seite wieder aus, sodass der Button exakt so
   breit wird wie z.B. .loop-pills. */
#screen-hero .hero-cta-box, #screen-frageantwort .hero-cta-box, #screen-quiz .hero-cta-box {
    background-color: #1c1c1e;
    border: none;
    border-bottom: 2px solid var(--nd-tan);
    border-radius: 20px;
    margin: 24px -5px 0;
    padding: 20px 24px 18px;
    box-sizing: border-box;
    text-align: center;
}
#screen-hero .hero-cta-text, #screen-frageantwort .hero-cta-text, #screen-quiz .hero-cta-text {
    color: var(--nd-tan);
    font-family: var(--nd-font-body);
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 16px;
}
#screen-hero #start-game-btn, #screen-frageantwort #qa-start-game-btn, #screen-quiz #quiz-start-game-btn {
    width: 70%;
    margin: 0 auto;
    justify-content: center;
    padding: 0;
    height: 48px;
    background-color: #573c2d;
    border: none;
    border-radius: 24px;
}
#screen-hero #start-game-btn:hover, #screen-frageantwort #qa-start-game-btn:hover, #screen-quiz #quiz-start-game-btn:hover { background-color: #402c21; }
#screen-hero #start-game-btn .play-btn-icon, #screen-frageantwort #qa-start-game-btn .play-btn-icon, #screen-quiz #quiz-start-game-btn .play-btn-icon { display: none; }

/* ============== GAME SCREEN ============== */
.app-container { display: flex; flex-direction: column; height: 100%; width: 100%; }
.game-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 15px; background-color: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--light-gray); flex-shrink: 0; z-index: 10;}
.status-item { font-size: 0.9em; font-weight: bold; }

.game-area {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}
#game-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hit-line-container { position: absolute; bottom: 65px; width: 100%; height: 10px; pointer-events: none; }
.hit-line { position: absolute; top: 0; width: 70px; height: 10px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 15px white; transform: translateX(-50%); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.hit-line.active { transform: translateX(-50%) scale(1.2); box-shadow: 0 0 20px var(--hit-line-glow), 0 0 30px var(--hit-line-glow); }
/* Muss zu LANE_LEFT_X / LANE_RIGHT_X in main.js passen (32% / 68%) */
#hit-line-left { left: 32%; }
#hit-line-right { left: 68%; }

/* Drum Pads Container */
.drum-pad-container {
    position: relative;
    height: 240px; 
    flex-shrink: 0; 
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--light-gray);
}

.drum-pad {
    position: absolute;
    border-radius: 50%;
    color: white;
    font-size: 2.2em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    border: none;
    width: 75px; height: 75px;
    transition: transform 0.1s ease, opacity 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
}

.drum-pad.tapped {
    transform: scale(3.0);
    opacity: 0;
    filter: brightness(1.3);
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.drum-pad.tone { background-color: var(--nd-tone); }
.drum-pad.bass { background-color: var(--nd-bass); }
.drum-pad.slap { background-color: var(--nd-slap); }
.drum-pad.disabled { opacity: 0.35; pointer-events: none; filter: grayscale(0.4); }

/* ============== SPIEL: DJEMBE HERO (Dark-Redesign) ==============
   Nur #screen-hero betroffen. .drum-pad/.drum-pad-container werden auch vom
   Frage-Antwort-Spiel genutzt (siehe #qa-... Pads oben) und bleiben dort
   unangetastet, bis das Spiel dran ist - genau wie bei #screen-rhythm-detail. */
#screen-hero {
    --nd-bass: #210909;
    --nd-tone: #8f5629;
    --nd-slap: #dfb164;
}

#screen-hero #game-screen .app-container {
    background-image: url('assets/games_bg-djembe-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    /* bottom statt top: verankert die Trommel im Bild IMMER am unteren Rand
       (dort, wo der Pad-Bereich beginnt) - unabhaengig davon, wie hoch das
       Spielfeld (.game-area, flex:1) auf dem jeweiligen Geraet tatsaechlich
       ist. Bei "top center" wuchs stattdessen der sichtbare Himmel-/
       Blaetterdach-Bereich auf hohen Bildschirmen, wodurch die Trommel immer
       weiter nach unten aus dem Bild rutschte statt am Pad-Bereich zu bleiben. */
    background-position: bottom center;
}
#screen-hero .game-area { background-image: none; }

/* Status-Header: statt einer Zeile jetzt zwei - eigene Titel-Bar (schwarz,
   Back-Pfeil + zentrierter Titel) und darunter die Stats-Reihe (ohne
   Background, damit der Szenen-Hintergrund durchscheint). */
#screen-hero .game-status-bar, #screen-quiz .game-status-bar { display: block; padding: 0; background: none; border-bottom: none; }

#screen-hero .hero-title-bar, #screen-quiz .hero-title-bar {
    position: relative;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}
/* .back-btn kommt 1:1 von der Spiele-Startseite (position:absolute; top:16px;
   left:16px; 38x38px) - hero-title-bar ist dafuer bewusst genau 70px hoch
   (16px Abstand + 38px Button + 16px Abstand), damit der Pfeil vertikal exakt
   auf der Mitte der Bar sitzt und der zentrierte Titel automatisch auf
   gleicher Hoehe (horizontal bündig) mit ihm steht. Wird 1:1 vom Djembe-Hero
   Screen fuer das Rhythmus-Quiz mitgenutzt (gleicher Score-Bar-Aufbau). */
#screen-hero .hero-title-bar-title, #screen-quiz .hero-title-bar-title {
    margin: 0;
    text-align: center;
    font-family: var(--nd-font-display);
    font-weight: 700;
    font-size: 1.15em;
    color: var(--nd-white);
}

#screen-hero .hero-stats-row, #screen-quiz .hero-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    padding: 14px 48px 10px;
}
#screen-hero .hero-stats-row .status-item, #screen-quiz .hero-stats-row .status-item { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
#screen-hero .hero-stats-row .status-item:nth-child(1), #screen-quiz .hero-stats-row .status-item:nth-child(1) { justify-self: start; }
#screen-hero .hero-stats-row .status-item:nth-child(2), #screen-quiz .hero-stats-row .status-item:nth-child(2) { justify-self: center; }
#screen-hero .hero-stats-row .status-item:nth-child(3), #screen-quiz .hero-stats-row .status-item:nth-child(3) { justify-self: end; }
#screen-hero .hero-stat-label, #screen-quiz .hero-stat-label { font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #eac6b3; }
#screen-hero .hero-stat-value, #screen-quiz .hero-stat-value { font-family: var(--nd-font-display); font-weight: 800; font-size: 1.7em; color: #eac6b3; }
/* Zeit-Wert im Quiz ist kleiner als Punkte/Frage, weil "15s" inkl. Einheit
   sonst zu breit wirkt - Wert bewusst etwas reduziert statt neue Regel. */
#screen-quiz #quiz-timer-badge.hero-stat-value { font-size: 1.4em; transition: color 0.2s ease; }
#screen-quiz #quiz-timer-badge.urgent { color: #e2554a; }


/* container-type:inline-size macht .drum-pad-container zum Bezugsrahmen fuer
   cqw-Einheiten ("% der Container-BREITE"). Alle Pad-Groessen/-Positionen
   sind daher unten in cqw statt fixem px angegeben - Referenz bleibt die
   480px-Breite, gegen die die Werte bisher gepixelt wurden (px/480*100=cqw),
   d.h. bei 480px Container-Breite sieht alles optisch identisch aus wie
   vorher, skaliert aber ab jetzt automatisch mit schmaleren Bildschirmen
   runter statt zu ueberlappen. */
#screen-hero .drum-pad-container { height: 225px; background: none; border-top: none; container-type: inline-size; }
#screen-hero .drum-pad-container::before { content: none; }

/* Pad: 98.01px Kreis (=20.42cqw bei 480px Referenzbreite) in Bass-/Ton-/
   Slap-Farbe, 3px Border mit Verlauf Weiss -> Schwarz (per Doppel-
   Hintergrund: Fläche im padding-box, Verlauf im border-box). aspect-ratio:1
   statt zweiter cqw-Hoehenangabe, damit es garantiert ein Kreis bleibt statt
   durch Rundungsfehler leicht oval zu werden. Innerer Kreis ist ein echtes
   Kind-Element (.drum-pad-inner) statt ::after mit z-index:-1 - dieses
   Pseudo-Element lag ausserhalb jedes Stacking-Contexts (der Pad-Button
   selbst oeffnet ohne eigenen z-index keinen), dadurch landete es an
   unvorhersehbarer Stelle und der 1px-Rahmen ist nicht zuverlaessig
   sichtbar. Ein normales Kind-Element malt garantiert ueber dem
   Eltern-Hintergrund. */
#screen-hero .drum-pad {
    width: 20.42cqw;
    height: auto; /* ueberschreibt height:75px aus der Basis-.drum-pad-Regel, sonst wird aspect-ratio ignoriert */
    aspect-ratio: 1;
    padding: 0;
    box-shadow: none;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--pad-fill), var(--pad-fill)) padding-box,
        linear-gradient(180deg, #ffffff 0%, #000000 100%) border-box;
}
/* Innerer Kreis: 80% der Pad-Groesse (=78.51px bei 98.01px-Pad) - als %
   relativ zum Pad selbst, skaliert dadurch automatisch mit dem Pad mit. */
#screen-hero .drum-pad-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: #000000;
    border: 1px solid var(--nd-tan);
    box-sizing: border-box;
    color: #a3a3a3;
    font-size: 6.81cqw;
    font-weight: bold;
}
#screen-hero .drum-pad.bass { --pad-fill: var(--nd-bass); }
#screen-hero .drum-pad.tone { --pad-fill: var(--nd-tone); }
#screen-hero .drum-pad.slap { --pad-fill: var(--nd-slap); }

/* Pad-Layout: Bass-Paar oben mittig, Ton-Pads aussen auf halber Hoehe,
   Slap-Paar in derselben Spalte wie Bass, weiter unten. Alle Werte in cqw
   (px/480*100), damit Abstaende UND Pad-Groesse gemeinsam mit der
   Container-Breite skalieren.
   Ab hier von UNTEN (bottom) statt von OBEN (top) verankert: die
   Container-Unterkante liegt exakt auf der 100vh-Grenze (letztes
   Flex-Element in der Spalte) - das unterste Pad (Slap) sitzt dadurch immer
   exakt auf der echten Viewport-Grenze. Jede schwarze Luecke, die trotzdem
   noch unter den Pads sichtbar ist, liegt dann zweifelsfrei AUSSERHALB
   unseres Layouts (echtes Browser/Viewport-Verhalten, kein CSS-Abstand von
   uns). Werte 1:1 aus den vorherigen top-Werten umgerechnet
   (bottom = Container-Hoehe[46.875cqw] - top - Pad-Groesse[20.42cqw]),
   keine visuelle Aenderung. */
#screen-hero #bass-pad-left  { bottom: 26.455cqw; left: 50%; margin-left: -23.54cqw; }
#screen-hero #bass-pad-right { bottom: 26.455cqw; left: 50%; margin-left: 3.12cqw; }

#screen-hero #tone-pad-left  { bottom: 5.455cqw; left: 8.21cqw; }
#screen-hero #tone-pad-right { bottom: 5.455cqw; right: 8.21cqw; }

#screen-hero #slap-pad-left  { bottom: 2.455cqw; left: 50%; margin-left: -23.54cqw; }
#screen-hero #slap-pad-right { bottom: 2.455cqw; left: 50%; margin-left: 3.12cqw; }



/* Game Over Layer */
.overlay-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 1000; }
.overlay-content { background-color: var(--nd-menu-bg); padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); max-width: 90%; width: 350px; }
.overlay-content h2 { font-size: 2em; color: var(--nd-bass); margin-bottom: 20px; }
.overlay-content p { font-size: 1.2em; margin: 10px 0; }

.rules-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 22px; padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--light-gray); background: #fff; color: var(--dark-gray); font-size: 0.82em; font-weight: bold; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, color 0.15s ease; }
.rules-btn:hover { border-color: var(--accent-rust); color: var(--accent-rust); }

.rules-content { position: relative; text-align: left; max-height: 80vh; overflow-y: auto; background-color: var(--nd-box); border: 1.5px solid rgba(234, 198, 179, 0.3); }
.rules-close-btn { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: var(--nd-white); font-size: 0.95em; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rules-header { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.rules-icon { width: 28px; height: 28px; background-color: var(--nd-white); }
.rules-label { display: block; text-align: left; font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nd-white); }
.rules-content h2 { text-align: left; padding-right: 30px; font-size: 32px; margin: 0 0 18px; font-family: var(--nd-font-display); color: var(--nd-tan); }
.rules-body h3 { margin: 20px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--nd-white); font-family: var(--nd-font-body); }
.rules-body h3:first-child { margin-top: 0; }
.rules-body p, .rules-body ul { margin: 0 0 10px; font-size: 0.9em; line-height: 1.55; color: var(--nd-white); text-align: left; }
.rules-body ul { padding-left: 20px; }
.rules-body li { margin-bottom: 4px; }
.rules-body strong { color: var(--nd-tan); }
.overlay-buttons { margin-top: 30px; display: flex; justify-content: center; gap: 15px; }
.overlay-buttons button { padding: 12px 25px; font-size: 1em; font-weight: bold; border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
.overlay-buttons button:hover { transform: scale(1.05); }

/* ============== SPIEL: FRAGE & ANTWORT (Dark-Redesign) ==============
   Nur #screen-frageantwort betroffen, exakt nach demselben Muster wie
   #screen-hero (siehe oben) - eigene Farb-Variablen, eigene Titel-
   Bar/Stats-Zeile, eigene Pad-Positionierung in cqw. .drum-pad/
   .drum-pad-container bleiben dadurch fuer #screen-hero unangetastet. */
#screen-frageantwort {
    --nd-bass: #210909;
    --nd-tone: #8f5629;
    --nd-slap: #dfb164;
}

#screen-frageantwort #qa-game-screen .app-container {
    position: relative;
    background-image: url('assets/games_bg-frage-antwort.webp');
    background-repeat: no-repeat;
    /* Breiten-basiert statt "cover": die Grafik ist exakt auf die App-Breite
       ausgelegt (wie games_djembe-hero_titel.webp, die ebenfalls ueber die
       Breite skaliert statt zugeschnitten wird) - dadurch kein seitlicher
       Beschnitt, die Grafik skaliert 1:1 auf Container-Breite und wird nur
       unten vom Viewport abgeschnitten. */
    background-size: 100% auto;
    background-position: top center;
}

/* Titel-Bar + Stats-Zeile: 1:1 von #screen-hero uebernommenes Muster, hier
   erneut gescopet statt global, s.o. */
#screen-frageantwort .game-status-bar { display: block; padding: 0; background: none; border-bottom: none; }

#screen-frageantwort .hero-title-bar {
    position: relative;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}
#screen-frageantwort .hero-title-bar-title {
    margin: 0;
    text-align: center;
    font-family: var(--nd-font-display);
    font-weight: 700;
    font-size: 1.15em;
    color: var(--nd-white);
}

#screen-frageantwort .hero-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    padding: 14px 48px 10px;
}
#screen-frageantwort .hero-stats-row .status-item { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
#screen-frageantwort .hero-stats-row .status-item:nth-child(1) { justify-self: start; }
#screen-frageantwort .hero-stats-row .status-item:nth-child(2) { justify-self: center; }
#screen-frageantwort .hero-stats-row .status-item:nth-child(3) { justify-self: end; }
#screen-frageantwort .hero-stat-label { font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #eac6b3; }
#screen-frageantwort .hero-stat-value { font-family: var(--nd-font-display); font-weight: 800; font-size: 1.7em; color: #eac6b3; }

/* Spielbereich: Meister-Djembe oben, Fortschritts-Punkte darunter, per
   space-between auf die verfuegbare Hoehe zwischen Stats-Zeile und Pads verteilt. */
#screen-frageantwort .qa-game-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
    padding: 8px 10px 16px;
    box-sizing: border-box;
    overflow: hidden;
}

#screen-frageantwort .qa-master-panel { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Meister-Djembe: Layout (Kreis-Flaeche + farbige Pads mit Hand-Icon) wie in
   den Rhythmus-Details Schritt 3 (#screen-rhythm-detail .djembe-skin/
   .djembe-pad) uebernommen, hier fuer #qa-master-djembe erneut gescopet und
   etwas kleiner. Statt der eingefaerbten i_djembe-fell.svg-Maske (Schritt 3)
   liegt hier ein echtes Foto der Djembe (games_bg-frage-antwort-djembe.webp)
   als Hintergrund. */
#screen-frageantwort #qa-master-djembe { margin: 0; }
#screen-frageantwort #qa-master-djembe .djembe-skin { width: 240px; height: 240px; background: none; border: none; box-shadow: none; }
#screen-frageantwort #qa-master-djembe .djembe-skin::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/games_bg-frage-antwort-djembe.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}
#screen-frageantwort #qa-master-djembe .djembe-pad { background: var(--nd-bass); border: none; z-index: 1; width: 47px; height: 47px; }
#screen-frageantwort #qa-master-djembe .djembe-pad.tone { background: var(--nd-tone); margin-top: 9px; }
#screen-frageantwort #qa-master-djembe .djembe-pad.slap { background: var(--nd-slap); }
#screen-frageantwort #qa-master-djembe .djembe-pad::after {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
#screen-frageantwort #qa-master-djembe .djembe-pad.slap::after { border-color: #2a1c12; }
#screen-frageantwort #qa-master-djembe .djembe-pad .icon-mask { position: relative; z-index: 1; width: 17px; height: 17px; color: var(--nd-tan); }
#screen-frageantwort #qa-master-djembe .djembe-pad.slap .icon-mask { color: #2a1c12; }
#screen-frageantwort #qa-master-djembe .djembe-pad.left .icon-mask { transform: scaleX(-1); }
/* Aufleucht-Effekt beim Vorspielen: die Basis-.djembe-pad.active-Regel nutzt
   einen hellen Schlagschatten (fuer helle Screens) - hier durch einen
   tan-farbenen Glow ersetzt, der auf dem dunklen Hintergrund sichtbar ist. */
#screen-frageantwort #qa-master-djembe .djembe-pad.active { box-shadow: 0 0 0 4px rgba(234, 198, 179, 0.35), 0 0 14px rgba(234, 198, 179, 0.55); }

/* Fortschritts-Punkte: Pille mit Label darueber + separate, dunkle Punkte-Leiste
   darunter (Farben laut Vorgabe: leer/aktuell = c0c0c0, richtig = 13451f,
   teilweise = 815414, falsch = 671314). */
#screen-frageantwort .qa-progress-section { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#screen-frageantwort .qa-progress-label {
    padding: 7px 18px;
    border-radius: 20px;
    background-color: var(--nd-box);
    border: 1px solid var(--nd-hairline);
    color: var(--nd-tan);
    font-family: var(--nd-font-display);
    font-weight: 700;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#screen-frageantwort .qa-step-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    padding: 13px 20px;
    border-radius: 24px;
    background-color: var(--nd-box);
    border: 1px solid var(--nd-hairline);
}
#screen-frageantwort .qa-step-dot { width: 13px; height: 13px; border-radius: 50%; background-color: #c0c0c0; transition: all 0.2s ease; }
#screen-frageantwort .qa-step-dot.current { background-color: var(--nd-tan); transform: scale(1.3); }
#screen-frageantwort .qa-step-dot.correct { background-color: var(--nd-green); }
#screen-frageantwort .qa-step-dot.partial { background-color: var(--nd-yellow); }
#screen-frageantwort .qa-step-dot.wrong { background-color: var(--nd-red); }
/* Stufe "Endgegner" (16 Schläge): explizit auf 2 Reihen à 8 begrenzen statt
   des Default-Zeilenumbruchs, der bei max-width:320px erst nach 14 Punkten
   umbricht (14+2 statt 8+8). 180px passt exakt 8 Punkte (8x13px + 7x10px
   Gap = 174px) in eine Reihe, der 9. wird dadurch zuverlässig umgebrochen. */
#screen-frageantwort .qa-step-dots.qa-step-dots--split-8 { max-width: 180px; }

/* Pads: identisches cqw-Rastermass wie #screen-hero (s.o.), hier auf die
   #qa-...-pad-IDs gemuenzt - .drum-pad/.drum-pad-container bleiben dadurch
   fuer die alten, noch unlackierten Screens unveraendert. */
#screen-frageantwort .drum-pad-container { height: 225px; background: none; border-top: none; container-type: inline-size; }
#screen-frageantwort .drum-pad-container::before { content: none; }

#screen-frageantwort .drum-pad {
    width: 20.42cqw;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    box-shadow: none;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--pad-fill), var(--pad-fill)) padding-box,
        linear-gradient(180deg, #ffffff 0%, #000000 100%) border-box;
}
#screen-frageantwort .drum-pad-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: #000000;
    border: 1px solid var(--nd-tan);
    box-sizing: border-box;
    color: #a3a3a3;
    font-size: 6.81cqw;
    font-weight: bold;
}
#screen-frageantwort .drum-pad.bass { --pad-fill: var(--nd-bass); }
#screen-frageantwort .drum-pad.tone { --pad-fill: var(--nd-tone); }
#screen-frageantwort .drum-pad.slap { --pad-fill: var(--nd-slap); }

#screen-frageantwort #qa-bass-pad-left  { bottom: 26.455cqw; left: 50%; margin-left: -23.54cqw; }
#screen-frageantwort #qa-bass-pad-right { bottom: 26.455cqw; left: 50%; margin-left: 3.12cqw; }

#screen-frageantwort #qa-tone-pad-left  { bottom: 5.455cqw; left: 8.21cqw; }
#screen-frageantwort #qa-tone-pad-right { bottom: 5.455cqw; right: 8.21cqw; }

#screen-frageantwort #qa-slap-pad-left  { bottom: 2.455cqw; left: 50%; margin-left: -23.54cqw; }
#screen-frageantwort #qa-slap-pad-right { bottom: 2.455cqw; left: 50%; margin-left: 3.12cqw; }

/* Countdown-Overlay (3-2-1) vor Spielbeginn, im Tempo des gewaehlten
   Rhythmus. Liegt ueber allem (Titel-Bar, Meister-Djembe, Pads), damit
   waehrend des Countdowns klar ist, dass es gleich losgeht. */
#screen-frageantwort .qa-countdown {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
#screen-frageantwort .qa-countdown.active { display: flex; }
#screen-frageantwort .qa-countdown-number {
    font-family: var(--nd-font-display);
    font-weight: 800;
    font-size: 5.5em;
    color: var(--nd-tan);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
#screen-frageantwort .qa-countdown-number.qa-countdown-pop {
    animation: qaCountdownPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes qaCountdownPop {
    from { transform: scale(1.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ============== GAME OVER POPUP: DJEMBE HERO (Dark-Redesign) ==============
   #game-over-layer liegt ausserhalb von #screen-hero (globaler Overlay über
   dem ganzen Screen) - daher hier ueber die eindeutige ID gescopet statt per
   #screen-hero-Praefix. qa-/quiz-game-over-layer bleiben unangetastet. */
#game-over-layer .overlay-content {
    position: relative;
    width: min(90vw, 432px);
    max-width: min(90vw, 432px);
    box-sizing: border-box;
    background-color: var(--nd-black);
    border: 1px solid var(--nd-tan);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 52px 28px 56px;
    overflow: visible;
}
#game-over-layer .overlay-title-graphic {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -58%);
    width: 78%;
    max-width: 280px;
    height: auto;
    pointer-events: none;
}
#game-over-layer .overlay-content h2 {
    color: var(--nd-tan);
    font-family: var(--nd-font-display);
    font-size: 1.5em;
    margin-bottom: 30px;
}

/* Stat-Reihe: Icon + Label/Wert nebeneinander, zwei Blöcke */
#game-over-layer .overlay-stats { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 0 0 14px; }
#game-over-layer .overlay-stat { display: flex; align-items: center; gap: 10px; }
#game-over-layer .overlay-stat-icon { width: 32px; height: 32px; color: #c9803f; }
#game-over-layer .overlay-stat-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#game-over-layer .overlay-stat-label { font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }
#game-over-layer .overlay-stat-value { font-size: 1.5em; font-weight: 700; color: var(--nd-white); font-family: var(--nd-font-display); }

/* "Nochmal spielen"/"Zurueck": 1:1 identischer Stil in allen drei Spielen
   (Hero/F&A/Quiz) - hier einmal gemeinsam definiert statt dreifach dupliziert.
   Buttons im Mockup-Stil: "Nochmal spielen" mit rundem Play-Kreis rechts;
   "Zurück" ragt als eigenständiges, absolut positioniertes Element mittig
   ueber die untere Kante des Popups hinaus (wie das Titel-Bild oben). */
#game-over-layer .overlay-buttons { flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
#game-over-layer #restart-game-btn,
#qa-game-over-layer #qa-restart-game-btn,
#quiz-game-over-layer #quiz-restart-game-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 5px 5px 5px 26px;
    background-color: transparent;
    border: 1.5px solid var(--nd-white);
    border-radius: 999px;
    color: var(--nd-white);
}
#game-over-layer .overlay-btn-label { font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
#game-over-layer .overlay-btn-play {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--nd-white);
    flex-shrink: 0;
}
#game-over-layer .overlay-btn-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--nd-black);
}
#game-over-layer #main-menu-btn,
#qa-game-over-layer #qa-main-menu-btn,
#quiz-game-over-layer #quiz-main-menu-btn {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    padding: 14px 40px;
    background-color: var(--nd-brown);
    border: none;
    border-radius: 999px;
    color: var(--nd-white);
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#game-over-layer #main-menu-btn:hover,
#qa-game-over-layer #qa-main-menu-btn:hover,
#quiz-game-over-layer #quiz-main-menu-btn:hover {
    background-color: #402c21;
}

/* ============== GAME OVER POPUP: FRAGE & ANTWORT (Dark-Redesign) ==============
   #qa-game-over-layer liegt ausserhalb von #screen-frageantwort (globaler
   Overlay) - daher hier ueber die eindeutige ID gescopet, 1:1 nach demselben
   Muster wie #game-over-layer oben (Djembe Hero). */
#qa-game-over-layer .overlay-content {
    position: relative;
    width: min(90vw, 432px);
    max-width: min(90vw, 432px);
    box-sizing: border-box;
    background-color: var(--nd-black);
    border: 1px solid var(--nd-tan);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 52px 28px 56px;
    overflow: visible;
}
#qa-game-over-layer .overlay-title-graphic {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -58%);
    width: 78%;
    max-width: 280px;
    height: auto;
    pointer-events: none;
}
#qa-game-over-layer .overlay-content h2 {
    color: var(--nd-tan);
    font-family: var(--nd-font-display);
    font-size: 1.5em;
    margin-bottom: 30px;
}

#qa-game-over-layer .overlay-stats { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 0 0 14px; }
#qa-game-over-layer .overlay-stat { display: flex; align-items: center; gap: 10px; }
#qa-game-over-layer .overlay-stat-icon { width: 32px; height: 32px; color: #c9803f; }
#qa-game-over-layer .overlay-stat-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#qa-game-over-layer .overlay-stat-label { font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }
#qa-game-over-layer .overlay-stat-value { font-size: 1.5em; font-weight: 700; color: var(--nd-white); font-family: var(--nd-font-display); }

#qa-game-over-layer .overlay-buttons { flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
#qa-game-over-layer .overlay-btn-label { font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
#qa-game-over-layer .overlay-btn-play {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--nd-white);
    flex-shrink: 0;
}
#qa-game-over-layer .overlay-btn-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--nd-black);
}

/* ============== GAME OVER POPUP: RHYTHMUS-QUIZ (Dark-Redesign) ==============
   #quiz-game-over-layer liegt ausserhalb von #screen-quiz (globaler Overlay)
   - daher hier ueber die eindeutige ID gescopet, 1:1 nach demselben Muster
   wie #game-over-layer/#qa-game-over-layer oben. */
#quiz-game-over-layer .overlay-content {
    position: relative;
    width: min(90vw, 432px);
    max-width: min(90vw, 432px);
    box-sizing: border-box;
    background-color: var(--nd-black);
    border: 1px solid var(--nd-tan);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 52px 28px 56px;
    overflow: visible;
}
#quiz-game-over-layer .overlay-title-graphic {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -58%);
    width: 78%;
    max-width: 280px;
    height: auto;
    pointer-events: none;
}
#quiz-game-over-layer .overlay-content h2 {
    color: var(--nd-tan);
    font-family: var(--nd-font-display);
    font-size: 1.5em;
    margin-bottom: 30px;
}

#quiz-game-over-layer .overlay-stats { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 0 0 14px; }
#quiz-game-over-layer .overlay-stat { display: flex; align-items: center; gap: 10px; }
#quiz-game-over-layer .overlay-stat-icon { width: 32px; height: 32px; color: #c9803f; }
#quiz-game-over-layer .overlay-stat-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#quiz-game-over-layer .overlay-stat-label { font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }
#quiz-game-over-layer .overlay-stat-value { font-size: 1.5em; font-weight: 700; color: var(--nd-white); font-family: var(--nd-font-display); }

#quiz-game-over-layer .overlay-buttons { flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
#quiz-game-over-layer .overlay-btn-label { font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
#quiz-game-over-layer .overlay-btn-play {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--nd-white);
    flex-shrink: 0;
}
#quiz-game-over-layer .overlay-btn-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--nd-black);
}

/* ============== FOKUS-PLAYER (Audio) ============== */
.focus-player-content { position: relative; padding: 44px 30px 34px; background-color: var(--nd-box); border: 1px solid var(--nd-hairline); border-radius: 24px; }
.focus-player-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: var(--nd-tan); font-size: 0.95em; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.focus-player-art { width: 150px; height: 150px; border-radius: 20px; background-size: cover; background-position: center; margin: 0 auto 20px; position: relative; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.focus-player-art-icon { position: absolute; bottom: 10px; right: 10px; color: var(--nd-tan); font-size: 1.1em; }

.focus-player-content .focus-player-title { margin: 0 0 4px; font-family: var(--nd-font-display); font-weight: 700; font-size: 1.3em; color: var(--nd-white); }
.focus-player-content .focus-player-subtitle { margin: 0 0 26px; font-family: var(--nd-font-body); font-size: 0.85em; color: var(--nd-muted); }

.focus-player-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.focus-player-content .focus-time { font-family: var(--nd-font-body); font-size: 0.72em; min-width: 30px; color: var(--nd-muted); }
.focus-player-content .focus-seek { flex: 1; accent-color: var(--nd-brown); }

.focus-player-controls { display: flex; align-items: center; justify-content: center; gap: 26px; }
.focus-player-content .focus-control-btn { background: none; border: none; font-size: 1.3em; color: var(--nd-tan); cursor: pointer; padding: 8px; }
.focus-player-content .focus-play-pause-btn { width: 62px; height: 62px; border-radius: 50%; background: var(--nd-white); color: var(--nd-box); border: none; font-size: 1.3em; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }

/* ============== DASHBOARD (Redesign 2026) ============== */

#screen-dashboard { background: var(--nd-black); }

/* --- Hero-Header mit Hintergrundbild --- */
.db-hero { position: relative; height: 480px; background-size: cover; background-position: center top; display: flex; align-items: flex-start; overflow: hidden; }
.db-hero-content { position: relative; z-index: 1; padding: 76px 20px 0 36px; color: var(--nd-white); width: 100%; box-sizing: border-box; }

.db-hero-content h1 { margin: 0 0 14px; font-family: var(--nd-font-display); font-size: 2.25em; line-height: 1.0; letter-spacing: -0.01em; }
.db-hero-content h1 .db-hero-light { font-weight: 300; }
.db-hero-content h1 .db-hero-bold { font-weight: 700; }
.db-hero-subtitle { margin: 0; font-family: var(--nd-font-display); font-weight: 700; font-style: italic; font-size: 0.75em; color: var(--nd-tan); }

/* --- Body / Sections --- */
.dashboard-body { background: var(--nd-black); padding-top: 0; }
.dashboard-section { margin-bottom: 22px; }
.dashboard-section-title { margin: 0 0 12px; font-family: var(--nd-font-display); font-weight: 700; font-size: 1.2em; color: var(--nd-tan); }
.week-section .dashboard-section-title { font-size: 1.5em; padding-left: 16px; }

/* --- Dein letzter Rhythmus --- */
.continue-section { margin-top: -134px; position: relative; z-index: 2; }
.continue-card { background: var(--nd-box); border: 1px solid rgba(234,198,179,0.5); border-radius: 20px; padding: 20px 16px 16px; }
.continue-card .dashboard-section-title { margin: 0 0 18px; font-size: 1.5em; }
.continue-card-row { display: flex; align-items: center; gap: 14px; }
.continue-card-icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: flex-start; }
.continue-card-icon .icon-mask { width: 1.6em; height: 1.6em; color: var(--nd-tan); }
.continue-card-text { flex: 1; min-width: 0; }
.continue-card-text h3 { margin: 0 0 2px; font-family: var(--nd-font-display); font-weight: 700; font-size: 1.15em; color: var(--nd-white); }
.continue-card-text p { margin: 0 0 10px; font-family: var(--nd-font-body); font-size: 12px; color: var(--nd-white); }
.continue-progress-track { display: flex; gap: 4px; height: 4px; }
.continue-progress-segment { flex: 1; height: 100%; border-radius: 3px; background: #ffffff; }
.continue-progress-segment.done { background: var(--nd-brown); }
.continue-play-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--nd-white); color: var(--nd-box); font-size: 0.95em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease; }
.continue-play-btn:hover { transform: scale(1.06); }

/* --- Deine Woche --- */
.week-days { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 14px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.week-day-label { font-family: var(--nd-font-body); font-size: 0.7em; font-weight: 600; color: var(--nd-white); letter-spacing: 0.03em; }
.week-day-circle { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8em; border: 2px solid var(--nd-tan); color: var(--nd-tan); }
.week-day-circle.empty { background: transparent; }
.week-day-circle.done, .week-day-circle.today { background: var(--nd-brown); border-color: var(--nd-tan); color: transparent; }
.week-day-circle.done i, .week-day-circle.today i { display: none; }
.week-day-circle.done::after, .week-day-circle.today::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    -webkit-mask-image: url('icons/i_djembe.svg');
    mask-image: url('icons/i_djembe.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.week-total { display: flex; align-items: center; gap: 10px; background: var(--nd-box); border-radius: 14px; padding: 14px 16px; font-family: var(--nd-font-body); font-size: 0.85em; color: var(--nd-white); }
.week-total .icon-mask { color: var(--nd-tan); width: 1.14em; height: 1.14em; }
.week-total-label { flex: 1; white-space: nowrap; font-size: 12px; }
.week-total strong { color: var(--nd-tan); font-family: var(--nd-font-display); font-weight: 700; font-size: 18px; }

/* --- Fokus & Entspannung --- */
.focus-card { position: relative; display: block; width: 100%; height: 190px; border: none; border-radius: 20px; padding: 0; cursor: pointer; background-size: cover; background-position: center; overflow: hidden; text-align: left; font-family: inherit; font-size: 16px; }
.focus-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.8) 100%); }
.focus-card-text { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: var(--nd-white); }
.focus-card-text h3 { margin: 0 0 3px; font-family: var(--nd-font-display); font-weight: 700; font-size: 24px; color: var(--nd-tan); }
.focus-card-text p { margin: 0; font-family: var(--nd-font-body); font-size: 12px; color: var(--nd-white); }
.focus-play-icon { position: absolute; right: 16px; bottom: 16px; z-index: 1; color: var(--nd-tan); display: flex; align-items: center; justify-content: center; }
.focus-play-icon .icon-mask { width: 1.6em; height: 1.6em; }

/* --- Rhythmus-Spiele Promo --- */
.games-promo-card { position: relative; display: flex; align-items: center; text-align: left; width: 100%; height: 190px; border: 1px solid rgba(234,198,179,0.5); border-radius: 20px; padding: 0 18px; cursor: pointer; font-family: inherit; font-size: 16px; background-size: cover; background-position: center; overflow: hidden; box-sizing: border-box; }
.games-promo-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.games-promo-icon { color: #ffffff; margin-bottom: 0; }
.games-promo-icon .icon-mask { width: 2.375em; height: 2.375em; }
.games-promo-text { color: var(--nd-white); max-width: 250px; }
.games-promo-text h3 { margin: 0 0 4px; font-family: var(--nd-font-display); font-weight: 700; font-size: 24px; color: var(--nd-tan); }
.games-promo-text p { margin: 0; font-family: var(--nd-font-body); font-size: 12px; color: var(--nd-white); line-height: 1.4; }

#screen-spiele { background: var(--nd-black); }
.spiele-body { background: var(--nd-black); padding-top: 24px; }

.games-list { display: flex; flex-direction: column; gap: 20px; margin-top: -170px; position: relative; z-index: 2; }

.game-teaser { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--light-gray); border-radius: 18px; padding: 18px; cursor: pointer; text-align: left; font-family: inherit; width: 100%; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.game-teaser:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(90,74,58,0.1); }


.game-card { position: relative; display: block; width: 100%; height: 180px; box-sizing: border-box; background-color: var(--nd-box); background-size: cover; background-position: center; border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 24px; overflow: hidden; padding: 60px 20px 20px; text-align: left; font-family: inherit; cursor: pointer; transition: transform 0.15s ease; }
.game-card:hover { transform: translateY(-2px); }
.game-card-icon { position: relative; z-index: 1; display: block; width: 28px; height: 28px; margin-bottom: 10px; color: #ffffff; }
.game-card-text { position: relative; z-index: 1; }
.game-card-text h3 { margin: 0 0 10px; font-family: var(--nd-font-display); font-weight: 300; font-size: 32px; line-height: 1.05; color: #ffffff; }
.game-card-text h3 strong { font-weight: 700; }
.game-card-text p { margin: 0; font-family: var(--nd-font-body); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff; }

/* ============== GRUNDLAGEN (Redesign 2026) ============== */

#screen-grundlagen { background: var(--nd-black); }

/* --- Hero-Header mit Hintergrundbild --- */
.bx-hero { position: relative; height: 400px; background-size: cover; background-position: center top; display: flex; align-items: flex-start; overflow: hidden; }
.bx-hero-content { position: relative; z-index: 1; padding: 76px 20px 0 36px; color: var(--nd-white); width: 100%; box-sizing: border-box; }
.bx-hero-content h1 { margin: 0 0 14px; font-family: var(--nd-font-display); font-size: 2.25em; line-height: 1.0; letter-spacing: -0.01em; font-weight: 700; }
.bx-hero-content h1 .bx-hero-light { font-weight: 300; }
.bx-hero-content h1 .bx-hero-bold { font-weight: 700; }
.bx-hero-subtitle { margin: 0; font-family: var(--nd-font-display); font-weight: 700; font-style: italic; font-size: 0.75em; color: var(--nd-tan); }

/* Doppelpfeil-Trenner im Hero (echtes Dreieck-Icon aus icons/, rechts gespiegelt) */
.bx-hero-arrow-line { position: absolute; top: 320px; left: 36px; right: 36px; z-index: 1; display: flex; align-items: center; }
.bx-hero-arrow-icon { width: 7.5px; height: 7.5px; color: var(--nd-tan); }
.bx-hero-arrow-icon.right { transform: scaleX(-1); }
.bx-hero-arrow-track { flex: 1; height: 1px; background: var(--nd-tan); }

.grundlagen-body { background: var(--nd-black); padding-top: 6px; }

.section-block { margin: 36px 0 0; }
.section-block-title { margin: 0 0 18px; font-family: var(--nd-font-display); font-weight: 700; font-size: 1.3em; color: var(--nd-white); }

/* --- Vor dem ersten Schlag --- */
/* Bündig zum Hero-Text (36px vom Bildschirmrand); screen-inner bringt bereits 20px Padding mit, daher hier nur 16px zusätzlich */
.prep-section { margin-top: -70px; position: relative; z-index: 2; }
.prep-title { color: var(--nd-tan); font-size: 18px; padding-left: 16px; margin: 0 0 18px; position: relative; top: 15px; }
.prep-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0 14px 16px; margin-bottom: 4px; }
.prep-icon, i.prep-icon { flex-shrink: 0; width: 52.8px; height: 52.8px; margin-top: -4px; color: var(--nd-tan); font-size: 1.05em; }
.prep-text h3 { margin: 0 0 4px; font-family: var(--nd-font-body); font-weight: 700; font-size: 12px; color: var(--nd-white); }
.prep-text h3:not(:first-child) { margin-top: 18px; }
.prep-text p { margin: 0; color: var(--nd-white); font-family: var(--nd-font-body); font-size: 12px; line-height: 1.55; white-space: pre-line; }

/* --- Die richtige Haltung --- */
.haltung-panel { background: var(--nd-box); border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 24px; padding: 30px 20px 28px; }
.haltung-title { margin: 0 0 26px; text-align: center; font-family: var(--nd-font-display); font-weight: 700; font-size: 28px; color: var(--nd-tan); }
.haltung-portrait { display: block; width: 100%; max-width: 176px; height: auto; margin: 0 auto 22px; }

.posture-card { margin-bottom: 30px; }
.posture-card:last-child { margin-bottom: 0; }
.posture-heading { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: center; margin-bottom: 10px; }
.posture-heading h3 { margin: 0; font-family: var(--nd-font-display); font-weight: 700; font-size: 21px; color: var(--nd-white); text-align: center; }
.posture-tag { font-family: var(--nd-font-body); font-style: italic; font-weight: 700; font-size: 0.8em; color: var(--nd-tan); }
.posture-card > p { margin: 0 0 16px; font-family: var(--nd-font-body); font-size: 12px; line-height: 1.6; color: var(--nd-white); text-align: center; }

.callout { position: relative; background: var(--nd-black); border-top: 2px solid var(--nd-tan); border-radius: 16px; padding: 41px 16px 20px; margin-top: 32px; text-align: center; }
.callout-icon-circle { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; background: var(--nd-black); border: 1px solid var(--nd-tan); display: flex; align-items: center; justify-content: center; }
.callout-icon-circle .icon-mask { width: 22px; height: 22px; color: var(--nd-tan); }
.callout-text p { margin: 0 0 8px; font-family: var(--nd-font-body); font-size: 12px; line-height: 1.55; color: var(--nd-white); }
.callout-text p:last-child { margin-bottom: 0; }
.callout-heading { font-weight: 700; }
.callout-heading:not(:first-child) { margin-top: 20px; }

/* Box-Variante mit 1c1c1e statt Schwarz (z.B. Hand- und Armhaltung) */
/* 21px Inset = haltung-panel padding (20px) + border (1px), damit beide Boxen exakt gleich breit sind */
.callout-box { background: var(--nd-box); margin-left: 21px; margin-right: 21px; }
.callout-box .callout-icon-circle { background: var(--nd-box); }

/* --- Hand- und Armhaltung --- */
.hha-title { margin: 0 0 14px; text-align: center; font-family: var(--nd-font-display); font-weight: 700; font-size: 28px; color: var(--nd-tan); }
.arrow-divider { display: flex; align-items: center; margin: 0 0 28px; }
.arrow-divider + .prep-title { margin-top: -20px; }
.haltung-circles { display: flex; justify-content: center; gap: 10px; margin: 0 21px 26px; }
.haltung-circles img { flex: 1; min-width: 0; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; object-fit: cover; border: 1px solid var(--nd-tan); }

/* --- Die drei Grundschläge --- */
.strokes-panel { background: var(--nd-box); border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 24px; padding: 0 20px 28px; text-align: center; }
.strokes-icon { width: 50px; height: 50px; margin: 15px auto 5px; display: flex; align-items: center; justify-content: center; color: var(--nd-tan); }
.strokes-icon .icon-mask { width: 100%; height: 100%; }
.strokes-heading { margin: 0 0 16px; font-family: var(--nd-font-display); font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--nd-tan); }
.strokes-heading + .arrow-divider { margin: 0 0 20px; }
.strokes-intro { font-family: var(--nd-font-body); font-size: 12px; line-height: 1.6; color: var(--nd-white); margin: 0 0 32px; }
.strokes-intro strong { color: var(--nd-white); }

.strokes-inner-wrap { position: relative; margin-top: 32px; }
.strokes-inner-box { background: var(--nd-black); border-top: 2px solid var(--nd-tan); border-radius: 16px; overflow: hidden; padding-top: 25px; padding-bottom: 20px; }

.stroke-showcase { position: relative; min-height: 260px; margin: 0; background-color: transparent; background-repeat: no-repeat; background-position: bottom right; background-size: 151.5px 228px; text-align: left; }
.stroke-showcase::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(to right, rgba(234, 198, 179, 0) 0%, rgba(234, 198, 179, 0) 60%, rgba(234, 198, 179, 1) 80%, rgba(234, 198, 179, 1) 100%); }

.stroke-showcase-box { position: relative; z-index: 1; max-width: 62%; min-width: 0; padding: 20px 14px 20px 18px; display: flex; flex-direction: column; }
.stroke-showcase-box h3 { margin: 0; font-family: var(--nd-font-display); font-weight: 700; font-size: 28px; color: var(--nd-tan); }
.stroke-showcase-subtitle { margin: 30px 0 12px; font-family: var(--nd-font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nd-white); white-space: nowrap; }
.stroke-showcase-box p:not(.stroke-showcase-subtitle) { margin: 0 0 16px; width: 85%; font-family: var(--nd-font-body); font-size: 12px; line-height: 1.55; color: var(--nd-white); }
.stroke-showcase-box p strong { color: var(--nd-white); }
.stroke-video-btn { margin-top: auto; align-self: flex-start; }

.stroke-video-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--nd-brown); color: var(--nd-tan); font-family: var(--nd-font-body); font-weight: 700; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; border: none; padding: 6px 6px 6px 20px; border-radius: 30px; cursor: pointer; transition: transform 0.15s ease; }
.stroke-video-btn i { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--nd-white); color: var(--nd-box); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8em; }
.stroke-video-btn:hover { transform: translateY(-1px); }
.stroke-video-btn:disabled { opacity: 0.75; cursor: default; transform: none; }


/* --- CTA --- */
.grundlagen-cta { position: relative; margin-top: 34px; padding: 26px 22px; border-radius: 24px; overflow: hidden; background-color: var(--nd-box); border: 1px solid rgba(234, 198, 179, 0.5); background-size: 55%; background-repeat: no-repeat; background-position: right -30px bottom -30px; min-height: 190px; box-sizing: border-box; }
.grundlagen-cta-icon, .grundlagen-cta h3, .grundlagen-cta > p, .grundlagen-cta-btn { position: relative; z-index: 1; }
.grundlagen-cta-icon { width: 36px; height: 36px; margin-bottom: 10px; color: var(--nd-tan); }
.grundlagen-cta-icon .icon-mask { width: 100%; height: 100%; }
.grundlagen-cta h3 { margin: 0 0 8px; font-family: var(--nd-font-display); font-weight: 700; font-size: 28px; color: var(--nd-tan); max-width: 65%; }
.grundlagen-cta > p { margin: 0; font-family: var(--nd-font-body); font-size: 12px; color: var(--nd-white); line-height: 1.55; max-width: 62%; }
.grundlagen-cta-btn { position: absolute; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%; background: var(--nd-white); color: var(--nd-box); border: none; display: flex; align-items: center; justify-content: center; font-size: 1.1em; cursor: pointer; z-index: 1; transition: transform 0.15s ease; }
.grundlagen-cta-btn:hover { transform: scale(1.06); }

/* ============== LERNEN / PRACTICE: HERO, SUCHE, FILTER, RHYTHMUS-KARTEN ============== */
#screen-lernen { background: var(--nd-black); }
/* Verlauf statt Vollton: oben (Höhe der Suchfeld-Oberkante) komplett transparent,
   damit das Hero-Bild durchscheint; ab der Höhe zwischen Suchfeld und Buttons voll schwarz. */
.lernen-body { background: linear-gradient(to bottom, transparent 22px, var(--nd-black) 96px); padding-top: 22px; margin-top: -190px; position: relative; z-index: 2; }

/* Hero-Variante: Eyebrow-Subtitle steht hier ÜBER der Headline statt darunter */
#screen-lernen .bx-hero-subtitle { margin-bottom: 10px; }

.search-bar { display: flex; align-items: center; gap: 10px; width: 75%; margin: 0 auto 16px; background: #fff; border: none; border-radius: 999px; padding: 16px 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); box-sizing: border-box; }
.search-bar i { color: var(--dark-gray); }
.search-bar input { border: none; outline: none; flex: 1; min-width: 0; font-size: 1em; background: transparent; color: var(--nd-brown); font-family: var(--nd-font-body); }

.level-filter { display: flex; gap: 8px; width: 75%; margin: 0 auto 28px; }
.filter-chip { flex: 1 1 0; padding: 10px 0; border: 2.5px solid var(--nd-tan); border-radius: 24px; background: transparent; color: var(--nd-tan); font-weight: 700; font-size: 0.85em; font-family: var(--nd-font-body); cursor: pointer; white-space: nowrap; transition: all 0.2s ease; }
.filter-chip.active, .filter-chip:hover { background: var(--nd-brown); color: var(--nd-white); }

.rhythm-carousel { position: relative; margin: 0 -20px; }
.rhythm-list {
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 20px 40px;
}
.rhythm-list::-webkit-scrollbar { display: none; }

/* Kartenbreite im Karussell: ~80% sichtbar, damit die Nachbarkarten links/rechts
   angeschnitten hereinragen (Peek-Effekt) und man den Swipe erahnt. */
.rhythm-card {
    position: relative;
    overflow: visible;
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: center;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--nd-box);
    border: 1px solid rgba(234, 198, 179, 0.5);
    border-radius: 28px;
    padding: 20px 20px 30px;
    text-align: center;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}
/* Level-Glow: gleiche Technik wie .quiz-answer-btn.correct/.wrong (Farbe
   feathert per radial-gradient von den Raendern rein, Boxmitte bleibt frei).
   ellipse statt circle, weil die Karte hochkant ist - eine Kreisform wuerde
   bei diesem Seitenverhaeltnis nur oben/unten sichtbar sein statt rundum.
   1. Wert = wo Transparenz endet/Farbe zu erscheinen beginnt (hoeher = Glow
   setzt erst naeher am Rand ein, schmalerer Ring). 2. Wert = wo die Farbe
   voll deckend ist (niedriger, naeher am 1. Wert = duenner/schaerferer
   Ring; hoeher = weicherer, breiterer Verlauf). */
.rhythm-card.level-1 {
    background: radial-gradient(ellipse, transparent 80%, var(--nd-green) 105%), var(--nd-box);
    border-color: var(--nd-green);
}
.rhythm-card.level-2 {
    background: radial-gradient(ellipse, transparent 80%, var(--nd-yellow) 105%), var(--nd-box);
    border-color: var(--nd-yellow);
}
.rhythm-card.level-3 {
    background: radial-gradient(ellipse, transparent 80%, var(--nd-red) 105%), var(--nd-box);
    border-color: var(--nd-red);
}

.rhythm-card-icon { width: 60px; height: 60px; color: var(--nd-tan); margin-bottom: 20px; }

/* Einzeilig + Ticker: garantiert gleiche Kartenhöhe unabhängig von Textlänge.
   Name & Herkunft laufen bei Overflow als Ticker, Alias wird statt dessen nur abgeschnitten. */
.rhythm-card-name, .rhythm-card-meta-value.meta-origin {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}
.rhythm-card-alias {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
}
.marquee-track { display: inline-flex; }
.marquee-seg { padding-right: 28px; white-space: nowrap; }
.is-ticking { text-align: left; }
.is-ticking .marquee-track { animation: card-ticker var(--marquee-duration, 8s) linear infinite; }
@keyframes card-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rhythm-card-name { margin: 0 0 4px; font-family: var(--nd-font-display); font-weight: 800; font-size: 1.85em; line-height: 1.1; color: var(--nd-white); }
.rhythm-card-alias { margin: 0 0 22px; font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nd-tan); }

.rhythm-card-hero { width: 250px; height: 250px; margin: 0 auto 26px; }
.rhythm-card-hero-img { display: block; width: 250px; height: 250px; }

.rhythm-card-meta { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 0 4px; }
.rhythm-card-meta-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rhythm-card-meta-label { font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nd-muted); }
.rhythm-card-meta-value { font-family: var(--nd-font-display); font-weight: 700; font-size: 21px; color: var(--nd-tan); }
.rhythm-card-meta-value.meta-origin { font-size: 18px; }

.rhythm-card-level { position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--nd-box); border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 24px; padding: 10px 18px; z-index: 2; }
.rhythm-card-level .icon-mask { width: 15px; height: 15px; color: rgba(255,255,255,0.25); }
.rhythm-card-level .icon-mask.filled { color: var(--nd-tan); }

.rhythm-card.is-pending { opacity: 0.5; pointer-events: none; }
.rhythm-card-pending-tag { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: var(--nd-brown); color: var(--nd-white); font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 14px; white-space: nowrap; }

/* Infinite Karussell: Pfeile sind von Anfang an voll sichtbar, kein Deaktivieren an Rändern */
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: none; color: var(--nd-tan); display: flex; align-items: center; justify-content: center; font-size: 1.3em; cursor: pointer; z-index: 3; opacity: 1; }
.carousel-arrow-left { left: 2px; }
.carousel-arrow-right { right: 2px; }

.empty-state { text-align: center; color: var(--nd-muted); padding: 40px 0; font-family: var(--nd-font-body); }

/* ============== PROFIL ============== */
/* ============== (5) STATUS / PROFIL ============== */
/* Alle Regeln auf #screen-profil gescopt, da .drum-pad & Co. von mehreren
   Screens geteilt werden (siehe Projekt-Konvention). */

#screen-profil { background: var(--nd-box); }

#screen-profil .profil-topbar {
    position: relative;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}
#screen-profil .profil-topbar h1 {
    margin: 0;
    text-align: center;
    font-family: var(--nd-font-display);
    font-weight: 700;
    font-size: 1.15em;
    color: var(--nd-white);
}

#screen-profil .profil-card { background: var(--nd-black); border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 24px; padding: 22px 18px; box-sizing: border-box; margin-bottom: 16px; }
#screen-profil .profil-card-title { margin: 0 0 20px; text-align: center; font-family: var(--nd-font-display); font-weight: 700; font-size: 1.15em; color: var(--nd-tan); }

/* Ausgabewerte (Ziffern/Zeiten/Punkte) + zugehoerige Einheit ("Tage" etc.):
   einheitlich Inter 16px, normal (nicht fett), weiß. */
#screen-profil .profil-num { font-family: var(--nd-font-body); font-size: 16px; font-weight: 400; color: var(--nd-white); }

/* Zeilen mit Spalten (Streak / Uebungszeit / Highscores) - ohne Trennlinien */
#screen-profil .profil-row { display: flex; align-items: flex-start; }
#screen-profil .profil-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 6px; box-sizing: border-box; }
#screen-profil .profil-col-label { font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
#screen-profil .profil-col-value { display: flex; align-items: center; gap: 8px; font-family: var(--nd-font-body); font-size: 16px; font-weight: 400; color: var(--nd-white); }

#screen-profil .profil-streak-icon { width: 18px; height: 18px; }
#screen-profil .profil-streak-icon.current { color: var(--nd-yellow); }
#screen-profil .profil-streak-icon.best { color: var(--nd-slap); }

/* Eingefaerbte statt umrahmte Uhr-Icons */
#screen-profil .profil-clock-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
#screen-profil .profil-clock-badge.today { color: var(--nd-green); }
#screen-profil .profil-clock-badge.week { color: var(--nd-yellow); }
#screen-profil .profil-clock-badge.month { color: var(--nd-slap); }

/* Fixe Hoehe statt fixer Breite: die drei Spiel-Logos haben unterschiedliche
   Seitenverhaeltnisse (unterschiedlich breit bei gleicher Hoehe), landen so
   aber alle exakt auf derselben Hoehe -> der Highscore-Wert darunter springt
   dadurch nicht mehr vertikal. */
#screen-profil .profil-highscore-logo-wrap { height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
#screen-profil .profil-highscore-logo { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* Lieblingsrhythmen: Tierbilder (transparenter Hintergrund) nebeneinander,
   Name in Grossbuchstaben darunter - ohne Trennlinien. */
#screen-profil .profil-favorites-row { display: flex; }
#screen-profil .profil-favorite-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 6px; box-sizing: border-box; background: none; border: none; font-family: inherit; cursor: pointer; }
#screen-profil .profil-favorite-img { width: 100%; max-width: 84px; height: 92px; object-fit: contain; }
#screen-profil .profil-favorite-name { font-family: var(--nd-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
#screen-profil .profil-favorites-empty { display: none; margin: 0; text-align: center; font-family: var(--nd-font-body); font-size: 0.85em; color: var(--nd-white); opacity: 0.7; line-height: 1.5; padding: 10px 6px 0; }
#screen-profil .profil-favorites-row:empty + .profil-favorites-empty { display: block; }

/* Kurs-Karte & Rechtliches (Status-Seite) */
#screen-profil .profil-info-text { margin: 0 0 18px; text-align: center; font-family: var(--nd-font-body); font-size: 14px; line-height: 1.55; color: var(--nd-white); opacity: 0.85; }
#screen-profil .profil-link-btn { display: block; width: fit-content; margin: 0 auto; padding: 11px 26px; border-radius: 999px; background: var(--nd-tan); color: var(--nd-black); font-family: var(--nd-font-body); font-weight: 700; font-size: 13px; text-decoration: none; }
#screen-profil .profil-legal { padding: 8px 0 24px; text-align: center; font-family: var(--nd-font-body); font-size: 11px; line-height: 1.8; color: rgba(255, 255, 255, 0.5); }
#screen-profil .profil-legal p { margin: 0; }
#screen-profil .profil-legal a { color: rgba(255, 255, 255, 0.7); text-decoration: underline; }
#screen-profil .profil-legal-links span { margin: 0 8px; }

/* ============== RHYTHMUS-DETAIL: HEADER & INFOS ============== */
#screen-rhythm-detail {
    background: var(--nd-black);
    /* Schlag-Farben (Bass/Ton/Slap) + weitere Alt-Variablen lokal auf's neue
       Dark-Theme umgebogen. Nur innerhalb dieses Screens gültig (CSS-Custom-
       Properties vererben sich an Kinder), Games/Quiz nutzen z.B. .djembe-pad
       ebenfalls, bleiben aber unangetastet, bis die dran sind. */
    --nd-bass: #210909;
    --nd-tone: #8f5629;
    --nd-slap: #dfb164;
    --pause-color: #39393b;
    --light-gray: rgba(255, 255, 255, 0.18);
    --dark-gray: rgba(255, 255, 255, 0.55);
    --accent-olive: var(--nd-tan);
}
/* .pulse-dot.active nutzte bisher --primary-text, das hier lokal auf
   nd-white gebogen wurde. Jetzt entfaellt die Variable komplett (globaler
   Wert ist nd-brown) - deshalb hier direkt gescopt auf nd-white gesetzt,
   damit "Rhythmus sehen" optisch unveraendert bleibt. (.djembe-skin brauchte
   keine eigene Regel: dessen Border wird in allen 3 Screens - Rhythmus-
   Detail/F&A/Quiz - ohnehin per border:none überschrieben, war totes CSS.) */
#screen-rhythm-detail .pulse-dot.active { background: var(--nd-white); }
/* Level-Gradient: Grün ist die Grundfarbe (Level 1), .level-2/.level-3 auf
   #screen-rhythm-detail (per JS in openRhythmDetail() gesetzt, siehe main.js)
   biegen ihn auf Gelb/Rot um - dieselben Farben wie F&A-Punkte/Quiz-Buttons. */
.rhythm-hero { position: relative; text-align: center; padding: 30px 20px 34px; background: linear-gradient(180deg, var(--nd-green) 0%, var(--nd-black) 85%); }
#screen-rhythm-detail.level-2 .rhythm-hero { background: linear-gradient(180deg, var(--nd-yellow) 0%, var(--nd-black) 85%); }
#screen-rhythm-detail.level-3 .rhythm-hero { background: linear-gradient(180deg, var(--nd-red) 0%, var(--nd-black) 85%); }
.back-btn { position: absolute; top: 16px; left: 16px; width: 38px; height: 38px; border: none; background: none; color: var(--nd-white); font-size: 1.1em; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rhythm-hero h1 { margin: 0; font-family: var(--nd-font-display); font-weight: 800; font-size: 1.9em; letter-spacing: 0.02em; color: var(--nd-white); }
.rhythm-alias { margin: 4px 0 6px; font-family: var(--nd-font-body); font-weight: 700; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nd-tan); overflow: hidden; white-space: nowrap; width: 100%; box-sizing: border-box; }

.rd-nav-row { display: flex; align-items: center; justify-content: center; gap: 26px; }
.rd-nav-arrow { flex-shrink: 0; width: 34px; height: 34px; border: none; background: none; color: var(--nd-tan); font-size: 1.2em; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rhythm-badge { width: 50%; aspect-ratio: 1 / 1; flex-shrink: 0; }
.rhythm-badge img { width: 100%; height: 100%; display: block; }

.rhythm-detail-inner { padding-top: 26px; margin-top: -41px; position: relative; z-index: 2; background: var(--nd-black); }
.rhythm-meta-row { display: flex; justify-content: space-between; text-align: center; padding: 0 16px; margin-bottom: 4px; }
.rhythm-meta-row > div { flex: 1; min-width: 0; }
.rhythm-meta-row > div:first-child { text-align: left; padding-left: 10px; }
.rhythm-meta-row > div:last-child { text-align: right; padding-right: 10px; }
.meta-label { display: block; font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; color: var(--nd-white); text-transform: uppercase; margin-bottom: 6px; }
.rhythm-meta-row strong { font-family: var(--nd-font-display); font-weight: 700; font-size: 1.2em; color: var(--nd-tan); }
.rhythm-meta-row strong#rd-origin { display: block; overflow: hidden; white-space: nowrap; width: 100%; box-sizing: border-box; }


.rd-info-block { margin-bottom: 60px; }
#screen-rhythm-detail .section-block { margin-top: 16px; }
#rd-lyrics-block.section-block { margin-top: 4px; }
#screen-rhythm-detail .arrow-divider { margin: 0 16px 28px; }
#screen-rhythm-detail .prep-title { margin-left: 10px; }
#screen-rhythm-detail .prep-icon { margin-left: 10px; }
#screen-rhythm-detail .prep-text p { color: #c0c0c0; font-weight: 300; }
#screen-rhythm-detail .prep-text { padding-right: 20px; box-sizing: border-box; }
#rd-lyrics-block .prep-title { top: 0; margin-bottom: 10px; }
#rd-lyrics-block .prep-card { padding-top: 6px; }
#rd-lyrics-block .prep-icon { -webkit-mask-size: 50%; mask-size: 50%; }
.rd-translation { margin-top: 10px !important; font-size: 0.92em; }

/* ============== DJEMBE-PLAYER (Intro & Begleitung) ============== */
.djembe-player { background: none; padding: 24px 20px 20px; border-radius: 0 0 24px 24px; margin-top: 0; }
.global-controls { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.tempo-control { display: flex; flex-direction: column; gap: 5px; }
.tempo-labels { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; transform: translateY(10px); }
.tempo-labels span:first-child { font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; color: var(--nd-white); text-transform: uppercase; transform: translateX(5px); }
.tempo-labels strong { font-family: var(--nd-font-display); font-weight: 700; font-size: 1.2em; color: var(--nd-tan); }
.tempo-labels .bpm-unit { font-family: var(--nd-font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; color: var(--nd-white); text-transform: uppercase; }
.bpm-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #fff; cursor: pointer; }
.bpm-input::-webkit-slider-runnable-track { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: transparent; }
.bpm-input::-moz-range-track { width: 100%; height: 6px; border-radius: 3px; background: #fff; border: none; }
.bpm-input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--nd-brown); }
.bpm-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--nd-brown); border: 3px solid var(--nd-box); cursor: pointer; }
.bpm-input::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; background: var(--nd-brown); border: 3px solid var(--nd-box); cursor: pointer; }

/* Eine durchgehende Pille statt vier einzelner Kästchen, aktive Segmente
   (Sticking rechts/links) heben sich als zusammenhängender heller Block ab. */
/* Drei getrennte "Kapseln" statt einer durchgehenden Leiste: Schellen und
   DunDuns stehen einzeln, die zwei Hand-Buttons bilden in der Mitte eine
   eigene, etwas höhere/hervortretende Einheit (per größerer Höhe + Schatten),
   mit Trennlinie zwischen den beiden Händen. */
/* Die gesamte Leiste in drei GLEICH BREITE Drittel geteilt, ohne Zwischenraum:
   Schellen links (nur links abgerundet), Hände-Gruppe in der Mitte (flache
   Seiten, schließt bündig an, aber etwas höher als die Nachbarn -> "steht
   heraus"), DunDuns rechts (nur rechts abgerundet). Die Border der Nachbarn
   wird an der Nahtstelle weggelassen, die Hände-Gruppe liefert dort die
   durchgehende Trennlinie. */
.toolbar-controls { display: flex; align-items: center; }
.toolbar-btn { flex: 1; height: 42px; background: #000; border: 2px solid var(--nd-tan); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; padding: 5px; position: relative; font-family: inherit; }
#rd-btn-metronome { border-radius: 26px 0 0 26px; border-right: none; }
#rd-btn-duns { border-radius: 0 26px 26px 0; border-left: none; }
.toolbar-btn .icon-mask { width: 20px; height: 20px; color: var(--nd-tan); transition: color 0.2s ease; }
#rd-btn-metronome .icon-mask, #rd-btn-duns .icon-mask { width: 24px; height: 24px; }
.toolbar-btn i { font-size: 1.2em; color: var(--nd-tan); transition: color 0.2s ease; }
.toolbar-btn i.icon-mirrored, .toolbar-btn .icon-mask.icon-mirrored { transform: scaleX(-1); }
.toolbar-btn[data-state="on"] { background-color: var(--nd-brown); }
.toolbar-btn[data-state="on"] i, .toolbar-btn[data-state="on"] .icon-mask { color: var(--nd-white); }
.toolbar-text { display: none; }

.toolbar-hands-group { flex: 1; display: flex; align-items: center; height: 48px; background: #000; border: 2px solid var(--nd-tan); border-radius: 24px; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,0.35); position: relative; z-index: 2; }
.toolbar-hands-group .toolbar-btn { flex: 1; width: auto; height: 100%; background: none; border: none; border-radius: 0; }
.toolbar-hands-group .toolbar-btn:first-child { border-right: 2px solid var(--nd-tan); }
.toolbar-hands-group .toolbar-btn[data-state="on"] { background-color: var(--nd-brown); }

.volume-toggle-btn { background: none; border: none; padding: 0; outline: none; display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--nd-white); cursor: pointer; align-items: center; justify-content: center; }
#rd-btn-duns[data-state="on"] #rd-vol-btn-dun { display: flex; }

/* Toggle-Switch (Stimme an/aus je Begleitungsspur) */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.2); transition: 0.3s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
.switch input:checked + .slider { background-color: var(--nd-brown); }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* Begleitungs-Spuren & Notengitter */
.rhythm-tracks-container { margin-bottom: 4px; }
.rhythm-track { margin-bottom: 22px; }
.rhythm-track-title { margin: 0 0 8px; font-size: 14px; color: var(--nd-white); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; display: flex; justify-content: space-between; align-items: center; }
.title-controls { display: flex; align-items: center; gap: 10px; position: relative; }
.title-controls .volume-toggle-btn { position: static; width: 22px; height: 22px; color: var(--nd-tan); transform: none; }

.beat-header, .note-grid { display: flex; flex-wrap: wrap; gap: 0; font-family: 'JetBrains Mono', 'Courier New', monospace; }
.beat-header { font-size: 0.72em; color: var(--nd-tan); font-weight: bold; margin-bottom: 2px; }
.beat-header-box { flex-grow: 1; text-align: center; }
.grid-16 .beat-header-box, .grid-16 .note-box { width: 6.25%; }
.grid-12 .beat-header-box, .grid-12 .note-box { width: 8.333%; }
.note-box { flex-grow: 1; text-align: center; border-bottom: 3px solid var(--light-gray); padding: 6px 0; font-size: 1.05em; font-weight: bold; color: var(--nd-white); display: flex; flex-direction: column; align-items: center; transition: border-color 0.1s ease, color 0.1s ease; }
.note-box.active { border-bottom-color: var(--nd-tan); color: var(--nd-tan); }
.note-box.is-apel { color: rgba(255,255,255,0.35); border-color: var(--light-gray); }
.sticking-char { display: none; font-size: 0.65em; color: var(--accent-olive); margin-top: 3px; font-weight: bold; }
.djembe-player.show-sticking .sticking-char { display: block; }

.djembe-play-intro-btn, .djembe-play-accompaniment-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; background: var(--nd-brown); color: var(--nd-white); border: none; border-radius: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; transition: background-color 0.2s ease; min-height: 44px; width: 100%; margin-top: 15px; font-family: var(--nd-font-body); font-size: 0.95em; }
.djembe-play-intro-btn:hover, .djembe-play-accompaniment-btn:hover { background: var(--nd-tan); color: #2a1c12; }
.djembe-play-intro-btn.stop, .djembe-play-accompaniment-btn.stop { background: var(--accent-rust); }
.djembe-play-intro-btn:disabled, .djembe-play-accompaniment-btn:disabled { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); cursor: not-allowed; }
.play-btn-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--nd-white); color: var(--nd-box); font-size: 0.7em; display: flex; align-items: center; justify-content: center; }

/* Schritt-Play-Button im gleichen Stil wie die Bass/Ton/Slap-Video-Buttons auf
   der Basics-Seite (.stroke-video-btn): keine volle Breite, Pille mit
   eingebettetem weißen Icon-Kreis rechts. */
#screen-rhythm-detail .step-play-btn { display: flex; align-items: center; justify-content: center; width: 230px; box-sizing: border-box; margin: 20px auto 0; padding: 0 16px; height: 48px; text-transform: uppercase; color: var(--nd-white); font-size: 12px; border-radius: 24px; background: var(--nd-brown); }
#screen-rhythm-detail .step-play-btn:hover { background: #402c21; color: var(--nd-white); }
#screen-rhythm-detail .step-play-btn.stop { background: var(--accent-rust); }
#screen-rhythm-detail .step-play-btn .play-btn-icon { display: none; }

.intro-mode-toggle-container { margin: 16px 0; }
.intro-mode-toggle { display: none; }
.segmented-toggle { display: flex; position: relative; width: 100%; background-color: var(--nd-box); border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 20px; padding: 4px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.segmented-toggle::before { content: ''; position: absolute; top: 4px; bottom: 4px; width: calc(50% - 4px); background-color: var(--nd-brown); border-radius: 16px; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.toggle-option { flex: 1; text-align: center; padding: 8px 0; font-size: 0.85em; font-weight: bold; z-index: 1; transition: color 0.3s ease-in-out; color: var(--nd-tan); }
.intro-mode-toggle:checked + .segmented-toggle::before { transform: translateX(100%); }
.intro-mode-toggle:not(:checked) + .segmented-toggle .toggle-option[data-value="loop"] { color: var(--nd-white); }
.intro-mode-toggle:checked + .segmented-toggle .toggle-option[data-value="chain"] { color: var(--nd-white); }

/* Collapsible-Sections (Intro / Begleitungen): abgerundete dunkle Pillen */
.collapsible-section { border: none; border-top: 2px solid #eac6b3; border-radius: 16px; margin-bottom: 16px; overflow: hidden; background: #000; }
.collapsible-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; background: #000; }
.collapsible-title { font-weight: 700; color: var(--nd-tan); font-family: var(--nd-font-display); font-size: 18px; }
.collapsible-arrow { font-size: 0.9em; color: var(--nd-tan); transition: transform 0.3s ease-out; }
.collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; padding: 0 20px; }
.collapsible-section.open .collapsible-content { max-height: 2000px; padding: 0 20px 20px; }
.collapsible-section.open .collapsible-arrow { transform: rotate(-180deg); }

/* ============== SCHRITT-HEADER (Rhythmus-Detail): Alt-Pattern, noch von Schritt 2-5 genutzt ============== */

/* ============== SCHRITT-KARTE (Rhythmus-Detail): Bild-Header + Praxis-Body ============== */
.step-card { position: relative; background: var(--nd-box); border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 24px; margin: 40px 0; }
.step-card:first-of-type { margin-top: 56px; }
.step-card + .step-card { margin-top: 96px; }
#rd-lyrics-block + .step-card { margin-top: 76px; }

/* Tab statt Pill: sitzt bündig auf der Container-Oberkante (bottom: 100%),
   oben abgerundet, unten eckig, damit sie nahtlos in die Card übergeht. */
.step-badge { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 80%; box-sizing: border-box; text-align: center; background: var(--nd-slap); border: none; border-radius: 20px 20px 0 0; padding: 10px 18px; font-family: var(--nd-font-body); font-weight: 700; font-size: 14px; letter-spacing: normal; text-transform: uppercase; color: #000; z-index: 3; }

.step-hero { position: relative; height: 160px; background-size: cover; background-position: center top; border-radius: 24px 24px 0 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 20px 24px 22px; text-align: center; }
.step-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--nd-box) 100%); pointer-events: none; }
.step-hero-title { position: relative; z-index: 1; margin: 0 0 6px; font-family: var(--nd-font-display); font-weight: 800; font-size: 1.6em; color: var(--nd-white); }
.step-hero-subtitle { position: relative; z-index: 1; margin: 0; max-width: 280px; font-family: var(--nd-font-body); font-size: 0.78em; line-height: 1.45; color: rgba(255,255,255,0.85); }

/* Schritt 5: ganze Hero ist der klickbare CTA-Button, Titel/Subtitle oben,
   runder Play-Button unten (per margin-top:auto in der Flex-Column nach unten
   gedrückt), kein eigener Body darunter. */
.step-hero-cta { height: auto; justify-content: flex-start; padding: 46px 24px 25px; border: none; width: 100%; cursor: pointer; font-family: inherit; border-radius: 24px; }
.step-hero-cta::after { content: none; }
.step-hero-cta .step-hero-title { margin-bottom: 8px; }
.step-hero-play-btn { position: relative; z-index: 1; margin-top: 20px; width: 60px; height: 60px; border-radius: 50%; background: var(--nd-white); color: var(--nd-box); display: flex; align-items: center; justify-content: center; font-size: 1.2em; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }

/* ============== PILL-TABS (Modus-/Stimmen-Umschalter) ============== */
.pill-tabs { display: flex; background: transparent; border: 1px solid var(--nd-tan); border-radius: 22px; padding: 4px; gap: 4px; margin-bottom: 20px; }
.pill-tab { flex: 1; border: none; background: transparent; padding: 10px 0; border-radius: 18px; font-family: var(--nd-font-body); font-weight: 700; font-size: 0.85em; color: var(--nd-tan); cursor: pointer; transition: all 0.2s ease; }
.pill-tab.active { background: var(--nd-brown); color: var(--nd-white); }
.pill-tab.disabled { opacity: 0.45; cursor: not-allowed; }
.pill-tabs-sm { max-width: 260px; margin: 0 auto 20px; }

/* ============== SCHRITT 1: BOX-NOTATION ============== */
.practice-panel { padding: 24px 20px 20px; margin-bottom: 12px; }

.box-grid { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.box-row { display: flex; align-items: center; gap: 12px; }
.box-row-number { width: 20px; flex-shrink: 0; text-align: center; font-weight: bold; color: var(--nd-muted); }
.box-row-cells { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.box-row-cells.cols-3 { grid-template-columns: repeat(3, 1fr); }
.box-cell { height: 46px; border-radius: 10px; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; color: #fff; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.box-cell.box-bass { background: rgba(97, 41, 21, 0.4); border-color: var(--nd-bass); }
.box-cell.box-tone { background: rgba(143, 85, 41, 0.4); border-color: var(--nd-tone); }
.box-cell.box-slap { background: rgba(223, 176, 99, 0.4); border-color: var(--nd-slap); }
.box-cell.box-pause { background: rgba(57, 57, 59, 0.4); border-color: var(--pause-color); color: #fff; }
.box-cell.active { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(234,198,179,0.3); }
.box-cell.muted { background: rgba(57, 57, 59, 0.4); border-color: var(--pause-color); color: rgba(255, 255, 255, 0.5); }

.box-legend { display: flex; justify-content: center; gap: 16px; margin-bottom: 16px; font-size: 12px; color: #c0c0c0; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; margin-right: 4px; vertical-align: middle; }
.legend-dot.box-bass { background: var(--nd-bass); }
.legend-dot.box-tone { background: var(--nd-tone); }
.legend-dot.box-slap { background: var(--nd-slap); }

/* ============== SCHRITT 3: HERO-PROMO-KARTE ============== */

/* ============== SCHRITT 1: CIRCLE-LOOP ============== */
.circle-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin: 8px 0 18px; }
.circle-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 308px;
    height: 308px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    opacity: 0.15;
    -webkit-mask-image: url('icons/bg-circle.svg');
    mask-image: url('icons/bg-circle.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
    z-index: 0;
}
.circle-svg { position: relative; z-index: 1; width: 286px; height: 286px; max-width: 100%; }
.circle-track { fill: none; stroke: var(--light-gray); stroke-width: 2; }
.circle-tick { stroke: var(--accent-olive); stroke-width: 2; opacity: 0.45; }
.circle-dot { stroke: var(--nd-box); stroke-width: 2; transition: r 0.12s ease; }
.circle-dot.box-bass { fill: var(--nd-bass); }
.circle-dot.box-tone { fill: var(--nd-tone); }
.circle-dot.box-slap { fill: var(--nd-slap); }
.circle-dot.box-pause { fill: var(--pause-color); }
.circle-dot.active { r: 13; }
/* Wenn ein Stimm-Typ stummgeschaltet ist, wechseln seine Punkte auf die
   Pause-Farbe - unabhängig vom eigentlichen Typ (box-bass/tone/slap), daher
   mit !important gegen die Typ-Farbe durchgesetzt. */
.circle-number { font-size: 15px; font-weight: bold; fill: var(--accent-olive); font-family: inherit; text-anchor: middle; dominant-baseline: middle; opacity: 0.8; }
.circle-center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2.2em;
    color: var(--accent-olive);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.12s ease, opacity 0.15s ease;
}
.circle-center-icon.pulse { transform: translate(-50%, -50%) scale(2); }

/* Bass/Slap/Ton/Schellen stumm-/sichtbar-schalten (Schritt 2) - kleine
   runde Mini-Buttons statt Textlabel, damit auf einen Blick klar ist,
   dass es hier eigenstaendige Ein-/Ausschalter gibt. B/S/T als Gruppe
   linksbündig, Schellen (kein Buchstabe, eigenes Icon) rechtsbündig. */
.stroke-mute-toggles { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 4px 0 20px; padding-left: 32px; }
.stroke-mute-group { display: flex; gap: 14px; }
.stroke-mute-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: #000;
    border: 2px solid var(--nd-hairline);
    cursor: pointer;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.stroke-mute-btn .icon-mask { width: 15px; height: 15px; color: var(--nd-tan); }
.stroke-mute-btn.is-muted { opacity: 0.4; }
.stroke-mute-btn.is-muted .icon-mask { color: var(--nd-muted); }
.stroke-mute-btn.is-muted .stroke-mute-label { color: var(--nd-muted); }
.stroke-mute-btn-bass { border-color: var(--nd-bass); }
.stroke-mute-btn-tone { border-color: var(--nd-tone); }
.stroke-mute-btn-slap { border-color: var(--nd-slap); }
.stroke-mute-btn-schellen { border-color: var(--accent-olive); }
.stroke-mute-btn-bass, .stroke-mute-btn-tone, .stroke-mute-btn-slap { width: auto; min-width: 34px; padding: 0 10px; border-radius: 17px; gap: 5px; }
.stroke-mute-label { font-size: 12px; font-weight: 700; color: var(--nd-tan); }

/* Step-Subtitle (Alt-Klasse, nur noch von Schritt 2-5 verwendet, bis die auch umgebaut sind) */

/* ============== SCHRITT 3: RHYTHMUS SEHEN ============== */
.pulse-strip { display: flex; justify-content: center; gap: 12px; margin: 4px 0 20px; flex-wrap: wrap; }
.pulse-group { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pulse-number { font-size: 0.75em; font-weight: bold; color: var(--dark-gray); }
.pulse-dots { display: flex; gap: 4px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--light-gray); transition: all 0.1s ease; }
.pulse-dot.active { background: var(--nd-brown); transform: scale(1.5); }

.djembe-view { display: flex; justify-content: center; margin: 8px 0 20px; }
.djembe-skin { position: relative; width: 260px; height: 250px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fffaf3, #f1e6d3); border: 6px solid var(--nd-brown); box-shadow: inset 0 0 0 3px #fff, 0 8px 18px rgba(0,0,0,0.12); }
.djembe-pad { position: absolute; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; border: 3px solid; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; background: #fff; transition: all 0.12s ease; }
.djembe-pad.bass { border-color: var(--nd-bass); color: var(--nd-bass); }
.djembe-pad.tone { border-color: var(--nd-tone); color: var(--nd-tone); }
.djembe-pad.slap { border-color: var(--nd-slap); color: var(--nd-slap); }
.djembe-pad.active.bass { background: var(--nd-bass); color: #fff; }
.djembe-pad.active.tone { background: var(--nd-tone); color: #fff; }
.djembe-pad.active.slap { background: var(--nd-slap); color: #fff; }
.djembe-pad.active { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 5px rgba(0,0,0,0.07); }

/* Rhythmus-Detail (Schritt 3): eigene Djembe-Grafik statt Kreis-Fläche, Pads
   durchgehend gefüllt statt weiß, mit innen liegendem Ring (per Pseudo-Element
   20% kleinerer Kreis, statt wie in Photoshop von Hand reinkopiert) + Hand-Icon. */
#screen-rhythm-detail .djembe-skin { width: 280px; height: 280px; background: none; border: none; box-shadow: none; }
#screen-rhythm-detail .djembe-skin::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #c0c0c0;
    -webkit-mask-image: url('icons/i_djembe-fell.svg');
    mask-image: url('icons/i_djembe-fell.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
#screen-rhythm-detail .djembe-pad { background: var(--nd-bass); border: none; z-index: 1; width: 55px; height: 55px; }
#screen-rhythm-detail .djembe-pad.tone { background: var(--nd-tone); }
#screen-rhythm-detail .djembe-pad.slap { background: var(--nd-slap); }
#screen-rhythm-detail .djembe-pad.tone { margin-top: 10px; }
/* Innerer Ring: 80% Durchmesser (= 20% kleiner), mittig, per inset statt Extra-Bild */
#screen-rhythm-detail .djembe-pad::after {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
#screen-rhythm-detail .djembe-pad.slap::after { border-color: #2a1c12; }
#screen-rhythm-detail .djembe-pad .icon-mask { position: relative; z-index: 1; width: 20px; height: 20px; color: var(--nd-tan); }
#screen-rhythm-detail .djembe-pad.slap .icon-mask { color: #2a1c12; }
/* Linke Pads = linke Hand -> Hand-Icon gespiegelt (rechte Pads bleiben Original) */
#screen-rhythm-detail .djembe-pad.left .icon-mask { transform: scaleX(-1); }

.djembe-pad.bass.left { top: 40%; left: 39%; }
.djembe-pad.bass.right { top: 40%; left: 61%; }
.djembe-pad.tone.left { top: 62%; left: 15%; }
.djembe-pad.tone.right { top: 62%; left: 85%; }
.djembe-pad.slap.left { top: 82%; left: 39%; }
.djembe-pad.slap.right { top: 82%; left: 61%; }

/* ============== FRAGE-ANTWORT-SPIEL ============== */
#screen-frageantwort { padding: 0; }

.qa-game-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 10px 0;
    box-sizing: border-box;
    overflow: hidden;
}

.qa-master-panel { width: 100%; }

/* Kleinere, gespiegelte Djembe fuer den Meister */
#qa-master-djembe { margin: 0 0 4px; }
#qa-master-djembe .djembe-skin { width: 190px; height: 183px; }
#qa-master-djembe .djembe-pad { width: 34px; height: 34px; font-size: 0.85em; }

/* Spiegelt links/rechts, damit der Meister "gegenueber" sitzt */
.qa-mirrored .djembe-pad.bass.left { left: 61%; }
.qa-mirrored .djembe-pad.bass.right { left: 39%; }
.qa-mirrored .djembe-pad.tone.left { left: 85%; }
.qa-mirrored .djembe-pad.tone.right { left: 15%; }
.qa-mirrored .djembe-pad.slap.left { left: 61%; }
.qa-mirrored .djembe-pad.slap.right { left: 39%; }

#qa-phase-label { font-size: 1.05em; font-weight: bold; color: var(--nd-brown); margin-bottom: 10px; min-height: 1.3em; }

.qa-step-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 280px; margin: 0 auto; }
.qa-step-dot { width: 13px; height: 13px; border-radius: 50%; background-color: var(--light-gray); transition: all 0.2s ease; }
.qa-step-dot.current { background-color: var(--dark-gray); transform: scale(1.3); }
.qa-step-dot.correct { background-color: var(--accent-olive); }
.qa-step-dot.partial { background-color: var(--nd-slap); }
.qa-step-dot.wrong { background-color: var(--accent-rust); }


/* ============== RHYTHMUS-QUIZ ============== */
#screen-quiz { padding: 0; }

/* Hintergrundbild wie beim Djembe Hero: auf .app-container statt .game-area,
   "bottom center" verankert das Bild-Motiv unten am Pad-/Frage-Bereich,
   unabhaengig von der tatsaechlichen Hoehe des Meister-Bereichs. */
#screen-quiz #quiz-game-screen .app-container {
    background-image: url('assets/games_bg-rhythmus-quiz.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}

/* Meister-Bereich: gleiche Pad-Optik wie #screen-rhythm-detail (Hand-Icon
   statt Buchstabe), aber statt der Fell-Maske jetzt ein echtes Hintergrundbild
   hinter den Pads - kein Text-Badge mehr (wie im Frage&Antwort-Spiel). */
.quiz-djembe-area { flex-grow: 0; padding-top: 4px; padding-bottom: 4px; justify-content: center; }

#quiz-djembe-view { margin: 4px 0; position: relative; }
#quiz-djembe-view .djembe-skin { width: 210px; height: 202px; background: none; border: none; box-shadow: none; }
#quiz-djembe-view .djembe-skin::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/games_bg-frage-antwort-djembe.webp');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}
#quiz-djembe-view .djembe-pad { background: var(--nd-bass); border: none; z-index: 1; width: 42px; height: 42px; font-size: 0.9em; }
#quiz-djembe-view .djembe-pad.tone { background: var(--nd-tone); margin-top: 8px; }
#quiz-djembe-view .djembe-pad.slap { background: var(--nd-slap); }
#quiz-djembe-view .djembe-pad::after {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
#quiz-djembe-view .djembe-pad.slap::after { border-color: #2a1c12; }
#quiz-djembe-view .djembe-pad .icon-mask { position: relative; z-index: 1; width: 16px; height: 16px; color: var(--nd-tan); }
#quiz-djembe-view .djembe-pad.slap .icon-mask { color: #2a1c12; }
#quiz-djembe-view .djembe-pad.left .icon-mask { transform: scaleX(-1); }

/* Frage-Container: gleicher Aufbau wie .callout auf der Basic-Seite
   (abgerundete Ecken, 2px Border nur oben, Icon-Kreis ragt heraus),
   eigener Scope statt .callout selbst zu aendern. Einziger Unterschied:
   Hintergrund #1c1c1e (var(--nd-box)) bei 90% Deckkraft statt var(--nd-black). */
.quiz-question-block {
    position: relative;
    background: rgba(28, 28, 30, 0.9);
    border-top: 2px solid var(--nd-tan);
    border-radius: 16px;
    padding: 41px 16px 20px;
    margin: 28px 21px 0;
    text-align: center;
}
.quiz-icon-circle {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--nd-black);
    border: 1px solid var(--nd-tan);
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiz-icon-circle .icon-mask { width: 22px; height: 22px; color: var(--nd-tan); }

.quiz-question-title {
    font-family: var(--nd-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--nd-white);
    margin: 0 0 20px;
}

.quiz-answers { display: flex; flex-direction: column; gap: 12px; }
.quiz-answer-btn {
    padding: 14px 18px;
    border-radius: 24px;
    border: 1px solid var(--nd-hairline);
    background: var(--nd-black);
    font-family: var(--nd-font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--nd-white);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.quiz-answer-btn:hover { border-color: var(--nd-tan); }

/* Feedback-Faerbung als weicher, mittiger Verlauf (radial-gradient) statt
   Vollflaechenfarbe - kommt der Photoshop-Absicht "Schein nach innen" naeher
   als ein reiner inset-box-shadow. Werte zum Nachjustieren:
   - Stop 1 (hier 40%) = Groesse der dunklen Buttonmitte, die frei bleibt
   - Stop 2 (hier 140%) = wie weit die Farbe von aussen reinzieht */
.quiz-answer-btn.correct {
    background: radial-gradient(circle, transparent 40%, var(--nd-green) 140%), var(--nd-black);
    border-color: var(--nd-green);
}
.quiz-answer-btn.wrong {
    background: radial-gradient(circle, transparent 40%, var(--nd-red) 140%), var(--nd-black);
    border-color: var(--nd-red);
}
.quiz-answer-btn.disabled { pointer-events: none; }

/* Status-Text nach Antwort: bewusst deutlich kleiner als die Frage */
.quiz-feedback { text-align: center; font-size: 12px; font-weight: 500; color: var(--nd-white); margin-top: 16px; min-height: 1.4em; }
.quiz-feedback.correct { color: #8fd6a0; }
.quiz-feedback.wrong { color: #e2a3a3; }
.quiz-feedback.timeup { color: var(--nd-tan); }

/* ============== FONT-AWESOME-ERSATZ (lokale SVG-Icons, Lizenz CC BY 4.0, fontawesome.com) ==============
   Markup <i class="fa-solid fa-xyz"> bleibt unveraendert; das Icon wird per Maske aus icons/fa_*.svg gezeichnet. */
.fa-solid { display: inline-block; font-style: normal; line-height: 1; vertical-align: -0.125em; }
.fa-solid::before { content: ""; display: block; height: 1em; width: var(--fa-w, 1em); background-color: currentColor; -webkit-mask: var(--fa-icon) center / contain no-repeat; mask: var(--fa-icon) center / contain no-repeat; }
.fa-play { --fa-icon: url("icons/fa_play.svg"); --fa-w: 0.75em; }
.fa-pause { --fa-icon: url("icons/fa_pause.svg"); --fa-w: 0.625em; }
.fa-check { --fa-icon: url("icons/fa_check.svg"); --fa-w: 0.875em; }
.fa-bolt { --fa-icon: url("icons/fa_bolt.svg"); --fa-w: 0.875em; }
.fa-arrow-left { --fa-icon: url("icons/fa_arrow-left.svg"); --fa-w: 0.875em; }
.fa-arrow-right { --fa-icon: url("icons/fa_arrow-right.svg"); --fa-w: 0.875em; }
.fa-chevron-left { --fa-icon: url("icons/fa_chevron-left.svg"); --fa-w: 0.625em; }
.fa-chevron-right { --fa-icon: url("icons/fa_chevron-right.svg"); --fa-w: 0.625em; }
.fa-xmark { --fa-icon: url("icons/fa_xmark.svg"); --fa-w: 0.75em; }
.fa-magnifying-glass { --fa-icon: url("icons/fa_magnifying-glass.svg"); --fa-w: 1em; }
.fa-leaf { --fa-icon: url("icons/fa_leaf.svg"); --fa-w: 1em; }
.fa-volume-high { --fa-icon: url("icons/fa_volume-high.svg"); --fa-w: 1.25em; }
.fa-volume-low { --fa-icon: url("icons/fa_volume-low.svg"); --fa-w: 0.875em; }
.fa-rotate-left { --fa-icon: url("icons/fa_rotate-left.svg"); --fa-w: 1em; }
.fa-rotate-right { --fa-icon: url("icons/fa_rotate-right.svg"); --fa-w: 1em; }
.fa-clock { --fa-icon: url("icons/fa_clock.svg"); --fa-w: 1em; }

/* ============== PWA: Update-Hinweis ============== */
.pwa-banner { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; max-width: 456px; margin: 0 auto; z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; padding: 10px 10px 10px 18px; background: var(--nd-black, #000); border: 1px solid rgba(234, 198, 179, 0.5); border-radius: 999px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6); font-family: var(--nd-font-body); font-size: 14px; color: var(--nd-white, #fff); }
.pwa-banner button { flex-shrink: 0; padding: 9px 18px; border: none; border-radius: 999px; background: var(--nd-tan, #eac6b3); color: var(--nd-black, #000); font-family: var(--nd-font-body); font-weight: 700; font-size: 13px; cursor: pointer; }

/* ============== PWA: Installieren-Leiste, iPhone-Anleitung, Status-Karte ============== */
.pwa-install-bar { position: fixed; left: 12px; right: 12px; bottom: calc(104px + env(safe-area-inset-bottom)); max-width: 456px; margin: 0 auto; z-index: 9998; box-sizing: border-box; padding: 18px 18px 16px; background: var(--nd-black, #000); border: 2px solid var(--nd-tan, #eac6b3); border-radius: 24px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7); font-family: var(--nd-font-body); color: var(--nd-white, #fff); }
.pwa-install-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pwa-install-head img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; }
.pwa-install-head strong { font-family: var(--nd-font-display); font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--nd-tan, #eac6b3); white-space: nowrap; }
.pwa-install-text { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--nd-white, #fff); opacity: 0.8; }
.pwa-install-actions { display: flex; gap: 10px; }
.pwa-install-actions button { flex: 1; padding: 12px 10px; border-radius: 999px; font-family: var(--nd-font-body); font-weight: 700; font-size: 14px; cursor: pointer; }
.pwa-install-later { background: transparent; border: 2px solid rgba(234, 198, 179, 0.5); color: var(--nd-tan, #eac6b3); }
.pwa-install-go { background: var(--nd-tan, #eac6b3); border: 2px solid var(--nd-tan, #eac6b3); color: var(--nd-black, #000); }
.pwa-sheet { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.7); }
.pwa-sheet-box { width: 100%; max-width: 480px; box-sizing: border-box; padding: 26px 22px calc(26px + env(safe-area-inset-bottom)); background: var(--nd-black, #000); border: 1px solid rgba(234, 198, 179, 0.5); border-bottom: none; border-radius: 24px 24px 0 0; font-family: var(--nd-font-body); color: var(--nd-white, #fff); }
.pwa-sheet-box h2 { margin: 0 0 16px; text-align: center; font-family: var(--nd-font-display); font-size: 20px; font-weight: 700; color: var(--nd-tan, #eac6b3); }
.pwa-sheet-box ol { margin: 0 0 16px; padding-left: 22px; font-size: 14px; line-height: 1.9; }
.pwa-sheet-box p { margin: 0 0 20px; font-size: 12px; line-height: 1.5; opacity: 0.7; }
.pwa-sheet-close { display: block; margin: 0 auto; padding: 11px 28px; border: none; border-radius: 999px; background: var(--nd-tan, #eac6b3); color: var(--nd-black, #000); font-family: var(--nd-font-body); font-weight: 700; font-size: 13px; cursor: pointer; }
.pwa-share-icon { vertical-align: -4px; color: var(--nd-tan, #eac6b3); }
#screen-profil button.profil-link-btn { border: none; cursor: pointer; }
#screen-profil .profil-card[hidden] { display: none; }
#screen-profil .profil-support-card { border-color: var(--nd-tan); background: linear-gradient(180deg, rgba(234, 198, 179, 0.16), rgba(234, 198, 179, 0.04)), var(--nd-black); }
#screen-profil .profil-paypal-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 0 auto; padding: 12px 26px; border-radius: 999px; background: var(--nd-white); text-decoration: none; }
#screen-profil .profil-paypal-btn span { font-family: var(--nd-font-body); font-weight: 700; font-size: 13px; color: #0b1b3a; }
#screen-profil .profil-paypal-btn img { display: block; height: 24px; width: auto; }