/* ============================================================
   simple_boot_layout.css
   Eigenes Flex-Layout — kein Bootstrap
   ============================================================ */

/* Seite immer 100% breit */
#content_container{
	width: 100%;
	padding-left: 8px;
	padding-right: 8px;
}

#Anwendungshilfe{
   margin-top: 20px;
   width: 100%;
   padding-left: 8px;
   padding-right: 8px;
}

/* Flex-Zeile */
.row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

/* Zwei-Spalten-Layout: Chord 70%, Sidebar 30% */
#bootstropChordContainer {
	flex: 0 0 70%;
	max-width: 70%;
	min-width: 0;
}

#sidebar {
	flex: 0 0 30%;
	max-width: 30%;
	min-width: 0;
}

/* Volle Breite (z.B. Quellenzeile) */
.col-xs-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Breite Viewports: Chord-Inhalt zentriert */
@media (min-width: 1120px) {
	#bootstropChordContainer {
		display: flex;
		justify-content: center;
	}
}

/* Mittlere Viewports: nebeneinander, Chord 60% / Sidebar 40% */
@media (max-width: 950px) {
	#bootstropChordContainer {
		flex: 0 0 60%;
		max-width: 60%;
	}
	#sidebar {
		flex: 0 0 40%;
		max-width: 40%;
	}
}

/* Kleine Viewports: untereinander stapeln
   Gilt auch im Iframe — CSS-Media-Queries beziehen sich
   immer auf den eigenen Viewport, nicht den der Elternseite */
@media (max-width: 600px) {
	#bootstropChordContainer,
	#sidebar {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Utility */
.top10 { margin-top: 10px; }

/* Anwendungshilfe Close-Buttons: responsive Sichtbarkeit */
#close_full_width { display: none; }
#close_right      { display: block; }

@media (max-width: 900px) {
	#close_full_width { display: block; }
	#close_right      { display: none; }
}

/* ============================================================
   Anwendungshilfe: Bild floatet rechts, Text umfließt es.
   Unterhalb 800px: Float aufgehoben, untereinander.
   ============================================================ */

/* Flex der übergeordneten .row hier deaktivieren */
#Anwendungshilfe .row {
	display: block;
	overflow: hidden;
}

/* Bild floatet rechts, Text umfließt von links */
#Anwendungshilfe_img_container {
	float: right;
	width: 50%;
	padding-left: 20px;
    margin-bottom: 15px;
	box-sizing: border-box;
}

#list_anwendungshilfe {
	width: 100%;
}

@media (max-width: 1100px) {
	#Anwendungshilfe_img_container {
		width: 60%;
	}
}

/* Unterhalb 800px: Flex mit order — Bild erscheint unter der Liste */
@media (max-width: 800px) {
	#Anwendungshilfe .row {
		display: flex;
		flex-direction: column;
	}
	#list_anwendungshilfe {
		order: 1;
		width: 100%;
	}
	#Anwendungshilfe_img_container {
		order: 2;
		float: none;
		width: 100%;
		padding-left: 0;
	}
}