/*
Theme Name: Freiwillige Feuerwehr Tiste
Theme URI: https://www.feuerwehr-tiste.de
Author: Matthias Klindworth
Author URI: https://www.k-evolution.de
Description: WordPress Template für die Feuerwehr Tiste
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Text Domain: feuerwehr
*/

/* anton-regular - latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('./fonts/anton-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/anton-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* courgette-regular - latin */
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('./fonts/courgette-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/courgette-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('./fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body * {
	font-family: 'Montserrat', sans-serif;

}
.container {
	max-width: 1250px;
}
.has-x-large-font-size,
.has-large-font-size,
.has-medium-font-size,
.has-small-font-size,
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-family: 'Anton', sans-serif;
	display: block;
	margin: 10px 0px 20px 0px !important;
	text-wrap: balance;
}
hr {
	color: #ca2b1d;
}
.schrift {
	display: block;
	font-family: 'Courgette', cursive;
	font-size: 1.5rem;
}
main a, footer a:hover {
	color: #ca2b1d !important;
}
.rot {
	background: #ca2b1d;
	margin: 25px 0;
	padding: 25px;
}
.rot * {
	color: #fff;
}
.rot.bg-light * {
	color: inherit;
}


header .logo {
	font-family: 'Anton', sans-serif;
	font-size: 2.5rem;
}
@media (max-width: 1000px) {
	.custom-logo-link {
		display: block;
		width: 100%;
		text-align: center;
	}
	header .logo {
		display: block;
		text-align: center;
	}
}

header .navbar {
	background-color: #ca2b1d !important;
}
header .navbar ul > li > a {
	text-transform: uppercase;
	font-size: 1.2rem;
	border-right: 1px solid rgba(0,0,0,0.2);
	color: #fff !important;
	padding: 10px 30px !important;
	display: block;
}
header .navbar ul > li:last-child > a {
	border-right: none;
}
header .navbar li.active a,
header .navbar ul > li:Hover > a {
	background: rgba(0,0,0,0.1);
}
header .navbar a:visited,
header .navbar a:focus,
header .navbar a:active {
	outline: none !important;
	box-shadow: none;
	background-color: #ca2b1d !important;
}
header .navbar a:hover {
	color: white !important;
}

.teaser {
	position: relative;
	margin-top: -25px;
	margin-bottom: 50px;
	overflow: hidden;
}
body:not(.home) .teaser {
	height: 100vh !important;
}
body:not(.home) .teaser > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.home .teaser > img {
	min-width: 100%;
}
.teaser .container h1 {
	font-size: 4.4rem;
	position: absolute;
	top: 50%;
	color: #fff;
	text-shadow: 0 0 10px #000;
}
@media(max-width:1000px) {
	.teaser .container h1 {
		font-size: 3.3rem;
	}
}
@media(max-width:800px) {
	.teaser .container h1 {
		font-size: 2.2rem;
	}
}

main {
	padding-top: 25px;
	padding-bottom: 25px;
}


footer {
	padding: 25px;
	background: #333;
	border-top: 5px solid #ca2b1d;
}
footer * {
	color: #fff;
}

footer .btn .fab {
	font-size: 1.75rem;
	text-align: center;
	vertical-align: middle;
}
.btn-instagram, .btn-instagram:hover {
	background-color: transparent;
	background: linear-gradient(200deg, #833ab4, #fd1d1d 75%, #fcb045);
	color: #fff !important;	
}
.btn-facebook, .btn-facebook:hover {
	background-color: #4267b2;
	color: #fff !important;
}
.btn-youtube, .btn-youtube:hover {
	background-color: #e93323;
	color: #fff !important;
}
.page-item.active .page-link,
.wp-block-button a,
.btn-feuerwehr {
	border-color: transparent;
	background-color: #ca2b1d;
	color: #fff !important;
}
.teaser .btn-feuerwehr {
	box-shadow: 0 0 2px #000;
}
.active *,
.wp-block-button a,
.btn-feuerwehr * {
	color: #fff !important;
	text-decoration: none;
}

.news > * {
	padding-bottom: 45px;
}

.page dt {
	font-family: 'Anton', sans-serif;
	font-size: 2rem;
	border-bottom: 1px solid #ca2b1d;
	margin-top: 25px;
}
.page p,
.page dd,
.single p,
.news p {
	text-align: justify;
	word-wrap: break-word;
  	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
			hyphens: auto;
}

.news .btn {
	position: absolute;
	bottom: 15px;
}
.news a:first-child {
	overflow: hidden;
	display: block;
}
.news img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.news-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	gap: 1rem;
}
.news-index .h3 {
	grid-column: 1 / -1;
}
.news-index > * {
	order: 1;
}
.news-index article {
	max-width: calc(100dvw - 2rem);
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	gap: .1rem;
}
.news-index article * {
	margin: 0;
}
.news-index figure {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.news-index article img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 1100px) {
	.news-index {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
	.news-index .h3 {
		order: 1;
		grid-column: span 2;
	}
	.news-index .h3:last-child {
		order: 2;
	}
	.news-index article {
		order: 3;
	}
}

.full-width,
.full-width * {
	width: 100%;
	height: auto;
}

.grid {
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr 1fr;
}
.grid > * {
	border: 1px solid red;
}

.bg-gray {
	background: rgba(0,0,0,.05);
	box-shadow: 0 0 0 100vmax rgba(0,0,0,.05);
	clip-path: inset(0 -100vmax);
	margin-block: 1rem;
	padding-block: 1rem;
}

.container:has(.no-bottom-margin:last-child) {
	margin-bottom: -50px !important;
}

.termine > * {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
}
@media(max-width:700px) {
	.termine {
		gap: 0 !important;
	}
	.termine > *:first-child {
		flex-basis: 45% !important;	
	}
	.termine > *:last-child {
		flex-basis: 55% !important;	
	}
}

#kekt-opt-out {
 	background: #ca2b1d !important;
	color: white !important;
}