/*
	===============================================================================
	KRITISCHER BUGFIX - 768px Weisser Balken
	===============================================================================
	
	PROBLEM:
	Bei EXAKT 768px Bildschirmbreite erscheint ein weisser Balken am rechten Rand
	aller Seiten. Dies ist ein haeufiger CSS-Bug bei Responsive Breakpoints.
	
	URSACHE:
	- Uebergang zwischen Desktop- und Mobile-CSS
	- Media Query Konflikte zwischen @media (max-width: 768px) und groesseren Breakpoints
	- Container-Breiten passen nicht exakt zu 768px
	
	LOESUNG:
	Diese Datei zielt SPEZIFISCH auf @media screen and (width: 768px)
	und erzwingt 100% Breite fuer alle kritischen Elemente.
	
	WICHTIG FUER ENTWICKLER:
	- Diese Datei wird von ALLEN HTML-Seiten eingebunden
	- Verwendet !important fuer hoechste Prioritaet
	- Testet die Website immer bei EXAKT 768px Breite!
	- Bei Aenderungen an Breakpoints diese Datei pruefen
	
	VORSICHT:
	- Nicht entfernen! Weisser Balken kommt sofort zurueck
	- !important-Regeln koennen andere Styles ueberschreiben
	
	===============================================================================
*/

/*	=========================================================================
	EXAKT 768px BILDSCHIRMBREITE - Der kritische Punkt
	========================================================================= 
	
	DIESER MEDIA QUERY zielt NUR auf genau 768px Breite!
	Nicht auf kleiner oder groesser - nur exakt 768px.
	
	WARUM IST DAS NOETIG?
	- Standard Breakpoint bei 768px
	- CSS-Konflikte zwischen Desktop/Mobile Styles
	- Container-Berechnungen passen nicht
	========================================================================= */

@media screen and (width: 768px) {
	/* Grundlegende Elemente */
	html, body {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	/* Container und Layout-Elemente */
	.container, 
	.header-container, 
	.content-with-sidebar,
	.slider,
	.article-section,
	.main-content,
	.article-card,
	.more-article,
	.footer {
		width: 100% !important;
		max-width: 768px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Innere Container und deren Padding anpassen */
	.article-content,
	.more-article-content {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Header-Spezifischer Fix */
	header {
		width: 100% !important;
		max-width: 768px !important;
		overflow-x: hidden !important;
	}

	/* Navigation */
	.navigation-area,
	.category-nav {
		width: 100% !important;
		max-width: 768px !important;
	}
}