.display-body {
    font-size: 1.4rem;
    line-height: 1.3;
}

.bg-sporthaus {
       background: linear-gradient(
        177deg,
        blue 0%,
        blue 45%,
        red 55%,
        red 100%
    );
}

.bg-dgh {
       background: linear-gradient(
        172deg,
        red 10%,
        orange 20%,
        yellow 30%,
        green 40%,
        blue 70%,
        violet 90%
    );
}

.bg-dgh2 {
    background: linear-gradient(
        172deg,
        #ff8080 10%,  /* Rot */
        #ffb366 20%,  /* Orange */
        #ffff66 30%,  /* Gelb */
        #80cc80 40%,  /* Grün */
        #80aaff 70%,  /* Blau */
        #cc80ff 90%   /* Violett */
    );
}

.text-display {
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.8);
}
}

.display-body p,
.display-body li {
    font-size: 1.2em;
}

.display-body h1 { font-size: 1.8rem; }
.display-body h2 { font-size: 1.6rem; }
.display-body h3 { font-size: 1.4rem; }


.display-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.display-card .card-body {
    flex: 0 0 auto; /* Nur so hoch wie der Inhalt */
}

.display-card .card-footer {
    flex-grow: 1; /* Nimmt den freien Platz ein */
}


/* Die Card muss eine verfügbare Höhe haben. */
.display-scroll-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Header und Footer behalten ihre natürliche Höhe. */
.display-scroll-card > .card-header,
.display-scroll-card > .card-footer {
    flex: 0 0 auto;
}

/* Der Body gibt die übrige Höhe an den Scrollbereich weiter. */
.display-scroll-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Nur dieser Bereich scrollt. */

.auto-scroll-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Scrollbar auf dem Display ausblenden */
    scrollbar-width: none;
}

.auto-scroll-content::-webkit-scrollbar {
    display: none;
}