.terminal-wrapper {
    padding:20px!important;
}

.cmd, .cmd div, .cmd span {
    --cmd-font-size: 24px;
    font-size: var(--cmd-font-size);
}
body > div > div.terminal-wrapper > div.terminal-output > div > div > span {
    font-size: 24px;
}
.cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji), .terminal, terminal-output>div:not(.raw) div>span:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji) {
     background-color: transparent!important;
    color: #aaa;
}
.cmd, .cmd div, .cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji), .terminal, .terminal-output>:not(.raw) a, .terminal-output>:not(.raw) div, .terminal-output>:not(.raw) span[data-text]:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji), .terminal.external [data-text] {
    background-color: transparent!important;
    color: var(--color,#aaa);
}
.bg-sprite {
    background-image: url("hf_watermark.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    background-color: black;
    position: fixed;     /* oder absolute */
    top: 0;
    left: 0;
    width: 100vw;        /* 100% der Viewport-Breite */
    height: 100vh;       /* 100% der Viewport-Höhe */
    z-index: -9999;       /* optional: damit es ganz unten liegt */
    
}

.terminal {
    overflow:auto;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Internet Explorer 10+ */
}
.terminal::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Edge */
}

/* --- Mobile Optimierung --- */
@media screen and (max-width: 768px) {
    /* Verhindert das Scrollen des gesamten Dokuments (behebt das Tastatur-Springen) */
    html, body {
        height: 100%;
        overflow: hidden; 
    }

    /* 100vh macht bei mobilen Tastaturen Probleme, daher auf 100% wechseln */
    .bg-sprite {
        height: 100%; 
    }

    /* Etwas weniger Padding, um auf schmalen Displays mehr Platz für Text zu haben */
    .terminal-wrapper {
        padding: 10px !important; 
    }

    /* Optionale Anpassung: 24px ist auf Handys oft zu groß und erzeugt unschöne Zeilenumbrüche */
    .cmd, .cmd div, .cmd span {
        --cmd-font-size: 20px; 
    }

    body > div > div.terminal-wrapper > div.terminal-output > div > div > span {
        font-size: 20px;
    }
}