/*
Theme Name: Seilbahn Rüdesheim
Theme URI: https://www.seilbahn-ruedesheim.de
Author: 99°
Author URI: https://www.99grad.de
Description: Seilbahn Rüdesheim Theme
Requires at least: WordPress 6
Version: 2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: seilbahn
*/

/* ---------------------------------------------------------
   VARIABLES
--------------------------------------------------------- */
:root {
	/* Fonts */
	--font-primary: "Palanquin", sans-serif;

	/* Global Colors */
	--color-text: #333333;
	--color-text-muted: #777777;
	--color-white: #ffffff;

	/* Brand Colors */
	--color-primary: #33888f;
	--color-secondary: #eb5b1d;
	--color-secondary-hover: #d7531a;

	/* Accessibility */
	--focus-color: var(--color-secondary);
	--focus-width: 2px;
	--focus-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary);

	/* Page Themes */
	--bg-page-default: #fff;
	--bg-primary: #dcede7;
	--bg-primary-light: #edf6f3;
	--bg-preise: #fee9d6;
	--text-preise: #eb5b1c;
	--bg-zeiten: #e9d9e2;
	--text-zeiten: #903f6f;
	--bg-sehenswertes: #eef5c5;
	--text-sehenswertes: #97b21d;
	--bg-geschichte: #c8dfe7;
	--text-geschichte: #334d75;
	--bg-datenschutz: #c8e9d7;
	--text-datenschutz: #227e4b;
	--bg-kontakt: #fff1dd;
	/* --text-kontakt: #dd861b; */
	--text-kontakt: #eb5b1c;

	/* Badges */
	--badge-gruen: #2eab67;
	--badge-gruen-hover: #248a52;
	--badge-blau: #068e9c;
	--badge-blau-hover: #04717d;
	--badge-orange: #fb6727;
	--badge-orange-hover: #d9521d;
	--badge-lila: #806075;
	--badge-lila-hover: #664d5e;
	--badge-dunkelblau: #1f294d;
	--badge-dunkelblau-hover: #151c34;

	/* UI */
	--border-color: #ced4da;
	--shadow-default: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
	--shadow-hover: 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.14);
	--transition: all 0.2s ease-in-out;
}

/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

a:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	text-decoration: none;
	background-color: rgba(235, 91, 29, 0.05);
	border-radius: 0;
}

:is(button, input, select, textarea, .btn, .nav-link, .accordion-button):focus-visible {
	outline: none !important;
	box-shadow: var(--focus-box-shadow) !important;
	border-radius: 0 !important;
	z-index: 10;
}

.skip-links {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10000;
}

.skip-link {
	display: block;
	padding: 1rem;
	background: var(--color-white);
	color: var(--color-primary);
	font-weight: bold;
	text-decoration: none;
	position: absolute;
	top: -100vh;
	left: 0;
	transition: top 0.2s;
	border: 2px solid var(--color-secondary);
}

.skip-link:focus-visible {
	top: 0;
	outline: none;
}

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

/* ---------------------------------------------------------
   BASIC
--------------------------------------------------------- */

html {
	position: relative;
	min-height: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--bg-page-default);
	font-family: var(--font-primary);
	color: var(--color-text);
	font-size: 16px;
	font-weight: 400;
	overflow-x: hidden;
}

@media (min-width: 992px) {
	body {
		font-size: 18px;
	}
}

:is(b, strong) {
	font-weight: 700;
}

:is(h1, h2) {
	color: var(--color-primary);
	font-weight: bold;
	margin-bottom: 3rem;
}

:is(h3, h4, h5, h6) {
	color: var(--color-primary);
	font-weight: bold;
	margin-bottom: 1.25rem;
}

:is(h1, h2, h3, h4) {
	text-transform: uppercase;
}

h1 {
	text-align: center;
	font-size: 1.6rem;
	letter-spacing: 0.1rem;
}

h4 {
	font-size: 1.2rem;
	margin-bottom: 0.75rem;
}

h5 {
	font-size: 1.1rem;
}

.h-gruen {
	color: var(--badge-gruen);
}

.h-blau {
	color: var(--badge-blau);
}

.h-orange {
	color: var(--badge-orange);
}

.h-lila {
	color: var(--badge-lila);
}

.h-dunkelblau {
	color: var(--badge-dunkelblau);
}

a {
	color: var(--color-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:is(:hover, :active) {
	color: var(--color-primary);
	text-decoration: none;
}

/* Utilities */
.mb-6 {
	margin-bottom: 4rem !important;
}

.mb-7 {
	margin-bottom: 5rem !important;
}

.mb-8 {
	margin-bottom: 6rem !important;
}

.mt-6 {
	margin-top: 4rem !important;
}

.mt-7 {
	margin-top: 5rem !important;
}

.mt-8 {
	margin-top: 6rem !important;
}

.mb--1 {
	margin-bottom: -0.25rem !important;
}

.mb--2 {
	margin-bottom: -0.5rem !important;
}

.mb--3 {
	margin-bottom: -1rem !important;
}

.mb--4 {
	margin-bottom: -1.5rem !important;
}

.mb--5 {
	margin-bottom: -3rem !important;
}

.mt--1 {
	margin-top: -0.25rem !important;
}

.mt--2 {
	margin-top: -0.5rem !important;
}

.mt--3 {
	margin-top: -1rem !important;
}

.mt--4 {
	margin-top: -1.5rem !important;
}

.mt--5 {
	margin-top: -3rem !important;
}

.maxw-xs {
	max-width: 480px;
}

.maxw-sm {
	max-width: 576px;
}

.maxw-md {
	max-width: 768px;
}

.maxw-lg {
	max-width: 992px;
}

.wp-block-columns {
	margin-bottom: 2rem;
}

.wp-block-columns .wp-block-columns {
	margin-bottom: 0;
}

.has-large-font-size {
	font-size: 32px;
}

.w-100 .wp-block-button__link {
	width: 100%;
}

.wp-block-button .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	border: 0 !important;
	border-radius: 0;
	background-color: var(--color-secondary);
	color: var(--color-white);
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	word-break: normal;
	transition: var(--transition);
}

.wp-block-button .wp-block-button__link:is(:hover, :active) {
	background-color: var(--color-secondary-hover) !important;
	color: var(--color-white);
	text-decoration: none;
}

.wp-block-button .wp-block-button__link:focus {
	background-color: var(--color-secondary-hover) !important;
}

.wpcf7-form-control.wpcf7-submit {
	padding: 0.5rem 1rem;
	border: 0 !important;
	background-color: var(--color-text-muted);
	color: var(--color-white);
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	word-break: normal;
	transition: var(--transition);
}

.wpcf7-form-control.wpcf7-submit:is(:hover, :active) {
	background-color: var(--color-secondary) !important;
	color: var(--color-white);
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-default) !important;
}

.wpcf7-form-control.wpcf7-submit:focus {
	box-shadow: var(--focus-box-shadow) !important;
}

.btn {
	border-radius: 0;
	padding: 0.75rem 1rem;
	color: var(--color-white);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1rem;
}

.btn.btn-gruen {
	background-color: var(--badge-gruen);
	border-color: var(--badge-gruen);
}

.btn.btn-gruen:is(:hover, :active, :focus) {
	background-color: var(--badge-gruen-hover);
	border-color: var(--badge-gruen-hover);
	color: var(--color-white);
}

.btn.btn-blau {
	background-color: var(--badge-blau);
	border-color: var(--badge-blau);
}

.btn.btn-blau:is(:hover, :active, :focus) {
	background-color: var(--badge-blau-hover);
	border-color: var(--badge-blau-hover);
	color: var(--color-white);
}

.btn.btn-orange {
	background-color: var(--badge-orange);
	border-color: var(--badge-orange);
}

.btn.btn-orange:is(:hover, :active, :focus) {
	background-color: var(--badge-orange-hover);
	border-color: var(--badge-orange-hover);
	color: var(--color-white);
}

.btn.btn-lila {
	background-color: var(--badge-lila);
	border-color: var(--badge-lila);
}

.btn.btn-lila:is(:hover, :active, :focus) {
	background-color: var(--badge-lila-hover);
	border-color: var(--badge-lila-hover);
	color: var(--color-white);
}

.btn.btn-dunkelblau {
	background-color: var(--badge-dunkelblau);
	border-color: var(--badge-dunkelblau);
}

.btn.btn-dunkelblau:is(:hover, :active, :focus) {
	background-color: var(--badge-dunkelblau-hover);
	border-color: var(--badge-dunkelblau-hover);
	color: var(--color-white);
}

hr,
.wp-block-separator {
	border-top: 1px solid var(--color-text-muted);
	border-bottom: 0;
	margin-bottom: 3rem;
	opacity: 1;
}

/* *[lang="en-US"] .lang-de,
*[lang="de-DE"] .lang-en {
	display: none !important;
} */

h4.no-rides {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: 1rem;
	border-radius: 3rem;
	max-width: 650px;
	margin: 0 auto;
}

@media (min-width: 992px) {
	h1 {
		font-size: 2rem;
		margin-bottom: 2.5rem;
	}
}

@media (min-width: 1200px) {
	h1 {
		font-size: 2.5rem;
		margin-bottom: 3rem;
	}

	h4 {
		font-size: 1.5rem;
	}
}

@media (max-width: 767.98px) {
	h2 {
		font-size: 1.75rem;
	}
}

@media (max-width: 575.98px) {
	h2 {
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------
   COLORS & PAGE THEMES
--------------------------------------------------------- */

/* TOUREN */
body:is(.page-touren, .page-tours) {
	background-color: var(--bg-page-default);
}

body:is(.page-touren, .page-tours) :is(h1, h2, h3, h4, h5) {
	color: var(--color-primary);
}

body:is(.page-touren, .page-tours) .wp-block-table {
	overflow-x: visible;
}

a.link-print {
	float: right;
	margin-bottom: 1.5rem;
}

/* PREISE */
body:is(.page-preise, .page-prices) .section-salmon {
	padding-bottom: 200px !important;
}

body:is(.page-preise, .page-prices) .section-salmon:after {
	content: "";
	position: absolute;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: 200px;
	background-image: url("/wp-content/uploads/2019/05/silhouette-preise.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right top;
}

@media (min-width: 768px) {
	body:is(.page-preise, .page-prices) .section-salmon:after {
		height: 250px;
	}
}

@media (min-width: 992px) {
	body:is(.page-preise, .page-prices) .section-salmon:after {
		height: 300px;
	}
}

@media (min-width: 1200px) {
	body:is(.page-preise, .page-prices) .section-salmon {
		padding-bottom: 300px !important;
	}

	body:is(.page-preise, .page-prices) .section-salmon:after {
		height: 350px;
	}
}

@media (min-width: 1440px) {
	body:is(.page-preise, .page-prices) .section-salmon:after {
		height: 375px;
	}
}

.section-secondary {
	background-color: var(--bg-geschichte);
}

.section-secondary :is(h1, h2, h3, h4, h5, h6) {
	color: var(--text-geschichte);
}

.section-orange-light {
	background-color: var(--bg-kontakt);
}

.section-orange-light :is(h1, h2, h3, h4, h5, h6) {
	color: var(--text-kontakt);
}

.section-primary {
	background-color: var(--bg-primary);
}

.section-primary-light {
	background-color: var(--bg-primary-light);
}

.section-secondary {
	background-color: var(--bg-geschichte);
}

.section-purple {
	background-color: var(--bg-zeiten);
}

.section-purple :is(h1, h2, h3, h4, h5, h6) {
	color: var(--text-zeiten);
}

.section-green-light {
	background-color: var(--bg-sehenswertes);
}

.section-green-light :is(h1, h2, h3, h4, h5, h6) {
	color: var(--text-sehenswertes);
}

.section-yellow {
	background-color: var(--bg-kontakt);
}

.section-salmon {
	position: relative;
	background-color: var(--bg-preise);
}

.section-salmon :is(h1, h2, h3, h4, h5) {
	color: var(--text-preise);
}

/* body:is(.page-zeiten, .page-operating-hours) {
	background-color: var(--bg-zeiten);
}

body:is(.page-zeiten, .page-operating-hours) :is(h1, h2, h3, h4, h5) {
	color: var(--text-zeiten);
}

body:is(.page-sehenswertes, .page-worth-seeing) {
	background-color: var(--bg-sehenswertes);
}

body:is(.page-sehenswertes, .page-worth-seeing) :is(h1, h2, h3, h4, h5) {
	color: var(--text-sehenswertes);
}

body:is(.page-geschichte, .page-history) {
	background-color: var(--bg-geschichte);
}

body:is(.page-geschichte, .page-history) :is(h1, h2, h3, h4, h5) {
	color: var(--text-geschichte);
}

body:is(.page-datenschutz, .page-privacy-policy) {
	background-color: var(--bg-datenschutz);
}

body:is(.page-datenschutz, .page-privacy-policy) :is(h1, h3, h5) {
	color: var(--text-datenschutz);
}

body:is(.page-impressum, .page-kontakt, .page-imprint, .page-contact, .page-faq) {
	background-color: var(--bg-kontakt);
}

body:is(.page-impressum, .page-kontakt, .page-imprint, .page-contact, .page-faq) :is(h1, h3, h5) {
	color: var(--text-kontakt);
}

body:is(.page-impressum, .page-kontakt, .page-imprint, .page-contact, .page-faq) hr {
	border-top: 1px solid var(--text-kontakt);
}

body:is(.page-impressum, .page-kontakt, .page-imprint, .page-contact, .page-faq) .accordion-button:not(.collapsed) {
	color: var(--color-white);
	background-color: var(--text-kontakt);
	filter: brightness(0) invert(1);
} */

/* ---------------------------------------------------------
   BOOTSTRAPIFY
--------------------------------------------------------- */

.wp-block-image img {
	width: 100%;
	height: auto;
}

@media (min-width: 781px) and (max-width: 1199px) {
	body:is(.page-zeiten, .page-operating-hours) .wp-block-columns:is(.has-4-columns, .has-5-columns) {
		flex-wrap: wrap !important;
	}

	body:is(.page-zeiten, .page-operating-hours) :is(.has-4-columns, .has-5-columns) .wp-block-column {
		flex-basis: calc(50% - 16px);
		max-width: calc(50% - 16px);
	}
}

@media (min-width: 992px) {
	.wp-block-columns:not(:last-child) {
		margin-bottom: 2rem;
	}
}

@media (max-width: 991.98px) {
	.wp-block-columns.has-2-columns {
		margin-bottom: 1.5rem;
	}

	.wp-block-columns.has-2-columns .wp-block-column {
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 599.98px) {
	.wp-block-columns {
		margin-bottom: 0;
	}

	.wp-block-columns .wp-block-column {
		margin-bottom: 1.5rem;
	}
}

/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

.header {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: var(--color-white);
}

.header .navbar-light .navbar-brand {
	height: 75px;
	width: 75px;
	position: relative;
	z-index: 99999;
	margin-bottom: -1.5rem;
	border-radius: 100%;
	will-change: transform;
	transition: var(--transition);
}

.header .navbar-light .navbar-brand:is(:hover, :focus, :active) {
	transform: scale(1.05) rotate(5deg);
	box-shadow: var(--shadow-default);
}

.header .navbar .navbar-nav.nav-main .nav-link {
	color: var(--text-geschichte);
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	transition: var(--transition);
}

.header .navbar .navbar-nav.nav-main .nav-link:is(:hover, :focus, :active),
.header .navbar .navbar-nav.nav-main .current-menu-item .nav-link {
	color: var(--color-secondary);
}

.header .navbar .navbar-nav.nav-main .nav-link:focus:not(:focus-visible) {
	box-shadow: none;
	outline: none;
	color: var(--color-secondary);
}

.header .navbar .navbar-nav.nav-main .nav-link:focus-visible {
	color: var(--color-secondary);
	background-color: transparent;
	box-shadow: var(--focus-box-shadow);
}

.header .navbar-light .navbar-toggler {
	border: 0;
	padding: 0;
	font-size: 1.5rem;
	position: relative;
	top: 10px;
}

.header .navbar-light .navbar-toggler:hover {
	cursor: pointer;
}

.header .navbar-light .navbar-toggler:focus:not(:focus-visible) {
	box-shadow: none;
}

.header .navbar-light .navbar-toggler:focus-visible {
	box-shadow: var(--focus-box-shadow);
}

button:focus {
	outline: 0;
}

.toggle-nav {
	display: block;
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.toggle-nav:is(:hover, :focus, :active) {
	color: #031f4f;
	text-decoration: none;
	cursor: pointer;
}

.toggle-nav span:after,
.toggle-nav span:before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
}

.toggle-nav span:after {
	top: 18px;
}

.toggle-nav span {
	position: relative;
	display: block;
}

.toggle-nav span,
.toggle-nav span:after,
.toggle-nav span:before {
	width: 100%;
	height: 2px;
	background-color: var(--color-text-muted);
	transition: var(--transition);
	backface-visibility: hidden;
	border-radius: 2px;
}

.toggle-nav.on span {
	background-color: transparent;
}

.toggle-nav.on span:before {
	transform: rotate(45deg) translate(-1px, 0px);
}

.toggle-nav.on span:after {
	transform: rotate(-45deg) translate(6px, -7px);
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link:is(.active, .show),
.navbar-light .navbar-nav .show>.nav-link {
	color: #031f4f;
}

.navbar .navbar-nav.nav-main>.nav-item.wpml-ls-menu-item {
	margin: 0 0.5rem;
	position: relative;
}

.navbar .navbar-nav.nav-main>.nav-item.wpml-ls-menu-item.wpml-ls-first-item {
	margin: 0 0.5rem 0 1rem;
}

.navbar .navbar-nav.nav-main>.nav-item.wpml-ls-menu-item.wpml-ls-last-item {
	margin: 0 0 0 0.5rem;
}

.navbar .navbar-nav.nav-main>.nav-item.wpml-ls-menu-item:not(:last-child):after {
	content: "|";
	color: #ddd;
	position: absolute;
	top: 0.5rem;
	right: -0.75rem;
}

.navbar .navbar-nav.nav-main>.nav-item.wpml-ls-menu-item:not(.wpml-ls-current-language) a {
	color: #ddd;
}

.navbar .navbar-nav.nav-main>.nav-item.wpml-ls-menu-item:not(.wpml-ls-current-language) a:hover {
	color: var(--color-secondary);
}

.header .wpml-ls-menu-item .wpml-ls-flag {
	margin-top: 0.5rem;
}

@media (min-width: 768px) {
	.header .navbar-light .navbar-brand {
		height: 96px;
		width: 96px;
		margin-top: -1.5rem;
		margin-bottom: -1.85rem;
	}
}

@media (min-width: 992px) {
	.header .navbar-light .navbar-brand {
		margin-top: -0.5rem;
	}

	#menu-hauptmenue,
	#menu-hauptmenue-englisch {
		position: relative;
		top: 7px;
	}

	.header .navbar .navbar-nav.nav-main>.nav-item {
		margin: 0 0.5rem;
	}

	.header .navbar .navbar-nav.nav-main .nav-item:last-child {
		margin-right: 0;
	}

	.header .navbar .navbar-nav.nav-main .nav-link {
		font-size: 16px;
	}
}

@media (min-width: 1200px) {

	#menu-hauptmenue,
	#menu-hauptmenue-englisch {
		top: 14px;
	}

	.header .navbar-light .navbar-brand {
		height: 120px;
		width: 120px;
		margin-bottom: -2.4rem;
	}

	.header .navbar .navbar-nav.nav-main .nav-link {
		font-size: 18px;
	}
}

@media (min-width: 1440px) {
	.header .navbar-light .navbar-brand {
		height: 136px;
		width: 136px;
		margin-bottom: -2.6rem;
	}
}

@media (max-width: 991.98px) {
	.header .header .navbar {
		padding-bottom: 0.125rem;
	}

	.header .navbar-collapse {
		text-align: center;
		position: absolute;
		top: 59px;
		left: -16px;
		right: -16px;
		background-color: var(--color-primary);
		z-index: 9999;
		box-shadow: var(--shadow-default);
	}

	.header .navbar .navbar-nav.nav-main .nav-link {
		justify-content: center;
		color: var(--color-white);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.header .navbar .navbar-nav.nav-main .nav-link:is(:hover, :focus, :active) {
		color: var(--bg-primary);
	}

	.header .navbar .navbar-nav.nav-main .nav-item:last-child .nav-link {
		border-bottom: none;
	}

	.header .navbar-collapse .navbar-nav {
		margin: 0.5rem 0;
	}
}

/* ---------------------------------------------------------
   BADGE OPENING
--------------------------------------------------------- */

.badge-opening {
	top: -0.5rem;
	right: 50%;
	width: 145px;
	height: 3.25rem;
	background-image: url("/wp-content/uploads/2019/02/badge-opening.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	color: var(--color-white);
	text-align: center;
	font-size: 0.9rem;
	line-height: 1;
	padding-top: 4px;
	transform: translateX(50%);
}

.badge-opening a {
	color: var(--color-white);
}

.badge-opening a:is(:hover, :focus, :active) {
	color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
	.badge-opening {
		top: -2rem;
		right: 5rem;
		width: 120px;
		height: 2.75rem;
		font-size: 0.75rem;
		transform: translateX(0);
	}
}

@media (min-width: 992px) {
	.badge-opening {
		right: 15px;
	}
}

@media (min-width: 1200px) {
	.badge-opening {
		width: 166px;
		height: 3.65rem;
		font-size: 1rem;
		line-height: 1.25;
	}
}

/* ---------------------------------------------------------
   HERO / WEBCAM / SLIDER
--------------------------------------------------------- */

.hero-wrap {
	background-image: url("/wp-content/themes/seilbahn/animation/images/bg-hero.png");
	position: relative;
	top: -35px;
	margin-bottom: -35px;
	max-height: 1080px;
}

.hero {
	position: relative;
	max-width: 1920px;
	height: 100%;
	margin: 0 auto;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.hero iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 480px) {
	.hero-wrap {
		top: -60px;
		margin-bottom: -60px;
	}
}

@media (min-width: 576px) {
	.hero-wrap {
		top: -80px;
		margin-bottom: -80px;
	}
}

@media (min-width: 768px) {
	.hero-wrap {
		top: -110px;
		margin-bottom: -110px;
	}
}

@media (min-width: 992px) {
	.hero-wrap {
		top: -135px;
		margin-bottom: -135px;
	}
}

@media (min-width: 1200px) {
	.hero-wrap {
		top: -150px;
		margin-bottom: -150px;
	}
}

@media (min-width: 1440px) {
	.hero-wrap {
		top: -180px;
		margin-bottom: -180px;
	}
}

@media (min-width: 1600px) {
	.hero-wrap {
		top: -225px;
		margin-bottom: -225px;
	}
}

.slider {
	height: 150px;
	width: 100%;
	background-size: cover;
	background-position: center;
}

@media (min-width: 576px) {
	.slider {
		height: 200px;
	}
}

@media (min-width: 768px) {
	.slider {
		height: 225px;
	}
}

@media (min-width: 992px) {
	.slider {
		height: 300px;
	}
}

@media (min-width: 1200px) {
	.slider {
		height: 385px;
	}
}

@media (min-width: 1600px) {
	.slider {
		height: 450px;
	}
}

@media (max-width: 767.98px) {
	.webcam {
		margin-bottom: 3rem;
	}
}

/* ---------------------------------------------------------
   TEASERBOX
--------------------------------------------------------- */

.teaserbox {
	border-radius: 0;
	border: 0;
	background-color: transparent;
}

.teaserbox .card-img img {
	will-change: transform;
	transition: var(--transition);
}

.teaserbox:hover .card-img img {
	transform: scale(1.025);
}

.teaserbox .card-img {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

.teaserbox .card-img:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1rem;
	width: 100%;
}

.teaserbox.card-primary .card-img:after {
	background-color: var(--color-primary);
}

.teaserbox.card-purple .card-img:after {
	background-color: var(--text-zeiten);
}

.teaserbox.card-secondary .card-img:after {
	background-color: var(--text-preise);
}

.teaserbox.card-primary {
	color: var(--color-primary);
}

.teaserbox.card-purple {
	color: var(--text-zeiten);
}

.teaserbox.card-secondary {
	color: var(--text-preise);
}

.teaserbox .card-img img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.teaserbox {
		margin-bottom: 2rem;
	}
}

/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.entry-content .wp-block-lazyblock-nncontainer:last-child>div {
	padding-bottom: 3rem;
}

.wp-block-column .wp-block-image:not(.no-border) {
	border: 0.5rem solid var(--color-white);
	box-shadow: var(--shadow-default);
}

.read-more a {
	position: relative;
	color: var(--color-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.read-more a:after {
	content: "";
	border-bottom: 1px solid var(--color-text-muted);
	position: absolute;
	left: 0;
	right: 0;
	display: block;
}

.read-more a:is(:hover, :focus, :active) {
	color: var(--color-secondary);
}

.read-more a:hover:after {
	border-bottom: 1px solid var(--color-secondary);
}

.wp-block-image.no-border {
	position: relative;
}

.wp-block-image.no-border figcaption {
	position: absolute;
	bottom: 0px;
	right: 0;
	color: var(--color-white);
	font-size: 0.8rem;
	padding: 0.25rem;
}

.wp-block-image.no-border figcaption a {
	color: var(--color-white);
}

.google-maps {
	border: 0;
	height: 350px;
	width: 100%;
	margin-bottom: 1rem;
}

.error-404 i {
	font-size: 5rem;
	color: var(--color-primary);
}

ul.list-text li:not(:last-child) {
	margin-bottom: 1rem;
}

.embed-privacy-container,
.wp-block-embed-youtube,
.embed-privacy-content iframe {
	aspect-ratio: 16/9 !important;
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.embed-privacy-container .embed-privacy-overlay {
		min-height: 360px;
	}
}

.box-white {
	position: relative;
	background-color: var(--color-white);
	padding: 1rem;
	/* box-shadow: var(--shadow-default); */
}

.box-white table {
	background-color: #f3e8f0;
	width: 100%;
	height: calc(100% - 2.25rem);
}

.box-white table td {
	padding: 0.25rem 0.5rem;
	font-size: 1rem;
	border: 0;
	vertical-align: top;
	overflow: hidden;
}

.box-white.section-preise figure:not(.table-one-column) table td:last-child {
	white-space: nowrap;
	text-align: right;
}

.box-white.section-preise table {
	background-color: #fef1e9;
	height: unset;
}

.box-white.section-preise table.table-one-column {
	height: calc(100% - 2.25rem);
}

.box-white.position-sticky {
	top: 1rem;
}

@media (min-width: 1200px) {
	.box-white {
		padding: 2rem 2rem 1rem;
	}
}

/* Illustrations */
.section-fahrzeiten:before {
	content: "";
	position: absolute;
	top: -100px;
	right: 15px;
	width: 133px;
	height: 100px;
	background-image: url("/wp-content/uploads/2019/03/illu-germania.svg");
	background-repeat: no-repeat;
}

.section-nachtfahrten:before {
	content: "";
	position: absolute;
	top: -85px;
	right: 15px;
	width: 116px;
	height: 70px;
	background-image: url("/wp-content/uploads/2019/03/illu-nacht.svg");
	background-repeat: no-repeat;
}

.section-preise:before {
	content: "";
	position: absolute;
	top: -74px;
	right: 15px;
	width: 142px;
	height: 74px;
	background-image: url("/wp-content/uploads/2019/03/illu-schiff-seilbahn.svg");
	background-repeat: no-repeat;
}

hr.illu-touren {
	border-top: 2px solid #66a698;
}

.illu-touren:before {
	content: "";
	position: absolute;
	top: -80px;
	right: 15px;
	width: 320px;
	height: 80px;
	background-image: url("/wp-content/uploads/2019/04/illu-landschaft.svg");
	background-repeat: no-repeat;
}

@media (min-width: 600px) and (max-width: 767px) {
	body:is(.page-operating-hours, .page-zeiten) .box-white table td {
		font-size: 0.9rem;
	}
}

@media (min-width: 768px) {

	.wp-block-cover-image.has-left-content .wp-block-cover-text,
	.wp-block-cover.has-left-content .wp-block-cover-text {
		font-size: 1.5rem;
	}
}

@media (min-width: 992px) {

	.wp-block-cover,
	.wp-block-cover-image {
		margin-bottom: 3rem;
	}

	.wp-block-cover-image.has-left-content .wp-block-cover-text,
	.wp-block-cover.has-left-content .wp-block-cover-text {
		font-size: 1.5rem;
		padding: 20px;
	}

	:is(.page-sehenswertes, .page-worth-seeing) .box-white {
		padding: 2rem 2rem 4rem;
	}

	:is(.page-sehenswertes, .page-worth-seeing) .box-white h4 {
		font-size: 1.1rem;
	}

	.box-white .wp-block-columns {
		margin-bottom: 0;
	}

	.box-white .wp-block-columns:not(:last-child) {
		margin-bottom: 2rem;
	}

	.section-fahrzeiten:before {
		top: -125px;
		width: 167px;
		height: 125px;
	}

	.section-nachtfahrten:before {
		top: -105px;
		width: 150px;
		height: 90px;
	}

	.section-preise:before {
		top: -127px;
		width: 246px;
		height: 127px;
	}

	.illu-touren:before {
		top: -95px;
		width: 383px;
		height: 95px;
	}
}

@media (min-width: 1200px) {

	.wp-block-cover-image.has-left-content .wp-block-cover-text,
	.wp-block-cover.has-left-content .wp-block-cover-text {
		font-size: 1.75rem;
	}

	body:is(.page-zeiten, .page-operating-hours) .box-white .wp-block-columns {
		margin-bottom: 0;
	}

	body:is(.page-zeiten, .page-operating-hours) .box-white .wp-block-columns:not(:last-child) {
		margin-bottom: 2rem;
	}

	body:is(.page-zeiten, .page-operating-hours) .box-white {
		padding: 2rem;
	}

	.section-fahrzeiten:before {
		top: -145px;
		width: 193px;
		height: 145px;
	}

	.section-nachtfahrten:before {
		top: -120px;
		width: 166px;
		height: 100px;
	}

	.section-preise:before {
		top: -144px;
		width: 280px;
		height: 144px;
	}

	.illu-touren:before {
		top: -110px;
		width: 444px;
		height: 110px;
	}

	:is(.page-sehenswertes, .page-worth-seeing) .box-white h4 {
		font-size: 1.4rem;
	}

	.box-white.section-preise table.table-one-column {
		height: calc(100% - 2.5rem);
	}
}

@media (max-width: 1199.98px) {
	body:is(.page-zeiten, .page-operating-hours) .zeiten-intro {
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}

	.box-white:is(.section-fahrzeiten, .section-nachtfahrten) {
		padding-bottom: 0;
	}

	.box-white .wp-block-columns {
		margin-bottom: 2rem;
	}

	.box-white .wp-block-columns:last-child .wp-block-column:last-child {
		margin-bottom: 1rem;
	}

	.box-white:is(.section-fahrzeiten, .section-nachtfahrten) .wp-block-columns:last-child .wp-block-column:last-child {
		margin-bottom: 2rem;
	}
}

@media (max-width: 767.98px) {

	.section-fahrzeiten:before,
	.section-nachtfahrten:before,
	.section-preise:before,
	.illu-touren:before {
		display: none !important;
	}
}

/* ---------------------------------------------------------
   TOUR
--------------------------------------------------------- */

.tours-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.tours-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1200px) {
	.tours-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
	}
}

.tour-item {
	position: relative;
	height: 100%;
	background-color: var(--color-white);
	padding: 1rem 1rem 3rem;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.tour-item:is(:hover, :focus, :focus-within, :active) {
	transform: translateY(-5px);
	box-shadow: var(--shadow-default) !important;
}

.tour-item .tour-headline {
	margin: -1rem -1rem 1rem;
	padding: 0.5rem 1rem;
}

.tour-headline h3,
.tour-details .tour-zeit,
.tour-details .tour-preis {
	color: var(--color-white) !important;
}

.tour-item .tour-headline.color-gruen {
	background-color: var(--badge-gruen);
}

.tour-item .tour-headline.color-blau {
	background-color: var(--badge-blau);
}

.tour-item .tour-headline.color-orange {
	background-color: var(--badge-orange);
}

.tour-item .tour-headline.color-lila {
	background-color: var(--badge-lila);
}

.tour-item .tour-headline.color-dunkelblau {
	background-color: var(--badge-dunkelblau);
}

.tour-item h3 {
	font-size: 1.25rem;
	color: var(--color-white) !important;
	margin-bottom: 0.25rem;
}

.tour-item .tour-details,
.tour-item .tour-icons {
	display: flex;
	flex-flow: wrap;
}

.tour-item .tour-details .tour-zeit {
	flex: 0 0 55%;
	max-width: 55%;
}

.tour-item .tour-details .tour-preis {
	flex: 0 0 45%;
	max-width: 45%;
}

.tour-item p.desc {
	line-height: 1.25;
	font-size: 1rem;
	color: var(--color-text);
}

.tour-item p.desc span {
	font-weight: bold;
	display: block;
	margin-bottom: 0.5rem;
}

.tour-item p.read-more {
	color: var(--color-text-muted);
	text-transform: uppercase;
	font-weight: bold;
	position: absolute;
	bottom: 1rem;
}

.tour-item .tour-icons {
	align-content: flex-start;
	margin: 0 -0.25rem 0.5rem;
}

.tour-item .tour-icon {
	flex: 0 0 20%;
	padding: 0 0.25rem 0.5rem;
	max-width: 56px;
}

.tour-item .tour-icon img {
	width: 100%;
	height: auto;
}

.modal-content {
	border: 0;
	border-radius: 0;
	box-shadow: var(--shadow-default);
}

.modal figure.wp-block-gallery.has-nested-images {
	display: flex;
	gap: 1rem;
}

.tour-details {
	display: flex;
}

.tour-details .tour-details-icon {
	width: 56px;
}

.tour-details .tour-details-icon img {
	width: 56px;
	height: 56px;
}

.tour-details .tour-details-text {
	width: calc(100% - 130px);
	padding: 0 15px;
}

.tour-details .tour-details-text p:last-child {
	margin-bottom: 0;
}

.tour-details .tour-details-zeit {
	width: 74px;
	text-align: right;
	color: var(--color-primary);
	font-weight: 600;
}

.tour-details-text {
	text-wrap: balance;
	hyphens: auto;
	hyphenate-limit-chars: 7 7 7;
}

@media (min-width: 576px) {
	.tour-item {
		padding: 1rem 1.5rem 3rem;
	}

	.tour-item .tour-headline {
		margin: -1rem -1.5rem 1rem;
		padding: 0.75rem 1.5rem;
	}

	.tour-item .tour-icon {
		flex: 0 0 25%;
	}
}

@media (min-width: 768px) {
	.tour-item .tour-icon {
		flex: 0 0 20%;
	}
}

@media (min-width: 992px) {
	.tour-item .tour-icon {
		max-width: 77px;
	}

	p.read-more {
		position: absolute;
		bottom: 1rem;
	}
}

@media (max-width: 575.98px) {
	.tour-details {
		flex-wrap: wrap;
	}

	.tour-details .tour-details-icon {
		width: 50%;
		order: 1;
	}

	.single-tour .tour-details-icon img {
		width: 44px;
		height: 44px
	}

	.tour-details .tour-details-zeit {
		width: 50%;
		order: 2;
	}

	.tour-details .tour-details-text {
		width: 100%;
		order: 3;
		padding: 1rem 0 0;
	}
}

/* TOUR-PAGE */
.single-tour main {
	background-color: var(--bg-primary);
}

.single-tour .tour-details-item {
	background-color: var(--bg-primary-light);
	padding: 1rem;
}

.single-tour .entry-header {
	padding: 1rem;
	color: #fff;
}

.single-tour .entry-header.tour-orange {
	background-color: var(--badge-orange);
}

.single-tour .entry-header.tour-gruen {
	background-color: var(--badge-gruen);
}

.single-tour .entry-header.tour-blau {
	background-color: var(--badge-blau);
}

.single-tour .entry-header.tour-lila {
	background-color: var(--badge-lila);
}

.single-tour .entry-header.tour-dunkelblau {
	background-color: var(--badge-dunkelblau);
}

.single-tour .entry-header :is(p, h1) {
	color: #fff;
}

.single-tour .tour-map figure {
	max-width: 100%;
	overflow: auto;
}

.single-tour .tour-map figure img {
	min-width: 696px;
}

.single-tour .printomatictext {
	color: var(--color-primary);
	display: inline-block;
	transition: color 0.2s ease;
}

.single-tour .printomatictext:is(:hover, :focus, :active) {
	color: var(--color-text);
	text-decoration: none;

}

@media screen {
	.single-tour #pom_top_html {
		display: none !important;
	}
}

@media print {
	.single-tour nav.onetap-accessibility.onetap-plugin-onetap {
		display: none !important;
	}
}

/* ---------------------------------------------------------
   TIMELINE
--------------------------------------------------------- */

#cd-timeline .cd-timeline-content {
	box-shadow: var(--shadow-default) !important;
	border-radius: 0;
}

#cd-timeline .cd-timeline-content h2 {
	font-size: 1.25rem;
}

#cd-timeline span.fa {
	display: none !important;
}

@media (min-width: 822px) {
	#cd-timeline .cd-timeline-img {
		width: 20px;
		height: 20px;
		margin-top: 20px;
		margin-left: -10px;
	}

	#cd-timeline .cd-timeline-content {
		width: 45%;
	}

	#cd-timeline .cd-timeline-content h2 {
		font-size: 1.5rem;
	}
}

@media (min-width: 1200px) {
	#cd-timeline .cd-timeline-content h2 {
		font-size: 1.75rem;
	}
}

@media (max-width: 821.98px) {
	#cd-timeline .cd-timeline-block .cd-timeline-img {
		width: 20px;
		height: 20px;
		left: 10px;
		margin-top: 17px;
	}
}

/* ---------------------------------------------------------
   ALERTS
--------------------------------------------------------- */

.entry-content .wp-block-lazyblock-hinweisbox {
	margin-bottom: 2rem;
}

.entry-content .alert {
	border-radius: 0;
}

.entry-content .alert .lazyblock-inner-blocks *:last-child {
	margin-bottom: 0;
}

.alert-primary h4 {
	color: #004085 !important;
}

.alert-secondary h4 {
	color: #383d41 !important;
}

.alert-success h4 {
	color: #155724 !important;
}

.alert-danger h4 {
	color: #721c24 !important;
}

.alert-warning h4 {
	color: #856404 !important;
}

.alert-info h4 {
	color: #0c5460 !important;
}

.alert-srhgreen {
	background-color: var(--bg-primary-light);
}

.alert-srhgreen h4 {
	color: var(--color-primary);
}

.alert-srhorange {
	background-color: var(--color-secondary);
	color: var(--color-white);
}

.alert-srhorange h4 {
	color: var(--color-white);
}

.alert-srhorange .wp-element-button {
	background-color: #c74d18;
}

.alert-light {
	box-shadow: var(--shadow-default);
	color: var(--color-text) !important;
}

.alert-light .alert-heading {
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.alert-light ul {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.alert-dark h4 {
	color: #1b1e21 !important;
}

@media (min-width: 992px) {
	.entry-content .wp-block-lazyblock-hinweisbox {
		margin-bottom: 3rem;
	}

	.alert.alert-light {
		padding: 0.75rem 2rem;
	}
}

/* ---------------------------------------------------------
   RIBBON
--------------------------------------------------------- */

.ribbon {
	background-image: url(/wp-content/uploads/2021/08/ribbon-home.svg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 52px;
	max-width: 300px;
	margin: 0 auto 2rem;
	color: var(--color-white);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 0 0 0.25rem;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.ribbon {
		height: 91px;
		max-width: 525px;
		font-size: 1.5rem;
		padding: 0 2rem 0.5rem;
		margin: 0 auto 3rem;
	}
}

/* ---------------------------------------------------------
   ACCORDION
--------------------------------------------------------- */

.accordion-button {
	font-size: 1.35rem;
}

.accordion-button:not(.collapsed) {
	color: var(--color-primary);
	font-weight: bold;
	background-color: var(--bg-primary-light);
}

.accordion-button:not(.collapsed) .fal {
	font-weight: bold;
}

/* ---------------------------------------------------------
   CONTACT FORM (CF7)
--------------------------------------------------------- */

.wpcf7 label {
	display: block;
}

.wpcf7-form-control:is(.wpcf7-select, .wpcf7-text, .wpcf7-textarea) {
	display: block;
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	color: #123e66;
	background-color: var(--color-white);
	background-clip: padding-box;
	border: 1px solid var(--border-color);
	border-radius: 0;
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

.wpcf7-form-control:is(.wpcf7-select, .wpcf7-text, .wpcf7-textarea):focus {
	color: #495057;
	background-color: var(--color-white);
	border-color: var(--color-secondary);
	outline: 0;
	box-shadow: none;
}

.wpcf7-form-control:is(.wpcf7-select, .wpcf7-text, .wpcf7-textarea):focus-visible {
	box-shadow: var(--focus-box-shadow);
	border-color: var(--color-secondary);
}

textarea.wpcf7-form-control {
	height: auto !important;
}

.wpcf7-form .form-group {
	max-width: 450px;
	width: 100%;
}

.wpcf7-form :is(input[type="checkbox"], input[type="radio"]) {
	position: relative;
	width: 15px;
	height: 15px;
	top: 1px;
}

.wpcf7-form input[type="submit"] {
	padding: 0.5rem 2rem;
}

.form-group .radio {
	display: inline-block;
}

.form-group .radio:not(:last-child) {
	margin-right: 1.5rem;
}

.wpcf7-form-control .wpcf7-list-item {
	margin: 0;
}

.wpcf7-list-item:not(.last) {
	margin-right: 1.5rem;
}

#wpcf7-list-item-label {
	margin-left: 20px;
	display: inline-block;
	text-transform: none;
	line-height: 1.4;
	position: relative;
	top: -23px;
}

.wpcf7-not-valid-tip {
	display: inline-block;
	position: relative;
	padding: 0.5rem 1rem;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.wpcf7 form .wpcf7-response-output {
	margin-left: 0;
	margin-right: 0;
}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.footer {
	position: relative;
	width: 100%;
	background-color: var(--color-white);
	color: var(--color-text-muted);
}

.footer:before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	background-image: url("/wp-content/uploads/2019/03/bg-welle.svg");
	background-repeat: repeat-x;
	background-size: cover;
	width: 100%;
	height: 72px;
}

.footer div {
	line-height: 1.5;
}

.footer p:last-child {
	margin-bottom: 0;
}

.footer .navbar {
	padding: 0;
}

.footer .footer-content {
	font-size: 0.9rem;
}

.navbar .navbar-nav.nav-footer .nav-link {
	padding-right: 0;
	padding-left: 0;
	padding-top: 0;
	color: var(--text-geschichte);
	font-size: 1rem;
	font-weight: bold;
	transition: var(--transition);
}

.navbar .navbar-nav.nav-footer .nav-link:hover {
	color: var(--color-secondary);
}

.footer .wpml-ls-menu-item .wpml-ls-flag {
	margin-top: 0.4rem;
}

@media (min-width: 768px) {
	.navbar .navbar-nav.nav-footer .nav-item {
		margin: 0 0.75rem;
	}

	.navbar .navbar-nav.nav-footer .nav-item:first-child {
		margin-left: 0;
	}

	.navbar .navbar-nav.nav-footer .nav-item:last-child {
		margin-right: 0;
	}
}

@media (min-width: 992px) {
	.footer {
		font-size: 16px;
	}
}

@media (min-width: 1200px) {
	.footer {
		font-size: 18px;
	}

	.navbar .navbar-nav.nav-footer .nav-item:last-child {
		margin-right: 0;
	}
}

@media (max-width: 767.98px) {
	.navbar-expand .navbar-nav {
		flex-direction: column;
	}
}