/*	 
Theme Name: ZiegenWein
Description: WordPress-Theme für ZiegenWein
Author: Robert Licht
Author URI: https://www.robert-licht.de
Text Domain: ziegenwein
*/

@font-face {
    font-family:'Fontin';
    src: url('fonts/fontin-regular-webfont.eot');
    src: url('fonts/fontin-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontin-regular-webfont.woff2') format('woff2'),
         url('fonts/fontin-regular-webfont.woff') format('woff'),
         url('fonts/fontin-regular-webfont.ttf') format('truetype'),
         url('fonts/fontin-regular-webfont.svg#fontinregular') format('svg');
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family:'Fontin';
    src: url('fonts/fontin-bold-webfont.eot');
    src: url('fonts/fontin-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontin-bold-webfont.woff2') format('woff2'),
         url('fonts/fontin-bold-webfont.woff') format('woff'),
         url('fonts/fontin-bold-webfont.ttf') format('truetype'),
         url('fonts/fontin-bold-webfont.svg#fontinbold') format('svg');
    font-weight:700;
    font-style:normal;
}

@font-face {
    font-family:'Fontin';
    src: url('fonts/fontin-italic-webfont.eot');
    src: url('fonts/fontin-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontin-italic-webfont.woff2') format('woff2'),
         url('fonts/fontin-italic-webfont.woff') format('woff'),
         url('fonts/fontin-italic-webfont.ttf') format('truetype'),
         url('fonts/fontin-italic-webfont.svg#fontinitalic') format('svg');
    font-weight:normal;
    font-style:italic;
}

@font-face {
    font-family:'FontinSC';
    src: url('fonts/fontin-smallcaps-webfont.eot');
    src: url('fonts/fontin-smallcaps-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontin-smallcaps-webfont.woff2') format('woff2'),
         url('fonts/fontin-smallcaps-webfont.woff') format('woff'),
         url('fonts/fontin-smallcaps-webfont.ttf') format('truetype'),
         url('fonts/fontin-smallcaps-webfont.svg#fontin_smallcapsregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

:root {
	--zw-red:#b22968;
	/*--zw-grey:#a0a1a3;*/
	--zw-grey:#989190;
	--zw-content-width:1400px;
	--zw-fontsize:18px;
}

body, html {
	font-family:'Fontin',serif;
	font-size:var(--zw-fontsize);
	line-height:1.6;
	padding:0;
	margin:0;
	background:white;
	color:var(--zw-grey);
	overflow-x:hidden;
}

a {
	color:currentColor;
}

h1 {
	font-size:3em;
	text-align:left;
	font-family:'FontinSC';
	margin:40px 0 30px 0;
	font-weight:400;
	line-height:1.3em;
}

h2 {
	font-size:1.9em;
	text-align:left;
	font-family:'FontinSC';
	margin:30px 0 25px 0!important;
	font-weight:400;
	line-height:1.3em;
}

h3 {
	font-size:1.3em;
	text-align:left;
	font-family:'Fontin';
	margin:20px 0 15px 0!important;
	font-weight:700;
	line-height:1.3em;
}

h4 {
	font-size:1em;
	text-align:left;
	font-family:'Fontin';
	margin:10px 0 5px 0!important;
	font-weight:700;
	line-height:1.3em;
}

@media(max-width:767px) {
	h1 {
		font-size:2em;
		margin:25px auto!important;
		letter-spacing:-1px;
		text-align:center;
	}
	h2 {
		font-size:1.6em;
		margin:20px auto!important;
		letter-spacing:-1px;
		text-align:center;
	}
	h3 {
		font-size:1.1em;
		margin:15px auto!important;
		text-align:center;
	}
	h4 {
		text-align:center;
	}
}

@media(max-width:430px) {
	h1 {
		font-size:1.8em;
	}
	h2 {
		font-size:1.2em;
	}
	h3 {
		font-size:1.1em;
	}
}

img {
	max-width:100%;
	height:auto;
}

.wp-block-group,
.entry>.wp-block-image {
	margin:1.25em 0;
}

.wp-block-group.is-layout-flex {
	gap:1em;
}

.wp-block-group.is-content-justification-center {
	margin-left:auto;
	margin-right:auto;
}

.wp-block-group.is-layout-flex figure {
	flex-shrink:0;
}

@media(max-width:767px) {
	.entry,
	.entry p,
	.entry h1,
	.entry h2,
	.entry h3 {
		text-align:center;
	}
	.entry .wp-block-group.is-layout-flex {
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
	}
	.entry>.wp-block-group.is-layout-flex>* {
		width:100%;
		flex-basis:100%;
	}
	.entry>.wp-block-group.is-layout-flex>figure {
		width:85%;
		flex-basis:85%;
		text-align:center;
	}
	.entry>.wp-block-image {
		width:85%;
		margin-left:auto;
		margin-right:auto;
	}
	.entry .wp-block-image img {
		max-height:600px;
		width:auto;
	}
}

.zw-red {
	color:var(--zw-red);
}

@media(max-width:767px) {
	ul:not(.menu) {
		padding:0;
	}
	ul:not(.menu) li {
		display:block;
	}
	ul:not(.menu) li:before {
		content:'•';
		margin-right:10px;
	}
}

header,
main,
footer {
	max-width:var(--zw-content-width);
	width:100%;
	margin:0 auto;
}

header #header-inner {
	position:relative;
}

header #header-inner #header-logo {
	position:absolute;
	top:20px;
	left:20px;
	width:225px;
	height:225px;
	background:white;
	box-shadow:0 0 7px black;
}

@media(max-width:1024px) {
	header #header-inner #header-logo {
		width:150px;
		height:150px;
	}
}

@media(max-width:800px) {
	header #header-inner #header-logo {
		width:100px;
		height:100px;
	}
}

@media(max-width:430px) {
	header #header-inner #header-logo {
		width:90px;
		height:90px;
	}
}

header #header-inner #header-logo a {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}

header #header-inner #header-logo a img {
	object-fit:contain;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
}

@media(max-width:800px) {
	header #header-inner #header-logo a img {
		width:calc(100% - 12px);
		height:calc(100% - 12px);
	}
}

header #header-inner #header-navigation {
	background:var(--zw-red);
	padding:65px 20px 30px 290px;
}

@media(max-width:1024px) {
	header #header-inner #header-navigation {
		padding-left:220px;
		padding-top:55px;
	}
}

@media(max-width:800px) {
	header #header-inner #header-navigation {
		padding-left:190px;
	}
}

@media(max-width:767px) {
	header #header-inner #header-navigation {
		display:flex;
		flex-direction:column;
		align-items:flex-end;
		padding-top:30px;
		padding-bottom:40px;
	}
}

header #header-inner #header-navigation #menu-mobile {
	display:none;
}

@media(max-width:767px) {
	header #header-inner #header-navigation #menu-mobile {
		display:block;
		border:1px solid white;
		width:30px;
		height:30px;
		position:relative;
		cursor:pointer;
	}
	header #header-inner #header-navigation #menu-mobile span {
		position:absolute;
		top:50%;
		left:5px;
		width:20px;
		height:1px;
		background:white;
		display:block;
	}
	header #header-inner #header-navigation #menu-mobile span:before {
		content:'';
		position:absolute;
		top:-8px;
		left:0;
		width:20px;
		height:1px;
		background:white;
	}
	header #header-inner #header-navigation #menu-mobile span:after {
		content:'';
		position:absolute;
		top:8px;
		left:0;
		width:20px;
		height:1px;
		background:white;
	}
	header #header-inner #header-navigation nav {
		display:none;
	}
}

header #header-inner #header-navigation nav ul {
	display:flex;
	justify-content:flex-start;
	gap:25px;
	font-size:calc(var(--zw-fontsize) + 4px);
	font-family:FontinSC;
	margin:0;
	list-style-type:none;
	padding:0;
}

@media(max-width:1024px) {
	header #header-inner #header-navigation nav ul {
		gap:20px;
	}
}

@media(max-width:767px) {
	header #header-inner #header-navigation nav ul {
		flex-direction:column;
		padding-top:20px;
		gap:5px;
	}
	header #header-inner #header-navigation nav ul li {
		text-align:right;
	}
}

header #header-inner #header-navigation nav ul li a {
	color:white;
	text-decoration:none;
	letter-spacing:-1px;
}

header #header-inner #header-navigation nav ul li.current_page_item a,
header #header-inner #header-navigation nav ul li a:hover {
	color:var(--zw-grey);
}

header #header-image img {
	display:block;
	width:100%!important;
}

header #breadcrumbs {
	border-top:3px solid var(--zw-red);
	padding:5px 5px 3px 5px;
	border-bottom:1px solid #f0f0f0;
	background:#fafafa;
	font-size:calc(var(--zw-fontsize) - 3px);
	line-height:calc(var(--zw-fontsize) + 2px);
}

@media(max-width:1024px) {
	header #breadcrumbs {
		padding:5px 20px 3px 20px;
	}
}

header #breadcrumbs a {
	text-decoration:none;
	color:var(--zw-red);
}

header #breadcrumbs span.current-page {
	color:var(--zw-red);
	font-weight:700;
}

main {
	padding:0 30px 30px 30px;
	box-sizing:border-box;
}

@media(max-width:1024px) {
	main {
		padding:0 20px 20px 20px;
	}
}

.liste-weine {
	grid-template-columns:250px 70px auto!important;
}

@media(max-width:767px) {
	.liste-weine {
		grid-template-columns:unset!important;
		display:flex!important;
		flex-wrap:wrap;
		gap:5px;
	}
	.liste-weine>*:nth-child(3n+1) {
		width:calc(100% - 85px);
		text-align:left;
	}
	.liste-weine>*:nth-child(3n+2) {
		width:80px;
		text-align:right;
	}
	.liste-weine>*:nth-child(3n) {
		width:100%;
		margin-bottom:15px;
		text-align:left;
	}
}

.wpcf7 form {
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}

@media(min-width:768px) {
	.wpcf7 form .contact-50 {
		width:calc(50% - .5em);
	}
}

.wpcf7 form label {
	font-family:'FontinSC';
}

.wpcf7 form label span {
	font-family:'Fontin';
	font-size:1em;
	line-height:1.5em;
}

.wpcf7 form label input,
.wpcf7 form label textarea {
	font-family:'Fontin';
	font-size:1em;
	line-height:1.5em;
	padding:10px;
	color:var(--zw-grey);
	border:1px solid var(--zw-red);
	border-radius:5px;
	width:100%;
	box-sizing:border-box;
}

.wpcf7 form label textarea {
	resize:none;
	height:200px;
}

.wpcf7 form label input:focus-visible,
.wpcf7 form label textarea:focus-visible {
	outline:var(--zw-red) auto 1px;
}

.wpcf7 form input[type="submit"] {
	padding:10px 20px;
	border-radius:5px;
	border:none;
	background:var(--zw-red);
	color:white;
	font-family:'FontinSC';
	font-size:1em;
	cursor:pointer;
}

@media(max-width:767px) {
	.wpcf7 form .wpcf7-spinner {
		display:block;
		margin:15px auto 0 auto;
	}
}

.wpcf7 form .wpcf7-response-output {
	margin:1em 0;
}

footer {
	border-top:1px solid var(--zw-grey);
	padding:15px 30px;
	font-size:calc(var(--zw-fontsize) - 3px);
	text-align:center;
	box-sizing:border-box;
}

@media(max-width:1024px) {
	footer {
		padding:15px 20px;
	}
}

footer ul.menu {
	display:inline-flex;
	list-style-type:none;
	padding:0;
	margin:0;
}

footer ul.menu li:not(:last-child):after {
	content:" •\a0";
}

footer ul.menu li a {
	font-family:'FontinSC';
	text-decoration:none;
}

footer .social-icons {
	margin-top:10px;
}

footer .social-icons svg {
	width:auto;
	height:36px;
}

footer .social-icons svg path {
	fill:var(--zw-red);
}

.gdpr-notice {
	position:fixed;
	background:var(--zw-red);
	bottom:20px;
	right:20px;
	z-index:11000;
	padding:15px;
	width:500px;
	max-width:calc(100% - 70px);
	color:white;
	display:none;
	font-size:calc(var(--zw-fontsize) - 2px);
	line-height:1.5em;
}

.gdpr-notice p.description {
	text-align:center;
	margin:0;
}

.gdpr-notice p.description .heading {
	font-weight:700;
}

.gdpr-notice .gdpr-buttons {
	display:flex;
	justify-content:space-around;
	flex-flow:row wrap;
}

.gdpr-notice .gdpr-buttons button {
	border:0;
	color:var(--zw-red);
	background:white;
	padding:3px 10px;
	font-family:'FontinSC';
	font-size:var(--zw-fontsize);
	cursor:pointer;
	display:block;
	margin-top:15px;
}