@font-face {
  font-family: 'Dosis';
  src: url('/fileadmin/Events/2025/Gamification-Confirmation/_material/fonts/Dosis/Dosis-Book.ttf'), url('_material/fonts/Dosis/Dosis-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Dosis';
  src: url('/fileadmin/Events/2025/Gamification-Confirmation/_material/fonts/Dosis/Dosis-Bold.ttf'), url('_material/fonts/Dosis/Dosis-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

body {
    font-family: 'Dosis', sans-serif !important;
    background-image: url('_material/background.png'), url(/fileadmin/Events/2025/Gamification-Confirmation/_material/background.png);
    background-size: cover;
    background-position: bottom;
    margin-top: 2rem;
    color: #354b55;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: none;
}

.container {
  font-family: 'Dosis', sans-serif !important;
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(53, 75, 85, 0.3);
  width: auto;
  max-width: min(95vw, 1200px);
  max-height: 95vh;
  padding: clamp(1rem, 2vw, 3rem);
  margin: clamp(0.3rem, 3vw, 1rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
}

h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

input[type="file"] {
    font-family: 'Dosis', sans-serif !important;
    padding: 20px;
    width: 100%;
    border: 2px solid #e50064;
    background-color: white;
    color: #e50064;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

input[type="file"]:hover {
    background-color: #e50064;
    color: white;
}

table {
    width: 100%;
    margin-bottom: 30px;
    border-collapse: collapse;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    /*box-shadow: 0 20px 40px rgba(53, 75, 85, 0.3);*/
}

th, td {
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

th {
    background-color: #ebebeb;
    color: #354b55;
    font-weight: 600;
    font-size: 15px;
}

td {
    font-size: 14px;
}

tr:nth-child(even) {
    background-color: #ebebeb;
}

/* Spezielle Styles für die ersten drei Plätze */
tr.first-place td {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: white !important;
    background: #e50064 !important;
}

tr.second-place td {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: white !important;
    background: rgba(229, 0, 100, 0.8) !important;
}

tr.third-place td {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: white !important;
    background: rgba(229, 0, 100, 0.6) !important;
}