/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/_variables.scss **/
$theme-url			: '';
$theme-assets-url	: '#{$theme-url}/assets';

$content-width      : 1200px;
$content-margin		: 1.25rem;
$content-padding    : #{$content-margin * 2};
$content-gap		: #{$content-margin * 4};

$breakpoint-xl		: 1200px;
$breakpoint-lg		: 1000px;
$breakpoint-md		: 750px;
$breakpoint-sm		: 500px;

$golden-ratio-long  : 62%;
$golden-ratio-short : 38%;
$contrast-threshold	: 55%;

$opacity-dark 		: .62;
$opacity-light 		: .38;

$theme-colors		: (
	white		: rgb( 255, 255, 255 ),
	black		: rgb( 0, 0, 0 ),
	main 		: (
		red			: rgb( 135, 25, 50 ),
		orange		: rgb( 204, 81, 35 ),
		yellow		: rgb( 198, 153, 8 ),
		green		: rgb( 30, 76, 54 ),
		blue		: rgb( 1, 32 ,66 ),
		purple		: rgb( 98, 63, 128 ),
		cab			: rgb( 115, 1, 64),
		gnd			: rgb( 114, 162, 69 ),
		gab			: rgb( 230, 51, 41 ),
		paf			: rgb( 242, 116, 4 ),
		gaf			: rgb( 46, 49, 102 ),
		ssp			: rgb( 9, 78, 98 ),
		dw			: rgb( 27, 139, 0 ),
		gray		: rgb( 86, 86, 86 ),
		titel		: linear-gradient( 6deg, #ED1C24 25%, #FFF 50%, #00A650 75% ),
		puppy		: darken( #CD0018, 10% ),
		handler		: darken( #0089C8, 10% ),
		gearhead	: darken( #C8C200, 10% ),
	),
	accent 		: (
		red			: rgb( 215, 44, 57 ),
		orange		: rgb( 207, 123, 60 ),
		yellow		: rgb( 255, 194, 13),
		green		: rgb( 97, 159, 75 ),
		blue		: rgb( 0, 115, 139 ),
		purple		: rgb( 124, 102, 161 ),
		cab			: rgb( 193, 38, 140 ),
		gnd			: rgb( 206, 222, 71 ),
		gab			: rgb( 60, 60, 59 ),
		paf			: rgb( 242, 159, 4 ),
		gaf			: rgb( 140, 146, 255 ),
		ssp			: rgb( 48, 213, 200 ),
		dw			: rgb( 162, 210, 64 ),
		gray		: rgb( 171, 171, 171 ),
		titel		: linear-gradient( 6deg, #ED1C24 25%, #FFF 50%, #00A650 75% ),
		puppy		: lighten( #CD0018, 10% ),
		handler		: lighten( #0089C8, 10% ),
		gearhead	: lighten( #C8C200, 10% ),
	),
	imprint 		: (
		red			: #FFFFFF,
		orange		: #1A1A1A,
		yellow		: #1A1A1A,
		green		: #1A1A1A,
		blue		: #FFFFFF,
		purple		: #FFFFFF,
		cab			: #FFFFFF,
		gnd			: #1A1A1A,
		gab			: #FFFFFF,
		paf			: #1A1A1A,
		ssp			: #1A1A1A,
		dw			: #1A1A1A,
		gray		: #1A1A1A,
		titel		: #1A1A1A,
		puppy		: #1A1A1A,
		handler		: #1A1A1A,
		gearhead	: #1A1A1A,
	),
);

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_spacer.scss **/
.spacer {
	position        : relative;
	margin-top      : $content-padding;
	margin-bottom   : $content-padding;
	
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	gap             : $content-padding;
	
	&__image {
		background-image    : var(--separator);
		background-repeat   : no-repeat;
		background-position : center center;
		background-size     : contain;
		flex                : 0 0 auto;
		aspect-ratio        : 1;
		height              : 75px !important;
		
		@container ( max-width : #{$breakpoint-md} ) {
			height : 50px !important;
		}
	}
	
	&__after,
	&__before {
		display : flex;
		flex    : 1 1 auto;
		
		&::before {
			content    : '';
			position   : relative;
			display    : block;
			background : #FFFFFF;
			height     : 2px;
			width      : 100%;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_gallery.scss **/
.gallery {
	container-type : inline-size;
	
	&__item {
		border: solid 0.5rem var( --color-main );
		
		&__media {
			> img {
				aspect-ratio: 1;
				object-fit: cover;
				object-position: center;
				display: block;
			}
		}
		
		&__content {
			background: var( --color-main );
			padding: 0.5rem;
			
			* {
				color: get_color( white ) !important;
			}
		}
	}
	
	&__content {
		display         : flex;
		justify-content : center;
		align-items     : center;
		flex-wrap       : wrap;
		gap             : $content-padding;
		
		& > * {
			--gallery-count : var(--gallery-columns, 4);
			--gallery-gap   : (#{$content-padding} / var(--gallery-count) * calc(var(--gallery-count) - 1));
			--gallery-width : calc(100% / var(--gallery-count));
			max-width       : calc(var(--gallery-width) - var(--gallery-gap));
			flex-basis      : 100%;
			flex-grow       : 1;
			flex-shrink     : 1;
			
			@container ( max-width : #{$breakpoint-lg} ) {
				max-width : calc(100% / 3 - #{$content-padding / 3 * 2});
			}
			
			@container ( max-width : #{$breakpoint-md} ) {
				max-width : calc(50% - #{$content-padding / 2});
			}
			
			@container ( max-width : #{$breakpoint-sm} ) {
				max-width : 100%;
			}
		}
	}
	
	&--align {
		&--left > .gallery__content { justify-content : flex-start; }
		&--right > .gallery__content { justify-content : flex-end; }
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_title-text.scss **/
.title-text {
	display        : flex;
	gap            : $content-gap;
	container-type : inline-size;
	
	@include margin-bottom();
	
	& &__title { width : 38%; }
	
	& &__content {
		width : 62%;
		display: flex;
		flex-direction: column;
	}
	
	& &__title,
	& &__content {
		&:only-child {
			text-align : center;
			width      : 100%;
		}
	}
	
	&&--left { flex-direction : row; }
	
	&&--right { flex-direction : row-reverse; }
	
	@container ( max-width : #{$breakpoint-md} ) {
		flex-direction : column !important;
		gap            : $content-margin;
		
		& &__title,
		& &__content {
			width : 100%;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_columns.scss **/
.column {
	flex            : 1 1 100%;
	display         : flex;
	flex-direction  : column;
	justify-content : flex-start;
	
	&--align {
		&--top { justify-content : flex-start; }
		
		&--bottom { justify-content : flex-end; }
	}
	
	&s {
		display : flex;
		gap     : $content-gap;
		gap     : $content-margin;
//		flex    : 1 1 auto;
		
		+ {
			h1, h2, h3, h4, h5, h6 {
				@include margin-top();
			}
		}
		
		@container ( max-width : #{$breakpoint-md} ) {
			flex-direction : column !important;
			gap            : $content-margin;
		}
		
		&:not( :has( ~ & ) ) {
			@include margin-bottom();
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_image.scss **/
.image {
	display        : block;
	
	&&--type {
		&--inline {
			width          : auto;
			display        : inline;
			height         : 1em;
			vertical-align : sub;
			margin         : 0 0.25em;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_buttons.scss **/
.button {
	display         : inline-flex;
	text-decoration : none;
	justify-content : center;
	align-items     : center;
	border          : 0;
	
	@include transition();
	
	.icon {
		margin-right : 0.5em;
	}
	
	&&--type {
		&--button {
			@include transition();
			
			padding : #{$content-margin / 2} #{$content-margin};
			
			@container ( max-width : #{$breakpoint-sm} ) {
				width : 100%;
			}
			
			&, &:visited {
				background : var(--color-main, get_color(gray, main));
				color      : get_color(white);
			}
			
			&:focus,
			&:hover {
				background : var(--color-accent, get_color(gray, accent));
				color      : get_color(black);
			}
		}
		
		&--link {
			@include transition();
			
			&, &:visited {
				color : var(--color-text, get_color(gray, accent));
			}
			
			&:focus,
			&:hover {
				text-decoration : underline;
			}
		}
	}
	
	&&--color {
		@each $name, $color in map-get($theme-colors, main) {
			&--#{$name} {
				--color-main   : #{get_color($name, main)} !important;
				--color-accent : #{get_color($name, accent)} !important;
				--color-text   : #{contrast(get_color($name, accent), get_color(black), get_color(white))} !important;;
			}
		}
	}
	
	&s {
		display   : inline-flex;
		gap       : $content-margin;
		flex-wrap : wrap;
		width     : 100%;
		
		@include margin-bottom();
		
		&&--type {
			&--horizontal { flex-direction : row; }
			
			&--vertical { flex-direction : column; }
		}
		
		.flex-basis {
			&-- {
				&25 { flex-basis  : calc(25% - #{$content-margin / 4 * 3});}
				&33 { flex-basis  : calc(100% / 3 - #{$content-margin / 3 * 2});}
				&50 { flex-basis  : calc(50% - #{$content-margin / 2 * 1});}
			}
		}
		
		& > * {
			@extend .button--type--button;
			
			flex-basis  : calc(25% - #{$content-margin / 4 * 3});
			flex-grow   : 1;
			flex-shrink : 1;
			
			white-space : nowrap;
			
			@container ( max-width : #{$breakpoint-md} ) {
				flex-basis : calc(50% - #{$content-margin / 2});
			}
			
			@container ( max-width : #{$breakpoint-sm} ) {
				flex-basis : 100%;
			}
		}
		
		&&--color {
			@each $name, $color in map-get($theme-colors, main) {
				&--#{$name} > .button {
					&, &:visited {
						background : var(--color-main, get_color(gray, main));
						color      : get_color(white);
					}
					
					&:focus,
					&:hover {
						background : var(--color-accent, get_color(gray, accent));
						color      : get_color(black);
					}
				}
			}
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_media-text.scss **/
.media-text {
	display        : flex;
	gap            : $content-gap;
	container-type : inline-size;
	
	@include margin-bottom();
	
	& &__media { width : 38%; }
	
	& &__content {
		width : 62%;
		display: flex;
		flex-direction: column;
	}
	
	& &__media,
	& &__content {
		position: relative;
		
		&:only-child {
			text-align : center;
			width      : 100%;
		}
	}
	
	&&--left { flex-direction : row; }
	
	&&--right { flex-direction : row-reverse; }
	
	@container ( max-width : #{$breakpoint-md} ) {
		flex-direction : column !important;
		gap            : $content-padding;
		
		& &__media,
		& &__content {
			width : 100%;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_blockquote.scss **/
.blockquote {
	margin       : #{$content-gap} 0 !important;
	padding      : #{$content-padding};
	border-color : #{get_color(white)};
	border-style : solid;
	border-width : 2px 0;
	text-align   : center;
	font-size    : 1.2em;
	font-style   : italic;
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/_typography.scss **/
body {
	font-family: 'Source Sans Pro';
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Fredoka One';
	font-weight: normal;
	line-height: 1.5em;
	
	@include margin-bottom();
}

h1, h2, h3 {
	text-transform: uppercase;
}

h2 {
	@include margin-bottom( $content-gap );
}

p {
	line-height: 1.5em;
	
	@include margin-bottom();
	
	a {
		text-decoration: none;
		
		@include transition();
		
		&[href] {
			
			&, &:visited {
				color: var( --color-main );
			}
			
			&:focus,
			&:hover {
				color: var( --color-accent );
//				filter: brightness(200%);
			}
		}
	}
}

ul, ol {
	padding-left: 1.25rem;
	line-height: 1.5em;
	
	@include margin-bottom();
	
	li {
		margin-top: 0.5rem;
	}
}

table {
	
	thead {
		th {
			text-align: left;
			color: get_color( black );
			background: get_color( white );
			padding: 0.25rem 0.5rem;
			
			&.right { text-align: right; }
		}
	}
	
	tbody {
		td {
			vertical-align: top;
			padding: 0.25rem 0.5rem;
			background: get_color( gray, main );
			color: get_color( white );
			
			p {
				margin: 0 !important;
			}
			
			&.vertical {
				writing-mode: sideways-lr;
				text-align: center;
				vertical-align: middle;
			}
			
			&.right { text-align: right; }
		}
		
		tr:nth-child( even ) {
			td {
				background: get_color( gray, accent );
				color: get_color( black );
			}
		}
	}
	
	
	+ {
		h1, h2, h3, h4, h5, h6 {
			@include margin-top();
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/_functions.scss **/
@function  get_color( $color, $type: false ) {
	@if $type {
		@return map-get( map-get( $theme-colors, $type ), $color );
	}
	
	@return map-get( $theme-colors, $color );
}

@function  get_rgba( $color, $opacity, $type: false ) {
	$color: get_color( $color, $type );
	
	@return rgba( red($color), green($color), blue($color), $opacity );
}


@function contrast( $color, $color1, $color2 ) {
	@if type-of( $color ) == color and type-of( $color1 ) == color and type-of( $color2 ) == color {
		$light	: if( lightness( $color1 ) > lightness( $color2 ), $color1, $color2 );
		$dark	: if( lightness( $color1 ) > lightness( $color2 ), $color2, $color1 );
		@return if( lightness( $color ) < $contrast-threshold, $light, $dark );
	}
	@else {
		@return $color1;
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/_design.scss **/
:root {
	--deco-big-height: calc( var(--content-width) * 10.5 / 100);
	--deco-small-height: calc( var(--content-width) * 8 / 100);
}

@mixin design-color( $color ) {
	--color-main: #{get_color( $color, main )};
	--color-accent: #{get_color( $color, accent )};
	--color-text: #{contrast( get_color( black ), get_color( $color, accent ), get_color( $color, main ) )};
	--color-imprint: #{get_color( $color, imprint )};
}

@each $name, $color in map-get( $theme-colors, main ) {
	.theme-color-#{$name} {
		@include design-color( $name );
	}
}

@mixin design-element( $position, $distance : 0 ) {
	position: relative;
	min-height: var( --deco-big-height );
	z-index: 0;
	
	&::after,
	&::before {
		position: absolute;
		#{$position}: #{$distance};
		left: 0;
		width: 100%;
		z-index: -1;
		
		@if $position == 'bottom' {
			transform: scale( -1 );
		}
	}
	
	&::after {
		content: '';
		display: block;
		padding-top: var( --deco-big-height );
		clip-path: polygon( 0 0, 100% 0, 100% 100% );
		background: var( --color-main );
	}
	
	&::before {
		content: '';
		display: block;
		padding-top: var( --deco-small-height );
		clip-path: polygon( 0 0, 100% 0, 38% 50%, 0 100% );
		background: var( --color-accent );
	}
}


.design {
	&__element {
		&--bottom {
			@include design-element( bottom, calc( 100% - var(--deco-big-height) ) );
			@include linear-gradient( top, get_color( black ), calc( var( --deco-small-height ) / 2 ) );
		}
		
		&--top {
			@include design-element( top );
			@include linear-gradient( bottom, get_color( black ), calc( var( --deco-small-height ) / 2 ) );
		}
	}
	
	&__backround {
		&--main 	{ background-color: var( --color-main ); }
		&--accent 	{ background-color: var( --color-accent ); }
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/_normalize.scss **/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
	width: 100%;
	height: auto;
	border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

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

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}


/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_main.scss **/
&__main {
	position       : relative;
	z-index        : 1;
	container-type : inline-size;
	padding        : $content-padding;
	min-height     : calc(100vh - var(--deco-big-height) * 2);
	
	&::after {
		display        : block;
		content        : '';
		position       : absolute;
		top            : 0;
		left           : 0;
		width          : 100%;
		height         : 100%;
		opacity        : 0;
		background     : get_color(black);
		
		pointer-events : none;
		
		@include transition();
		
		.menu--toggled & {
			opacity : 1;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_footer.scss **/
&__footer {
	position : sticky;
	left     : 0;
	width    : 100%;
	bottom   : var( --bottom, 0 );
	
	z-index  : 10;
	
	.menu {
		list-style     : none;
		padding        : 0;
		display        : flex;
		flex-direction : column;
		
		&__caption {
			display : none;
		}
		
		&__item {
			a {
				@include transition();
				
				color           : get_color( white );
				text-decoration : none;
				
				&:focus,
				&:hover {
					color : var(--color-accent, get_color( gray ) );
				}
			}
			
			&.current-menu-item {
				a {
					text-decoration : underline;
				}
			}
		}
	}
	
	.site__info {
		font-size   : 0.75rem;
		font-weight : bold;
		color       : var(--color-imprint, get_color(black));
	}
	
	@media (max-height : #{$breakpoint-md}) {
		
		.menu--toggled & {
			bottom: var(--bottom) !important;
			position: fixed !important;
		}
	
		position : relative;
		bottom : 0 !important;
	}
	
	@media (max-width : #{$breakpoint-lg}) {
		.design__element--bottom {
			translate: 0 1px;
		}
		
		&__inner {
			padding-top    : $content-margin;
			padding-inline : $content-padding;
			padding-bottom : $content-padding;
		}
		
		.site__info {
			margin-top : $content-margin;
		}
		
		.menu {
			&__item {
				line-height : 1.5;
			}
		}
	}
	
	@media (min-width : #{$breakpoint-lg}) {
		bottom : 0 !important;
		
		&__inner {
			position         : absolute;
			top              : 0;
			width            : 100%;
			height           : 100%;
			background-color : transparent;
		}
		
		.site__info {
			position         : absolute;
			right            : 0;
			top              : 0;
			width            : 25%;
			text-align       : right;
			transform-origin : 100% 100%;
			transform        : rotate(-6deg);
			translate        : -0.5rem 100%;
			line-height      : 2rem;
			color            : var( --color-imprint, get_color(black) );
		}
		
		.menu {
			position       : absolute;
			flex-direction : row;
			bottom         : $content-margin;
			left           : $content-margin;
			
			&__item {
				&:not( :last-child ) {
					&::after {
						content             : '';
						background-image    : var(--separator);
						padding             : 0 #{$content-margin};
						
						width               : 1em;
						height              : 1em;
						display             : inline-block;
						background-size     : contain;
						background-repeat   : no-repeat;
						background-position : center;
						vertical-align      : sub;
					}
				}
			}
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_navigation.scss **/
&__navigation {
	
	&__button {
		width    : auto;
		position : absolute;
		top      : #{$content-margin};
		right    : #{$content-margin};
		
		z-index  : 100;
		
		.menu {
			&__toggle {
				position      : absolute;
				z-index       : 1;
				display       : block;
				width         : 1.875rem;
				height        : 1.875rem;
				cursor        : pointer;
				
				top           : 0;
				right         : 0;
				padding       : 0;
				
				background    : transparent;
				border-radius : 0;
				border        : 0;
				
				> * {
					background       : get_color(white);
					width            : 100%;
					height           : 20%;
					position         : absolute;
					left             : 0;
					
					@include transition();
					transform-origin : 0 50%;
					
					&:nth-child(1) {
						top : 0px;
					}
					
					&:nth-child(2) {
						top              : 50%;
						translate        : 0 -50%;
						transform-origin : 50% 50%;
					}
					
					&:nth-child(3) {
						bottom : 0;
					}
				}
				
				&.is--toggled {
					> * {
						&:nth-child(1) {
							translate : 0px -50%;
							transform : rotate(45deg);
							width     : 141.4213562373%;
						}
						
						&:nth-child(2) {
							transform : scaleX(0);
						}
						
						&:nth-child(3) {
							translate : 0px 50%;
							transform : rotate(-45deg);
							width     : 141.4213562373%;
						}
					}
				}
			}
		}
	}
	
	.menu {
		display    : flex;
		width      : var(--content-width);
		padding    : #{$content-gap};
		margin     : var(--deco-big-height) auto;
		gap        : #{$content-gap};
		list-style : none;
		
		@media (max-width : #{$breakpoint-md}) {
			padding        : #{$content-gap} #{$content-padding};
			flex-direction : column;
		}
		
		&__sub {
			
			&__item {
				&__caption {
					@include transition();
					
					font-size       : #{$content-margin};
					color           : get_color(white);
					width           : 100%;
					text-decoration : none;
					
					&[href],
					&[onclick] {
						&:hover {
							color : var(--color-text, get_color(gray));
						}
					}
				}
				
				&--current {
					> a {
						position : relative;
						color    : var(--color-text, get_color(white));
						
						&::before {
							content          : '';
							display          : block;
							position         : absolute;
							height           : #{$content-margin};
							width            : #{$content-margin};
							background-image : var(--separator);
							background-repeat: no-repeat;
							background-size  : contain;
							translate        : calc( -100% - #{$content-margin / 2}) -50%;
							top              : 50%;
						}
					}
				}
			}
		}
		
		&__item {
			flex           : 1 1 100%;
			display        : flex;
			flex-direction : column;
			gap            : #{$content-margin};
			
			@media (max-width : #{$breakpoint-md}) and (min-width : #{$breakpoint-sm}) {
				flex-direction : row;
				gap            : #{$content-margin * 2};
			}
			
			&__caption {
				@include transition();
				
				font-size       : #{$content-margin * 2};
				margin-bottom   : #{$content-margin};
				text-decoration : none;
				color           : get_color(white);
				
				@media (max-width : #{$breakpoint-md}) and (min-width : #{$breakpoint-sm}) {
					flex-basis : 40%;
				}
				
				&[href],
				&[onclick] {
					&:hover {
						color : var(--color-text, get_color(gray));
					}
				}
			}
			
			&--current {
				> a {
					position : relative;
					color    : var(--color-text, get_color(white));
					
					&::before {
						content          : '';
						display          : block;
						position         : absolute;
						height           : #{$content-margin * 2};
						width            : #{$content-margin * 2};
						background-image : var(--separator);
						background-repeat: no-repeat;
						background-size  : contain;
						translate        : calc( -100% - #{$content-margin / 2}) -50%;
						top              : 50%;
					}
				}
			}
		}
		
		&__submenu {
			position       : relative;
			top            : auto;
			left           : auto;
			flex           : 1 1 100%;
			display        : flex;
			flex-direction : column;
			gap            : #{$content-margin};
			list-style     : none;
			padding        : 0;
			
			@media (max-width : #{$breakpoint-md}) and (min-width : #{$breakpoint-sm}) {
				flex-basis : 60%;
			}
		}
		
		&__caption {
			display : none;
		}
		
		&__container {
			display    : none;
			
			position   : fixed;
			top        : 0;
			right      : 0;
			width      : 100%;
			height     : 100vh;
			overflow   : auto;
			z-index    : 5;
			
			background : get_rgba(black, $opacity-light);
			
			&.is--toggled {
				display : block;
			}
		}
		
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_branding.scss **/
&__branding {
	position: absolute;
	height: calc( var( --deco-small-height ) - #{$content-margin * 2} );
	min-height: 1.875rem;;
	margin: #{$content-margin};
	display: inline-block;
	
	&__logo {
		height: 100%;
		width: auto;
		
		&__link {
			display: inline-block;
			width: auto;
			height: 100%;
		}
		
		&--show-on{
			&-sm { display: block;}
			&-md { display: none; }
			
			@media ( min-width : #{$breakpoint-md} ) {
				&-sm { display: none;}
				&-md { display: block; }
			}
		}
	}
	
	&__title {
		display: none;
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_background.scss **/
&__background {
	position   : fixed;
	height     : 100vh;
	top        : 0;
	width      : var(--content-stage);
	display    : block;
	opacity    : 0.2;
	object-fit : cover;
	filter     : brightness(110%) saturate(130%);
	
	&--left {
		left            : 0;
		object-position : center;
	}
	
	&--right {
		right           : 0;
		object-position : center;
	}
	
	&--flip {
		scale : -1 1;
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_header.scss **/
&__header {
	@include design-element( top );
	@include linear-gradient( bottom, get_color(black), calc(var(--deco-small-height) / 2) );
	
	position : sticky;
	top      : 0;
	left     : 0;
	width    : 100%;
	z-index  : 10;
	
	@media screen and (min-width : 600px) {
		.admin-bar & {
			top : 32px;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/_mixins.scss **/
@mixin linear-gradient( $to, $color, $start ) {
	background: linear-gradient( to #{$to}, #{$color} #{$start}, transparent 100% );
}

@mixin transition( $transition: all 200ms ease-in-out ) {
	transition: $transition;
}

@mixin margin-bottom( $margin: $content-margin ) {
	&:not( :only-child ):not( :last-child ) {
		margin-bottom: $margin;
	}
}

@mixin margin-top( $margin: $content-margin ) {
	&:not( :only-child ):not( :first-child ) {
		margin-top: $margin;
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/styles.scss **/
@import 'normalize';
@import 'variables';
@import 'functions';
@import 'framework';
@import 'mixins';
@import 'design';
@import 'typography';
@import 'blocks/*';

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url('#{$theme-assets-url}/fonts/FredokaOne/stylesheet.css');
@import url('#{$theme-assets-url}/fonts/Source_Sans_Pro/stylesheet.css');

:root {
	--content-height : 100vh;
	--content-width  : min(100vw, #{$content-width});
	--content-stage  : calc((100vw - var(--content-width)) / 2);
}

BODY {
	background : #000;
	color      : #FFF;
	
	&.menu--toggled {
		overflow : hidden;
	}
}

.site {
	position   : relative;
	background : #000;
	max-width  : var(--content-width);
	min-height : 100vh;
	margin     : 0 auto;
	
	@import 'site/*';
}

#site-background {
	position : fixed;
	top      : 0;
	left     : 0;
	width    : 100vw;
	height   : 100vh;
	z-index  : -1;
	
	img {
		position   : absolute;
		top        : 0;
		height     : 100%;
		width      : var(--content-stage);
		opacity    : #{$opacity-light / 2};
		
		object-fit : cover;
		
		&:first-child {
			left : 0;
		}
		
		&:last-child {
			right : 0;
		}
	}
}

.media-text__media .topleft {
	transform: scaleX(-1);
	max-width: 200px; position: absolute; bottom: 0; right: 0;
}


.animation {
	&__ {
		&logo {
			position: relative;
			aspect-ratio: 0.86975084895341595086083766338089;
			width: 100%;
			
			> * {
				scale: 1.16;
				translate: 0 7.1%;
			}
			
			* {
				animation-iteration-count: infinite;
				/*animation-timing-function: linear;*/
				animation-duration: 9s;
			}
			
			&__ {
				&background {
					position: absolute;
					aspect-ratio: 1;
					width: 100%;
					z-index: 1;
				}
				
				&puppy,
				&handler,
				&gearhead,
				&background {
					animation-name: animate-logo-rotate-position;
					
					svg {
						position: absolute;
						transform-origin: center center;
						aspect-ratio: 1;
						height: auto;
					}
				}
				
				&puppy,
				&handler,
				&gearhead {
					svg {
						path {
							fill: #000 !important;
						}
					}
				}
				
				
				&puppy svg { z-index: 2; width: 22%; left: 39.2%; top: 17.85%; }
				&handler svg { z-index: 2; width: 20.6%; left: 21.3%; top: 50.4%; }
				&gearhead svg { z-index: 2; width: 22.5%; left: 55.6%; top: 50.4%; }
				&background svg { width: 100%; top: 0%; left: 0%; z-index: 1; }
				
				&background {
					svg {
						#tile-puppy path,
						#tile-handler path,
						#tile-gearhead path {
							fill: #fff;
						}
						
						#icon-puppy,
						#icon-handler,
						#icon-gearhead {
							display: none;
						}
						
						#tile-puppy path { animation-name: animate-logo-color-tile-puppy; }
						#tile-handler path { animation-name: animate-logo-color-tile-handler; }
						#tile-gearhead path { animation-name: animate-logo-color-tile-gearhead; }
					}
				}
			}
			
			&-- {
				&icon {
					position: absolute;
					aspect-ratio: 1;
					width: 100%;
					z-index: 3;
					
					svg {
						animation-name: animate-logo-rotate-icon
					}
				}
			}
			
			@keyframes animate-logo-rotate-icon {
				0% { rotate: 0deg; }
				33% { rotate: -120deg; }
				66% { rotate: -240deg; }
				100% { rotate: -360deg; }
			}
			
			@keyframes animate-logo-rotate-position {
				0% { rotate: 0deg; }
				33% { rotate: 120deg; }
				66% { rotate: 240deg; }
				100% { rotate: 360deg; }
			}
			
			@keyframes animate-logo-color-tile-puppy { 0% { fill: #CD0018; } 33% { fill: #FFF; } 66% { fill: #FFF; } 100% { fill: #CD0018; } }
			@keyframes animate-logo-color-tile-handler { 0% { fill: #FFF; }  33% { fill: #0089C8; }  66% { fill: #FFF; }  100% { fill: #FFF; } }
			@keyframes animate-logo-color-tile-gearhead { 0% { fill: #FFF; }  33% { fill: #FFF; }  66% { fill: #C8C200; }  100% { fill: #FFF; } }
		}
		
		&name {
			position: relative;
			align-self: center;
			min-height: 75px;
			width: 100%;
			width: 100%;
			justify-content: center;
			align-items: center;
			
			> p {
				position: absolute;
				margin-bottom: 0 !important;
			}
			
			&__{
				&puppy,
				&handler,
				&gearhead {
					height: min( 50px, 8vw );
					width: auto;
					max-height: 50px;
					
				}
				&puppy { animation-name: animate-name-fade-in-puppy; }
				&handler { animation-name: animate-name-fade-in-handler; }
				&gearhead { animation-name: animate-name-fade-in-gearhead; }
			}
			
			.animated {
				animation-iteration-count: infinite;
				/*animation-timing-function: linear;*/
				animation-duration: 9s;
				opacity: 0;
			}
			
			@keyframes animate-name-fade-in-puppy { 0% { opacity: 1; } 33% { opacity: 0; } 66% { opacity: 0; } 100% { opacity: 1; } }
			@keyframes animate-name-fade-in-handler { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } }
			@keyframes animate-name-fade-in-gearhead { 0% { opacity: 0; } 33% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 0; } }
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/_framework.scss **/
.image {
	&--{
		&flip {
			&-x { transform: scaleX( -1 ); }
			&-y { transform: scaleY( -1 ); }
		}
		
		&mask {
			&-to-{
				&top { mask-image: linear-gradient( to top, rgb( 0, 0, 0 ) 75%, transparent 100% ); }
				&left { mask-image: linear-gradient( to left, rgb( 0, 0, 0 ) 75%, transparent 100% ); }
				&right { mask-image: linear-gradient( to right, rgb( 0, 0, 0 ) 75%, transparent 100% ); }
				&bottom { mask-image: linear-gradient( to bottom, rgb( 0, 0, 0 ) 75%, transparent 100% ); }
			}
		}
	}
}

.flex {
	&- {
		&grow {
			&-- {
				&0 { flex-grow: 0 !important; };
				&1 { flex-grow: 1 !important;  };
			}
		}
		
		&shrink {
			&-- {
				&0 { flex-shrink: 0 !important;  };
				&1 { flex-shrink: 1 !important;  };
			}
		}
		
		&basis {
			@for $i from 1 through 500 {
				&--#{$i}px { flex-basis: #{$i}px !important; }
			}
		}
	}
}

.max {
	&-width {
		@for $i from 1 through 500 {
			&--#{$i}px { max-width: #{$i}px !important; }
		}
	}
	
	&-height {
		@for $i from 1 through 500 {
			&--#{$i}px { max-height: #{$i}px !important; }
		}
	}
}

.width {
	&-- {
		&auto	{ width: auto; }
		
		@for $i from 1 through 500 {
			&#{$i}px	{ width: #{$i}px !important; }
			&#{$i} 		{ width: #{$i}% !important; }
		}
	}
}

.height {
	&-- {
		&auto	{ height: auto; }
		
		@for $i from 1 through 500 {
			&#{$i}px	{ height: #{$i}px !important; }
			&#{$i} 		{ height: #{$i}% !important; }
		}
	}
}

.position {
	&-- {
		&relative { position: relative; }
		&absolute { position: absolute; }
	}
}

.top--0		{ top: 0; }
.left--0	{ left: 0; }
.right--0	{ right: 0; }
.bottom--0	{ bottom: 0; }

@each $name, $color in map-get($theme-colors, main) {
	.text--color--#{$name} {
		color   : #{get_color($name, accent)} !important;
	}
	
	.background--color--#{$name} {
		background-color   : #{get_color($name, main)} !important;
	}
}