/* 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: none; margin: 0 auto; padding: 0 8px; }

/* ---- 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 (zentriert wie im Original) ---- */
.foot { background: none; }
.foot .footer { text-align: center; padding: 10px 0; }
.foot .footer p { margin: 0; }
/* Hinweis "Hosted by Gerbracht.IT" mit kleinem Logo (seit 2026-10-23) */
.foot .footer .hosted-by { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font-size: 10px; line-height: 22px; color: #999999; }
.foot .footer .hosted-by a { display: inline-flex; align-items: center; color: #999999; text-decoration: none; }
.foot .footer .hosted-by img { display: block; height: 22px; width: auto; position: relative; top: -2px; } /* Schriftzug im Logo liegt unter der Bildmitte */

/* ---- Joomla-5-Komponenten-Anpassungen (altes bizblue-Markup vs. J5) ---- */

/* Bootstrap-Hilfsklassen, die J5-Layouts verwenden (kein Bootstrap-CSS geladen) */
.float-end, .pull-right { float: right; }
.float-start, .pull-left { float: left; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Pagination im alten Text-Stil (Override html/layouts/joomla/pagination/links.php liefert span.pagination) */
.pagination__wrapper, nav.pagination__wrapper { display: block; clear: both; text-align: center; margin: 10px 0; }
span.pagination { display: block; text-align: center; font-size: 11px; }
span.pagination span, span.pagination a { padding: 2px; }
span.pagination a { color: #999999; text-decoration: none; }
span.pagination a:hover { color: #4B6B94; }
span.pagination strong span { color: #4B6B94; }
.counter, p.counter { font-size: 11px; color: #4B6B94; margin: 10px 0 0 0; }

/* J5-Listen-Ansichten: keine Pfeil-Bullets, wo Listen Navigation sind */
ul.nav, ul.mod-list, .nav-tabs li { background-image: none; }

/* Blog-Layout: Intro-Artikel in Spalten (J5: .blog-items.masonry-N bei Reihenfolge "abwaerts",
   .columns-N bei "quer") – zeilenweise wie im alten bizblue via CSS-Grid, auf Mobil einspaltig */
.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; }
.blog-item .item-content { overflow: hidden; }

/* "Read more": J5 rendert a.btn mit Chevron-Icon – Icon ausblenden, alter readon.gif-Stil aus template.css greift */
p.readmore a .icon-chevron-right { display: none; }

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


/* ---- Runde 2 (2026-10-23): Angleichung an die alte Live-Seite ---- */

/* Spaltenlinien wie im alten Tabellen-Layout: links/rechts der Seitenspalten + Abschluss unten */
.lcol { border-right: 1px solid #cccccc; }
.rcol { border-left: 1px solid #cccccc; }
.layout { border-bottom: 1px solid #cccccc; }

/* Breadcrumb: Pfeil-Trenner wie im Original (arrow.png) */
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
	content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 5px 0 4px;
	background: url(../images/arrow.png) no-repeat center center; vertical-align: baseline;
}

/* Seitenueberschriften der Komponenten: J5 rendert h1, das alte Template zeigte sie im h2-Stil
   (Grossbuchstaben, 14px, Unterstrich). Artikel-h1 INNERHALB des Inhalts bleiben wie gehabt. */
.item-page > .page-header h1, .weblink-category > h1, .com-content-category h1, .com-contact h1, .com-finder h1, .com-users h1 {
	border-bottom: 1px solid #3B5576; font-size: 14px; font-weight: bold; line-height: 16px;
	text-transform: uppercase; text-align: left; color: #3B5576; width: 100%; padding: 1px; margin: 3px 0;
}

/* Seitenzaehler ("Page 1 of 5") rechts neben der Pagination (J5-Klasse float-md-end) */
.float-md-end { float: right; }
.com-content-category-blog__navigation, .com-content-category-blog__pagination { clear: none; }

/* "Display #"-Label der Listen sichtbar wie im Original */
.com-content-category__pagination label.visually-hidden, .com-weblinks-category__pagination label.visually-hidden {
	position: static; width: auto; height: auto; margin: 0 4px 0 0; overflow: visible; clip: auto; white-space: nowrap; font-size: 11px;
}
.com-content-category__pagination, .com-weblinks-category__pagination { margin: 4px 0 8px 0; }
.com-content-category__pagination select, .com-weblinks-category__pagination select { font-size: 11px; }

/* Weblinks-Kategorie: graue Balken + Globus-Icon wie im alten ul.weblinks */
.com-weblinks-category ul.category { list-style: none; padding: 0; margin: 10px 0; clear: both; }
.com-weblinks-category ul.category > li {
	background: #E7EAEC url(../images/mod.gif) repeat-x top left; background-image: url(../images/mod.gif);
	margin: 5px 0; padding: 4px 8px 4px 32px; line-height: 15px; position: relative; min-height: 28px;
}
.com-weblinks-category ul.category > li::before {
	content: ""; position: absolute; left: 8px; top: 6px; width: 16px; height: 16px;
	background: url(../images/weblink.png) no-repeat center center;
}
.com-weblinks-category ul.category .icon-globe { display: none; }
.com-weblinks-category ul.category .list-title { font-weight: normal; }
.com-weblinks-category ul.category .list-title > a { font-weight: bold; }
.com-weblinks-category ul.category .list-group-item { background: none; border: 0; padding: 0; }
.com-weblinks-category .category-desc { margin-bottom: 10px; }

/* Smart Search (com_finder): erweiterte Suche standardmaessig eingeklappt (kein Bootstrap-CSS geladen),
   Formular und Treffer kompakt wie die alte Suchseite */
.com-finder .collapse:not(.show) { display: none; }
.com-finder .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.com-finder .input-group { display: flex; flex-wrap: wrap; gap: 4px; }
.com-finder .btn { font-size: 11px; padding: 2px 8px; border: 1px solid #B4C1D1; background: #ECF0F3; color: #3B5576; cursor: pointer; }
.com-finder .btn .icon-search, .com-finder .btn .icon-search-plus { display: none; }
.com-finder__results-list { list-style: decimal; padding-left: 24px; margin: 10px 0; }
.com-finder__results-list li.result__item { background-image: none; padding-left: 0; margin: 0 0 12px 0; line-height: 15px; }
.com-finder .result__title { margin: 0; font-size: 12px; }
.com-finder .result__title-text, .com-finder .result__title-link { font-size: 12px; font-weight: bold; line-height: 15px; }
.com-finder .result__title-url { display: block; font-size: 10px; color: #999999; font-style: normal; }
.com-finder .result__description { margin: 2px 0; }
.com-finder .result__taxonomy { list-style: none; padding: 0; margin: 2px 0 0 0; font-size: 10px; color: #666666; }
.com-finder .result__taxonomy li { display: inline; background-image: none; padding: 0; margin: 0 8px 0 0; }
.com-finder .result__taxonomy li::after { content: " | "; margin-left: 6px; }
.com-finder .result__taxonomy li:last-child::after { content: ""; }
.com-finder mark, .com-finder .highlight { background: #ffff66; }

/* =========================================================
   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 */
	.lcol, .rcol { border-right: none; border-left: none; }
	.float-md-end { float: none; }
	.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%; }
}