/*
Theme Name: Kleidertraum Modern
Author: Lina Loos
Description: Modernisiertes Classic-Theme für Kleidertraum.
Version: 2.0.1
Text Domain: kleidertraum
*/

:root {
	--color-text: #59595b;
	--color-muted: #747476;
	--color-brand: #7cb955;
	--color-brand-dark: #5e9d3e;
	--color-surface: #ffffff;
	--color-line: #d8dfd3;
	--site-width: 950px;
	--logo-width: 287px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #f7f8f5 url("images/rahmen/bg.gif") repeat-y left top;
	color: var(--color-text);
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

a {
	color: var(--color-brand-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

a:hover,
a:focus {
	color: var(--color-brand);
	text-decoration: none;
}

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

table {
	width: 100%;
	margin: 0 0 1.25rem;
	border-collapse: collapse;
}

th,
td {
	padding: 0.4rem 0.5rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-line);
}

input,
textarea,
select,
button {
	max-width: 100%;
	font: inherit;
}

input,
textarea,
select {
	border: 1px solid var(--color-line);
	border-radius: 2px;
	padding: 0.4rem 0.5rem;
	color: var(--color-text);
	background: #fff;
}

textarea {
	width: 100%;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	border: 1px solid var(--color-brand);
	border-radius: 2px;
	padding: 0.45rem 0.75rem;
	color: #24351c;
	background: #e7f5df;
	cursor: pointer;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
	background: #d7efca;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	color: #fff;
	background: var(--color-brand-dark);
}

.site {
	position: relative;
	width: min(100%, var(--site-width));
	min-height: 100vh;
	padding-bottom: 73px;
	background: var(--color-surface);
}

.site-header {
	display: grid;
	grid-template-columns: minmax(200px, var(--logo-width)) minmax(0, 1fr);
	align-items: start;
}

.site-branding {
	position: relative;
	background: #fff;
}

.brand-logo {
	display: block;
	line-height: 0;
}

.brand-logo img,
.custom-logo {
	display: block;
	width: 100%;
	max-width: var(--logo-width);
	height: auto;
}

.header-main {
	min-width: 0;
}

.header-image {
	min-height: 226px;
	background: url("images/rahmen/kopf.jpg") no-repeat center top;
	background-size: cover;
}

.site-navigation {
	position: absolute;
	left: 0;
	width: var(--logo-width);
	padding: 1.25rem 0.7rem 0 0.4rem;
}

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu {
	display: block;
	text-align: right;
}

.primary-menu li {
	margin: 0 0 0.28rem;
}

.primary-menu .sub-menu,
.primary-menu .children {
	display: none;
	margin: 0.15rem 0 0.9rem;
	padding: 0;
	list-style: none outside !important;
}

.primary-menu .current-menu-item > .sub-menu,
.primary-menu .current-menu-parent > .sub-menu,
.primary-menu .current-menu-ancestor > .sub-menu,
.primary-menu .current_page_item > .children,
.primary-menu .current_page_parent > .children,
.primary-menu .current_page_ancestor > .children {
	display: block;
}

.primary-menu .sub-menu li,
.primary-menu .children li {
	margin: 0 0 0.12rem;
	list-style: none !important;
}

.primary-menu .sub-menu li::marker,
.primary-menu .children li::marker {
	content: "";
}

.menu a {
	display: inline-block;
	color: #676568;
	text-decoration: none;
}

.primary-menu a {
	font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", "Marker Felt", cursive;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
}

.primary-menu > li > .sub-menu > li > a,
.primary-menu > li > .children > li > a,
.primary-menu .sub-menu a,
.primary-menu .children a {
	color: #676568;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 0.95rem !important;
	font-weight: 700;
	line-height: 1.2;
}

.menu a:hover,
.menu a:focus,
.current-menu-item > a,
.current_page_item > a {
	color: var(--color-brand-dark);
	text-decoration: none;
}

.site-navigation ul.primary-menu ul.sub-menu,
.site-navigation ul.primary-menu ul.children {
	display: none;
	margin: 0.15rem 0 0.9rem;
	padding: 0;
	font: 700 0.95rem/1.2 "Trebuchet MS", Arial, sans-serif;
	list-style: none !important;
}

.site-navigation ul.primary-menu li.current-menu-item > ul.sub-menu,
.site-navigation ul.primary-menu li.current-menu-parent > ul.sub-menu,
.site-navigation ul.primary-menu li.current-menu-ancestor > ul.sub-menu,
.site-navigation ul.primary-menu li.current_page_item > ul.children,
.site-navigation ul.primary-menu li.current_page_parent > ul.children,
.site-navigation ul.primary-menu li.current_page_ancestor > ul.children {
	display: block;
}

.site-navigation ul.primary-menu ul.sub-menu li,
.site-navigation ul.primary-menu ul.children li {
	display: block;
	margin: 0 0 0.12rem;
	padding: 0;
	font: inherit;
	list-style: none !important;
}

.site-navigation ul.primary-menu ul.sub-menu li::marker,
.site-navigation ul.primary-menu ul.children li::marker {
	content: "";
}

.site-navigation ul.primary-menu ul.sub-menu li > a,
.site-navigation ul.primary-menu ul.children li > a {
	color: #676568;
	font: inherit !important;
	letter-spacing: 0;
}

.site-navigation ul.primary-menu ul.sub-menu li > a:hover,
.site-navigation ul.primary-menu ul.sub-menu li > a:focus,
.site-navigation ul.primary-menu ul.children li > a:hover,
.site-navigation ul.primary-menu ul.children li > a:focus,
.site-navigation ul.primary-menu ul.sub-menu li.current-menu-item > a,
.site-navigation ul.primary-menu ul.sub-menu li.current_page_item > a,
.site-navigation ul.primary-menu ul.children li.current-menu-item > a,
.site-navigation ul.primary-menu ul.children li.current_page_item > a {
	color: var(--color-brand-dark);
}

.site-content {
	width: min(100% - 2rem, 600px);
	margin: -4rem 0 3rem calc(var(--logo-width) + 2rem);
}

.content-entry + .content-entry,
.archive-header + .content-entry {
	margin-top: 2rem;
}

.entry-title,
.archive-title {
	margin: 0 0 0.75rem;
	color: var(--color-brand);
	font-size: 1.45rem;
	line-height: 1.2;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	text-decoration: underline;
}

.entry-meta,
.archive-description {
	margin: 0 0 1rem;
	color: var(--color-muted);
	font-size: 0.9rem;
}

.entry-content h1,
.entry-summary h1 {
	margin-top: 0;
	margin-bottom: 0;
	color: var(--color-brand);
}

.entry-content h2,
.entry-summary h2 {
	margin: 1.5rem 0 0.5rem;
	color: var(--color-brand);
	font-size: 1.15rem;
	line-height: 1.25;
}

.entry-content .wp-block-heading,
.entry-summary .wp-block-heading {
	color: var(--color-brand);
}

.entry-content h3,
.entry-summary h3 {
	margin: 1.25rem 0 0.5rem;
	color: var(--color-text);
	font-size: 1rem;
}

.entry-content h4,
.entry-summary h4 {
	margin: 1rem 0 0.5rem;
	color: var(--color-brand);
	font-size: 0.95rem;
}

.entry-content p,
.entry-summary p {
	margin: 0 0 1rem;
}

.entry-content ul,
.entry-summary ul {
	margin: 0 0 1rem 1.25rem;
	padding: 0;
	list-style: disc;
}

.entry-content ol,
.entry-summary ol {
	margin: 0 0 1rem 1.5rem;
	padding: 0;
}

.entry-content li,
.entry-summary li {
	margin: 0 0 0.35rem;
}

.entry-content a,
.entry-summary a {
	font-weight: 700;
}

.alignleft,
img.alignleft,
.ausrichtungLinks {
	float: left;
	margin: 0.25rem 1rem 0.75rem 0;
}

.alignright,
img.alignright,
.ausrichtungRechts {
	float: right;
	margin: 0.25rem 0 0.75rem 1rem;
}

.aligncenter,
img.aligncenter {
	display: block;
	margin: 1rem auto;
}

.alignnone,
.keineAusrichtung {
	display: block;
	margin: 0 0 1rem;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1rem;
}

.wp-caption-text,
.gallery-caption {
	margin: 0.35rem 0 0;
	color: var(--color-muted);
	font-size: 0.88rem;
}

.page-links,
.posts-navigation,
.comment-navigation {
	margin-top: 1.5rem;
}

.widget-area {
	width: min(100% - 2rem, 620px);
	margin: 0 0 3rem calc(var(--logo-width) + 2rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-line);
}

.widget {
	margin: 0 0 1.5rem;
}

.widget-title {
	margin: 0 0 0.5rem;
	color: var(--color-brand);
	font-size: 1rem;
}

.comments-area {
	width: min(100% - 2rem, 620px);
	margin: 2rem 0 3rem calc(var(--logo-width) + 2rem);
}

.comments-popup .site-content,
.comments-popup .comments-area {
	width: min(100% - 2rem, 720px);
	margin: 2rem auto;
}

.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .comment {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-line);
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 700;
}

.site-footer {
	display: flex;
	position: fixed;
	z-index: 20;
	bottom: 0;
	left: clamp(0px, calc(100vw - 723px), 227px);
	width: 723px;
	height: 68px;
	gap: 0;
	align-items: center;
	margin: 0;
	padding: 48px 0 0 120px;
	color: #fff;
	background: url("images/rahmen/fuss.png") no-repeat left top;
	font-size: 0.82rem;
	line-height: 1;
}

.site-footer a {
	color: #fff;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #fff;
	text-decoration: underline;
}

.footer-navigation {
	min-width: 0;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0;
}

.back-to-top::after,
.footer-menu li + li::before {
	content: "|";
	display: inline-block;
	margin: 0 0.9rem;
	color: #fff;
	font-weight: 400;
}

.hide,
.piclenselink {
	display: none;
}

.clear {
	clear: both;
	height: 0;
	line-height: 0;
}

.abstand5 {
	height: 5px;
}

.abstand10 {
	height: 10px;
}

.abstand20 {
	height: 20px;
}

.form {
	margin: 0;
	padding: 0;
}

@media (max-width: 760px) {
	body {
		background: #fff;
	}

	.site-header {
		--mobile-logo-width: min(70vw, var(--logo-width));
		display: grid;
		grid-template-columns: minmax(150px, var(--mobile-logo-width)) minmax(0, 1fr);
		align-items: start;
		overflow: hidden;
	}

	.site-branding {
		display: contents;
	}

	.brand-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.brand-logo img,
	.custom-logo {
		width: 100%;
		max-width: none;
	}

	.header-main {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		min-width: 0;
		overflow: hidden;
	}

	.header-image {
		width: 664px;
		min-height: clamp(118px, 55.13vw, 226px);
		background-position: left top;
		background-size: auto 100%;
	}

	.site-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		position: static;
		width: auto;
		padding: 1rem;
	}

	.primary-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 1.1rem;
		justify-content: center;
		text-align: center;
	}

	.primary-menu li {
		margin: 0;
	}

	.primary-menu a {
		font-size: 1.55rem;
	}

	.primary-menu .sub-menu,
	.primary-menu .children {
		margin: 0.15rem 0 0;
	}

	.primary-menu .sub-menu a,
	.primary-menu .children a {
		font-size: 0.9rem !important;
	}

	.site-navigation ul.primary-menu ul.sub-menu,
	.site-navigation ul.primary-menu ul.children {
		font-size: 0.9rem;
	}

	.site-content,
	.widget-area,
	.comments-area {
		width: auto;
		margin: 1.5rem 1rem 2rem;
	}

}

@media (max-width: 480px) {
	.site {
		padding-bottom: 0;
	}

	.site-footer {
		display: block;
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 1rem;
		background: var(--color-brand);
		line-height: 1.55;
		text-align: center;
	}

	.site-navigation .menu {
		display: block;
	}

	.site-footer .menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem 1rem;
	}

	.site-navigation .menu li,
	.site-footer .menu li {
		margin-bottom: 0.35rem;
	}

	.site-footer .menu li {
		margin-bottom: 0;
	}

	.back-to-top {
		display: inline-block;
		margin-bottom: 0.6rem;
	}

	.back-to-top::after,
	.footer-menu li + li::before {
		content: none;
	}

	.alignleft,
	.alignright,
	img.alignleft,
	img.alignright,
	.ausrichtungLinks,
	.ausrichtungRechts {
		float: none;
		display: block;
		margin: 0 0 1rem;
	}
}

/* DMSGuestbook compatibility styles. */
.css_guestbook_position {
	position: relative;
	left: 0;
	top: 0;
}

.css_form_text {
	font-weight: normal;
}

.css_form_namefield,
.css_form_emailfield,
.css_form_urlfield,
.css_form_additional_option,
.css_form_antispam_inputfield {
	width: 150px;
	color: var(--color-text);
	border: 1px solid var(--color-line);
}

.css_form_textfieldspace {
	float: left;
	width: 33%;
	margin: 0;
	padding: 0;
	text-align: left;
}

.css_form_textfieldspace_textarea {
	clear: left;
	width: 100%;
	margin: 0;
	padding: 20px 0 0;
	text-align: left;
}

.css_form_messagefield {
	float: left;
	width: 100%;
	height: 150px;
	color: var(--color-text);
	border: 1px solid var(--color-line);
}

.css_form_antispamtext,
.css_form_antispamcontent {
	float: left;
	width: 33%;
}

.css_form_antispamtext {
	margin-left: 10px;
	text-align: left;
}

.css_form_antispamcontent {
	border: 0;
}

.css_form_antispamcontent_position {
	margin: 0;
	padding: 0;
	text-align: left;
}

.css_form_submit {
	float: left;
	margin-top: 3px;
	color: #24351c;
	border: 1px solid var(--color-brand);
	background: #e7f5df;
	font-size: 14px;
	font-weight: 700;
}

.css_form_submit_position {
	padding: 27px 0 60px;
	text-align: left;
}

.css_form_errormessage {
	color: #bb0000;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}

.css_form_successmessage {
	color: #168816;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}

.css_form_link,
.css_navigation_totalcount,
.css_post_header1,
.css_post_header4 {
	font-size: 11px;
}

.css_navigation_totalcount {
	display: none;
	width: 95%;
	padding: 0 0 5px 10px;
	text-align: center;
}

.css_navigation_overview {
	width: 95%;
	padding: 0 0 15px 12px;
	text-align: center;
}

.css_navigation_select {
	color: #bb1100;
	text-decoration: none;
}

.css_navigation_notselect,
.css_navigation_char {
	color: var(--color-text);
	text-decoration: none;
}

.css_navigation_char {
	font-size: 20px;
	font-weight: 700;
}

.css_navigation_char_position {
	width: 95%;
	margin: 0 0 20px;
	padding: 0 0 0 10px;
	text-align: center;
}

.css_post_header1,
.css_post_header2,
.css_post_header3,
.css_post_header4 {
	height: 15px;
}

.css_post_header2,
.css_post_header3 {
	width: 20px;
}

.css_post_email_image,
.css_post_url_image {
	width: 15px;
	height: 15px;
	border: 0;
}

.css_post_separator {
	width: 35%;
	height: 1px;
	margin: 0;
	border: 1px solid var(--color-line);
	text-align: left;
}

.css_post_message {
	margin: 5px 0 0;
	font-size: 14px;
}

.css_form_embedded,
.css_post_embedded {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 3px solid var(--color-brand);
	text-align: left;
}

.css_form_embedded {
	font-size: 12px;
	line-height: 1.4;
}

a.css_navigation_char:hover,
a.css_navigation_select:hover,
a.css_navigation_notselect:hover {
	color: var(--color-text);
	text-decoration: none;
}