/*!
Theme Name: Yankee & Kraut 2024
Theme URI: http://underscores.me/
Author: Florian Strasser - Webdesign & Programmierung
Author URI: http://www.florian-strasser.de
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: yankee-kraut-2024
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Yankee & Kraut 2024 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/* questrial-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/questrial-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

html {
	background:#000;
	color:#FFF;
	font-size: clamp(12px, 0.98vw, 26px);
}
body {
	background:#000;
	color:#FFF;
	margin: 0;
	font-family:'Questrial',sans-serif;
}

h1, .h1{
	font-size:7.4rem;
	line-height:1.05;
	font-weight: 400;
}
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6{
	font-size:6.4rem;
	line-height:1.05;
}
main {
	display: block;
}
.ratio>img{
	object-fit:cover;
}
.btn.btn-primary{
	position:relative;
	background:none !important;
	border:0 !important;
	padding:0;
	font-size:2rem;
	padding-left:2em;
	opacity:0.7;
	transition:0.3s opacity;
}
.btn.btn-primary:hover{
	opacity:1;
}
.btn.btn-primary::after{
	position:absolute;
	top:50%;
	left:0;
	width:1.5em;
	height:0.05em;
	background:#FFF;
	display:block;
	content:"";
	transform-origin:left;
	transform:scaleX(0.66);
	transition:0.3s transform;
}
.btn.btn-primary:hover::after{
	transform:scaleX(1);
}
.btn.btn-primary > span{
	transform:translateX(-0.5em);
	display:block;
	transition:0.3s transform;
}
.btn.btn-primary:hover > span{
	transform:translateX(-0em);
}
.text-end .btn.btn-primary{
	padding-left:0;
	padding-right:2em;
}
.text-end .btn.btn-primary::after{
	left:auto;
	right:0;
	transform-origin:right;
}
.text-end .btn.btn-primary > span{
	transform:translateX(0.5em);
}
.text-end .btn.btn-primary:hover > span{
	transform:translateX(0em);
}
.container{
	width:100%;
	max-width:100%;
	padding-left:6rem;
	padding-right:6rem;
}

/* Header
--------------------------------------------- */

.site-branding{
	position:relative;
	padding-top:2.5rem;
	padding-left:3rem;
	padding-right:3rem;
}
.main-navigation .menu-toggle{
	position:fixed;
	top:2.5rem;
	right:3rem;
	z-index:100;
}
.main-navigation .menu{
	position:fixed;
	top:0;
	right:0;
	width:100%;
	height:100%;
	transform:translateY(-100%);
	z-index:90;
	background:rgba(0,0,0,0.5);
}
.main-navigation.toggled .menu{
	transform:translateY(-0%);
}

/* Content
--------------------------------------------- */
.contentblock + .contentblock{
	margin-top:12rem;
}

/* Heroarea
--------------------------------------------- */
.heroarea{
	position:relative;
}
.heroarea .container{
	position:relative;
	z-index:10;
}
.heroarea .heroarea-text{
	width:65%;
	padding:6rem 0;
}
.heroarea .heroarea-img{
	position:absolute;
	top:0;
	right:0;
	width:58.22%;
	height:100%;
	z-index:5;
	border-top-left-radius:4rem;
	border-bottom-left-radius:4rem;
	overflow:hidden;
}
.heroarea .heroarea-img img{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
	object-fit: cover;
	object-position: center;
}

/* Galerie
--------------------------------------------- */
.galerie .galerie-section{
	pointer-events: none;
}
.galerie .galerie-section .ratio{
	border-radius:3rem;
	overflow:hidden;
}

/* Produkte
--------------------------------------------- */
.contentblock.produkte h2{
	width:43rem;
	max-width:100%;
	margin-bottom:1rem;
}
.contentblock.produkte .row{
	margin-left:-2rem;
	margin-right:-2rem;
}
.contentblock.produkte .row > div{
	padding-left:2rem;
	padding-right:2rem;
	margin-bottom:4rem;
}
.contentblock.produkte .row > div:nth-child(2n){
	transform:translateY(-6rem);
}
.contentblock.produkte .product-tile{
	background:#111;
	border-radius:3rem;
	display:block;
	color:#FFF;
	text-decoration:none;
	position:relative;
	padding-top:4rem;
	padding-left:4rem;
	padding-right:4rem;
	transition:0.3s transform;
}
.contentblock.produkte .product-tile:hover{
	transform:scale(1.05);
}
.contentblock.produkte .product-tile img{
	width:100%;
}
.contentblock.produkte .product-tile .product-name{
	font-size:5rem;
	line-height: 1.1;
	width:100%;
	margin-bottom:1rem;
}

/* Highlight
--------------------------------------------- */
.highlight{
	position:relative;
}
.highlight .container{
	position:relative;
	z-index:10;
}
.highlight .highlight-text{
	width:65%;
	padding:6rem 0;
	margin-left:auto;
	margin-right:0;
}
.highlight .highlight-img{
	position:absolute;
	top:0;
	left:0;
	width:58.22%;
	height:100%;
	z-index:5;
	border-top-right-radius:4rem;
	border-bottom-right-radius:4rem;
	overflow:hidden;
	opacity:0.75;
}
.highlight .highlight-img img{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
	object-fit: cover;
	object-position: center;
}


/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}