/* Alte Hintergrundfarbe d32f2f  :root {
    --sport30-external-bg: #0023F5;  --sport30-field-green: #2e7d32;  } */

/* KORREKTUR: Erzwingt das Weiß für den oberen Link */
.text-link {
    color: #ffffff !important; /* !important erzwingt die Farbe */
    font-weight: bold;
    text-decoration: underline;
}
.text-link:hover {
    color: #e0e0e0 !important;
}
/* KORREKTUR: Erzwingt das Dunkelgrau für den unteren Link */
.text-link-dark {
    color: #37474f !important; /* !important erzwingt die Farbe */
    font-weight: bold;
    text-decoration: underline;
}
.text-link-dark:hover {
    color: #263238 !important;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    font-family: sans-serif;
}

/* sport30-design-container  - Auslagerung Farbe hinten var(--sport30-external-bg);  */
.sport30-design-container {
    width: 100vw;
    height: 100vh;
    background-color: #0023F5;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* app-container */
.app-container {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
    padding: 10px;
}

/* external-heading */
.external-heading {
    color: #e0e0e0; 
    font-size: 22px;
    margin: 0;
    text-align: center;
}

/* external-paragraph KORREKTUR: Text ist jetzt linksbündig (text-align: left) */
.external-paragraph {
    color: #ffffff; 
    font-size: 13px;
    text-align: left; /* Linksbündig */
    margin: 0 auto 5px auto;
    max-width: 400px;
    width: 100%;
    line-height: 1.4;
}

/* Style zum Ballsport und einfachen Antworten auf Fragen die viele nicht stellen (Intelligenzfragen) */

/* text-link */

.text-link {
    color: #ffffff; /* Gleiche Farbe wie der Satz */
    font-weight: bold;
    text-decoration: underline;
}
.text-link:hover {
    color: #e0e0e0;
}

/* below-box-text */
.below-box-text {
    color: #ffffff; 
    font-size: 12px;
    font-style: italic;
    text-align: center;
    margin-top: -5px;
}

/* below-controls-text */
.below-controls-text {
    color: #37474f; 
    font-size: 12px;
    font-style: italic;
    text-align: center;
    margin-top: 5px;
    max-width: 400px;
    width: 100%;
}

/* text-link-dark HELLER auf Weiss geändert */
.text-link-dark {
    color: white; /* Gleiche Farbe wie der Satz */
    font-weight: bold;
    text-decoration: underline;
}
.text-link-dark:hover {
    color: #263238;
}

.info-box-sport30 {
    width: 100%;
    background-color: grey; 
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    z-index: 1; 
    position: relative; 
}

.info-box-sport30 h1 {
    margin-top: 0;
    font-size: 20px;
}

.info-box-sport30 p {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 25px; 
}


.controls {
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    z-index: 10; 
}

/* */
.explanation-text {
    color: #757575;
    font-size: 11px;
    margin: 0;
}


.controls-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}


.floating-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px; 
    height: 60px;
    opacity: 0; 
    z-index: 5; 
    pointer-events: none; 
}