//* ================================
   PAGE: DASHBOARD (Optimiert & Kompakt)
   ================================ */

.username {
    color: #37434b;
    text-decoration: none;
    transition: color 0.15s ease;
}

/* Stats & Badges */

.stat-line {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Wichtig für die absolute Positionierung des Badges */
    width: 100%;
    min-height: 2.5rem; /* Verhindert Springen des Layouts */
}

.punkte-badge {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem; /* Leicht vergrößert für bessere Präsenz */
    font-weight: 700;
    color: #37434b;
    line-height: 1;
}

.trend-badge {
    /* Desktop-Standard: Absolut positioniert, um die Zentrierung der Zahl nicht zu stören */
    position: absolute;
    left: calc(50% + 35px); /* Schiebt das Badge rechts neben die Mitte */
    font-family: "Bebas Neue", sans-serif;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.trend-badge.positive {
    color: #4CAF71;
    background-color: rgba(76, 175, 113, 0.1);
}

.trend-badge.negative {
    color: #E66A6A;
    background-color: rgba(230, 106, 106, 0.1);
}

/* Mobile Optimierung: Unter die Zahl rutschen */
@media (max-width: 768px) {
    .stat-line {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    
    .trend-badge {
        position: static; /* Hebt das Schweben auf */
        left: auto;
        font-size: 0.8rem;
        margin-top: 0px;
    }
}



/* Progress Bars */
.tipp-bar-outer, 
.tipp-bar-outer-unten {
    width: 100%;
    background-color: #c9d0d6;
    border-radius: 8px;
    overflow: hidden;
    height: 10px;
    margin-top: 10px;
}

/* Datei: components.css */
.tipp-bar-inner {
    height: 100%;
    background-color: #4caf71;
    width: 0; /* Startwert für die Animation */
    transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1);
}

/* Sobald das Dashboard geladen ist, wird die Breite auf den Zielwert gesetzt */
.dashboard-loading .tipp-bar-inner {
    width: var(--target-width);
}

/* Layout-Struktur */
.dashboard-layout {
    display: flex;
    flex-direction: column;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 0rem; /* Kompakterer Abstand zwischen Boxen */
    flex: 1;
}

/* Stats Grid */
.stat-grid {
    display: flex;
    gap: 0.75rem;
}

.statbox-small {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 1rem; 
    padding-bottom: 1rem;
    gap: 1rem
}

.statbox-small .stat-label {
    font-size: 0.8rem;
    opacity: 0.6;
    font-weight: 700;
    margin-bottom: -0.5rem;
}

.stat-label {
    font-size: 0.8rem;
    opacity: 0.6;
    font-weight: 700;
    margin-bottom: -0.5rem;
    
    
}

/* 💻 Desktop Modus */
@media (min-width: 1024px) {
    .dashboard-layout {
        display: grid;
        grid-template-columns: 55% 42%;
        align-items: flex-start; /* Verhindert künstliches Strecken der Spalten */
        gap: 2rem;
    }

   /* Die Box des Rangverlaufs */
.dashboard-column:last-child .primary-box {
    height: 100%; /* Nimmt die volle Höhe der rechten Spalte ein */
    display: flex;
    flex-direction: column;
}

/* Der Container für das Canvas */
.chart-container {
    position: relative;
    width: 100%;
    flex-grow: 1; /* WICHTIG: Drückt den Container auf die restliche Höhe der Box */
    min-height: 180px; /* Sicherheit für Mobile */
}
}

/* 📱 Mobile Tweaks */
@media (max-width: 600px) {
    .action-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .action-content .button {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
}

/* ================================
   PAGE: Home (Landingpage)
   ================================ */

/* 1. BASIS-STYLES (MOBILE FIRST) */

.hero-container {
    width: 100%;
    max-width: none !important;
    margin: 1rem auto 0 auto;
    padding: 2rem 1rem !important;
    text-align: center;
    box-sizing: border-box;
}

/* Dein h1-Style kombiniert */
.hero-container h1 {
    margin-top: 0rem;
    margin-bottom: 1rem;
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem; /* Optimiert für Mobile-First */
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: #37434B;
    line-height: 1.2;
}

.welcome-text {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-green);
    margin-bottom: 0.5rem;
    font-weight: 600;
    display: block;
}

.hero-container p {
    margin: 0 auto;
    max-width: 600px;
    opacity: 0.9;
}

.landing-grid {
    display: grid;
    /* Zwei Spalten nebeneinander */
    grid-template-columns: repeat(1, 1fr); 
    gap: 1rem !important;
    margin-top: 2rem;
    
    /* 🔑 KORREKTUR: Padding auf 0 setzen für volle Breite */
    padding: 0 0 3rem 0; 
    width: 100%;
    /* 🔑 Die entscheidende Zeile gegen Überschneidungen: */
    grid-auto-rows: 1fr;
    
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5rem 1rem !important; /* Kompakter für 2-Spalten-Layout */
    text-align: center;
    
    /* 🔑 FIX: Entferne feste Höhenangaben! */
    height: auto !important; 
    min-height: 0;
}

.feature-svg {
    width: 32px; /* Etwas kleiner für Mobile-Grid */
    height: 32px;
    margin-bottom: -1rem;
}

.feature-card h3 {
    margin-bottom: -1rem;
    font-size: 0.975rem;
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.75px;
    color: #37434B;
}

.feature-card p {
    font-size: 0.75rem;
    line-height: 1.3;
    opacity: 0.75;
}

.justify-center {
    justify-content: center;
}

/* Steuerung des Zeilenumbruchs */
.mobile-break {
    display: inline;
}

/* 2. DESKTOP ANPASSUNGEN (AB TABLET/PC) */

@media (min-width: 600px) {
    .hero-container {
        margin-top: 2rem;
        padding: 3rem 1.5rem !important;
    }

    .hero-container h1 {
        font-size: 2.125rem; /* Deine Zielgröße für Desktop */
    }

    .landing-grid {
        /* Ab hier springt es auf das flexible Raster (3 oder mehr Spalten) */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
        padding: 0 0 3rem 0;

        /* 🔑 Auf Desktop wieder flexibel, damit keine riesigen leeren Boxen entstehen */
        grid-auto-rows: auto;
    }

    .feature-card {
        padding: 2.5rem 1.5rem !important;
    }

    .feature-svg {
        width: 42px;
        height: 42px;
    }

    .feature-card h3 {
        font-size: 1.2rem;
        letter-spacing: 0.75px;
        color: #37434B;
        margin-bottom: -0.5rem;
    }

    .feature-card p {
        font-size: 0.9rem;
    }

    .mobile-break {
        display: none;
    }
}

/* --- 1-2-3 How it works (Mobile First) --- */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr; /* Standard: Eine Spalte untereinander */
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: -2rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
}

.step-number {
    color: #4CAF71;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 1rem;
    font-family: "Bebas Neue", sans-serif; /* Korrektes Fallback */
    font-style: italic;
    margin-top: -1rem;
}

.step-item h3 {
    font-size: 1rem;
    margin-top: 0rem;
    margin-bottom: -0.5rem;
}

.step-item p {
    line-height: 1.4;
    padding: 0 1.5rem;
    opacity: 0.85;
}

/* --- Desktop-Erweiterung (ab Tablet/Desktop) --- */
/* --- Desktop-Erweiterung (ab Tablet/Desktop) --- */
@media (min-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .step-item {
        padding: 1.5rem;
        position: relative; /* 🔑 ZWINGEND NOTWENDIG für den Pfeil */
    }
    
    .step-item h3 {
        font-size: 1.2rem;
        margin-top: 0.5rem;
        margin-bottom: -0.25rem;
    }

    /* Der Pfeil nach dem 1. und 2. Item */
    .step-item:not(:last-child)::after {
        content: "\00bb";
        position: absolute;
        right: -5%;  /* 🔑 Leicht angepasst */
        top: 3px;   /* 🔑 Etwas tiefer, damit er mittig zur Zahl "1" sitzt */
        font-family: "Bebas Neue", sans-serif;
        font-style: italic;
        font-size: 2.5rem;
        color: #4CAF71;
        font-weight: bold;
        opacity: 0.8;
    }

    /* Initialer Zustand für die Animation (Mobile First) */
.step-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

/* Sichtbarer Zustand */
.step-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Dein bestehender Media-Query Block bleibt, wir fügen nur das Delay hinzu */
@media (min-width: 768px) {
    .step-item:nth-child(1) { transition-delay: 0.3s; }
    .step-item:nth-child(2) { transition-delay: 0.6s; }
    .step-item:nth-child(3) { transition-delay: 0.9s; }
    
    /* Der Pfeil erbt die Deckkraft des Items, 
       du kannst ihn aber hier noch feiner steuern */
    .step-item:not(:last-child)::after {
        /* Dein bestehender Code für content, position, etc. */
        transition: opacity 0.6s ease-in-out;
    }
}
}

/* --- Trust Bar --- */
.trust-bar-container {
    margin-top: 4rem;
    padding: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}



/* ================================
   PAGE: Login
   ================================ */

   /* Registrieren & Login */
.form-login input[type="text"],
.form-login input[type="email"] {
  background-color: transparent; /* Deine Hintergrundfarbe */
  border: 1.5px solid #37434B;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0rem; /* Exakt dein Original-Wert */
}

.form-login input[type="password"] {
  background-color: transparent; /* Deine Hintergrundfarbe */
  border: 1.5px solid #37434B;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem; /* Exakt dein Original-Wert */
}

.form-login label {
  color: #37434B;
}

/* Fokus-Zustand ohne die Abstände zu berühren */
.form-login input:focus {
  outline: none;
  background-color: #F2F3F5; /* Optional: wird weiss beim Tippen */
}

/* ================================
   PAGE: Gruppen & Rangliste
   ================================ */

/* Versteckt den Zurück-Button auf kleinen Bildschirmen */
@media (max-width: 480px) {
  .back-button-container {
    display: none;
  }
}

.profilbild-mini {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.profilbild-mini.leer {
  background: #37434B;
  display: inline-block;
}

/* ================================
   PAGE: Profil
   ================================ */

.profilbild {
  width: 75px;
  height: 75px;
  object-fit: cover;
  border-radius: 50%;
}

/* ================================
   PAGE: Register
   ================================ */

/* Container für Text (ohne Switcher-Logik) */
.switch-row {
  display: block; /* Einfacher Block-Fluss, da kein Switcher daneben */
  margin-top: 2rem;
  width: auto;
  max-width: none;
}

.switch-text {
  font-family: "Lato", sans-serif;
  font-size: 0.9rem;
  color: #333; /* Dunkles Grau für Lesbarkeit auf Hellgrau */
  line-height: 1.5;
}

/* Der Link: Blau beim Hovern, keine Linie */
.switch-text a {
  color: #37434B; 
  text-decoration: none;
  border-bottom: none; /* Entfernt die potenzielle 2px Linie */
  transition: color 0.2s ease;
}

.switch-text a:hover {
  color: #3498db; /* Dein gewünschtes Blau */
  border-bottom: none !important; /* Sicherstellen, dass base.css nicht gewinnt */
  text-decoration: none !important;
}

/* Fehler- und Erfolgsnachrichten */
.error-message {
  display: flex;
  align-items: center;
  color: #37434B;
}

.error-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
}

.success-message {
  display: flex;
  align-items: center;
  color: #37434B;
}

.success-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
}

.info-message {
  display: flex;
  align-items: center;
  color: #37434B; /* gleiche Textfarbe wie Error */
}

.info-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
}

/* ================================
   PAGE: Turniere
   ================================ */

.turnier-wrapper {
    height: auto !important; /* Entfernt die festen 231px */
    flex-basis: auto !important; /* Falls flex-basis die Höhe erzwingt */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.turnier-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 1rem  !important;
  justify-content: flex-start; /* oder center für zentriert */
}

.primary-box-turnier .stat-label-turniere {
    position: absolute;
    bottom: 20px; /* Deine gewünschte Höhe */
    left: 50%;
    transform: translateX(-50%);
    
    /* Layout für Live-Punkt */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    /* Deine gewünschten Werte kombiniert */
    font-size: 0.8rem;         /* Wert aus .stat-label */
    font-weight: 700;          /* Wert aus .stat-label */
    opacity: 0.75;              /* Wert aus .stat-label */
    color: #37434B;
    white-space: nowrap;
    
}

/* Der rote Punkt bleibt gleich, damit er funktioniert */
.live-dot {
    width: 8px;
    height: 8px;
    background-color: #E66A6A;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-red 1.75s infinite;
}

@keyframes pulse-red {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Overlay Logik --- */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Abdunklung des Hintergrunds */
  backdrop-filter: blur(4px);           /* Sanfter Blur-Effekt */
  display: none;                        /* Standardmäßig unsichtbar */
  align-items: center;
  justify-content: center;
  z-index: 9999;                        /* Über allen anderen Elementen */
  padding: 1rem;
}

/* Wird vom JS getriggert */
.overlay.active {
  display: flex;
}

/* Das Inhalts-Fenster im Overlay */
.overlay .primary-box {
  max-width: 400px;
  width: 100%;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.overlay-actions {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
}

/* ================================
   PAGE: Statistics
   ================================ */

   .stat-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.quote-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.quote-inner {
    width: 46px;
    height: 46px;
    background: #fff; /* Oder deine Box-Farbe */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
}

/* Container-Anpassungen (optional, für sauberes Layout) */
.tipp-quote-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Label und Kreis */
    gap: 10px; /* Abstand zwischen Label und Kreis */
}

/* --- Der Kreis (Haupt-Styling) --- */
.tipp-circle {
    /* Größe des Kreises */
    --size: 100px;
    /* Dicke des Balkens */
    --thickness: 10px;

    /* DIE FARBEN AUS DEINEN PROGRESS BARS */
    --bg-color: #c9d0d6; /* .tipp-bar-outer */
    --bar-color: #4caf71; /* .tipp-bar-inner */

    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-content: center;
    background-color: white; /* Weißer Kern (Inhalt) */
}

/* Der graue Hintergrund-Kreis (entspricht .tipp-bar-outer) */
.tipp-circle::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    background-color: var(--bg-color);
}

/* Der grüne Fortschritt (wird mit conic-gradient erzeugt) */
.tipp-circle::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    /* Nutzt die --p Variable aus dem HTML */
    background: conic-gradient(var(--bar-color) calc(var(--p) * 1%), #0000 0);
    
    /* Abgerundete Kanten (entspricht .tipp-bar-inner border-radius) */
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #fff calc(100% - var(--thickness)));
}

/* --- Der innere Bereich (für den Text) --- */
.tipp-circle-inner {
    position: absolute;
    inset: var(--thickness); /* Abstand zum äußeren Rand = Balkendicke */
    background: #EAEEF3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Über dem conic-gradient */
}

/* Der Text selbst (angepasst an das Bild) */
.tipp-value {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #37434B;
}