@media (max-width: 1024px) {
	#content {
		padding: 0px !important;
	}
	
	#main-screen {
		position: relative;
		left: 0px;
		top: 30px !important;
	}
	
    /* 1. Sidebar komplett weg */
    .app-sidebar {
        display: none !important;
    }

    /* 2. MyBB-Tabelle optimieren (Damit sie nicht rechts rausragt) */
    .tborder {
        width: 100% !important;
        table-layout: fixed !important; /* Zwingt die Tabelle in den Viewport */
		margin-bottom: 5px !important;
    }

    .forum-header-status {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
    }

    /* 3. Den Content-Bereich auf volle Breite bringen */
    .main-wrapper {
        margin-left: 0 !important;
        padding-left: 0px !important;  /* Ein bisschen Abstand zum Rand für die Lesbarkeit */
        padding-right: 0px !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        box-sizing: border-box !important;
    }

    /* Falls der .main-wrapper noch ein 'position: relative' mit 'left' hat: */
    #container, .wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* 5. Logo-Bereich von MyBB (falls vorhanden) ebenfalls weg */
    #logo {
        display: none !important;
    }
	
	.mobile-top-bar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* DAS verteilt die Elemente */
        align-items: center !important; /* Vertikale Zentrierung */
        height: 60px !important;
        background: #111 !important;
        padding: 0 15px !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10003 !important;
        box-sizing: border-box !important;
		margin-bottom: 5px;
    }

    /* Damit die Mitte auch wirklich die Mitte ist, geben wir den äußeren 
       Elementen eine feste Breite oder nutzen flex: 1 */
    .mobile-exit {
        width: 40px; 
        display: flex;
        justify-content: center;
    }

    .mobile-exit i {
        color: #fff;
        font-size: 20px;
    }

    .mobile-logo {
        flex-grow: 1;
        display: flex;
        justify-content: center;
    }

    .mobile-logo img {
        height: 35px !important;
        width: auto;
    }

    .burger-menu-icon {
        display: flex !important;
        flex-direction: column !important; /* Zwingt die Striche UNTEREINANDER */
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important; /* Abstand zwischen den Strichen */
        width: 40px !important;
        height: 40px !important;
        cursor: pointer;
    }

    .burger-menu-icon span {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        border-radius: 2px !important;
        /* Verhindert, dass die Striche schrumpfen */
        flex-shrink: 0 !important;
		background-color: #ff0000 !important;
    }

    /* Die Sidebar als Slide-In Panel */
    .app-sidebar {
        display: flex !important;
    	flex-direction: column !important;
        position: fixed !important;
        top: 0;
        left: -100%; /* Startet versteckt links */
        width: 280px !important; 
        height: 100vh !important;
        background: #0a0b0d !important;
        /* Höherer Z-Index als Top-Bar (10005), damit sie drüber gleitet */
        z-index: 10006 !important; 
        transition: left 0.3s ease-in-out !important;
        margin: 0 !important;
        padding-top: 20px;
        /* Fix: Padding wird von der Breite abgezogen */
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Wenn aktiv (durch JS getriggert) */
    .app-sidebar.is-open {
        left: 0 !important;
        box-shadow: 10px 0 25px rgba(0,0,0,0.7);
    }

    /* 2. Navigations-Liste */
    .sidebar-nav {
        align-items: flex-start !important;
        width: 100%;
        margin-top: -10px;
    }

    .sidebar-nav a {
        flex-direction: row !important; 
        justify-content: flex-start !important;
        padding: 25px 30px !important; /* Leicht angepasst für mobile Griffigkeit */
        gap: 15px;
        font-family: 'Inter', 'Segoe UI', sans-serif !important;
    }

    .sidebar-nav a i {
        margin-bottom: 0 !important;
        width: 25px;
        text-align: center;
        font-size: 20px;
    }
	
	.sidebar-nav a::after {
        content: attr(title) !important;
        display: inline-block !important;
        letter-spacing: 1px;
        font-weight: 500;
        font-size: 16px !important;
        color: #ffffff !important;
		font-family: 'Inter', 'Segoe UI', sans-serif !important;
        white-space: nowrap;
    }
	
	.sidebar-nav a, .sidebar-footer a {
		height: 8px !important;
	}

    /* Login/Logout Bereich */
    .sidebar-footer {
        padding: 20px 0; /* Seiten-Padding auf 0 */
        width: 100%;
        align-items: flex-start !important;
		margin-top: auto !important; /* Letzter Sicherheits-Push nach unten */
    	padding-bottom: 20px !important;
		margin-left: -40px;
    }

    .sidebar-footer .auth-area a {
        display: flex;
        align-items: left;
        gap: 15px;
        width: 100%;
        padding: 15px 25px; /* Padding hier sorgt für bündigen Abschluss */
        text-decoration: none;
        font-family: 'Inter', 'Segoe UI', sans-serif !important;
    }

	.sidebar-footer .auth-area a::after {
		content: "Abmelden" !important; /* Schreibweise korrigiert */
		text-transform: none !important;
		font-weight: 500 !important;
		font-size: 16px;
		font-family: 'Inter', 'Segoe UI', sans-serif !important;
		color: #ffffff !important;
	}
	
	.sidebar-nav a.active {
		background: rgba(255, 255, 255, 0.1) !important; /* Grauer Schimmer statt Rot-Block */
		border-left: 4px solid #ffffff !important; /* Weißer Indikator wie Startseite */
	}
	
	.sidebar-nav a.active i {
		color: #ffffff !important;
	}

	.sidebar-nav a.active::after {
		color: #ffffff !important; /* Aktiver Text reinweiß */
	}

    /* Den restlichen Content nach unten schieben, damit er nicht unter der Top-Bar klebt */
    .main-wrapper {
        margin-top: 10px !important;
        margin-left: 0 !important;
    }
	
	.sidebar-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7); /* Dunkelt den Hintergrund ab */
		z-index: 10004 !important; /* Zwischen Top-Bar und Sidebar */
	}

	.sidebar-overlay.active {
		display: block !important;
	}
	
	.app-sidebar .sidebar-logo {
        padding-left: 20px;
        margin-bottom: 5px;
        margin-top: 10px;
    }
	
	.app-sidebar .sidebar-logo #sb-logo {
        width: 80px !important;
        margin-right: 15px;
        margin-bottom: 5px;
    }
	
	.wrapper { 
        width: 100% !important; 
        box-sizing: border-box !important; 
        padding: 0 5px !important;
		margin-top: 20px !important;
    }

    /* --- 2. STARTSEITE (INDEX) - KARTEN-LOOK --- */
    /* Wir sprechen nur Tabellen an, die NICHT die Klasse .tfixed haben (das schützt die Beitragsseite) */
    .tborder:not(.tfixed) tbody, 
    .tborder:not(.tfixed) tr, 
    .tborder:not(.tfixed) td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tborder:not(.tfixed):not(.online-liste-mobile) tr:not(.mobile-row) td:nth-child(3),
	.tborder:not(.tfixed):not(.online-liste-mobile) tr:not(.mobile-row) td:nth-child(4) {
		display: none !important;
	}

	.tborder:not(.tfixed):not(.online-liste-mobile) .tcat {
		display: none !important;
	}

    /* Die einzelnen Foren-Zeilen als Karten stylen */
    .tborder:not(.tfixed) tr.trow1, 
    .tborder:not(.tfixed) tr.trow2 {
        background: #1a1a1a !important;
        margin-bottom: 15px !important;
        border: 1px solid #333 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

	/* icon raus */
	.tborder:not(.tfixed):not(.online-liste-mobile) tr:not(.mobile-row) td:first-child:not(#boardstats_e td) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		position: absolute !important;
		visibility: hidden !important;
	}

	/* Sicherheitshalber: Falls das Icon in der Statistik-Tabelle 
	   doch eine der Status-Klassen nutzt, erlauben wir sie dort wieder */
	#boardstats_e td, 
	#boardstats_e span {
		display: table-cell !important;
		position: static !important;
		visibility: visible !important;
		width: auto !important;
	}

    /* Foren-Titel & Beschreibung */
    .tborder:not(.tfixed) td:nth-child(2) {
        padding: 15px !important;
    }

    /* "Letzter Beitrag"-Zelle als abgesetzte Box innerhalb der Karte */
    .tborder:not(.tfixed) td:last-child {
        background: #222 !important;
        padding: 10px 15px !important;
        border-top: 1px solid #333 !important;
        font-size: 11px !important;
    }
	
	/* Gezieltes Ausblenden der Kategorie mit der ID cat_17_e */
	table:has(#cat_17_e) {
		display: none !important;
	}

	/* Falls nach der Tabelle ein störender Zeilenumbruch (<br>) bleibt */
	table:has(#cat_17_e) + br {
		display: none !important;
	}

	/* 1. Die Legende (On/Off Symbole) direkt über die Klasse ausblenden */
	.forum_legend {
		display: none !important;
	}

	/* 2. STATISTIKEN (Boardstats) gezielt optimieren */

	/* Den Header (roter Balken "Foren-Statistiken") auf volle Breite */
	table:has(#boardstats_e) td.thead {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Den Inhalt der Statistik untereinander stapeln */
	#boardstats_e, 
	#boardstats_e tr, 
	#boardstats_e td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Die Zwischenüberschriften (Wer ist online / Foren-Statistiken) */
	#boardstats_e td.tcat {
		background: #222 !important;
		border-top: 1px solid #333 !important;
		padding: 8px 12px !important;
	}

	/* Die Text-Inhalte (Mitgliederliste, Beitragszahlen) */
	#boardstats_e td.trow1 {
		padding: 12px !important;
		line-height: 1.5 !important;
		background: #1a1a1a !important;
	}

	/* Den Abmelden-Link im Fußbereich (tfoot) zentrieren oder aufräumen */
	#boardstats_e td.tfoot {
		text-align: center !important;
		padding: 10px !important;
		background: #111 !important;
	}

    /* --- 3. BEITRAGSANSICHT (SHOWTHREAD) --- */
    /* Hier nutzen wir .tfixed, um die Tabellenstruktur für die Post-Container zu öffnen */
    table.tborder.tfixed.clear {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    /* Der rote Header-Balken (Thementitel) auf volle Breite */
    table.tborder.tfixed.clear td.thead {
        display: block !important;
        width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* Post-Container (TD) in Block umwandeln */
    td#posts_container {
        display: block !important;
        width: 100% !important;
    }

    /* Der einzelne Beitrag (Postbit) */
    .post {
        display: block !important;
        width: 100% !important;
        background: #151515 !important;
        border: 1px solid #333 !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    .post_author {
        display: flex !important;
        align-items: center !important;
        padding: 10px !important;
        background: #222 !important;
        border-bottom: 1px solid #333 !important;
    }

    .author_avatar img {
        width: 45px !important;
        height: auto !important;
        margin-right: 12px !important;
    }

    .author_statistics {
        display: none !important;
    }

    .post_body {
        padding: 15px !important;
        word-wrap: break-word !important;
        color: #fff !important;
    }

    /* Buttons (Zitieren, Edit etc.) */
    .post_controls {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px !important;
        background: #111 !important;
        border-top: 1px solid #222 !important;
    }

    .postbit_buttons a {
        background: #333 !important;
        padding: 6px 12px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        text-decoration: none !important;
        border: 1px solid #444 !important;
    }
	
	/* --- THEMENLISTE (FORUMDISPLAY) FIX --- */

	/* 1. Die Zelle selbst: Wir zwingen sie auf 'block' */
	.mobile-row td.mobile-title-cell {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 50px !important; /* Test: Erzeugt Platz, auch wenn leer */
		background: #1a1a1a !important; /* Gleiche Farbe wie Karte */
	}

	/* 2. Den Inhalt der Zelle (Span/Div/Link) SICHTBAR machen */
	.mobile-title-cell *, 
	.mobile-title-cell span, 
	.mobile-title-cell a, 
	.mobile-title-cell div {
		display: inline-block !important; /* Wichtig für Links */
		visibility: visible !important;
		opacity: 1 !important;
		color: #ffffff !important;
		font-size: 16px !important;
		font-weight: bold !important;
	}

	/* 3. Den "Letzten Beitrag" darunter positionieren */
	.mobile-lastpost-cell {
		display: block !important;
		width: 100% !important;
		background: #222 !important;
		padding: 10px !important;
		border-top: 1px solid #333 !important;
	}

	/* 4. Den Rest radikal ausblenden */
	.mobile-row td:not(.mobile-title-cell):not(.mobile-lastpost-cell) {
		display: none !important;
	}

	/* 5. Author Smalltext verkleinern */
	/* 1. Das Container-Div (für Abstände) */
	.thread_author_line {
		display: block !important;
		margin-top: 5px !important;
		line-height: 1.2 !important;
		font-style: italic;
	}

	/* 2. DER ENTSCHEIDENDE PART: Die Elemente IM Div */
	/* Wir erzwingen die Größe für den Link UND den Text */
	.thread_author_line a,
	.thread_author_line .smalltext {
		font-size: 12px !important; /* Hier kannst du die Größe genau steuern */
		color: #999 !important;
		text-decoration: none !important;
	}

	/* 3. Optional: Den Autorennamen etwas abheben */
	.thread_author_line .author a {
		color: #ffffff !important;
		font-weight: 600 !important;
	}

	/* 4. border gradient red to black */
	.tborder:not(.tfixed) tr.trow1 td.mobile-title-cell, 
	.tborder:not(.tfixed) tr.trow2 td.mobile-title-cell {
		border-bottom: 1px solid !important;
		border-image: linear-gradient(to right, #ff0000, #440000, #1a1a1a) 1 !important;
		margin-bottom: 5px !important;
	}

	.tborder:not(.tfixed) tr td.mobile-title-cell {
		/* 1. Wir erzwingen, dass die Zelle sich wie ein Block-Element verhält */
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;

		/* 2. Dein exakter Gradient von der Startseite */
		border-bottom: 1px solid !important;
		border-image: linear-gradient(to right, #ff0000, #440000, #1a1a1a) 1 !important;

		/* 3. Abstände optimieren */
		padding: 15px 10px !important;
		margin-bottom: 5px !important;
		background: #1a1a1a !important;
	}
	
	.tborder:not(.tfixed) td:nth-child(2) {
		border-bottom: 1px solid !important;
		border-image: linear-gradient(to right, #ff0000, #440000, #1a1a1a) 1 !important;
	}

	td:has(.forumjump), 
	.tfoot[align="right"] {
		display: table-cell !important; /* Zurück zur stabilen Tabellen-Logik */
		height: 60px !important;        /* Physische Mindesthöhe */
		vertical-align: middle !important;
		padding: 10px 15px !important;
		overflow: visible !important;
	}

	/* 2. Das Formular darin darf nichts blockieren */
	td:has(.forumjump) form {
		display: inline !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* 3. Der Text "Gehe zu:" */
	td:has(.forumjump) strong {
		display: inline-block !important;
		vertical-align: middle !important;
		margin-right: 8px !important;
		white-space: nowrap !important;
	}

	/* 4. Das Dropdown-Menü selbst */
	.forumjump {
		display: inline-block !important;
		vertical-align: middle !important;
		height: 32px !important; /* Feste Höhe, damit wir wissen, womit wir arbeiten */
		line-height: 32px !important;
		margin: 0px 0px 8px 0px !important;
		visibility: visible !important; /* Sicherstellen, dass es da ist */
		opacity: 1 !important;
		position: relative !important;
		z-index: 999 !important;
	}

		/* 1. Den Wrapper auf 99% weiten */
	#content center .wrapper {
		width: 99% !important;
		max-width: 99% !important;
		margin: 0 auto !important; /* Zentrierung beibehalten */
		padding: 0 !important;    /* Äußeres Padding weg, um Platz zu sparen */
	}

	/* 2. Die Tabelle daran hindern, starr zu sein */
	.tborder.tfixed {
		width: 100% !important;   /* Nutzt die 99% des Wrappers voll aus */
		table-layout: auto !important; /* Hebt das "fixed" der Spalten auf */
	}

	/* 3. Den eigentlichen Beitrags-Container auf volle Breite */
	#posts_container, #posts, .post {
		width: 100% !important;
		box-sizing: border-box !important; /* WICHTIG: Padding wird eingerechnet */
	}

		/* 1. Den Wrapper weiten und den Abstand nach oben zurückholen */
	#content center .wrapper {
		width: 99% !important;
		max-width: 99% !important;
		margin: 20px auto !important; /* 20px Abstand nach oben/unten */
		padding: 0 !important;
		display: block !important;
	}

	/* 2. Die Tabelle zwingen, die volle Breite des Wrappers zu nutzen */
	.tborder.tfixed {
		width: 100% !important;
		min-width: 100% !important; 
		margin: 0 !important;
		border-collapse: collapse !important; /* Verhindert Lücken zwischen Zellen */
	}

	/* 3. Das Zellen-Padding der Tabelle entfernen für maximale Breite */
	#posts_container {
		width: 100% !important;
		padding: 0 !important; 
	}
	
	/* --- ONLINE-LISTE: TABELLEN-STRUKTUR ERZWINGEN --- */
	table.tborder.online-liste-mobile {
		display: table !important;
		width: 100% !important;
		table-layout: auto !important;
	}

	/* Wir zwingen die Zeilen in den Zeilen-Modus */
	table.tborder.online-liste-mobile tr {
		display: table-row !important;
	}

	/* JETZT: Wir holen JEDE EINZELNE ZELLE zurück, egal was global.css sagt */
	table.tborder.online-liste-mobile td.tcat,
	table.tborder.online-liste-mobile td.trow1,
	table.tborder.online-liste-mobile td.trow2,
	table.tborder.online-liste-mobile td {
		display: table-cell !important; /* DAS überschreibt das display:none */
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
		padding: 8px 5px !important;
		border: 1px solid #333 !important; /* Nur zum Testen, ob sie da sind */
		background: #111111 !important; /* Hier kannst du dein gewünschtes Schwarz/Dunkelgrau einsetzen */
		color: #ffffff !important;
	}

	/* Wir verteilen die Breiten fest auf die 3 Spalten */
	/* Spalte 1: User/IP */
	table.tborder.online-liste-mobile td:nth-of-type(1) {
		width: 35% !important;
	}
	/* Spalte 2: Zeit */
	table.tborder.online-liste-mobile td:nth-of-type(2) {
		width: 25% !important;
		text-align: center !important;
	}
	/* Spalte 3: Ort */
	table.tborder.online-liste-mobile td:nth-of-type(3) {
		width: 40% !important;
	}

	/* Optional: Den Header (Benutzername, Zeit, Ort) leicht abheben, falls gewünscht */
	table.tborder.online-liste-mobile tr:first-child td.tcat,
	table.tborder.online-liste-mobile .thead {
		background: #000000 !important; /* Tiefschwarz für die Überschrift */
		border-bottom: 2px solid #333 !important;
		font-size: 15px;
	}
	
	/* Jede zweite Zeile ganz leicht aufhellen */
	table.tborder.online-liste-mobile tr:nth-child(even) td { background: #161616 !important; }

	/* Sicherstellen, dass der Text in den Zellen nicht versteckt wird */
	table.tborder.online-liste-mobile td * {
		display: inline-block !important;
		visibility: visible !important;
	}
}