/* XLarge */

	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 14pt;
			}

        /* Spotlight */

			header.major h1,
			.zmf_spotlistdetail_pop h3,
			.wrapper.style1 .container h2,
			.wrapper.style2 .container h2,
            .spotlight .content h2 {
                font-size: 3.4vw;
            }

			.zmf_spotlistdetail_pop h4 {
				font-size: 2.8vw;
			}

            .zmf_spotlist li {
				width: clamp(24em, 40%, 32em);
			}

            .zmf_spotlistcard {
                font-size: 0.815em;
                font-weight: 270;
            }

            .zmf_spotmobenhance {
                font-size: 2.6vw;
                margin-top: 1.5em;
            }

	}

/* Large */

	@media screen and (max-width: 1280px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 13pt;
			}

			.container {
				width: 90%;
				max-width: 100%;
			}

			.zmf_ueber_mich {
				margin: 1em 0 3em 0;
			}

		/* Spotlight */

			.spotlight.top .content {
				padding: 3.825em 0 1.825em 0;
			}

			.spotlight.bottom .content {
				padding: 3.825em 0 2.95em 0;
			}

			.spotlight.left .content, .spotlight.right .content {
				padding: 7.5em 2.5em 4.5em 2.5em;
			}

            .zmf_spotlist {
                gap: 2em;
                margin-bottom: 2em;
                padding-top: 0;
            }
			.detailpage .zmf_spotlist {
				margin-bottom: 4em;
        		padding-top: 3em;
			}

            .zmf_spotlistcard {
                font-size: 0.845em;
                font-weight: 240;
            }

			.zmf_spotlistdetail_pop .section1 img {
				margin: 1em 0 1em 0;
				border-radius: 1em;
			}

		/* Wrapper */

			.wrapper .container {
				padding: 4.5em 0 2.5em 0;
			}

		/* Dropotron */

			.dropotron.level-0 {
				font-size: 1em;
			}

		/* Banner */

			#banner .content {
				padding: 6em 2em 2em 2em;
			}

			#banner .content header div {
				flex: 0 1 30em;
			}

			.zmf_logo {
				margin-top: -4em;
				padding-bottom: 2em;
			}

		/* Footer */

			#footer {
				padding: 5em 0 2.5em 0;
			}

	}

/* Medium */

	@media screen and (max-width: 980px) {

		:root {
			--headline-color-typeC: #1d861d;
		}

		/* Nav */
			#titleBar nav {
				display: none;
				opacity: 0;
			}
			#navPanel .menuspan.depth-2 {
				font-size: 14px;
			}

		/* Basic */

			body, input, select, textarea {
				font-size: 12pt;
			}

			.container {
				width: 100% !important;
			}

			.zmf_ueber_mich {
				margin: 0 0 2em 0;
			}

            body > div#page-wrapper > section:not(#banner),
            body.detailpage .zmf_spotlistdetail_pop section {
                border-top-width: 1px;
            }

			.detailpage section:not(.wrapper) .zmf_sticky_wrap,
			.detailpage .zmf_sticky_wrap {
				display: block;
			}

			.zmf_back_svg.big {
				display: none;
			}
			.zmf_back_svg.mob {
				display: block;
			}

			.zmf_col3_container_textheader,
			.zmf_col3_container_text {
				font-weight: inherit;
			}

			header p {
				font-size: 1.16em;
			}

			.legal ul {
				margin: 1em 0 2em 1em;
			}
			.legal.sitemap ul {
				margin: 1em 0 2em 0.2em;
			}
			.legal.sitemap > ul ul ul {
				margin-left: 0em;
				padding-left: 0em;
			}
			.legal.sitemap > ul ul ul li {
				padding-left: 0;
			}

		/* Spotlight */

			.spotlight {
				background-attachment: scroll;
				height: auto;
			}
			.detailpage .spotlight {
				opacity: 1;
				height: auto;
				transition: unset;
			}

				.spotlight .image.main {
					display: grid;
					justify-items: center;
					margin: 0;
					overflow: hidden;
				}

				.spotlight .content {
					border-width: 0 !important;
					border-top-width: 0.35em !important;
					bottom: auto !important;
					left: auto !important;
					padding: 4.5em 2.5em 2.5em 2.5em !important;
					position: relative;
					right: auto !important;
					text-align: center;
					top: auto !important;
					width: 100% !important;
				}
				.detailpage .spotlight .content {
					padding: 6em 2.5em 3em 2.5em !important
				}

					.spotlight .content ul.actions {
						justify-content: center;
						width: 100%;
						margin-left: 0;
					}

						.spotlight .content ul.actions li:first-child {
							padding-left: 0;
						}

				.goto-next {
					display: none;
				}

				header.major h1,
				.zmf_spotlistdetail_pop h3,
                .wrapper.style1 .container h2,
				.wrapper.style2 .container h2,
				.spotlight .content h2 {
                    font-size: 2.2em;
                }

				.zmf_spotlistdetail_pop h4 {
					font-size: 1.5em;
				}

				.zmf_spotlistdetail_pop {
					hyphens: auto;
					-ms-hyphens: auto;
					-moz-hyphens: auto;
					hyphenate-limit-chars: 8 4 4;
				}

            .spotlight.style2 .content,
			.spotlight.style3 .content,
			.spotlight.style4 .content {
				background: transparent;
			}

			.spotlight.style1 .button {
				margin: 1em 0;
				font-weight: inherit;
			}

			.zmf_popupoverlay {
				pointer-events: none;
				transition: none;
				background-color: transparent;
				backdrop-filter: none;
			}

			.zmf_spotlist li {
				width: clamp(16em, 45%, 24em);
                border-width: 1px;
			}

            .zmf_spotlistcard {
                font-size: 0.875em;
                font-weight: 200;
            }

            .zmf_spotlist li .button {
                box-shadow: inset 0 0 0 0.5px var(--text-color-typeA);
			    font-weight: 200;
            }
                .style3 .zmf_spotlist li .button {
                    box-shadow: inset 0 0 0 0.5px var(--text-color-typeB);
                }
                .style4 .zmf_spotlist li .button {
                    box-shadow: inset 0 0 0 0.5px var(--text-color-typeC);
                }
            .zmf_spotlist li .button::after {
                font-weight: 400;
            }

		.is-touch #zmf_spotlistpopover .zmf_slpopcontent {
			scrollbar-width: unset;
		}

		#zmf_handle {
			display: block;
			flex-basis: 100%;
			width: 64px;
			height: 5px;
			background: var(--text-color-popHeader);
			border-radius: 5px;
			position: absolute;
			top: 6px;
			z-index: 20;
			left: calc(50% - 32px);
			cursor: grab;
			touch-action: none;
		}

		#zmf_slpopHead {
			cursor: grab;
		}

		.legal,
		.detailpage .wrapper .container,
		.detailpage .zmf_spotlistdetail_pop section,
		.zmf_spotlistdetail_pop section {
    		padding: 48px max(1.5em, 5%);
		}
		.detailpage .zmf_spotlistdetail_pop .section1,
        .zmf_spotlistdetail_pop .section1 {
    		padding: 48px max(1.5em, 5%);
		}

		.zmf_spotlistdetail_pop .section1 b {
			width: 100%;
		}
		.zmf_spotlistdetail_pop .section1 img {
			margin: 0;
		}
		
		.zmf_spotmobenhance.zmf_mobpara.inactive {
			transform: translate(0,10em);
		}
		
		.detailpage .zmf_mobpara.accordion.inactive {
			transform: translate(-2em,0em);
			opacity: 0;
		}

		/* Wrapper */

			.wrapper .container {
				padding: 4.5em 2.5em 2.5em 2.5em;
			}

			.landing .wrapper.style1 {
				padding-bottom: 2em;
			}

		/* Banner */

			#banner {
				background-attachment: scroll;
			}

				#banner .content {
					padding: 2em 0 4em 0;
					display: flex;
					flex-wrap: wrap;
					text-align: center;
					justify-content: center;
  					align-content: space-between;
					min-height: 100vh;
					min-height: max(100svh, calc(100svh * tan(atan2(323px, 100svw)))); /* HTML->min-width 320px -> Mobile Devices auto-zoom fix */
				}

					#banner .content header {
						display: grid;
						justify-items: center;
						text-align: center;
						gap: 0;
					}

					#banner .content header div {
						display: block;
						padding: 1.5em 0 0 0;
						overflow: hidden;
					}

					#banner .content .image {
						width: clamp(8.75em, calc(5em + 28svw / 2), 13em);
						height: clamp(8.75em, calc(5em + 28svw / 2), 13em);
						border-width: calc(1px + 1px*((100svw - 480px) / 500)); /* Between 1px and 2px -- why not ;-) */
					}

					#banner .content header p {
						font-size: 0.75em;
						padding: 0 calc((90% - 380px) / 2);
					}
					
				#banner .content .bottomflex {
					width: 100%;
					max-width: 34em;
				}

			.zmf_logo {
				margin-top: 0;
				padding-bottom: 1em;
			}

			.zmf_logo2 {
				width: 100%;
				margin: 2em 0 0 0;
				justify-content: center;
			}

		/* Footer */

			#footer {
				padding: 4em 0 2em 0;
			}
	}

/* Small */

	@media screen and (max-width: 736px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 12pt;
			}

			h2 {
				font-size: 2em;
        		font-weight: 900;
			}

			h3 {
				font-size: 1.2em;
			}

			h4 {
				font-size: 1em;
			}

		/* Section/Article */

			header h2 + p {
				font-size: 20px;
				font-weight: 200;
				line-height: 2;
			}

			header h3 + p {
				font-size: 1em;
			}

			header h4 + p,
			header h5 + p,
			header h6 + p {
				font-size: 0.9em;
			}


		/* Spotlight */

			.spotlight .content {
				padding: 3em 1.25em 3em 1.25em !important;
			}

			.detailpage .spotlight .content {
				padding: 6em 1.25em 3em 1.25em !important
			}

			.zmf_spotlist li {
				width: clamp(16em, 92%, 30em);
			}

            .zmf_spotmobenhance {
                font-size: 1.25em;
                margin-top: 1em;
            }

		/* Wrapper */

			.wrapper .container {
				padding: 3.25em 1.5em 1.25em 1.5em;
			}

		/* Banner */

				#banner .content {
					padding: 4em 1.5em 4em 1.5em;
				}

					#banner .content header h2 {
						font-size: 36px;
					}

		/* Nav */

			#page-wrapper {
				backface-visibility: hidden;
				transition: transform 0.5s ease;
			}

		/* Footer */

			#footer {
				padding: 3em 1.5em 1.5em 1.5em;
			}

            #footer .copyright {
                max-width: 30em;
                justify-self: center;
            }
            #footer .copyright li:nth-child(5) {
                border-left: 0;
                margin-left: 0;
                padding-left: 0;
            }

	}

/* XSmall */

	@media screen and (max-width: 480px) {

		/* Basic */

			html, body, #navPanel {
				min-width: 320px;
			}

			body, input, select, textarea {
				font-size: 12pt;
			}

		/* Button */

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			.button {
				padding: 0;
			}

		/* Wrapper */

			.wrapper .container {
				padding: 3em 1.25em 1em 1.25em;
			}

		/* Banner */

			#banner .content {
				padding: 2em 1em 2em 1em;
			}

				#banner .content .image {
					width: 8.75em;
					height: 8.75em;
					border-width: 1px;
				}

				#banner .content header p {
					padding: 0 calc((90% - 220px) / 2);
				}

		/* Footer */

			#footer {
				padding: 4em 1.25em 2em 1.25em;
			}

				#footer .copyright {
					line-height: inherit;
				}

					#footer .copyright li {
						border-left: 0;
						display: block;
						margin: 0;
						padding: 0;
					}

	}


/* XXSmall */

	@media screen and (max-width: 360px) {
		#navPanel .menuspan.depth-1 {
			font-size: 15px;
			padding-left: 1em;
		}
	}