/* =========================================================================
   AquaMonkey - eigene Styles
   Zusammengefuehrt aus (im alten Setup verstreut):
     wp-content/themes/twentytwentyfour/style.css
     wp-content/themes/twentytwentyfour/cards-gallery.css
     wp-content/themes/twentytwentyfour/snippet-img.css
     wp-content/themes/twentytwentyfour/style2.css
     wp-content/uploads/2024/01/style.css
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Beitragslisten
   ------------------------------------------------------------------------- */

.posts {
	display: flex;
	flex-wrap: wrap;
}

.posts .post {
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
}

.posts .post .title {
	font-size: 20px;
	margin: 0 0 15px 0;
}


/* -------------------------------------------------------------------------
   2. Display Posts - Grid
   HINWEIS: Hier stand frueher eine verirrte "0" direkt vor dem ersten
   @media-Block. Dadurch hat der Browser die 2-Spalten-Regel komplett
   verworfen. Ist behoben.
   ------------------------------------------------------------------------- */

.display-posts-listing.grid {
	display: grid;
	grid-gap: 35px;
}

.display-posts-listing.grid .title {
	display: block;
}

.display-posts-listing.grid img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (min-width: 600px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* -------------------------------------------------------------------------
   3. Pflanzen-Panel
   TODO: float-basiertes Layout - laesst sich 1:1 durch Grid ersetzen.
   ------------------------------------------------------------------------- */

#list-post-panel ul {
	width: 100%;
	list-style: none;
}

#list-post-panel li {
	width: 31%;
	margin: 1%;
	padding: 1%;
	float: left;
	background: #eee;
	list-style: none;
	text-align: center;
	border: 1px solid #cfcfcf;
}

.post-list-featured-image img {
	width: 50%;
	height: 50%;
}


/* -------------------------------------------------------------------------
   4. Karten-Galerie (Startseite)
   TODO: nutzt Bootstrap-Klassen (.card, .card-body). Mittelfristig durch
   den nativen Query-Loop-Block ersetzen, dann faellt Bootstrap ganz weg.
   ------------------------------------------------------------------------- */

.gallery-block {
	padding-top: 60px;
	padding-bottom: 60px;
}

.gallery-block .heading {
	margin-bottom: 50px;
	text-align: center;
}

.gallery-block .heading h2 {
	font-weight: bold;
	font-size: 1.4rem;
	text-transform: uppercase;
}

.gallery-block.cards-gallery h6 {
	font-size: 17px;
	font-weight: bold;
}

.gallery-block.cards-gallery .card {
	margin-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	transition: 0.4s ease;
}

.gallery-block.cards-gallery .card img {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.gallery-block.cards-gallery .card-body {
	text-align: center;
}

.gallery-block.cards-gallery .card-body p {
	font-size: 15px;
}

.gallery-block.cards-gallery a {
	color: #212529;
}

.gallery-block.cards-gallery a:hover {
	text-decoration: none;
}

@media (min-width: 576px) {
	.gallery-block .transform-on-hover:hover {
		transform: translateY(-10px) scale(1.02);
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15) !important;
	}
}

/* Hover-Effekt fuer Nutzer deaktivieren, die reduzierte Bewegung wuenschen. */
@media (prefers-reduced-motion: reduce) {
	.gallery-block.cards-gallery .card,
	.gallery-block .transform-on-hover:hover {
		transition: none;
		transform: none;
	}
}


/* -------------------------------------------------------------------------
   5. Inhaltssektionen (Aquascape- und Pflanzenseiten)
   ------------------------------------------------------------------------- */

.section .row {
	margin-top: 2%;
	margin-bottom: 0;
}

.section .row .col-md-12 {
	background: #fff;
	margin-right: 0;
}

.section h3,
.section h6 {
	color: #000;
}

.section p,
.section .list {
	color: grey;
	margin-bottom: 2%;
}

.section .p-abstand {
	margin-bottom: 2%;
}

.section img {
	width: 100%;
	height: auto; /* verhindert verzerrte Bilder */
}

.section .list a {
	color: grey;
	text-decoration: none;
	opacity: 1;
}

.section .list a:hover {
	opacity: 0.5;
}


/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */

.footer-dark {
	padding: 50px 0;
	color: #f0f9ff;
	background-color: #282d32;
}

.footer-dark h3 {
	margin-top: 0;
	margin-bottom: 12px;
	font-weight: bold;
	font-size: 16px;
}

.footer-dark ul {
	padding: 0;
	margin-bottom: 0;
	list-style: none;
	line-height: 1.6;
	font-size: 14px;
}

.footer-dark ul a {
	color: inherit;
	text-decoration: none;
	opacity: 0.6;
}

.footer-dark ul a:hover,
.footer-dark ul a:focus-visible {
	opacity: 1; /* war 0.8 - zu wenig Kontrast */
}

.footer-dark .item.text {
	margin-bottom: 36px;
}

.footer-dark .item.text p {
	margin-bottom: 0;
	opacity: 0.6;
}

.footer-dark .item.social {
	text-align: center;
}

.footer-dark .item.social > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 8px;
	font-size: 20px;
	line-height: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
	color: #fff;
	opacity: 0.75;
}

/* Inline-SVG statt Icon-Font: als Block, damit keine Grundlinien-Luecke
   unter dem Element entsteht. */
.footer-dark .item.social > a svg {
	display: block;
	width: 20px;
	height: 20px;
}

.footer-dark .item.social > a:hover,
.footer-dark .item.social > a:focus-visible {
	opacity: 1;
}

.footer-dark .copyright {
	padding-top: 24px;
	margin-bottom: 0;
	text-align: center;
	font-size: 13px;
	opacity: 0.6; /* war 0.3 - praktisch unlesbar */
}

@media (max-width: 991px) {
	.footer-dark .item.social {
		margin-top: 20px;
	}
}

@media (max-width: 767px) {
	.footer-dark .item:not(.social) {
		text-align: center;
		padding-bottom: 20px;
	}

	.footer-dark .item.text {
		margin-bottom: 0;
	}
}