/* ****************************************** */
/* Alles was breiter ist als 1024px : DESKTOP */
/* ****************************************** */

@media screen and (min-width: 1025px) {
	
	/* Keine Auf/Zu Pfeile im Menü */
    .main-nav-arrow {
        display: none;
    }
	
	/* Seitennavigation links für Desktop einblenden */
    .side-nav-container {
        display: block;
    }

}

/* *************************************************** */
/* Alles was schmaler ist als 1025px : TABLET + MOBILE */
/* *************************************************** */

@media screen and (max-width: 1024px) {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 60px; 
	}
	
	/* Dark/Light Mode toggler ausschalten */
	#theme-toggler {
		display: none;
	}
	
	/* Quickstarter Container einblenden / ohne zusätzliche Features bei TABLET, da Breite ausreichend */
	.quickstart-container {
		display:block;
	}
		
	/* 50/50 Boxen schieben sich untereinander */
    .box-content-box-col {
        flex: 1 1 100%;
        padding-right: 0;
        border-right: none;
		margin-bottom: 20px;
    }
    .box-content-box-col:last-child {
        border-left: 0;
        padding-left: 0;
    }
	    
    .box-content-box-grid {
        gap: 0; /* Auf Mobile regelt das Margin der Form-Groups den Abstand */
    }
	
	
	/* Content-Bereich game_view */
    .inner-row-side-50 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: block !important; /* Stellt sicher, dass die Schwächen mobil erscheinen */
        margin-bottom: 0px; /* Abstand zwischen Stärken und Schwächen Block */
    }
	
}



/* **************************************************************** */
/* Alles was schmaler ist als 1025px und breiter als 699px : TABLET */
/* **************************************************************** */

@media screen and (max-width: 1024px) and (min-width: 700px) {
	/* Content-Container / Logo / Login-Bereich */
	.content-container { 
		min-width: 100%;
		width: 100%; 
	}
	
	.header-top {
		flex-direction: row !important; /* Wieder nebeneinander */
        justify-content: space-between; /* Logo links, Login rechts */
        align-items: center;
        gap: 20px;
	}

	.logo-container {
        width: auto !important; /* Nimmt nur so viel Platz wie nötig */
        display: block !important;
    }
	
	.login-area {
		width: auto !important; 
        margin: 0 !important; /* Zentrierung vom Mobile-Modus aufheben */
        max-width: 350px; /* Begrenzung, damit sie nicht zu breit wird */
	}
    .login-form .modern-input {		/* Die Inputs schmaler machen, damit sie nebeneinander passen */
        flex: 1; /* Beide Inputs teilen sich den Platz */
        min-width: 0; /* Verhindert das "Rausdrücken" aus dem Container */    
    }
	
	
    /* 1. Die Haupt-Navigation: Icons nebeneinander erzwingen */
    .main-nav ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center;
        width: 100%;
        position: relative;
    }

    /* Texte ausblenden, Icons zentrieren */
    .main-nav li a span {
        display: none !important;
    }

    .main-nav li {
        position: relative; /* Wichtig für die Positionierung des Flyouts */
    }


    /* 2. Das Flyout fixieren (Das Problem im Screenshot) */
		
	.nav-flyout {
        transform: none; /* Entfernt das Verschieben nach links */
        flex-direction: row;
        width: auto;
        min-width: 550px;
        z-index: 10001;		
    }
	
    /* 3. Innere Spalten ordnen */
    .flyout-column {
        flex: 1; /* Verteilt den Platz gleichmäßig */
        min-width: 200px;
        text-align: left;
    }

    .flyout-column h4 {
        margin-top: 0;
        padding-bottom: 5px;
    }

    /* Listenelemente im Flyout untereinander (nicht nebeneinander!) */
    .flyout-column ul {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
	
	/* Content-Bereich */
    .col-9, .col-8, .col-6, .col-4, .col-3 { 
		grid-column: span 12; 
	}
	
	/* 3-Spaltiges Desgin */
    .inner-3-cols-table {
        display: flex;
        flex-wrap: wrap; /* Erlaubt das Fließen in die nächste Zeile */
        gap: 10px;
    }

    .inner-3-cols-col {		/* Die einzelnen Spalten für inner-3-cols */
        flex: 1 1 calc((100% - 30px) / 3); 
        max-width: 100%;
        min-width: 200px; /* Ab wann soll er wirklich auf 100% springen? */
    }

}


/* ***************************************** */
/* Alles was schmaler ist als 700px : MOBILE */
/* ***************************************** */

@media screen and (max-width: 699px) {
	.content-container {
		min-width: 0;       /* Erlaubt dem Container, so schmal wie das Handy zu werden */
		width: 95%;         /* Etwas mehr Platz auf kleinen Schirmen nutzen */
		margin: 0 auto;     /* Zentrierung */
	}

	/* Quickstarter Container einblenden / mit Wisch-Feature bei MOBILE, da Breite ggf. nicht mehr ausreichend */
	.quickstart-container {
        display: block;
        position: sticky;
        top: 0;
        z-index: 1000; /* Sehr hoch setzen */
        background: var(--box-secondary-bg);
        border-bottom: 1px solid var(--border-color);
        /* Wichtig: Verhindert, dass der Schatten den Rest der Seite überlagert */
        overflow: hidden; 
    }

	.qs-scroll-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.qs-scroll-indicator {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 40px;
		z-index: 10;
		pointer-events: none;
		transition: opacity 0.3s ease;
		opacity: 0; /* Standardmäßig unsichtbar */
	}

	.qs-scroll-indicator.right {	/* Der rote Verlauf nach rechts (anzeigen, dass es rechts weitergeht) */
		right: 0;
		background: linear-gradient(to right, var(--nav-quickstart-fadecolor-from), var(--nav-quickstart-fadecolor-to));
	}

	.qs-scroll-indicator.left {		/* Der rote Verlauf nach links (anzeigen, dass man zurückwischen kann) */
		left: 0;
		background: linear-gradient(to left, var(--nav-quickstart-fadecolor-from), var(--nav-quickstart-fadecolor-to));
	}

	.qs-scroll-indicator.is-visible {	/* Klasse zum Einblenden (wird per JS gesteuert) */
		opacity: 1;
	}
	

	/* Content-Container / Logo / Login-Bereich */
    .content-container { 
		width: 100%; 
		border-radius: 0;
   	}
	
	.main-logo-big {	/* Großes Logo ausblenden */
		display: none;
	}
	.main-logo-small {	/* Kleines Logo einblenden */
		display: block;
	}

	.login-area {
        
        max-width: 270px; 
    }
 
    .login-form {		/* Die Form-Elemente wieder in eine Reihe (Row) bringen */
        flex-direction: row !important; 
        flex-wrap: nowrap; /* Verhindert ungewollten Umbruch */
        gap: 4px !important;
        justify-content: space-between;
    }

    .login-form .modern-input {		/* Die Inputs schmaler machen, damit sie nebeneinander passen */
        flex: 1; /* Beide Inputs teilen sich den Platz */
        min-width: 0; /* Verhindert das "Rausdrücken" aus dem Container */    
    }

    .login-button {			/* Den Login-Button kompakt halten */
        width: auto !important; /* Nicht mehr volle Breite */
    }
	
	.userquickstart-flyover {
        position: fixed;     /* Fest am Viewport */
        top: 85px;           /* Etwas Abstand zum Header */
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%); /* Perfekte Zentrierung */
        width: 90%;          /* Fast volle Breite auf dem Pixel 9 */
        width: 400px;
    }
	.userquickstart-item {
		width:199px;
	}
	
	
	#mobile-menu-toggle {
		display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;  /* Feste Breite für Stabilität */
        height: 40px;
        font-size: 1.5rem;
        cursor: pointer;
    }
	
    .main-nav {					/* Nav-Leiste stapeln */
        flex-direction: column !important;
        height: auto !important;
        padding: 10px 0 !important;
        align-items: center !important;	
		/* Für das Hamburger-Menü */
        display: none; /* Menü initial verstecken */
        width: 100%;
        background: var(--container-bg);
        border-top: 1px solid var(--border-color);
    }

    /* Klasse, die per JS hinzugefügt wird, um das Menü zu zeigen */
    .main-nav.is-visible {
        display: block !important;
    }
	
    .main-nav ul {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .main-nav li { 
		width: 100%; 
		text-align: left; 
	}

    /* Menü-Links auf Mobile (mit Text) */
    .main-nav li a {
        padding: 10px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .main-nav li a span { display: inline !important; }

	.main-nav li.js-opened .main-nav-arrow {
		transform: rotate(180deg);
	}

    /* Flyout als Akkordeon */
    .nav-flyout {
        position: static !important;
        display: none; /* Nur bei .active zeigen */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(0,0,0,0.05) !important; /* Leicht abgesetzt */
        flex-direction: column !important;
        padding: 10px 20px !important;
    }

	.flyout-col-33, .flyout-col-66, .flyout-col-50 {
        flex-basis: 100% !important;
    }
	.flyout-column ul li a {
		padding: 4px;
	}

    .main-nav-search {		/* Suche im Menü ausblenden */
        display:none;
    }
	
	.mobile-search-wrapper {	/* Mobile Suche */
        display: flex;
		justify-content: center;
        padding: 3px 10px;
        background-color: var(--box-secondary-bg);
        border-bottom: 1px solid var(--border-color);
		margin-bottom: 10px;
    }

    .mobile-search-form {
        display: flex;
        align-items: center;
        background-color: var(--input-bg); /* Leicht abgesetzt vom Container */
        border: 1px solid var(--border-color);
        border-radius: 10px; /* Abgerundeter "Pillen"-Look */
        padding: 2px 10px;
		width:300px;
    }

    .mobile-search-form .modern-input {
        flex: 1;
        border: none;
        background: transparent;
        color: var(--text-main);
        font-size: 14px; /* Verhindert Auto-Zoom auf iPhones */
        outline: none;
		padding: 4px 5px;
    }
	.mobile-search-form.error-field {
		border-color:var(--primary-color);
		background-color: var(--error-box-bg);
		color: var(--text-main);
	}

    /* Damit die Badges nicht am rechten Rand kleben, 
       lösen wir die fixen 200px Breite auf mobilen Geräten auf */
    .user-badge-compact {
        width: 100% !important; 
        max-width: 225px !important; 
    }
			
	
	/* Content-Bereich */
	.col-9, .col-8, .col-6, .col-4, .col-3 { 
		grid-column: span 12; 
	}
	
	.col-center-50 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	



	/* Untereinander schieben der Zeilen innerhalb eines inner-row-stack-table  */
	.inner-row-stack-row {
		flex-direction: column; 
		align-items: flex-start; 
		gap: 0px;               /* Abstand zwischen Label und Value direkt */
	}

	.inner-row-stack-label {
		flex: 0 0 auto !important;
		width: 100%;
		margin-bottom:3px;
	}

	.inner-row-stack-value {
		padding-left: 0px;      /* Entfernt die weite Einrückung im mobilen Modus */
	}
	
	
    .inner-3-cols-table {		/* 3-Spaltiges Design */
        display: flex;
        flex-wrap: wrap; /* Erlaubt das Fließen in die nächste Zeile */
        gap: 10px;
    }

    .inner-3-cols-col {			/* Die einzelnen Spalten für inner-3-cols */
        flex: 1 1 calc((100% - 30px) / 3); 
        max-width: 100%;
        min-width: 200px; /* Ab wann soll er wirklich auf 100% springen? */
    }
	
	
	/* BBC Parser Styles */
	/* ***************** */
    .bbc-columns {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .bbc-columns-with-line > .bbc-column-item + .bbc-column-item {
        border-left: none;
        border-top: 1px solid #dee2e6;
        padding-left: 0;
        padding-top: 20px;
        margin-left: 0;
    }
	

}