/* ==========================================================================
   WERKEN.FUN — STUDENT STYLE: Gen-Z Bold (Neobrutalism)
   ==========================================================================
   Override-CSS für Schüler:innen-Accounts wenn Bold-Style aktiviert ist.
   Wird nur geladen wenn body.student-bold-mode Klasse gesetzt ist.

   Strategie: Aggressive !important-Overrides + CSS-Variablen-Override für
   Tool-spezifische Styles (Lampen, Laser, Material etc.).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ==========================================================================
   0. TAILWIND-FALLBACK (falls Play-CDN blockiert/fehlschlägt)
   Absichtlich OHNE !important, damit echtes Tailwind beim Laden überschreibt.
   Deckt die häufigsten Utility-Klassen ab, die die Login-UI braucht.
   WICHTIG: .hidden MUSS als letzte display-Regel kommen, damit bei
   kombinierten Klassen ("hidden flex") display:none gewinnt (wie es
   Tailwind selbst auch macht — utilities-order legt .hidden zuletzt).
   ========================================================================== */
.flex { display: flex; }
.grid { display: grid; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-4 { padding: 1rem; }
.text-center { text-align: center; }
.hidden { display: none; }

/* ==========================================================================
   1. GLOBAL VARIABLES & TYPOGRAPHY
   ========================================================================== */
body.student-bold-mode {
    --bb-bg: #fef9e7;
    --bb-surface: #ffffff;
    --bb-text: #1a1a1a;
    --bb-muted: #6b6b6b;
    --bb-black: #1a1a1a;
    --bb-pink: #ff3366;
    --bb-yellow: #ffd700;
    --bb-green: #4ade80;
    --bb-blue: #3b82f6;
    --bb-orange: #ff9500;
    --bb-shadow: 4px 4px 0 #1a1a1a;
    --bb-shadow-sm: 3px 3px 0 #1a1a1a;
    --bb-shadow-lg: 8px 8px 0 #1a1a1a;
    --bb-border: 3px solid #1a1a1a;
    --bb-radius: 20px;

    /* Override Tool-spezifische CSS-Variablen */
    --bg-color: #fef9e7 !important;
    --sidebar-bg: #ffffff !important;
    --card-bg: #ffffff !important;
    --border-color: #1a1a1a !important;
    --accent-color: #ff3366 !important;
    --accent-hover: #1a1a1a !important;
    --text-color: #1a1a1a !important;
    --text-muted: #6b6b6b !important;
    --dim-line-color: #1a1a1a !important;
    --danger-color: #ff3366 !important;
    --success-color: #4ade80 !important;

    background: #fef9e7 !important;
    color: #1a1a1a !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 500;
}

body.student-bold-mode *:not(svg):not(svg *) {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

body.student-bold-mode h1,
body.student-bold-mode h2,
body.student-bold-mode h3,
body.student-bold-mode h4 {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #1a1a1a !important;
}

body.student-bold-mode h1 { font-size: 2.25rem !important; line-height: 1 !important; }
body.student-bold-mode h2 { font-size: 1.75rem !important; }
body.student-bold-mode h3 { font-size: 1.35rem !important; }

/* ==========================================================================
   2. BACKGROUND & TEXT COLOR OVERRIDES
   ========================================================================== */
body.student-bold-mode .bg-slate-950,
body.student-bold-mode .bg-slate-900,
body.student-bold-mode .bg-slate-800,
body.student-bold-mode .bg-slate-700,
body.student-bold-mode [class*="bg-slate-8"],
body.student-bold-mode [class*="bg-slate-9"],
body.student-bold-mode .bg-black {
    background-color: #fef9e7 !important;
}

body.student-bold-mode .text-slate-400,
body.student-bold-mode .text-slate-500,
body.student-bold-mode .text-slate-300,
body.student-bold-mode .text-slate-200,
body.student-bold-mode .text-slate-100,
body.student-bold-mode .text-slate-600,
body.student-bold-mode .text-white {
    color: #1a1a1a !important;
}

body.student-bold-mode .text-muted-custom,
body.student-bold-mode .bb-muted {
    color: #6b6b6b !important;
}

/* ==========================================================================
   3. DASHBOARD SPECIFIC (index.html)
   ========================================================================== */

/* Main app container */
body.student-bold-mode #main-app,
body.student-bold-mode #pending-screen {
    background: #fef9e7 !important;
}

/* Login-Screen mit Background-Bild + Cream-Tint (30%).
   Das Bild liegt auf z:0, der Tint auf z:1, die Login-Card auf z:2. */
body.student-bold-mode #login-screen {
    background: transparent !important;
    position: relative !important;
    overflow: hidden;
}
body.student-bold-mode #login-bg-img,
body.student-bold-mode #login-bg-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
body.student-bold-mode #login-bg-tint {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(254, 249, 231, 0.30);
    z-index: 1;
    pointer-events: none;
}
body.student-bold-mode #login-screen > .login-card {
    position: relative;
    z-index: 2;
}

/* Tool Cards on Dashboard */
body.student-bold-mode .tool-card {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 #1a1a1a !important;
    transition: all 0.15s !important;
}

/* Einheitlich gelb für alle freigeschalteten Tool-Cards (User-Wunsch):
   keine Rotation, damit keine Karte "anders/nicht-aktiv" aussieht. */
body.student-bold-mode .tool-card:not(.locked) {
    background: #ffd700 !important;
}

body.student-bold-mode .tool-card:not(.locked):hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 11px 11px 0 #1a1a1a !important;
    border-color: #1a1a1a !important;
}

body.student-bold-mode .tool-card.locked {
    background: #f5f5f5 !important;
    box-shadow: 4px 4px 0 #aaa !important;
    border-color: #666 !important;
    opacity: 0.5 !important;
}

/* Tool-Icon-Containers (the colored circles) */
body.student-bold-mode .tool-icon-container {
    border: 3px solid #1a1a1a !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
}

/* Navbar */
body.student-bold-mode nav,
body.student-bold-mode .navbar,
body.student-bold-mode [class*="navbar"] {
    background: #ffffff !important;
    border-bottom: 3px solid #1a1a1a !important;
    color: #1a1a1a !important;
}

body.student-bold-mode nav *:not(svg):not(svg *),
body.student-bold-mode .navbar *:not(svg):not(svg *) {
    color: #1a1a1a !important;
}

/* Login card */
body.student-bold-mode .login-card {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 #1a1a1a !important;
}

/* ==========================================================================
   4. ALL CARDS & PANELS (rounded containers with dark bg)
   ========================================================================== */
body.student-bold-mode [class*="bg-slate-9"][class*="rounded"],
body.student-bold-mode [class*="bg-slate-8"][class*="rounded"],
body.student-bold-mode .rounded-2xl,
body.student-bold-mode .rounded-xl {
    background-color: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    color: #1a1a1a !important;
}

body.student-bold-mode .rounded-2xl { border-radius: 20px !important; }
body.student-bold-mode .rounded-xl { border-radius: 16px !important; }
body.student-bold-mode .rounded-lg { border-radius: 12px !important; }

/* ==========================================================================
   5. BORDERS
   ========================================================================== */
body.student-bold-mode .border-slate-800,
body.student-bold-mode .border-slate-700,
body.student-bold-mode .border-slate-600,
body.student-bold-mode .border-slate-500,
body.student-bold-mode [class*="border-slate"] {
    border-color: #1a1a1a !important;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
body.student-bold-mode button:not(.keep-default),
body.student-bold-mode .btn,
body.student-bold-mode [role="button"] {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: all 0.1s !important;
}

body.student-bold-mode button.bg-blue-500,
body.student-bold-mode button.bg-blue-600,
body.student-bold-mode button.bg-purple-500,
body.student-bold-mode button.bg-purple-600,
body.student-bold-mode button.bg-amber-500,
body.student-bold-mode button.bg-amber-600,
body.student-bold-mode button.bg-emerald-500,
body.student-bold-mode button.bg-emerald-600,
body.student-bold-mode button.bg-green-500,
body.student-bold-mode button.bg-green-600,
body.student-bold-mode .btn-primary {
    background: #ff3366 !important;
    color: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    font-weight: 700 !important;
}

body.student-bold-mode button.bg-slate-800,
body.student-bold-mode button.bg-slate-700 {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
    font-weight: 700 !important;
}

body.student-bold-mode button.bg-red-500,
body.student-bold-mode button.bg-red-600 {
    background: #ff3366 !important;
    color: #fff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
}

/* Hover-/Active-Verschiebung NICHT auf Buttons anwenden, die selbst per
   transform positioniert sind (absolute/fixed mit -translate-y-1/2 etc.),
   sonst würde der eigene Transform überschrieben und der Button wandert weg.
   Betroffen sind z.B. Lightbox-Pfeiltasten und fixed Close-Buttons. */
body.student-bold-mode button:not(.keep-default):not(.absolute):not(.fixed):not([class*="-translate-"]):not([class*="translate-x-"]):not([class*="translate-y-"]):hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 5px 5px 0 #1a1a1a !important;
}

body.student-bold-mode button:not(.keep-default):not(.absolute):not(.fixed):not([class*="-translate-"]):not([class*="translate-x-"]):not([class*="translate-y-"]):active {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #1a1a1a !important;
}

/* Positionierte Buttons bekommen stattdessen einen Helligkeits-Effekt beim Hover —
   behält die eigene transform-Position stabil. */
body.student-bold-mode button.absolute:hover,
body.student-bold-mode button.fixed:hover,
body.student-bold-mode button[class*="-translate-"]:hover,
body.student-bold-mode button[class*="translate-x-"]:hover,
body.student-bold-mode button[class*="translate-y-"]:hover {
    filter: brightness(1.15) !important;
    box-shadow: 5px 5px 0 #1a1a1a !important;
}

body.student-bold-mode button.absolute:active,
body.student-bold-mode button.fixed:active,
body.student-bold-mode button[class*="-translate-"]:active,
body.student-bold-mode button[class*="translate-x-"]:active,
body.student-bold-mode button[class*="translate-y-"]:active {
    filter: brightness(0.9) !important;
    box-shadow: 0 0 0 #1a1a1a !important;
}

/* ==========================================================================
   6b. NAV-ICON-BUTTONS (Dashboard-Top-Nav + Projekte-Top-Nav)
   Einheitliche Größe, kein Shadow-Overlap, stabil beim Hover.
   ========================================================================== */
/* 1. Alle Nav-Icon-Buttons (mit p-2) quadratisch und gleich groß.
      WICHTIG: :not(.hidden) damit versteckte Buttons (Admin, School-Switcher)
      nicht durch display:inline-flex wieder sichtbar werden. */
body.student-bold-mode nav a[class~="p-2"]:not(.hidden),
body.student-bold-mode nav button[class~="p-2"]:not(.hidden),
body.student-bold-mode .navbar a[class~="p-2"]:not(.hidden),
body.student-bold-mode .navbar button[class~="p-2"]:not(.hidden) {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. User-Info-Btn: negative mx entfernen, damit Schatten nicht in Nachbarn rutscht,
      und gleiche Höhe wie andere Nav-Buttons */
body.student-bold-mode #user-info-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    min-height: 44px !important;
}

/* User-Avatar (w-8 h-8 Circle) kleiner, damit Button-Höhe stimmt */
body.student-bold-mode #user-info-btn > div:first-child {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}
body.student-bold-mode #user-info-btn > div:first-child > svg,
body.student-bold-mode #user-info-btn > div:first-child > i {
    width: 16px !important;
    height: 16px !important;
}

/* Key-Icon kleiner und dezenter (hat nur dekorativen Zweck) */
body.student-bold-mode #user-info-btn > #user-key-icon {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.6;
}

/* 3. Gap zwischen Nav-Elementen größer, damit Schatten sich nicht überlappen.
      18px = 4px Shadow von Button A + 4px Shadow von Button B + 10px Luft. */
body.student-bold-mode nav > div:last-child,
body.student-bold-mode .navbar > div:last-child {
    gap: 18px !important;
}

/* Gamification-Level-Badge in projekte-nav: bekommt BOLD-Container (Border +
   Shadow), damit es optisch in die Reihe passt und der Abstand zum Home-
   Symbol gleich wie zu den anderen Buttons ist. */
body.student-bold-mode #gam-level-badge {
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    min-height: 44px !important;
    background: #ffffff !important;
    padding: 6px 12px !important;
}
body.student-bold-mode #gam-level-badge,
body.student-bold-mode #gam-level-badge span {
    color: #1a1a1a !important;
}

/* 4. Icon-Größen innerhalb Nav-Buttons einheitlich auf 20px normalisieren */
body.student-bold-mode nav a[class~="p-2"] > svg,
body.student-bold-mode nav button[class~="p-2"] > svg,
body.student-bold-mode .navbar a[class~="p-2"] > svg,
body.student-bold-mode .navbar button[class~="p-2"] > svg,
body.student-bold-mode nav a[class~="p-2"] > i,
body.student-bold-mode nav button[class~="p-2"] > i,
body.student-bold-mode .navbar a[class~="p-2"] > i,
body.student-bold-mode .navbar button[class~="p-2"] > i {
    width: 20px !important;
    height: 20px !important;
}

/* 5. Dateien-Link (hat px-4 py-2): konsistente Höhe mit Icon-Buttons */
body.student-bold-mode nav a[href="dateien.html"],
body.student-bold-mode .navbar a[href="dateien.html"] {
    min-height: 44px !important;
    padding: 8px 16px !important;
}

/* ==========================================================================
   7. INPUTS
   ========================================================================== */
body.student-bold-mode input[type="text"],
body.student-bold-mode input[type="number"],
body.student-bold-mode input[type="email"],
body.student-bold-mode input[type="password"],
body.student-bold-mode input[type="search"],
body.student-bold-mode textarea,
body.student-bold-mode select {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
}

body.student-bold-mode input:focus,
body.student-bold-mode textarea:focus,
body.student-bold-mode select:focus {
    outline: none !important;
    box-shadow: 5px 5px 0 #1a1a1a !important;
    transform: translate(-1px, -1px) !important;
}

body.student-bold-mode input::placeholder,
body.student-bold-mode textarea::placeholder {
    color: #6b6b6b !important;
}

/* PIN input special (login) */
body.student-bold-mode .pin-box,
body.student-bold-mode [id*="pin-"] input {
    background: #ffd700 !important;
    border: 3px solid #1a1a1a !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   8. BADGES / CHIPS / PILLS
   ========================================================================== */
body.student-bold-mode .rounded-full[class*="bg-"] {
    border: 2px solid #1a1a1a !important;
    font-weight: 700 !important;
}

body.student-bold-mode .bg-blue-500\/10,
body.student-bold-mode .bg-blue-500\/20,
body.student-bold-mode [class*="bg-blue-500/"] {
    background: #ffd700 !important;
    color: #1a1a1a !important;
}
body.student-bold-mode .bg-purple-500\/10,
body.student-bold-mode .bg-purple-500\/20 {
    background: #ff3366 !important;
    color: #fff !important;
}
body.student-bold-mode .bg-emerald-500\/10,
body.student-bold-mode .bg-green-500\/10,
body.student-bold-mode .bg-green-500\/20 {
    background: #4ade80 !important;
    color: #1a1a1a !important;
}
body.student-bold-mode .bg-amber-500\/10,
body.student-bold-mode .bg-orange-500\/10,
body.student-bold-mode .bg-yellow-500\/10 {
    background: #ff9500 !important;
    color: #1a1a1a !important;
}
body.student-bold-mode .bg-red-500\/10,
body.student-bold-mode .bg-red-500\/20 {
    background: #dc2626 !important;
    color: #fff !important;
}

/* Nav-Buttons/Links mit translucent bg-XXX-500 slash-10 oder slash-20 sollen
   den vollen BOLD-Container bekommen (schwarze Border + harter Schatten),
   damit sie genauso aussehen wie die Solid-Color-Buttons und nicht "flach"
   daneben wirken. Scope: nur innerhalb nav / .navbar, um andere translucent
   Container nicht anzufassen. */
body.student-bold-mode nav button[class*="/10"],
body.student-bold-mode nav button[class*="/20"],
body.student-bold-mode nav a[class*="/10"],
body.student-bold-mode nav a[class*="/20"],
body.student-bold-mode .navbar button[class*="/10"],
body.student-bold-mode .navbar button[class*="/20"],
body.student-bold-mode .navbar a[class*="/10"],
body.student-bold-mode .navbar a[class*="/20"] {
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    min-height: 44px !important;
}

body.student-bold-mode [class*="text-blue-"],
body.student-bold-mode [class*="text-purple-"],
body.student-bold-mode [class*="text-emerald-"],
body.student-bold-mode [class*="text-amber-"],
body.student-bold-mode [class*="text-green-"],
body.student-bold-mode [class*="text-red-"],
body.student-bold-mode [class*="text-yellow-"],
body.student-bold-mode [class*="text-orange-"] {
    color: #1a1a1a !important;
}

/* ==========================================================================
   9. PROGRESS BARS
   ========================================================================== */
body.student-bold-mode [class*="bg-slate"][class*="rounded-full"]:not(button) {
    background: #ffffff !important;
    border: 2px solid #1a1a1a !important;
    overflow: hidden;
}

/* Nur echte Progress-/XP-Bars einfärben, NICHT jedes Element mit einem
   linear-gradient(90deg) im inline-style — sonst wird z.B. das Grade-Banner
   umgefärbt und die Schrift unlesbar. */
body.student-bold-mode .progress-fill,
body.student-bold-mode .bar-fill {
    background: linear-gradient(90deg, #ff3366, #ffd700) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   10. 3D-LAMPEN DESIGNER (lampen/index.html)
   ========================================================================== */

/* Dark body → light */
body.student-bold-mode[style*="background-color: #0a0806"],
body.student-bold-mode #main-area,
body.student-bold-mode #sidebar {
    background: #fef9e7 !important;
}

/* Sidebar panel */
body.student-bold-mode #sidebar {
    background: #ffffff !important;
    border-right: 3px solid #1a1a1a !important;
}

/* Cards in 3D lamp designer (they use .card class often) */
body.student-bold-mode .card,
body.student-bold-mode .panel {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    color: #1a1a1a !important;
}

/* Titles/infos over 3D canvas */
body.student-bold-mode #info {
    background: transparent !important;
    color: #1a1a1a !important;
}
body.student-bold-mode #info h1 {
    color: #1a1a1a !important;
    text-shadow: 3px 3px 0 #ffd700 !important;
}

/* Range sliders in all tools */
body.student-bold-mode input[type="range"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body.student-bold-mode input[type="range"]::-webkit-slider-runnable-track {
    background: #1a1a1a !important;
    height: 8px !important;
    border-radius: 4px !important;
}
body.student-bold-mode input[type="range"]::-moz-range-track {
    background: #1a1a1a !important;
    height: 8px !important;
    border-radius: 4px !important;
}
body.student-bold-mode input[type="range"]::-webkit-slider-thumb {
    background: #ff3366 !important;
    border: 3px solid #1a1a1a !important;
    width: 24px !important;
    height: 24px !important;
    box-shadow: 2px 2px 0 #1a1a1a !important;
}
body.student-bold-mode input[type="range"]::-moz-range-thumb {
    background: #ff3366 !important;
    border: 3px solid #1a1a1a !important;
    width: 24px !important;
    height: 24px !important;
}

/* Value display (monospace badges) */
body.student-bold-mode .val-display {
    background: #ffd700 !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

/* GUI panel (lil-gui used in laser-lampen) */
body.student-bold-mode .lil-gui {
    --background-color: #ffffff !important;
    --text-color: #1a1a1a !important;
    --title-background-color: #ffd700 !important;
    --title-text-color: #1a1a1a !important;
    --widget-color: #ffffff !important;
    --hover-color: #ffd700 !important;
    --focus-color: #ff3366 !important;
    --number-color: #ff3366 !important;
    --string-color: #1a1a1a !important;
    --font-family: 'Space Grotesk', sans-serif !important;
    --font-size: 12px !important;
    --font-weight: 600 !important;
    border: 3px solid #1a1a1a !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
}

body.student-bold-mode .lil-gui .title {
    border-bottom: 2px solid #1a1a1a !important;
    font-weight: 700 !important;
}

body.student-bold-mode .lil-gui .controller {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Budget bar */
body.student-bold-mode .bar-container {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 999px !important;
    overflow: hidden;
}

body.student-bold-mode .bar-fill {
    background: #4ade80 !important;
    box-shadow: none !important;
}

body.student-bold-mode .bar-fill.alert {
    background: #ff3366 !important;
}

body.student-bold-mode .total-cost {
    color: #1a1a1a !important;
    text-shadow: 3px 3px 0 #ffd700 !important;
    font-weight: 800 !important;
}

/* Alert box */
body.student-bold-mode #alert-box {
    background: #ff3366 !important;
    color: #fff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    font-weight: 700 !important;
}

/* Material/sidebar checkboxes */
body.student-bold-mode input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 6px !important;
    appearance: none !important;
    cursor: pointer;
    background: #ffffff !important;
    box-shadow: 2px 2px 0 #1a1a1a !important;
    padding: 0 !important;
    margin: 0;
}
body.student-bold-mode input[type="checkbox"]:checked {
    background: #4ade80 !important;
}
body.student-bold-mode input[type="checkbox"]:checked::after {
    content: "✓";
    display: block;
    color: #1a1a1a;
    font-weight: 900;
    font-size: 16px;
    line-height: 14px;
    text-align: center;
}

/* Color picker */
body.student-bold-mode input[type="color"] {
    border: 3px solid #1a1a1a !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 2px 2px 0 #1a1a1a !important;
    padding: 0 !important;
}

/* ==========================================================================
   11. MATERIAL-RECHNER (material/index.html)
   ========================================================================== */
body.student-bold-mode #drawing-area {
    background: #fef9e7 !important;
    background-image:
      linear-gradient(rgba(26,26,26,0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26,26,26,0.1) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}

body.student-bold-mode .material-block {
    border: 3px solid #1a1a1a !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    border-radius: 8px !important;
}

body.student-bold-mode .dim-top,
body.student-bold-mode .dim-side {
    color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* Footer with save buttons */
body.student-bold-mode .sidebar-footer {
    background: #ffd700 !important;
    border-top: 3px solid #1a1a1a !important;
}

/* ==========================================================================
   12. LASER-LAMPEN & LASERPREP
   ========================================================================== */

/* Preserve 3D/canvas rendering — keep canvases in their original look */
body.student-bold-mode canvas {
    /* Don't override canvas content, but add a frame */
    border-radius: 0 !important;
}

/* But wrap them with bold frame if in a container */
body.student-bold-mode .canvas-container,
body.student-bold-mode #canvas-wrapper,
body.student-bold-mode #three-canvas-container {
    background: #1a1a1a !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   13. TABLES
   ========================================================================== */
body.student-bold-mode table {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 12px !important;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

body.student-bold-mode table thead {
    background: #ffd700 !important;
}

body.student-bold-mode table th {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #1a1a1a !important;
}

body.student-bold-mode table td {
    color: #1a1a1a !important;
    border-bottom: 2px solid #1a1a1a !important;
}

body.student-bold-mode table tbody tr:hover {
    background: rgba(255, 215, 0, 0.2) !important;
}

/* ==========================================================================
   14. LINKS
   ========================================================================== */
body.student-bold-mode a:not(button):not([role="button"]) {
    color: #ff3366 !important;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Padding-Swap nur auf reine Textlinks (ohne eigene Padding/BG-Utilities),
   damit Button-artige Links (z.B. Nav-Buttons mit .px-4 .py-2 .p-2 .rounded-*)
   beim Hover nicht schrumpfen und flackern. */
body.student-bold-mode a:not(button):not([class*="p-"]):not([class*="px-"]):not([class*="py-"]):not([class*="bg-"]):not([class*="rounded"]):hover {
    color: #1a1a1a !important;
    background: #ffd700;
    border-radius: 8px;
    padding: 2px 6px;
    margin: -2px -6px;
}

/* Button-artige Links (eigenes Padding/BG/Rounded ODER gap-X) → nur Farbe
   + garantierte runde Ecken beim Hover, Größe bleibt stabil.
   Hinweis: [class*="p-"] matched auch "gap-X" (enthält "p-" Substring) — das
   ist gewollt, damit alle Flex-Links auch abgerundet werden. */
body.student-bold-mode a:not(button)[class*="p-"]:hover,
body.student-bold-mode a:not(button)[class*="px-"]:hover,
body.student-bold-mode a:not(button)[class*="py-"]:hover,
body.student-bold-mode a:not(button)[class*="bg-"]:hover,
body.student-bold-mode a:not(button)[class*="rounded"]:hover {
    background: #ffd700 !important;
    color: #1a1a1a !important;
    border-radius: 12px !important;
    /* KEIN padding- oder margin-Swap — Layout bleibt stabil */
}

/* Werken.fun Logo-Link (z.B. in projekte/index.html oben links) — abgerundeter
   Hover-Rectangle passend zur restlichen BOLD-Sprache. Der Link selbst hat weder
   Padding noch Background, greift also in die generische a:hover-Regel oben rein
   (8px radius, 2px/6px padding). Hier gezielt größer + mehr Radius. */
body.student-bold-mode nav a:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]):not([class*="bg-"]):not([class*="rounded"]):hover,
body.student-bold-mode .navbar a:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]):not([class*="bg-"]):not([class*="rounded"]):hover {
    background: #ffd700 !important;
    color: #1a1a1a !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
    margin: -6px -12px !important;
}

/* ==========================================================================
   14b. BILD-CAPTIONS IN ANLEITUNGEN
   Kleine Labels ("Bild 1", "Bild 2", …) auf Thumbnails in Projekt-Schritten.
   Standard-Tailwind: bg-black/70 text-white → BOLD macht text-white → schwarz
   → schwarz auf schwarz unlesbar. Fix: pinker Text auf dunklem Hintergrund.
   ========================================================================== */
body.student-bold-mode span.absolute[class*="bg-black"] {
    color: #ff3366 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
/* Lightbox-Fullscreen-Icon unten rechts: weiß bleibt */
body.student-bold-mode span.absolute[class*="bg-black"] > i {
    color: #ffffff !important;
}

/* ==========================================================================
   15. MODALS & DIALOGS
   ========================================================================== */
body.student-bold-mode .modal,
body.student-bold-mode .dialog,
body.student-bold-mode [class*="modal"][class*="content"],
body.student-bold-mode [role="dialog"] {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 #1a1a1a !important;
}

body.student-bold-mode .modal-backdrop,
body.student-bold-mode .overlay {
    backdrop-filter: none !important;
    background: rgba(26, 26, 26, 0.3) !important;
}

/* ==========================================================================
   16. SCROLLBAR
   ========================================================================== */
body.student-bold-mode ::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
body.student-bold-mode ::-webkit-scrollbar-track {
    background: #ffffff;
    border-left: 2px solid #1a1a1a;
}
body.student-bold-mode ::-webkit-scrollbar-thumb {
    background: #ff3366;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
}

/* ==========================================================================
   17. FIX: OVERLAPPING ICONS IN PROJEKTE
   ========================================================================== */
body.student-bold-mode .step-card i[data-lucide],
body.student-bold-mode [class*="step"] svg.lucide {
    position: relative !important;
    z-index: 1 !important;
}

/* Tool chips in project steps */
body.student-bold-mode [class*="step"] [class*="tool"][class*="chip"],
body.student-bold-mode [class*="chip"] {
    padding: 4px 10px 4px 8px !important;
    gap: 6px !important;
    align-items: center !important;
    display: inline-flex !important;
    line-height: 1.2 !important;
}

/* Ensure icons in chips are contained */
body.student-bold-mode .rounded-full i,
body.student-bold-mode .rounded-full svg {
    flex-shrink: 0 !important;
}

/* Fix absolute-positioned icons overlapping text */
body.student-bold-mode [class*="absolute"] i[data-lucide],
body.student-bold-mode [class*="absolute"] svg.lucide {
    z-index: 2 !important;
}

/* ==========================================================================
   18. ANIMATIONS
   ========================================================================== */
@keyframes bb-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
body.student-bold-mode .bb-bounce {
    animation: bb-bounce 2.5s ease-in-out infinite;
}

@keyframes bb-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}
body.student-bold-mode .bb-wiggle:hover {
    animation: bb-wiggle 0.5s ease-in-out;
}

/* ==========================================================================
   18b. ADMIN-DASHBOARD (Lehrer/Admin-Menü)
   Sidebar bleibt dunkelblau (User-Wunsch), aber Texte darauf müssen hell sein
   damit sie nicht schwarz auf dunkelblau verschwinden (BOLD's Default ist
   color:#1a1a1a !important auf body, was hier ohne Override greift).
   ========================================================================== */
body.student-bold-mode #admin-sidebar,
body.student-bold-mode .admin-sidebar {
    background: #0f172a !important;
    border-right: 1px solid #1e293b !important;
    color: #e2e8f0 !important;
}

/* Texte im Sidebar-Header (Admin Dashboard Überschrift + werken.fun Untertitel) */
body.student-bold-mode .admin-sidebar h1,
body.student-bold-mode .admin-sidebar h2,
body.student-bold-mode .admin-sidebar h3,
body.student-bold-mode .admin-sidebar h4,
body.student-bold-mode .admin-sidebar p {
    color: #f1f5f9 !important;
}

body.student-bold-mode .admin-sidebar .text-slate-500,
body.student-bold-mode .admin-sidebar .text-slate-400 {
    color: #94a3b8 !important;
}

/* Sidebar-Links: normal / hover / active — alle lesbar auf dunkelblauem BG */
body.student-bold-mode .admin-sidebar-link,
body.student-bold-mode .admin-sidebar-link span,
body.student-bold-mode .admin-sidebar-link i,
body.student-bold-mode .admin-sidebar-link svg {
    color: #cbd5e1 !important;
}

body.student-bold-mode .admin-sidebar-link:hover,
body.student-bold-mode .admin-sidebar-link:hover span,
body.student-bold-mode .admin-sidebar-link:hover i,
body.student-bold-mode .admin-sidebar-link:hover svg {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.student-bold-mode .admin-sidebar-link.active,
body.student-bold-mode .admin-sidebar-link.active span,
body.student-bold-mode .admin-sidebar-link.active i,
body.student-bold-mode .admin-sidebar-link.active svg {
    background: #1e3a5f !important;
    color: #60a5fa !important;
}

/* Zurück zum Dashboard-Button unten in Sidebar (weißer Text auf dunklem Button) */
body.student-bold-mode .admin-sidebar button.bg-slate-800 {
    color: #e2e8f0 !important;
}

/* Mobile-Topbar des Admin-Dashboards — auch dunkel, Text hell */
body.student-bold-mode #admin-dashboard [class*="bg-slate-9"] h2,
body.student-bold-mode #admin-dashboard [class*="bg-slate-9"] button {
    color: #e2e8f0 !important;
}

/* Admin Stat-Cards (Letzte Aktivität, etc.): dunkler BG, weisse Zahlen,
   hellgraue Labels — damit alles lesbar ist. */
body.student-bold-mode .admin-stat-card {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    border-radius: 16px !important;
}
body.student-bold-mode .admin-stat-card .text-white,
body.student-bold-mode .admin-stat-card [id*="stat-"],
body.student-bold-mode .admin-stat-card .text-2xl,
body.student-bold-mode .admin-stat-card .text-3xl {
    color: #ffffff !important;
}
body.student-bold-mode .admin-stat-card .text-slate-500,
body.student-bold-mode .admin-stat-card .text-slate-400,
body.student-bold-mode .admin-stat-card .text-xs {
    color: #94a3b8 !important;
}
/* Icon-Container innerhalb Stat-Cards behalten ihre Akzentfarbe */
body.student-bold-mode .admin-stat-card .bg-blue-500\/10 { background: rgba(59, 130, 246, 0.15) !important; }
body.student-bold-mode .admin-stat-card .bg-green-500\/10 { background: rgba(34, 197, 94, 0.15) !important; }
body.student-bold-mode .admin-stat-card .bg-orange-500\/10 { background: rgba(249, 115, 22, 0.15) !important; }
body.student-bold-mode .admin-stat-card .bg-red-500\/10 { background: rgba(239, 68, 68, 0.15) !important; }
body.student-bold-mode .admin-stat-card [class*="bg-"][class*="/10"] {
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Admin Tab-Content Überschriften ("Übersicht" h2) — hell auf cream BG ist OK,
   aber falls in dunklem Container: hell. */
body.student-bold-mode #admin-dashboard .admin-tab-content h2.text-white {
    color: #1a1a1a !important;
}

/* ==========================================================================
   18c. SCROLLBARS (global BOLD-Style + breiter zum Greifen)
   Standard-Scrollbars sind viel zu schmal (oft 6px) — jetzt 14px mit
   klarem Thumb, funktioniert mit Touch und Maus.
   ========================================================================== */
body.student-bold-mode ::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
}
body.student-bold-mode ::-webkit-scrollbar-track {
    background: #fef3cd !important;
}
body.student-bold-mode ::-webkit-scrollbar-thumb {
    background: #1a1a1a !important;
    border-radius: 8px !important;
    border: 3px solid #fef3cd !important;
}
body.student-bold-mode ::-webkit-scrollbar-thumb:hover {
    background: #ff3366 !important;
}
body.student-bold-mode ::-webkit-scrollbar-corner {
    background: #fef3cd !important;
}
/* Firefox */
body.student-bold-mode {
    scrollbar-width: auto;
    scrollbar-color: #1a1a1a #fef3cd;
}
/* Dunkle Panels (Lampen/Laser lil-gui-Sidebar): andere Track-Farbe */
body.student-bold-mode .lil-gui::-webkit-scrollbar-track,
body.student-bold-mode .custom-scrollbar::-webkit-scrollbar-track,
body.student-bold-mode #admin-sidebar::-webkit-scrollbar-track,
body.student-bold-mode .admin-sidebar::-webkit-scrollbar-track {
    background: #1e293b !important;
}
body.student-bold-mode .lil-gui::-webkit-scrollbar-thumb,
body.student-bold-mode .custom-scrollbar::-webkit-scrollbar-thumb,
body.student-bold-mode #admin-sidebar::-webkit-scrollbar-thumb,
body.student-bold-mode .admin-sidebar::-webkit-scrollbar-thumb {
    background: #60a5fa !important;
    border: 3px solid #1e293b !important;
}

/* ==========================================================================
   18d. TOOL-APP ZURÜCK-BUTTONS (Laser, Lampen, etc.)
   Der fixed-position Back-Link oben links hat inline color:#60a5fa.
   BOLD's generic a:hover macht ihn gelb-schwarz, aber auf dem dunklen
   halbtransparenten Hintergrund ist schwarzer Text unlesbar → keep blue.
   ========================================================================== */
body.student-bold-mode a#back-link,
body.student-bold-mode a#back-link:hover,
body.student-bold-mode #back-nav a,
body.student-bold-mode #back-nav a:hover {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border-radius: 8px !important;
}
body.student-bold-mode a#back-link span,
body.student-bold-mode #back-nav a span {
    color: #60a5fa !important;
}

/* LaserPrep AI spezifisch: Zurück-Button kompakter, damit er in der gleichen
   Zeile wie der App-Header sitzt. #root padding-top entfernen + erstes
   App-Row bekommt Padding-Left, damit Inhalt nicht hinter dem Back-Button
   verschwindet. */
body.student-bold-mode #back-nav {
    top: 10px !important;
    left: 10px !important;
    z-index: 100 !important;
}
body.student-bold-mode #back-link {
    padding: 7px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}
body.student-bold-mode #root {
    padding-top: 0 !important;
}
/* React-App erste Zeile: Platz lassen für den fixierten Back-Button
   (roughly 120px breit inkl. margin). */
body.student-bold-mode #root > * {
    padding-top: 8px !important;
}
body.student-bold-mode #root > div > header,
body.student-bold-mode #root > div > div:first-child {
    padding-left: 130px !important;
}

/* Runde Buttons (rounded-full) bleiben rund. KEINE aspect-ratio, sonst
   werden Text-Buttons wie "Laser SVG" zu riesigen Kreisen. Natürliche Größe
   basierend auf Inhalt → Icons bleiben ~36px square, Text-Buttons pill. */
body.student-bold-mode #root button.rounded-full,
body.student-bold-mode #root button[class*="rounded-full"] {
    border-radius: 9999px !important;
}

/* ==========================================================================
   18e. PROJEKTE-NAV: Werken.fun-Logo-Hover (abgerundet) + Admin-Nav-Buttons
   mit sichtbarem Text-Label + Tooltip-Fallback.
   ========================================================================== */
/* Projekte-Nav Logo-Link (werken.fun): expliziter Hover mit rounded corners,
   hoch-spezifisch damit es garantiert greift. */
body.student-bold-mode #view-list nav a[href="../"],
body.student-bold-mode #view-list nav a[href="../"]:hover,
body.student-bold-mode nav > div:first-child > a[href="../"],
body.student-bold-mode nav > div:first-child > a[href="../"]:hover {
    border-radius: 14px !important;
    padding: 6px 10px !important;
    margin: -6px -10px !important;
    transition: background 0.15s !important;
}
body.student-bold-mode #view-list nav a[href="../"]:hover,
body.student-bold-mode nav > div:first-child > a[href="../"]:hover {
    background: #ffd700 !important;
    color: #1a1a1a !important;
}

/* Admin-/Lehrer-Nav-Buttons in projekte: Text-Labels immer sichtbar, damit
   klar ist, für was das Icon steht. Wrap falls die Zeile zu breit wird. */
body.student-bold-mode #btn-progress-dashboard > span,
body.student-bold-mode #btn-aemtli-dashboard > span,
body.student-bold-mode #btn-mein-aemtli > span,
body.student-bold-mode #btn-gam-admin > span,
body.student-bold-mode #btn-new-project > span,
body.student-bold-mode #btn-copy-template > span,
body.student-bold-mode #btn-admin > span:not([class*="badge"]) {
    display: inline !important;
}

body.student-bold-mode #view-list nav > div:last-child,
body.student-bold-mode nav > div:last-child {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}

/* ==========================================================================
   18f. BILD-LIGHTBOX-TEXT (Anleitungen)
   Textbox unter dem Bild: bleibt dunkel mit hellem Text, damit Lesbarkeit
   auf dem dunklen Lightbox-Hintergrund stimmt (rounded-xl-Regel würde
   sonst weiss+schwarz draus machen).
   ========================================================================== */
body.student-bold-mode #image-lightbox {
    background: rgba(0, 0, 0, 0.92) !important;
}
body.student-bold-mode #image-lightbox-text {
    z-index: 10 !important;
}
body.student-bold-mode #image-lightbox-text > div > div {
    background: rgba(0, 0, 0, 0.88) !important;
    border: 2px solid #ff3366 !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5) !important;
    color: #ffffff !important;
}
body.student-bold-mode #image-lightbox-text-content,
body.student-bold-mode #image-lightbox-text-content * {
    color: #ffffff !important;
}
body.student-bold-mode #image-lightbox-text-content strong {
    color: #ffd700 !important;
    font-weight: 800 !important;
}
body.student-bold-mode #image-lightbox-counter {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border: 2px solid #ff3366 !important;
}

/* Lampen-/Laser-Lampen-Designer-Titelpanel ausblenden, damit es sich nicht
   mit dem top-nav ("Zurück", "Neuer Entwurf", User-Badge) überlagert.
   Der Titel ist ohnehin redundant — der Back-Button zeigt wo man herkommt. */
body.student-bold-mode #info {
    display: none !important;
}

/* Lampen-Designer Zurück-Button (Farbe ist #ffaa33 im inline style) und
   Neuer-Entwurf-Button (Farbe #ff6644) — Hover darf nicht Text schwarz
   auf dunklem BG machen. */
body.student-bold-mode #top-nav a,
body.student-bold-mode #top-nav a:hover,
body.student-bold-mode #top-nav button,
body.student-bold-mode #top-nav button:hover {
    background: rgba(26, 22, 20, 0.9) !important;
    color: #ffaa33 !important;
    border-color: #443322 !important;
    padding: 10px 16px !important;
    margin: 0 !important;
}
body.student-bold-mode #top-nav button {
    color: #ff6644 !important;
}
body.student-bold-mode #top-nav #user-info-badge {
    color: #fdf5e6 !important;
}
body.student-bold-mode #top-nav span {
    color: inherit !important;
}

/* ==========================================================================
   19. GAMIFICATION ELEMENTS
   ========================================================================== */
body.student-bold-mode [class*="gam-"],
body.student-bold-mode .gam-xp-badge,
body.student-bold-mode .xp-bar {
    background: linear-gradient(90deg, #ffd700, #ff9500) !important;
    border: 3px solid #1a1a1a !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
    border-radius: 999px !important;
}

body.student-bold-mode .level-number,
body.student-bold-mode [class*="level"][class*="number"] {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 800 !important;
    font-size: 4rem !important;
    line-height: 0.9 !important;
    letter-spacing: -0.04em !important;
    color: #1a1a1a !important;
    text-shadow: 4px 4px 0 #ff3366 !important;
}

/* ==========================================================================
   19b. GRADE-BANNER (Schüler-Bewertungsanzeige oberhalb der Schritte)
   ========================================================================== */

/* Wrapper-Div (bekommt vom JS inline-style background: linear-gradient(90deg, amber…)) */
body.student-bold-mode #grade-banner > div {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
}

/* Alle Kind-Divs, die vom JS mit inline-style amber-Farbe gestyled sind
   — Button explizit ausnehmen (Button-Regel weiter unten setzt weiße Schrift) */
body.student-bold-mode #grade-banner [style*="color: #fcd34d"]:not(button) {
    color: #1a1a1a !important;
}
body.student-bold-mode #grade-banner [style*="color: #94a3b8"]:not(button) {
    color: #6b6b6b !important;
}

/* Details-ansehen-Button explizit als Bold-Pill */
body.student-bold-mode #grade-banner button {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 #ff3366 !important;
    font-weight: 700 !important;
}

/* Such-Inputs mit benachbarter absolute-Icon brauchen mehr padding-left,
   sonst überlagert das Icon den Platzhalter. */
/* Such-Inputs mit vorangehendem Lupen-Icon: genug Platz links, damit der Text
   nicht unter dem Icon verschwindet. Greift für type=search, #project-search-input,
   id=search-input (Dateimanager), und jeden Text-Input mit .pl-10 Klasse. */
body.student-bold-mode #project-search-input,
body.student-bold-mode #search-input,
body.student-bold-mode input[type="search"],
body.student-bold-mode input.search-input,
body.student-bold-mode input[class*="pl-10"] {
    padding-left: 40px !important;
}

/* ==========================================================================
   20. KEEP 3D/CANVAS BACKGROUNDS NATURAL
   ========================================================================== */

/* Three.js canvas — DO NOT override its parent's styling that hosts 3D */
body.student-bold-mode canvas.three-canvas,
body.student-bold-mode #three-canvas {
    background: transparent !important;
}

/* But style the wrapper */
body.student-bold-mode .three-canvas-wrapper {
    background: #1a1a1a !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 16px !important;
}

/* ==========================================================================
   21. INLINE-STYLE DARK BACKGROUNDS (alle Tools)
   ========================================================================== */

/* Warme Browntöne (lampen/, laser-lampen/) */
body.student-bold-mode [style*="background: #0a0806"],
body.student-bold-mode [style*="background:#0a0806"],
body.student-bold-mode [style*="background-color: #0a0806"],
body.student-bold-mode [style*="background: #0f0c0b"],
body.student-bold-mode [style*="background:#0f0c0b"],
body.student-bold-mode [style*="background: #1a1614"],
body.student-bold-mode [style*="background:#1a1614"],
body.student-bold-mode [style*="background-color: #1a1614"],
body.student-bold-mode [style*="background: #231c18"],
body.student-bold-mode [style*="background: #14110f"],
body.student-bold-mode [style*="background: #050403"] {
    background: #fef9e7 !important;
    color: #1a1a1a !important;
}

/* Kalte Blautöne / Slate (dashboard, dateien, laser, material) */
body.student-bold-mode [style*="background: #020617"],
body.student-bold-mode [style*="background:#020617"],
body.student-bold-mode [style*="background-color: #020617"],
body.student-bold-mode [style*="background: #0f172a"],
body.student-bold-mode [style*="background:#0f172a"],
body.student-bold-mode [style*="background: #1e293b"],
body.student-bold-mode [style*="background:#1e293b"],
body.student-bold-mode [style*="background: #334155"],
body.student-bold-mode [style*="background-color: #334155"],
body.student-bold-mode [style*="background: #475569"],
body.student-bold-mode [style*="background:#1a1a2e"] {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
}

/* Neutrales Schwarz/Nahschwarz */
body.student-bold-mode [style*="background: #000"]:not(canvas):not([id*="three"]):not([id*="canvas"]),
body.student-bold-mode [style*="background:#000"]:not(canvas):not([id*="three"]):not([id*="canvas"]),
body.student-bold-mode [style*="background: #111"]:not(canvas):not([id*="three"]):not([id*="canvas"]),
body.student-bold-mode [style*="background:#111"]:not(canvas):not([id*="three"]):not([id*="canvas"]) {
    background: #ffffff !important;
}

/* ==========================================================================
   22. LAMPEN-DESIGNER SPEZIFISCH (lampen/index.html)
   ========================================================================== */

/* Session-Loading Overlay */
body.student-bold-mode #session-loading {
    background: #fef9e7 !important;
}
body.student-bold-mode #session-loading * { color: #1a1a1a !important; }

/* Top-Nav Buttons (lampen / laser-lampen) */
body.student-bold-mode #top-nav button,
body.student-bold-mode #top-nav a,
body.student-bold-mode #top-nav .back-link {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
}

/* lil-gui Panel — direkter Background-Override (!important-Kampf gewinnen) */
body.student-bold-mode .lil-gui.root {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    box-shadow: 6px 6px 0 #1a1a1a !important;
    border-radius: 20px !important;
    color: #1a1a1a !important;
}

body.student-bold-mode .lil-gui .controller {
    background: #fef9e7 !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 12px !important;
    color: #1a1a1a !important;
    box-shadow: 2px 2px 0 #1a1a1a !important;
}

body.student-bold-mode .lil-gui .name {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

body.student-bold-mode .lil-gui .title {
    background: #ffd700 !important;
    color: #1a1a1a !important;
    border-bottom: 3px solid #1a1a1a !important;
    font-weight: 800 !important;
}

body.student-bold-mode .lil-gui .value-display,
body.student-bold-mode .value-display {
    background: #ffd700 !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

body.student-bold-mode .lil-gui .slider {
    background: #1a1a1a !important;
    border-radius: 4px !important;
}
body.student-bold-mode .lil-gui .slider .fill {
    background: #ff3366 !important;
}

/* Plus/Minus-Touch-Buttons (Lampen + Laser-Lampen Designer): kleiner & rund,
   aber noch touch-freundlich (40 px). Kein Schatten, damit sie nicht mit der
   Wert-Anzeige darüber kollidieren. */
body.student-bold-mode .touch-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    color: #ffd700 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
body.student-bold-mode .touch-btn:hover,
body.student-bold-mode .touch-btn:active {
    background: #ff3366 !important;
    color: #ffffff !important;
    transform: scale(0.95) !important;
}

/* Reset-Icon (↺) — auch rund, etwas kleiner als touch-btn */
body.student-bold-mode .reset-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #1a1a1a !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Controls-Row: höherer min-height damit die 40px-Buttons nicht mehr mit dem
   Wert-Display oben überlappen, und etwas mehr vertikaler Abstand. */
body.student-bold-mode .controls-row {
    height: auto !important;
    min-height: 48px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

body.student-bold-mode .lil-gui select {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   18g. WERKENSHARED DIALOGS & MODALS (confirm-dialog.js, modal.js)
   Das System für "Entwurf löschen?", "Wirklich speichern?", Prompts etc.
   War noch im alten Dark-Theme (dunkelblau + schwarze h2). Jetzt BOLD.
   ========================================================================== */
body.student-bold-mode .ws-modal-backdrop {
    background: rgba(26, 26, 26, 0.65) !important;
}

body.student-bold-mode .ws-modal-container {
    background: #ffffff !important;
    border: 4px solid #1a1a1a !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 #1a1a1a !important;
    color: #1a1a1a !important;
}

body.student-bold-mode .ws-modal-header {
    border-bottom: 3px solid #1a1a1a !important;
    background: #fef9e7 !important;
}

body.student-bold-mode .ws-modal-title {
    color: #1a1a1a !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 22px !important;
}

body.student-bold-mode .ws-modal-close-btn {
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 12px !important;
    box-shadow: 2px 2px 0 #1a1a1a !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}
body.student-bold-mode .ws-modal-close-btn:hover {
    background: #ff3366 !important;
    color: #ffffff !important;
}

body.student-bold-mode .ws-modal-body {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

body.student-bold-mode .ws-dialog-message {
    color: #1a1a1a !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}

/* Icon-Kreise: behalten Farbe, aber mit BOLD Border */
body.student-bold-mode .ws-dialog-icon {
    border: 3px solid #1a1a1a !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
}
body.student-bold-mode .ws-dialog-icon-danger,
body.student-bold-mode .ws-dialog-icon-error {
    background: #ff3366 !important; color: #ffffff !important;
}
body.student-bold-mode .ws-dialog-icon-warning {
    background: #ffd700 !important; color: #1a1a1a !important;
}
body.student-bold-mode .ws-dialog-icon-info {
    background: #60a5fa !important; color: #ffffff !important;
}
body.student-bold-mode .ws-dialog-icon-success {
    background: #4ade80 !important; color: #1a1a1a !important;
}
body.student-bold-mode .ws-dialog-icon svg {
    stroke-width: 3 !important;
}

/* Dialog-Buttons: alle im BOLD-Look */
body.student-bold-mode .ws-dialog-btn {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    padding: 10px 24px !important;
    min-height: 48px !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
}
body.student-bold-mode .ws-dialog-btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 5px 5px 0 #1a1a1a !important;
}
body.student-bold-mode .ws-dialog-btn:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #1a1a1a !important;
}

body.student-bold-mode .ws-dialog-btn-cancel {
    background: #ffffff !important;
    color: #1a1a1a !important;
}
body.student-bold-mode .ws-dialog-btn-cancel:hover {
    background: #fef3cd !important;
}

body.student-bold-mode .ws-dialog-btn-danger {
    background: #ff3366 !important;
    color: #ffffff !important;
}
body.student-bold-mode .ws-dialog-btn-danger:hover {
    background: #e6254d !important;
}

body.student-bold-mode .ws-dialog-btn-warning {
    background: #ffd700 !important;
    color: #1a1a1a !important;
}
body.student-bold-mode .ws-dialog-btn-info,
body.student-bold-mode .ws-dialog-btn-primary {
    background: #60a5fa !important;
    color: #ffffff !important;
}
body.student-bold-mode .ws-dialog-btn-success {
    background: #4ade80 !important;
    color: #1a1a1a !important;
}

/* Prompt-Eingabefeld im Dialog */
body.student-bold-mode .ws-dialog-input {
    background: #ffffff !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 12px !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
}
body.student-bold-mode .ws-dialog-input:focus {
    outline: none !important;
    box-shadow: 5px 5px 0 #1a1a1a !important;
    transform: translate(-1px, -1px) !important;
}

/* Function-Controllers (Buttons wie "Entwurf speichern", "Cloud-Designs laden",
   "Entwurf von Datei laden", "Fertig", "Download" in Lampen/Laser-Lampen
   Designer): die ganze Controller-Box IST der Button — kein doppeltes
   Framing mehr (Outer-Container + Inner-Button). Hover → komplett gelb. */
body.student-bold-mode .lil-gui .controller.function {
    cursor: pointer !important;
    transition: background 0.15s, transform 0.1s !important;
}
body.student-bold-mode .lil-gui .controller.function:hover {
    background: #ffd700 !important;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #1a1a1a !important;
}
body.student-bold-mode .lil-gui .controller.function:active {
    transform: translate(1px, 1px);
    box-shadow: 0 0 0 #1a1a1a !important;
}
/* Innerer Button: nur Click-Target, keine eigene Box mehr */
body.student-bold-mode .lil-gui .controller.function > button,
body.student-bold-mode .lil-gui .controller.function .widget,
body.student-bold-mode .lil-gui .controller.function .widget > button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    color: inherit !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    min-height: 0 !important;
    transform: none !important;
}
/* Gleiche :not()-Kette wie BOLD's generische Button-Hover-Regel, damit diese
   Regel per Spezifität gewinnt und den Shadow/Transform des Inner-Buttons
   wegnimmt. Sonst kriegt man beim Hover direkt über dem Text eine zweite
   Box um den Text. */
body.student-bold-mode .lil-gui .controller.function > button:not(.keep-default):not(.absolute):not(.fixed):not([class*="-translate-"]):not([class*="translate-x-"]):not([class*="translate-y-"]):hover,
body.student-bold-mode .lil-gui .controller.function > button:not(.keep-default):not(.absolute):not(.fixed):not([class*="-translate-"]):not([class*="translate-x-"]):not([class*="translate-y-"]):active,
body.student-bold-mode .lil-gui .controller.function .widget > button:not(.keep-default):not(.absolute):not(.fixed):not([class*="-translate-"]):not([class*="translate-x-"]):not([class*="translate-y-"]):hover,
body.student-bold-mode .lil-gui .controller.function .widget > button:not(.keep-default):not(.absolute):not(.fixed):not([class*="-translate-"]):not([class*="translate-x-"]):not([class*="translate-y-"]):active {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
/* Name-Label in Function-Controllern: voll breit, zentriert */
body.student-bold-mode .lil-gui .controller.function .name {
    color: inherit !important;
    width: 100% !important;
    text-align: center !important;
}

body.student-bold-mode .lil-gui.root::-webkit-scrollbar-thumb {
    background: #ff3366 !important;
    border-radius: 8px !important;
}

/* Lampen #info Titel — als Pill auf dunklem 3D-Canvas sichtbar halten */
body.student-bold-mode #info {
    background: transparent !important;
}
body.student-bold-mode #info h1 {
    display: inline-block !important;
    background: #ffd700 !important;
    color: #1a1a1a !important;
    padding: 6px 18px !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 999px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
    text-shadow: none !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}
body.student-bold-mode #info p {
    display: inline-block !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    padding: 3px 12px !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 999px !important;
    box-shadow: 2px 2px 0 #1a1a1a !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   23. LASER-LAMPEN & LASERPREP SPEZIFISCH
   ========================================================================== */

/* Laser-App dunkle Slate-Backgrounds (laser/index.html) */
body.student-bold-mode #app,
body.student-bold-mode #laser-app,
body.student-bold-mode .laser-sidebar,
body.student-bold-mode .laser-main {
    background: #fef9e7 !important;
}

body.student-bold-mode #app *:not(canvas):not(svg):not(svg *) {
    color: inherit;
}

/* ==========================================================================
   24. MATERIAL-RECHNER SPEZIFISCH (sidebar slate-Farben)
   ========================================================================== */

body.student-bold-mode .sidebar,
body.student-bold-mode #sidebar-toggle {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-right: 3px solid #1a1a1a !important;
}

/* ==========================================================================
   25. DATEIEN (dateien.html) SPEZIFISCH
   ========================================================================== */

body.student-bold-mode #file-tree,
body.student-bold-mode .folder-item,
body.student-bold-mode .file-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 10px !important;
}

body.student-bold-mode .folder-item.selected,
body.student-bold-mode .file-item.selected {
    background: #ffd700 !important;
}

/* ==========================================================================
   26. FOTOKABINE SPEZIFISCH
   ========================================================================== */

body.student-bold-mode #controls,
body.student-bold-mode .capture-btn,
body.student-bold-mode .camera-controls {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 3px solid #1a1a1a !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0 #1a1a1a !important;
}

/* ==========================================================================
   27. FALLBACK — jeder Container mit "color: white" inline + dunklem bg
   ========================================================================== */

body.student-bold-mode [style*="color: #fff"]:not([style*="background: #ff3366"]):not([style*="background:#ff3366"]):not([style*="background: #1a1a1a"]),
body.student-bold-mode [style*="color:#fff"]:not([style*="background: #ff3366"]):not([style*="background:#ff3366"]):not([style*="background: #1a1a1a"]) {
    color: #1a1a1a !important;
}