/* ===== Body & Reset ===== */
body {
    margin: 0;
    padding: 0;
    background: #121212;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

/* ===== Überschriften ===== */
h1 {
    text-align: center;
    color: #00bfff;
    margin-top: 20px;
    font-size: 2.2em;
    text-shadow: 0 0 15px #00bfff;
}

/* ===== Regeln Link ===== */
.rules-link {
    text-align: center;
    margin-bottom: 20px;
}
.rules-link a {
    color: #00bfff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.05em;
    transition: all 0.3s ease;
}
.rules-link a:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px #00bfff;
}

/* ===== Turnierbaum Container ===== */
.tournament-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
    margin: 30px auto;
    max-width: 1920px;
    flex-wrap: nowrap;
    position: relative;
}

/* ===== Gruppen ===== */
.group {
    display: flex;
    flex-direction: row;
    gap: 25px;
    position: relative;
}
.groupB {
    flex-direction: row-reverse;
}

/* ===== Runde ===== */
.round {
    display: flex;
    flex-direction: column;
    gap: 35px;
    position: relative;
}

/* ===== Match Box ===== */
.match {
    background: #1b1b1b;
    padding: 10px;
    border-radius: 8px;
    width: 130px;
    text-align: center;
    box-shadow: 0 0 8px #000;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9em;
}
.match:hover {
    transform: scale(1.08);
    box-shadow: 0 0 15px #00bfff;
}

/* ===== Gewinner Highlight ===== */
.winner {
    color: #00ff00;
    font-weight: bold;
    text-shadow: 0 0 6px #00ff00;
}

/* ===== Linien zwischen Matches ===== */
.match::after {
    content:"";
    position:absolute;
    width:25px;
    height:2px;
    background:#555;
    top:50%;
    right:-25px;
    border-radius:2px;
    animation: lineAnim 0.5s ease forwards;
}
.groupB .match::after {
    right:auto;
    left:-25px;
}
.round .match + .match::before {
    content:"";
    position:absolute;
    top:-40px;
    left:50%;
    width:2px;
    height:40px;
    background:#555;
    border-radius:2px;
}

/* ===== Finale ===== */
.final-container {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:30px;
    margin:0 20px;
    position:relative;
}
.final {
    background:#333;
    padding:15px;
    border-radius:12px;
    width:150px;
    text-align:center;
    box-shadow:0 0 12px #000;
    font-weight:bold;
    font-size:1em;
    position:relative;
    transition: all 0.3s ease;
}
.final:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px #ffbf00;
}
.final::before {
    content:"";
    position:absolute;
    left:-25px;
    top:50%;
    width:25px;
    height:2px;
    background:#555;
    border-radius:2px;
    animation: lineAnim 0.5s ease forwards;
}

/* ===== Linien Animation ===== */
@keyframes lineAnim {
    0% { width:0; }
    100% { width:25px; }
}

/* ===== Social Media Footer ===== */
.social {
    background:#1b1b1b;
    padding:15px 0;
    text-align:center;
    display:flex;
    justify-content:center;
    gap:30px;
    box-shadow:0 -2px 10px #000;
    border-top:1px solid #333;
    flex-wrap:wrap;
    margin-top:40px;
    font-size:0.95em;
}
.social a {
    color:#00bfff;
    text-decoration:none;
    font-weight:bold;
    display:flex;
    align-items:center;
    gap:6px;
    transition: all 0.3s ease;
}
.social a:hover {
    opacity:0.9;
    text-shadow:0 0 10px #00bfff;
    transform: scale(1.1);
}
.social img {
    width:20px;
    height:20px;
}

/* ===== Responsive ===== */
@media(max-width:1700px){
    .tournament-container { flex-wrap:wrap; justify-content:center; gap:25px; }
    .group { gap:15px; }
    .round { gap:25px; }
    .match { width:120px; padding:8px; font-size:0.85em; }
    .final { width:140px; padding:10px; font-size:0.95em; }
}

@media(max-width:1200px){
    .tournament-container { flex-direction:column; align-items:center; }
    .group, .groupB { flex-direction:row; flex-wrap:wrap; justify-content:center; }
}