/*!
Theme Name: suedhang 3.0 || labs | project 2010
Theme URI: https://labs.project2010.org
Author: Lars Wissmann
Description: Suedhang Theme 2.0
Version: 3.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _p
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
GitHub Branch:    master

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

This theme is developed by labs | project 2010 - based on the WordPress guidelines.
labs | project 2010 || Blank Theme 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:
----------------------------------------------------------------
# Normalize
# Base
	- Typography
	- Elements
	- Links
	- Forms
# Components
	- Navigation
	- Posts and pages
	- Footer
	- Widgets
	- Media
# Utilities
	- Animation
	- Accessibility
	- Lightbox
	- Minishop
# Media Query

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

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

/* maax-mono-regular */
@font-face {
	font-family: 'Maax Mono';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/Maax-Mono-Regular-205TF.eot?#iefix) format('embedded-opentype'),
			 url(fonts/Maax-Mono-Regular-205TF.woff2) format('woff2'),
			 url(fonts/Maax-Mono-Regular-205TF.woff) format('woff'),
			 url(fonts/Maax-Mono-Regular-205TF.ttf) format('truetype'),
			 url(fonts/Maax-Mono-Regular-205TF.svg#Mate) format('svg');
}


/* Box sizing
--------------------------------------------- */

*,
*::before,
*::after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	line-height: 1.24;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
}

body {
	margin: 0;
	animation: fadeIn 0.5s linear;
	background: #FFE2DD;
}
 
@keyframes fadeIn {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

body, button, input, select, optgroup, textarea, pre {
	color: #000;
	font-family: "Maax Mono", monospace, sans-serif;
	font-size: 14px;
	line-height: 1.24;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	margin: 1em 0;
	font-size: 1em;
	font-weight: normal;
}

.single h1,
.single h2,
.single h3,
.single h4,
.single h5,
.single h6 {
	font-size: 1.5em;
}

h1 {
	font-size: 50px;
}

p {
	margin: 0 0 1em 0;
}

b, strong {
	font-weight: normal;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 1em 2em;
	font-size: 14px;
	line-height: 1.6;
}

address {
	margin: 0 0 1.5em;
}

code,kbd,tt,var {
	font-family: "Maax Mono", monospace;
	font-size: 18px;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

small {
	font-size: 14px;
	line-height: 1.6;
}

big {
	font-size: 125%;
}

pre {
	font-family: "Maax Mono", monospace;
	font-size: 1em;
  margin: 0;
  float: left;
  width: 50%;
  overflow: hidden;
}
/* doppelter ZAB Abstand  */
pre + p {
    margin-bottom: 2em;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Elements
--------------------------------------------- */

hr {
	background-color: #000;
	border: 0;
	height: 1px;
	margin: 2em 0;
}

.wp-block-separator {
  border: none;
}

ul,ol {
	margin: 0;
}

ul {
	list-style: none;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 400;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Links
--------------------------------------------- */
a {
	background-color: transparent;
	text-decoration: none;
	color: #000;
}

a:visited {
	color: #000;
}

/* 404
--------------------------------------------- */
.error-404 a, a:hover, .post a, .post-categories a {
	border-bottom: 1px solid #000;
}

a:focus, a:active, .error-404 a:hover, .current-cat > a {
	border-bottom: 2px solid #000;
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

.site-title a {
	border-bottom: none;
}

/* Forms
--------------------------------------------- */
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

input, button {
    font-family: "Maax Mono", monospace;
    overflow: visible;
}

button, select {
	text-transform: none;
}

button {
	cursor: pointer;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	border: 1px solid #000;
	border-radius: 0px;
	background: #000;
	padding: 0.5em 1em;
	width: 50%;
}

:focus-visible {
    outline: 1px solid black;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

select {
  background-color: #e3e3e3;
  border: none;
  padding: 0.5em 1em;
  height: 2.5em;
  margin: 0px !important;
}

select:focus-visible {
	background-color: #ccc;
}

textarea {
	overflow: auto;
	width: 100%;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

th {
	padding-bottom: 1em;
}

td {
	border-top: 1px solid #000;
	padding: 0.5em 0;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
header {
  box-shadow: 0 7px 5px -5px rgba(0, 0, 0, 0.15);
}

.site-branding {
	margin: 0 auto;
	max-width: 1024px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: end;
}

.site-title {
	margin: 2em 0 1em;
}

main, footer {
	margin: 0 auto;
	max-width: 1024px;
}

.site {
	margin-top: 1em;
}

.site-branding, main, footer {
	padding: 0 1.5rem;
}

.site-info {
    margin: 4em 0 2em 0;
}


/* Navigation
--------------------------------------------- */
.menu-toggle {
	width: 20px;
	background: transparent;
	border: none;
	color: black;
	padding: 3px 0 0 0;
	display: flex;
	margin-left: 0.7rem;
	margin-bottom: 1em;
}

.navTrigger {
	cursor: pointer;
	width: 20px;
	height: 22px;
	margin: auto;
}

.navTrigger i {
	border-radius: 0;
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #000;
}

.navTrigger i:nth-child(1) {
	-webkit-animation:outT 0.8s backwards;
	animation:outT 0.8s backwards;
	-webkit-animation-direction:reverse;
	animation-direction:reverse;
}
.navTrigger i:nth-child(2) {
	margin: 5px 0;
	-webkit-animation:outM 0.8s backwards;
	animation:outM 0.8s backwards;
	-webkit-animation-direction:reverse;
	animation-direction:reverse;
}
.navTrigger i:nth-child(3) {
	-webkit-animation:outBtm 0.8s backwards;
	animation:outBtm 0.8s backwards;
	-webkit-animation-direction:reverse;
	animation-direction:reverse;
}

.navTrigger.active i:nth-child(1) {
	-webkit-animation:inT 0.8s forwards;
	animation:inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
	margin: 7px 0;
	-webkit-animation:inM 0.8s forwards;
	animation:inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
	-webkit-animation:inBtm 0.8s forwards;
	animation:inBtm 0.8s forwards;
}

@-webkit-keyframes inM{
50%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(45deg);}
}
@keyframes inM{
50%{transform:rotate(0deg);}
100%{transform:rotate(45deg);}
}

@-webkit-keyframes outM{
50%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(45deg);}
}
@keyframes outM{
50%{transform:rotate(0deg);}
100%{transform:rotate(45deg);}
}

@-webkit-keyframes inT{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(9px) rotate(0deg);}
100%{-webkit-transform: translateY(9px) rotate(135deg);}
}
@keyframes inT{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(9px) rotate(0deg);}
100%{transform: translateY(9px) rotate(135deg);}
}

@-webkit-keyframes outT{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(9px) rotate(0deg);}
100%{-webkit-transform: translateY(9px) rotate(135deg);}
}
@keyframes outT{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(9px) rotate(0deg);}
100%{transform: translateY(9px) rotate(135deg);}
}

@-webkit-keyframes inBtm{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(-9px) rotate(0deg);}
100%{-webkit-transform: translateY(-9px) rotate(135deg);}
}
@keyframes inBtm{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(-9px) rotate(0deg);}
100%{transform: translateY(-9px) rotate(135deg);}
}

@-webkit-keyframes outBtm{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(-9px) rotate(0deg);}
100%{-webkit-transform: translateY(-9px) rotate(135deg);}
}
@keyframes outBtm{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(-9px) rotate(0deg);}
100%{transform: translateY(-9px) rotate(135deg);}
}

#mobile-menu-shadow {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #0009;
	top: 0;
	left: 0;
	z-index: 1;
	display: none;
}

#primary-menu {
	list-style: none;
	left: -100vw;
	top: 0px;
	width: 400px !important;
	max-width: 75vw;
	position: fixed;
	background-color: #000;
	padding: 0;
	display: block;
	z-index: 3;
	height: 100%;
	overflow: scroll;
	color: #fff;
}

#primary-menu a {
	color: #fff;
}

/* grouping menu folder */
#primary-menu > li > a {
	display: none;
}

.offcanvas-close {
	color: #fff;
	padding: 0.5em 1em;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #fff;
	display: flex;
	justify-content: space-between;
	transition: 300ms;
}

.offcanvas-close:hover {
	background-color: #333;
}

.offcanvas-close svg {
	padding: 5px;
}

.custom_offcanvas_text_top {
	margin: 3em 1em 2em;
}

.sub-menu {
	padding: 0;
	margin: 0;
}

.sub-menu a {
	margin: 0 1em .1em;
	border-bottom: 1px solid #fff;
	padding: 0;
	display: inline-block;
	height: 1.3em;
}

.sub-menu a:hover {
	border-bottom: 2px solid #fff;
}

#primary-menu > li:nth-child(3) a {
	margin: 1em 1em 0;
}

.custom_offcanvas_text_bottom {
	margin: 1rem;
	position: absolute;
	bottom: 115px;
	font-size: 14px;
}

#primary-menu > li:last-child {
	position: absolute;
	bottom: 0;
	font-size: 14px;
	margin-bottom: 1rem;
}

.lang-item {
	margin-right: 0.7rem;
	list-style: none;
}

#site-navigation .current-lang a {
  border-bottom: 2px solid black;
}

#site-navigation {
	display: flex;
}

/* Posts and pages
--------------------------------------------- */
.wp-block-latest-posts.is-grid {
	flex-direction: column;
	align-content: flex-start;
	height: 3500px;
}

.wp-block-latest-posts.is-grid li {
	margin: 0;
	height: fit-content;
	border-bottom: 1px solid black;
	width: 50%;
}

/* Liste der Kategorien */
.wp-block-latest-posts::before, .wp-block-latest-posts::after {
	content: "";
	flex-basis: 100%;
	width: 1px;
	order: 2;
	background-color: #000;
	grid-gap: 0px;
}

.categories {
  margin: 1em 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.categories li {
	margin-right: 1em;
	display: inline-block;
}

.wp-block-latest-posts {
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}

.wp-block-latest-posts li {
	padding: 0.75em;
}

/* max-width:  768px
--------------------------------------------- */
@media screen and (max-width: 768px) {

	/* Feed, Category 2-spaltig*/
	.wp-block-latest-posts li {width: 50%;}
	.category article {width: 50%;}

	/* Feed Reihenfolge Posts*/
	.wp-block-latest-posts li:nth-child(2n+1) {
		order: 1;
		padding: 1em 0.75em 1em 0;
	}

	.wp-block-latest-posts li:nth-child(2n) {
		order: 2;
		padding: 1em 0em 1em 0.75em;
	}

	/* Category Reihenfolge Posts*/
	.category article:nth-child(2n+1) {
		order: 1;
		padding: 0 1em 0 0;
	}
	.category article:nth-child(2n) {
		order: 2;
		padding: 0 0 0 1em;
	}

	.wp-block-latest-posts.is-grid::after,
	#primary::after {
		background-color: transparent;
	}

	/* Single-post*/
	.post-thumbnail {
		width: 100%;
	}
	article.post .entry-content {
		margin: 0;
	}
	.single-post h1.entry-title {
		margin: 0 0 1em 0;font-size: 24px;
	}

	/* Kategorienliste */
	.archive .widget_categories ul li ul li,
  .category .widget_categories ul li ul li {margin: 0 0.7em 0 0;}
	.archive .widget_categories ul li,.category .widget_categories ul li {
    margin: 0;
    display: inline-block;
	}

	.widget_categories {margin: 1rem 0;}
	.archive .widget_categories ul,
	.category .widget_categories ul {
    display: inline;
	}
}

/* post kachel */
.post-categories {
	padding: 0 0 0.5em 0;
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
}

.post-categories li {
	border-bottom: none !important;
	padding: 0 0.7em 0.7em 0 !important;
	font-size: 14px;
	width: auto !important;
}

.wp-block-latest-posts__featured-image {
	margin-bottom: 0.5em !important;
}

.wp-block-latest-posts__post-excerpt {
	font-size: 11px;
	margin-top: 1em;
	margin-bottom: 0;
}

/* Media
--------------------------------------------- */
embed, iframe, object {
	max-width: 100%;
}

img {
	border-style: none;
	height: auto;
	max-width: 100%;
  mix-blend-mode: luminosity;
  width: 100%;
  object-fit: contain;
  transition: 300ms;
}

a:hover img {
	filter: brightness(.5);
}

figure {
	margin: 1em 0;
}

.post-thumbnail {
	width: auto;
  margin: 1em auto;
  max-height: 55vh;
}

.post-thumbnail img {
  max-height: 55vh;
}

/*--------------------------------------------------------------
# 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 0.5rem 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;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/


/* min-width:  768px
--------------------------------------------- */
@media screen and (min-width: 768px) {
	body,button,input,select,optgroup,textarea, pre {
		font-size: 18px;
	}

	blockquote {
		margin: 2em 2.5em;
	}

	.wp-block-latest-posts__post-excerpt {
		font-size: 14px;
	}

	.wp-block-latest-posts.is-grid li {
		width: 33.33333%;
	}

	.wp-block-latest-posts li:nth-child(3n+1) {order: 1;}
	.wp-block-latest-posts li:nth-child(3n+2) {order: 2;}
	.wp-block-latest-posts li:nth-child(3n) {order: 3;}

	.single-post h1.entry-title {
	  margin: 0 12.5% 18px 12.5%;
	  font-size: 2.22em;
	}

	article.post .entry-content {
		margin: 0 12.5%;
	}
}


/* min-width:  1060px
--------------------------------------------- */
@media screen and (min-width: 1060px) {
	.site-branding, footer, main {
		padding: 0;
	}
}


/* min-width:  1096px
--------------------------------------------- */

@media screen and (min-width: 1096px) {

}