.footer {
    position: static !important;
    bottom: auto !important;
    height: auto !important;
    line-height: normal !important;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.imgmid {
    max-width: 50%;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}
    body > .container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
.page-content {
    flex: 1;
}

.footer {
    margin-top: auto;
}

@media (max-width: 768px) {
    .imgmid {
        max-width: 80%;
    }
}

    /* Grundlegendes Styling für die Gruppen */
    .group-container {
        margin-top: 20px;
    }

    .group {
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    h3 {
        margin-bottom: 15px;
    }

    /* Buttons normal */
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        font-size: 16px;
        margin: 5px;
    }

        /* Active Button */
        .btn.active {
            background-color: #007bff;
            color: white;
        }

    /* Text in den Buttons ausblenden bei kleineren Bildschirmen */
    @media (max-width: 768px) {
        .btn {
            padding: 10px; /* Kleinere Padding für die Buttons */
        }

            .btn i {
                font-size: 24px; /* Größere Icons */
            }

            /* Verstecke den Text bei mobilen Geräten */
            .btn span {
                display: none;
            }
    }

    #person-inputs label {
        font-weight: bold;
        margin-top: 10px;
    }

    #person-inputs input {
        width: 100%;
    }

    #game-settings label {
        font-weight: bold;
        margin-top: 10px;
    }

    #game-settings input {
        width: 100%;
    }

    .group button {
        padding: 10px 20px;
        font-size: 16px;
    }

    .group {
        margin-top: 20px;
        text-align: center;
    }

        .group h3 {
            margin-bottom: 10px;
        }

    /* Dynamische Größe des SVG */
    .target {
        width: 35vw; /* 35% der Viewport-Breite */
        height: auto; /* Höhe proportional zur Breite */
        max-width: 800px; /* Maximalgröße, um das Bild nicht zu groß zu machen */
        margin: 0 auto;
    }

    .teams {
        display: flex;
        justify-content: space-around; /* Sorgt für Abstand zwischen den Teams */
    }

    .team-home, .team-away {
        width: 45%; /* Jede Team-Spalte nimmt 45% der Breite ein */
        background-color: #f4f4f4; /* Leichter Hintergrund für die Teams */
        padding: 10px;
        border-radius: 8px;
    }

        .team-home ul, .team-away ul {
            list-style-type: none; /* Keine Bullet Points */
            padding: 0;
        }

        .team-home li, .team-away li {
            padding: 5px 0;
        }

.hover-grow {
    transition: transform 0.3s ease;
}

    .hover-grow:hover {
        transform: scale(1.05);
    }