/*
Theme Name: Twenty Twenty-One Child-Theme
Theme URI: https://hfpv.de/
Description: Ein Child-Theme für das WordPress Standard Theme Twenty Twenty-One.
Author: ComMotion
Author URI: https://commotion.online/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Cookie */

	#cookie-notice.cookie-notice-visible {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	} #cookie-notice.cookie-notice-visible .cookie-notice-container {
		max-width: 500px;
		background-color: #fff;
		border-radius: 5px;
	}

	.cn-button {
		color: #000 !important;
		padding: .5em 1em;
		background: transparent !important;
	} #cn-accept-cookie {
		background: linear-gradient(to bottom,#00c307,#039103) #039103 !important;
		color: #fff !important;
	}

/* Header */

	.site-header {
		padding-top: var(--global--spacing-vertical);
		padding-bottom: var(--global--spacing-vertical);
	}

/* Page */

	.site-main, .widget-area, .site-footer {
		padding: 0;
	}

	.entry-content > *.alignfull.has-background {
		padding-top: calc(3 * var(--global--spacing-vertical));
		padding-bottom: calc(3 * var(--global--spacing-vertical));
	}

/* Single */

	.singular .has-post-thumbnail .entry-header {
		border-bottom: 3px solid var(--global--color-border);
	}

	.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
		max-width: var(--responsive--alignwide-width);
	}

	.navigation .nav-links .nav-next, .navigation .nav-links .nav-previous {
		width: calc(50% - (0.5 * var(--global--spacing-unit)));
	} .navigation a {
		padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
		background-color: var(--global--color-blue);
		transition: all .3s;
	} .navigation a:hover {
		transform: scale(1.05);
	}

	.progress-wrapper {
		max-width: var(--responsive--alignwide-width);
		margin-left: auto;
		margin-right: auto;
	} progress {
		width: 100%;
		display: block;
		margin-bottom: var(--global--spacing-vertical);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: none;
	} progress::-webkit-progress-bar {
		background-color: #eee;
	} progress::-webkit-progress-value {
		background: #19749e;
		background: linear-gradient(#20509f, #19749e);
	} progress::-moz-progress-bar {
		background: #19749e;
		background: linear-gradient(#20509f, #19749e);
	}

/* Table */

	table td {
		white-space: nowrap;
	}

/* AJAX */

	.loader {
		display: none;
		position: fixed;
		top: calc(50% - 50px);
		left: calc(50% - 25px);
		z-index: 1;

		width: 100px;
		height: 50px;
		margin: 0;
		padding: 10px 20px;
		background-color: var(--global--color-dark-gray);
		border-radius: 5px;
	} .loader:before {
		content: '';
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		background-color: rgba(0,0,0,.5);
	}

	.loader > div {
		width: 20px;
		height: 20px;
		background-color: #fff;
		border-radius: 100%;
		display: inline-block;
		-webkit-animation: sk-bouncedelay 1.5s infinite ease-in-out both;
		animation: sk-bouncedelay 1.5s infinite ease-in-out both;
	} .loader > div:first-child {
		-webkit-animation-delay: -.5s;
		animation-delay: -.5s;
	} .loader > div:nth-child(2) {
		-webkit-animation-delay: -.25s;
		animation-delay: -.25s;
	}

	@-webkit-keyframes sk-bouncedelay {
		0%, 100%, 80% {
			-webkit-transform: scale(0)
		} 40% {
			-webkit-transform: scale(1)
		}
	} @keyframes sk-bouncedelay {
		0%, 100%, 80% {
			-webkit-transform: scale(0);
			transform: scale(0)
		} 40% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}
	}

/* Message */

	div.woocommerce-message, div.woocommerce-error, div.woocommerce-info,
	ul.woocommerce-error, ul.woocommerce-message, ul.woocommerce-info,
	p.woocommerce-error, p.woocommerce-message, p.woocommerce-info {
		position: relative;
		margin: 0 0 2em;
		padding: 1em 2em 1em 3.5em;
		background-color: rgba(0,0,0,0.035);
	} div.woocommerce-message:before, div.woocommerce-error:before, div.woocommerce-info:before,
	ul.woocommerce-error:before, ul.woocommerce-message:before, ul.woocommerce-info:before,
	p.woocommerce-error:before, p.woocommerce-message:before, p.woocommerce-info:before {
		display: inline-block;
		position: absolute;
		top: 1em;
		left: 1.5em;
	}

	.woocommerce-message, div.woocommerce-message, ul.woocommerce-message, p.woocommerce-message {
		border-top: 2px solid #8fae1b;
	} .woocommerce-message:before {
		content: '✔';
		color: #8fae1b;
	}

	.woocommerce-info, div.woocommerce-info, ul.woocommerce-info, p.woocommerce-info {
		border-top: 2px solid #f7e64d;
	} .woocommerce-info:before {
		content: '\2139';
		color: #f7e64d;
	}

	.woocommerce-error, div.woocommerce-error, ul.woocommerce-error, p.woocommerce-error {
		border-top: 2px solid #b81c23;
	} .woocommerce-error:before {
		content: '✘';
		color: #b81c23;
	}

	.woocommerce-message a, .woocommerce-info a, .woocommerce-error a {
		margin-left: 2rem;
	}

/* Form */

	.entry-content > form#input > * {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);
	} .entry-content > form#input label {
		display: block;
	}

	p + [type="submit"], p + .woocommerce-message, p + .woocommerce-info, p + .woocommerce-error {
		margin-top: var(--global--spacing-vertical);
	}

/* Footer */

	.widget-area {
		margin-top: calc(3 * var(--global--spacing-vertical));
		padding-top: calc(3 * var(--global--spacing-vertical));
		border-top: 3px solid var(--global--color-border);
	}

	.site-footer > .site-info .powered-by {
		display: none;
	}

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

	div.woocommerce-message, div.woocommerce-error, div.woocommerce-info,
	ul.woocommerce-error, ul.woocommerce-message, ul.woocommerce-info,
	p.woocommerce-error, p.woocommerce-message, p.woocommerce-info {
		display: inline-block;
		max-width: calc(100% - 600px - var(--global--spacing-horizontal));
	}

	.entry-header .post-thumbnail, .singular .post-thumbnail {
		float: right;
		width: 600px;
		margin-top: 0;
		margin-left: var(--global--spacing-horizontal);
	} .post-thumbnail .wp-post-image {
		border: 2px solid var(--global--color-dark-gray);
	}

	.single .entry-header .post-thumbnail, .single .post-thumbnail .wp-post-image {
		margin-top: 0;
	}
}