/* ScattPort – responsive layer over bizblue base (template.css) */

*, *::before, *::after { box-sizing: border-box; }
body, html { margin: 0; padding: 0; }

#body_bg { background: #ffffff url(../images/bg_top.gif) repeat-x top left; }

.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 10px; }

/* ---- Top-Leiste (Suche + Top-Menue) ---- */
.topbar { background: url(../images/bg_top.gif) repeat-x top left; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 42px; }
.topbar-search { display: flex; align-items: center; }
.topbar-search #searchbox { margin: 0; }
.topnav { margin-left: auto; }
.topnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.topnav ul li { float: none; display: block; list-style: none; background: none; padding: 0; margin: 0; border-left: 1px solid #cccccc; line-height: 28px; white-space: nowrap; }
.topnav ul li a { display: block; padding: 0 10px; font-size: 11px; color: #000033; font-weight: normal; text-decoration: none; }
.topnav ul li a:hover { color: #999999; }

/* ---- Kopf / Logo ---- */
.site-header { background: #ffffff; }
.site-header .logoheader { display: block; background: url(../images/header.jpg) #ffffff no-repeat bottom left; height: 65px; width: 100%; padding: 0; text-indent: -9999px; overflow: hidden; }

/* ---- Breadcrumb + Datum ---- */
.topinfo { background: url(../images/shadow.jpg) #ffffff repeat-x top; }
.topinfo-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 25px; padding: 3px 0; }
.topinfo .pw { float: none; display: flex; align-items: center; gap: 8px; }
.topinfo .date { float: none; width: auto; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { float: none; display: inline-block; background: none; padding: 0; margin: 0; }

/* ---- 3-Spalten-Layout ---- */
#mainconteiner { background: #ffffff; padding-top: 6px; padding-bottom: 6px; }
.layout { display: flex; align-items: stretch; gap: 0; }
.col { padding: 5px; }
.lcol { flex: 0 0 185px; width: 185px; border-left: 1px solid #cccccc; background: #ffffff; }
.rcol { flex: 0 0 185px; width: 185px; border-right: 1px solid #cccccc; background: #ffffff; }
.main-col { flex: 1 1 auto; min-width: 0; padding: 5px 10px; }
.main-col .main { width: 100%; }

/* ---- Modul-Raster (top/bottom/user) ---- */
.mod-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.mod-grid > * { flex: 1 1 0; min-width: 200px; }

/* moduletable-Breite in Flex-Spalten absichern */
.col table.moduletable, .col table.moduletable_menu,
.mod-grid table.moduletable, .mod-grid table.moduletable_menu { width: 100%; }

/* Bilder nie ueberlaufen */
.main-col img, .lcol img, .rcol img { max-width: 100%; height: auto; }

/* ---- Fuss ---- */
.foot { background: none; }

/* ---- Joomla-4-Komponenten-Anpassungen (altes bizblue-Markup vs. J4) ---- */

/* Pagination horizontal (J4: ul.pagination > li.page-item) */
.pagination, ul.pagination, nav .pagination, .pagination-list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 12px 0;
}
.pagination li, ul.pagination li, .pagination .page-item {
	display: inline-block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal !important;
	background: none !important;
	background-image: none !important;
}
.pagination li a, .pagination li span, .pagination .page-link {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid #cccccc;
	background: #ECF0F3;
}
.pagination .active .page-link, .pagination li.active span { background: #6D8DB5; color: #fff; }
.pagination-wrapper { text-align: center; }
.counter, p.counter { text-align: center; font-size: 11px; color: #4B6B94; clear: both; }

/* J4-Listen-Ansichten (Kategorie/Newsfeeds/Tags) sollen keine Block-Pfeil-Bullets bekommen,
   wo sie als Tabellen/Karten gedacht sind */
ul.nav, ul.mod-list, .com-content-category-blog ul.pagination li,
.list-striped li, .nav-tabs li, .pagination li { background-image: none; }

/* Blog-Layout: Intro-Artikel in Spalten (J4 nutzt .blog-items.masonry-N, sonst Cassiopeia-CSS) –
   zeilenweise wie im alten bizblue (links/rechts/links/rechts) via CSS-Grid */
.blog-items.masonry-2, .blog-items.columns-2 {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; align-items: start;
}
.blog-items.masonry-3, .blog-items.columns-3 {
	display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 20px; align-items: start;
}
.blog-items .blog-item { min-width: 0; }
.blog-items .blog-item img { max-width: 100%; height: auto; }
/* w-100 = Zeilenumbruch / Pagination: ueber alle Spalten und ans Ende */
.blog-items > .w-100 { grid-column: 1 / -1; order: 999; }

/* Top-Menue: gleiche Reihenfolge wie im Original (Impressum links) */
.topnav ul { flex-direction: row-reverse; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 800px) {
	.layout { flex-direction: column; }
	.lcol, .rcol { flex: 1 1 auto; width: 100%; border-left: none; border-right: none; border-top: 1px solid #e2e2e2; }
	.main-col { order: -1; }            /* Inhalt zuerst auf Mobil */
	.mod-grid { flex-direction: column; }
	.mod-grid > * { min-width: 0; }
	.topbar-inner { flex-direction: column; align-items: stretch; }
	.topnav { margin-left: 0; }
	.topnav ul { justify-content: flex-start; flex-direction: row; flex-wrap: wrap; }
	.topnav ul li:first-child { border-left: none; }
	.blog-items.masonry-2, .blog-items.masonry-3,
	.blog-items.columns-2, .blog-items.columns-3 { grid-template-columns: 1fr; }
	.site-header .logoheader { background-size: contain; min-height: 50px; }
}

@media (max-width: 480px) {
	.topinfo-inner { flex-direction: column; align-items: flex-start; }
	.topbar-search #searchbox { width: 100%; }
}