/*
 * cassiopeia_sadko - Gestaltung der frueheren Seite www.sadko.de
 * (Joomla 2.5, Template beez5_sadko) auf Cassiopeia uebertragen.
 *
 * Farben, Schrift, Kopfbild und Seitenhintergrund stammen aus dem alten
 * Template (templates/beez5_sadko/css/beez5.css). Diese Datei laedt Cassiopeia
 * automatisch ("template.user"); Joomla-Updates ueberschreiben sie nicht.
 */

@font-face {
	font-family: "Titillium Maps";
	src: url("../fonts/TitilliumMaps29L002.woff") format("woff"),
		url("../fonts/TitilliumMaps29L002.otf") format("opentype");
	font-display: swap;
}

:root {
	--sadko-green: #7ba428;        /* Links, aktiver Menuepunkt */
	--sadko-green-dark: #669933;   /* Hover */
	--sadko-text: #333;
	--sadko-width: 1050px;         /* Seitenbreite wie frueher */
	--cassiopeia-color-primary: #fff;
	--cassiopeia-color-link: var(--sadko-green);
	--cassiopeia-color-hover: var(--sadko-green-dark);
	/* Frueher 16px x 0.8 (#all in layout.css) = 12.8px, Absaetze 1.7em */
	--body-font-size: .8rem;
	--body-line-height: 1.7;
}

body {
	background: #eee url("../images/header_outer.jpg") repeat-x;
	color: var(--sadko-text);
	font-family: Arial, Helvetica, sans-serif;
}

/* --- Seite als weisse Flaeche mit fester Breite --------------------------- */

.container-header,
.site-grid,
.container-footer {
	max-width: var(--sadko-width);
	margin-left: auto;
	margin-right: auto;
}

.container-header {
	width: 100%;
	background: #fff;
	background-image: none;
	box-shadow: none;
	color: var(--sadko-text);
	margin-top: 1.25rem;
}

.site-grid {
	background: #fff;
	padding: 1rem 1.25rem 2rem;
	grid-template-columns: [full-start] 0 [main-start] repeat(4, minmax(0, 1fr)) [main-end] 0 [full-end];
}

/* --- Kopfbild mit Logos (SADKO, EUF, ScubaPro) und Schriftzug ------------- */

/* Position "banner": erste Zeile im Raster, randlos unter dem Menue */
.site-grid > .container-banner {
	grid-column: 1 / -1;
	width: auto;              /* Cassiopeia: 100%, sonst greift der Rand rechts nicht */
	margin: -1rem -1.25rem 0;
	padding: 0;
}

.container-banner .mod-custom {
	margin: 0;
}

.sadko-banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 149px;
	padding: 1rem 1.5rem 1rem 400px;
	text-align: right;
	color: #fdfdfd;
	background:
		url("../images/banner-sadko-1600x149px.png") left center / auto 149px no-repeat,
		#1a8fdc url("../images/banner-background-1600x149px.png") left center / cover no-repeat;
}

.sadko-banner p {
	margin: 0;
	font-weight: bold;
	letter-spacing: 2px;
}

.sadko-banner .sadko-banner__title {
	font-size: 2.4em;
	line-height: 1.1;
}

.sadko-banner .sadko-banner__claim {
	font-size: 1.05em;
	line-height: 1.35;
	margin-top: .35em;
}

/* Kein Seitentitel/Logo von Cassiopeia - das Kopfbild uebernimmt das. */
.container-header .navbar-brand {
	display: none;
}

/* --- Hauptmenue: dunkle Schrift auf hellem Grund, aktiv gruen ------------- */

.container-header .container-nav {
	max-width: none;
	padding: 0;
	margin: 0;
	border-top: 4px solid #444;
	background: #fff;
}

.container-header .mod-menu {
	justify-content: flex-end;
	font-size: .85rem;
	text-transform: uppercase;
	gap: 0;
	margin: 0;
	padding: 0;
	color: var(--sadko-text);
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
	display: block;
	padding: 10px 15px;
	color: var(--sadko-text);
	border-right: 1px solid #eee;
	text-decoration: none;
	background: transparent;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
	color: #444;
	background: #ddd;
	text-decoration: none;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
	color: #fff;
	background: var(--sadko-green);
}

/* Hamburger (Cassiopeia-Layout collapse-metismenu, Umbruch bei 992px) */
.container-header .navbar {
	width: 100%;
	padding: 0;
	justify-content: flex-end;
}

/* Cassiopeia-Vorgaben fuer Menueeintraege (Abstand, 1.1rem, Unterstrich-Effekt)
   neutralisieren - Abstand und Groesse kommen von den Regeln oben */
.container-header .metismenu.mod-menu .metismenu-item {
	display: block;
	padding: 0;
	font-size: inherit;
	line-height: 1.5;
}

.container-header .metismenu > li > a::after {
	content: none;
}

.container-header .navbar-toggler {
	margin: 8px 12px;
	padding: .5rem .75rem;
	font-size: 1.25rem;
	line-height: 1;
	color: #fff;
	background: var(--sadko-green);
	border: 0;
	border-radius: 6px;
	transition: background-color .15s;
}

.container-header .navbar-toggler:hover,
.container-header .navbar-toggler[aria-expanded="true"] {
	background: var(--sadko-green-dark);
}

.container-header .navbar-toggler:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(123, 164, 40, .35);
}

@media (min-width: 992px) {
	.container-header .navbar-collapse .mod-menu {
		width: 100%;
	}
}

@media (max-width: 991.98px) {
	.container-header .navbar-collapse .mod-menu {
		flex-direction: column;
		width: 100%;
		font-size: .95rem;
		border-top: 1px solid #eee;
	}

	.container-header .mod-menu > li > a,
	.container-header .mod-menu > li > span {
		padding: 14px 20px;
		border-right: 0;
		border-bottom: 1px solid #eee;
	}

	/* aktiver Punkt: gruener Balken links statt voller Flaeche */
	.container-header .mod-menu > li.active > a,
	.container-header .mod-menu > li.current > a {
		color: var(--sadko-green-dark);
		text-decoration: none;
		background: #f4f8ec;
		box-shadow: inset 4px 0 0 var(--sadko-green);
	}
}

/* --- Inhalt ---------------------------------------------------------------- */

/* Ueberschriften relativ zur Grundschrift wie frueher, statt fester 2-2.5rem */
h1, .h1 { font-size: 1.6em; }
h2, .h2 { font-size: 1.4em; }
h3, .h3 { font-size: 1.1em; font-weight: bold; }
h4, .h4, h5, h6 { font-size: 1em; }

p {
	margin: 8px 0;
}

a {
	color: var(--sadko-green);
}

/* Wie frueher: Links im Text beim Ueberfahren gruen hinterlegt */
.com-content-article a:hover,
.com-content-article a:focus,
.com-content-category-blog a:hover,
.com-content-category-blog a:focus {
	color: #fff;
	background: var(--sadko-green-dark);
	text-decoration: none;
}

/* Seitentitel grau mit Linie, Beitragstitel gruen - wie frueher */
.page-header h1 {
	color: #444;
	font-weight: normal;
	padding-bottom: .3em;
	border-bottom: 1px solid #ddd;
}

.page-header h2,
.page-header h2 a {
	color: var(--sadko-green);
	font-weight: normal;
}

/* Frueher Arial auch fuer Ueberschriften (Cassiopeia: eigene Systemschrift) */
h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
}

.mod-breadcrumbs {
	font-size: .85em;
	margin-bottom: .5rem;
	padding: 0;
	background: none;
}

/* Bilder aus 13 Jahren Artikeln nie breiter als die Spalte */
.com-content-article img,
.com-content-category-blog img {
	max-width: 100%;
	height: auto;
}

/* --- Seitenleisten: Kaesten mit Titillium-Ueberschrift wie frueher -------- */

.container-sidebar-left .card,
.container-sidebar-right .card {
	border: 0;
	border-radius: 0;
	background: #fff;
	margin-bottom: 1.25rem;
}

.container-sidebar-left .card-header,
.container-sidebar-right .card-header {
	font-family: "Titillium Maps", Arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	color: #664335;
	background: transparent;
	border-bottom: 1px solid #ddd;
	border-radius: 0;
}

.container-sidebar-left .mod-menu a,
.container-sidebar-right .mod-menu a {
	display: block;
	color: var(--sadko-green);
	padding: .3rem .25rem;
	text-decoration: none;
}

.container-sidebar-left .mod-menu .current > a,
.container-sidebar-left .mod-menu .active > a {
	color: #fff;
	background: var(--sadko-green);
}

/* Nachrichtenspalte: abwechselnd grau hinterlegt, "Подробнее" als Link */
.mod-articles-items > li {
	padding: .4rem .4rem .6rem;
	border-bottom: 1px solid #ddd;
}

.mod-articles-items > li:nth-child(even) {
	background: #e6e6e6;
}

.mod-articles-title {
	font-size: 1.15em;
	font-weight: normal;
	margin: 0;
}

.mod-articles-title a {
	color: #333;
	text-decoration: none;
}

.mod-articles-date {
	font-size: .85em;
	margin: 0;
}

.mod-articles-date .icon-calendar {
	display: none;
}

.mod-articles-item p {
	margin: 4px 0;
	line-height: 1.4;
}

.mod-articles-item .readmore {
	margin: 0;
}

.mod-articles-item .readmore .btn {
	padding: 0;
	font-size: 1em;
	color: var(--sadko-green);
	background: none;
	border: 0;
	text-decoration: underline;
}

.mod-articles-item .readmore .icon-chevron-right {
	display: none;
}

/* Karte: lokales Bild aus OSM, Lizenzhinweis klein darunter */
.sadko-map {
	margin: 0 0 .4rem;
}

.sadko-map img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid #ddd;
}

.sadko-map a:hover img {
	border-color: var(--sadko-green);
}

.sadko-map-credit {
	margin: 0;
	font-size: .8em;
	color: #777;
}

.sadko-map-credit a {
	color: #777;
}

/* --- Fuss ------------------------------------------------------------------ */

.container-footer {
	background: #ddd;
	color: #555;
	margin-bottom: 1.25rem;
}

.container-footer a {
	color: #444;
}

/* --- Schmale Bildschirme --------------------------------------------------- */

@media (max-width: 767.98px) {
	.container-header {
		margin-top: 0;
	}

	.sadko-banner {
		min-height: 96px;
		padding: .5rem 1rem;
		background-size: auto 96px, cover;
	}

	/* Text wuerde die Logos ueberdecken - auf dem Handy nur das Kopfbild */
	.sadko-banner p {
		display: none;
	}
}