/*
 * vr_basis1 template stylesheet
 *
 * Design goals:
 * - Reusable header/footer modes for small Joomla sites.
 * - A single boxed grid/rhythm shared by header, content and footer.
 * - No external dependencies and no hidden framework assumptions.
 */

* {
	box-sizing: border-box;
}

html {
	/*
	 * Keep native scrolling instant. The template JavaScript handles
	 * configurable smooth anchor/back-to-top movement. If native smooth
	 * scrolling stays active, each animation frame can trigger its own
	 * browser easing and create an uneven stop-start motion.
	 */
	scroll-behavior: auto;
	/*
	 * Native hash jumps such as /#projekte happen before JavaScript can
	 * correct the position. scroll-padding-top keeps anchor targets visible
	 * below the fixed/overlay header in modern browsers.
	 */
	scroll-padding-top: calc(var(--vrb-header-total-height) + var(--vrb-anchor-offset));
}

/*
 * Fallback for direct anchor links and browser-native hash navigation.
 * The JavaScript scroll helper uses the same offset for exact positioning.
 */
[id] {
	scroll-margin-top: calc(var(--vrb-header-total-height) + var(--vrb-anchor-offset));
}

body {
	margin: 0;
	font-family: var(--vrb-body-font);
	font-size: var(--vrb-content-font-size);
	line-height: var(--vrb-content-line-height);
	color: var(--vrb-content-text-color);
	background: var(--vrb-page-bg-color);
}

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

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

a {
	color: inherit;
}

.main-content a {
	color: var(--vrb-link-color);
}

.main-content a:hover,
.main-content a:focus {
	color: var(--vrb-link-hover-color);
}

/* Focus handling --------------------------------------------------------
 * Browsers, especially Safari, can draw strong blue focus rings after mouse
 * clicks on sliders, gallery controls or buttons. For these visual sites the
 * native ring is intentionally suppressed globally. Keyboard and click
 * behavior remains unchanged; only the browser-drawn outline is removed.
 */
*:focus,
*:focus-visible,
:where(a, button, input, select, textarea, summary, [tabindex]):focus,
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:where(.vr-slider, .vr-gallery, .vr-slider *, .vr-gallery *):focus,
:where(.vr-slider, .vr-gallery, .vr-slider *, .vr-gallery *):focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Content typography ----------------------------------------------------
 * These rules give ordinary Joomla article content a predictable typographic
 * base. Values are Template-Style parameters, so Startseite and Unterseiten can
 * be tuned independently without editing the template CSS.
 */
h1,
h2,
h3,
h4 {
	font-family: var(--vrb-heading-font);
	color: var(--vrb-heading-color);
	font-weight: 400;
	line-height: 1.18;
	margin: 0 0 0.65em;
}

h1 { font-size: var(--vrb-h1-font-size); }
h2 { font-size: var(--vrb-h2-font-size); }
h3 { font-size: var(--vrb-h3-font-size); }
h4 { font-size: var(--vrb-h4-font-size); }

p {
	margin-top: 0;
	margin-bottom: 1em;
}


/*
 * Global boxed content width.
 * The gutter variables are template parameters. Header, content and footer use
 * the same container so the logo never touches the window edge on mobile.
 */
.vrb-container {
	width: min(var(--vrb-container-width), calc(100% - (2 * var(--vrb-page-gutter))));
	margin-inline: auto;
}

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

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 10000;
	width: auto;
	height: auto;
	padding: 10px 14px;
	clip: auto;
	background: #fff;
	color: #000;
}

/* Header --------------------------------------------------------------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--vrb-header-total-height);
	padding: 0;
	background-color: var(--vrb-header-bg);
	-webkit-backdrop-filter: blur(var(--vrb-header-backdrop-blur));
	backdrop-filter: blur(var(--vrb-header-backdrop-blur));
	transition: height 220ms ease, background-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease, transform 220ms ease;
}

/*
 * Optional soft edge below the transparent header. It creates a subtle visual
 * transition from header to image/content without blocking clicks below it.
 */
.site-header::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: var(--vrb-header-fade-height);
	pointer-events: none;
	background: linear-gradient(to bottom, var(--vrb-header-fade-bg), rgba(0, 0, 0, 0));
}

.header-placement-normal .site-header {
	position: relative;
}

/* Sticky is activated by JavaScript only after the configured scroll distance.
 * In normal document flow the header must not be sticky from page load,
 * otherwise the configured threshold would be ignored.
 */
.header-placement-normal.has-sticky-header .site-header {
	position: relative;
	top: auto;
}

.has-sticky-header .site-header.is-sticky {
	height: var(--vrb-sticky-height);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	animation: vrb-sticky-reveal 240ms ease both;
}

.has-sticky-header .site-header.is-sticky.is-sticky-leaving {
	animation: vrb-sticky-hide 240ms ease both;
}

.header-placement-overlay.has-sticky-header .site-header.is-sticky {
	position: fixed;
}

.header-placement-normal.has-sticky-header .site-header.is-sticky {
	position: sticky;
	top: 0;
}

.header-placement-overlay.has-sticky-header .site-header.is-sticky.is-sticky-leaving,
.header-placement-normal.has-sticky-header .site-header.is-sticky.is-sticky-leaving {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

@keyframes vrb-sticky-reveal {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes vrb-sticky-hide {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

.header-inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
	gap: 24px;
	height: 100%;
	padding: 0;
}

/* Header layout modes ---------------------------------------------------
 * The layout mode only changes the structural placement of logo and menu.
 * Header overlap/normal flow is controlled separately by the header placement
 * parameter so the spacing rules stay predictable.
 */
.header-layout-logo-left-menu-right .brand,
.header-layout-standard .brand {
	justify-self: var(--vrb-logo-justify);
}

.brand {
	padding-top: var(--vrb-logo-margin-top);
	padding-bottom: var(--vrb-logo-margin-bottom);
}

.header-layout-logo-center-no-menu .header-inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-layout-logo-center-no-menu .brand {
	flex: 0 0 auto;
	width: auto;
	height: 100%;
	justify-content: center;
	justify-self: center;
	margin-inline: auto;
}

.header-layout-logo-center-no-menu .brand-logo {
	margin-inline: auto;
}

.header-layout-menu-top-logo-below .site-header {
	height: var(--vrb-header-total-height);
	background: var(--vrb-header-logo-row-bg);
}

.header-layout-menu-top-logo-below.has-sticky-header .site-header.is-sticky {
	height: var(--vrb-header-total-height);
}

.header-layout-menu-top-logo-below .header-inner {
	grid-template-rows: var(--vrb-header-menu-row-height) var(--vrb-header-height);
	gap: 0;
}

.header-layout-menu-top-logo-below .brand {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: var(--vrb-logo-justify);
	height: 100%;
}

.header-layout-menu-top-logo-below .site-navigation {
	grid-column: 1 / -1;
	grid-row: 1;
	justify-self: stretch;
	justify-content: var(--vrb-menu-justify);
	position: relative;
	isolation: isolate;
}

.header-layout-menu-top-logo-below .site-navigation::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--vrb-header-menu-row-bg);
}


/* Unterseite backbar -----------------------------------------------------
 * Unterseiten reserve the header height first, then show the back link below
 * the header in the same boxed grid as the page content. This avoids fighting
 * for space inside the header and keeps the content clickable below the header.
 */
.subpage-header-spacer {
	height: var(--vrb-header-height);
}

.subpage-backbar {
	padding-top: var(--vrb-subpage-backbar-top-gap);
	padding-bottom: var(--vrb-subpage-backbar-bottom-gap);
}

.subpage-backlink {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--vrb-menu-font);
	font-size: var(--vrb-menu-font-size);
	color: #2b2b2b;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 180ms ease, transform 180ms ease;
}

.subpage-backlink:hover,
.subpage-backlink:focus {
	opacity: 0.72;
}

.subpage-backlink-icon {
	font-size: 1.35em;
	line-height: 1;
	transform: translateY(-0.03em);
}

.below-header {
	padding-bottom: var(--vrb-subpage-backbar-bottom-gap);
}

.brand {
	grid-column: 1 / span var(--vrb-logo-columns);
	display: inline-flex;
	align-items: center;
	height: 100%;
	min-width: 0;
	text-decoration: none;
}

/*
 * Logo sizing:
 * Width is the primary visual control because the provided logo is wide.
 * max-height prevents it from touching the header edges. The inset is a
 * template parameter; Default target is roughly 10px above and below.
 */
.brand-logo {
	display: block;
	width: var(--vrb-logo-width);
	max-width: min(var(--vrb-logo-width), 42vw);
	max-height: calc(var(--vrb-header-height) - (2 * var(--vrb-logo-vertical-inset)));
	object-fit: contain;
}

.brand-logo-sticky {
	display: none;
}

.has-sticky-header.has-sticky-logo .site-header.is-sticky .brand-logo-default {
	display: none;
}

.has-sticky-header .site-header.is-sticky .brand-logo {
	max-height: calc(var(--vrb-sticky-height) - (2 * var(--vrb-logo-vertical-inset)));
}

.has-sticky-header .site-header.is-sticky .brand-logo-sticky {
	display: block;
}

.brand-text {
	font-size: 1.2rem;
	color: #fff;
}

/* Menu ----------------------------------------------------------------- */
.site-navigation {
	grid-column: var(--vrb-menu-start) / span var(--vrb-menu-columns);
	justify-self: stretch;
	height: 100%;
	display: flex;
	align-items: stretch;
	justify-content: var(--vrb-menu-justify);
}

.site-navigation ul,
.site-navigation .mod-menu {
	display: flex;
	align-items: stretch;
	justify-content: var(--vrb-menu-justify);
	gap: clamp(18px, 2.8vw, 42px);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-navigation li {
	display: flex;
	align-items: stretch;
}

/*
 * The active underline belongs to the lower header edge, not directly to the
 * text baseline. Therefore links consume the full header height.
 */
.site-navigation a {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 100%;
	min-height: 0;
	padding: 2px 0 0;
	font-family: var(--vrb-menu-font);
	font-size: var(--vrb-menu-font-size);
	color: var(--vrb-menu-color);
	text-decoration: none;
	transition: color 180ms ease;
}

.site-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--vrb-menu-active-bar-height);
	background: var(--vrb-menu-active-bar-color);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.site-navigation a:hover,
.site-navigation a:focus {
	color: var(--vrb-menu-hover-color);
}

.site-navigation .active > a,
.site-navigation .current > a,
.site-navigation a[aria-current="page"],
.site-navigation a.is-active-section {
	color: var(--vrb-menu-active-color);
}

.site-navigation .active > a::after,
.site-navigation .current > a::after,
.site-navigation a[aria-current="page"]::after,
.site-navigation a.is-active-section::after {
	transform: scaleX(1);
}

/*
 * Onepager navigation: Joomla keeps the home menu item active because it is
 * the current component page. Once Scrollspy selects an anchor section, only
 * that section should be visually active. This keeps Joomla's structure intact
 * without moving the home item into a hidden menu.
 */
.site-navigation.has-scrollspy-active .active > a:not(.is-active-section),
.site-navigation.has-scrollspy-active .current > a:not(.is-active-section),
.site-navigation.has-scrollspy-active a[aria-current="page"]:not(.is-active-section) {
	color: var(--vrb-menu-color);
}

.site-navigation.has-scrollspy-active .active > a:not(.is-active-section)::after,
.site-navigation.has-scrollspy-active .current > a:not(.is-active-section)::after,
.site-navigation.has-scrollspy-active a[aria-current="page"]:not(.is-active-section)::after {
	transform: scaleX(0);
}

/* A bar height of 0 in the template parameters means: hide it completely. */
.has-no-menu-active-bar .site-navigation a::after {
	display: none;
}

.menu-active-style-text .site-navigation a::after,
.menu-active-style-none .site-navigation a::after {
	display: none;
}

.menu-active-style-underline .site-navigation .active > a,
.menu-active-style-underline .site-navigation .current > a,
.menu-active-style-underline .site-navigation a[aria-current="page"],
.menu-active-style-underline .site-navigation a.is-active-section {
	color: var(--vrb-menu-color);
}

.menu-active-style-none .site-navigation .active > a,
.menu-active-style-none .site-navigation .current > a,
.menu-active-style-none .site-navigation a[aria-current="page"],
.menu-active-style-none .site-navigation a.is-active-section {
	color: var(--vrb-menu-color);
}

/*
 * Hover must remain visible even on the current Joomla menu item.
 * Joomla marks the home menu item as current on onepager start pages; this
 * later rule intentionally lets the hover color win without changing the
 * active underline or Scrollspy state.
 */
.site-navigation .active > a:hover,
.site-navigation .current > a:hover,
.site-navigation a[aria-current="page"]:hover,
.site-navigation a.is-active-section:hover {
	color: var(--vrb-menu-hover-color);
}

.menu-toggle {
	display: none;
	grid-column: 12;
	justify-self: end;
	width: 44px;
	height: 38px;
	padding: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.menu-toggle span:not(.visually-hidden) {
	display: block;
	height: 2px;
	margin: 5px 0;
	background: var(--vrb-menu-color);
	transition: transform 180ms ease, opacity 180ms ease;
}

.menu-open .menu-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-open .menu-toggle span:nth-child(2) {
	opacity: 0;
}

.menu-open .menu-toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Start page section stack ---------------------------------------------
 * Template position for ordered homepage content modules. It intentionally
 * has no width restriction; each module can decide whether it wants to be full
 * width, boxed or aligned to the normal template container.
 */
.startseite-sections {
	width: 100%;
	padding-top: var(--vrb-home-sections-top-gap);
}

.header-placement-overlay.is-page-home.has-no-hero.has-home-sections-reserve-header .startseite-sections {
	padding-top: calc(var(--vrb-header-total-height) + var(--vrb-home-sections-top-gap));
}

.header-placement-normal.is-page-home.has-no-hero.has-home-sections-reserve-header .startseite-sections {
	padding-top: var(--vrb-home-sections-top-gap);
}

/* Layout placeholders --------------------------------------------------- */
.hero-position,
.header-slider {
	min-height: 100vh;
	background: #111;
}

/*
 * If the header is part of the normal document flow, a full-height hero placed
 * below it must be reduced by the visible header height. Otherwise the slider
 * is exactly one header too tall and extends below the first viewport. Overlay
 * headers intentionally do not use this correction.
 */
.header-placement-normal .header-slider {
	min-height: max(280px, calc(100vh - var(--vrb-header-total-height)));
}

.header-placement-normal .header-slider .vr-slider--viewport {
	height: max(280px, calc(var(--vr-slider-dynamic-height, 100vh) - var(--vrb-header-total-height)));
	min-height: min(var(--vr-slider-min-height, 520px), max(280px, calc(var(--vr-slider-dynamic-height, 100vh) - var(--vrb-header-total-height))));
}

@supports (height: 100svh) {
	.header-placement-normal .header-slider {
		min-height: max(280px, calc(100svh - var(--vrb-header-total-height)));
	}

	.header-placement-normal .header-slider .vr-slider--viewport {
		height: max(280px, calc(var(--vr-slider-dynamic-height, 100svh) - var(--vrb-header-total-height)));
		min-height: min(var(--vr-slider-min-height, 520px), max(280px, calc(var(--vr-slider-dynamic-height, 100svh) - var(--vrb-header-total-height))));
	}
}

.top-position,
.main-top,
.main-bottom,
.bottom-position {
	padding: 0;
}

/*
 * Main content spacing:
 * - Startseiten ohne Hero reserve the overlay header height first and then
 *   add the configurable distance below it. This makes the backend parameter
 *   behave like "space between header and article", not "distance from top".
 * - Startseiten with a Hero/Slider let the hero start behind the transparent
 *   header; later content is spaced by the hero/module layout, not this value.
 * - Unterseiten reserve the header height via .subpage-header-spacer.
 */
.main-content {
	padding: var(--vrb-content-padding-top) 0 var(--vrb-content-padding-bottom);
}

.header-placement-overlay.is-page-home.has-no-hero .main-content {
	padding-top: calc(var(--vrb-header-total-height) + var(--vrb-home-content-top-gap));
}

.header-placement-normal.is-page-home.has-no-hero .main-content {
	padding-top: var(--vrb-home-content-top-gap);
}

.is-page-home.has-hero-overlay .main-content {
	padding-top: var(--vrb-content-padding-top);
}

.is-page-subpage .main-content {
	padding-top: 0;
}

/*
 * Joomla/content area width modes.
 * The setting applies to the Joomla component and to content-related module
 * positions (below-header, main-top, content-top, content-bottom, main-bottom).
 * This keeps ordinary article pages and module-driven subpages such as galleries
 * consistent.
 */
.component-container > .com-content-article,
.component-container > .item-page {
	max-width: none;
	margin-inline: 0;
}

.content-width-narrow .component-container > .com-content-article,
.content-width-narrow .component-container > .item-page {
	max-width: var(--vrb-content-narrow-width);
	margin-inline: auto;
}

.component-container-full,
.content-area-container-full {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
	padding-left: var(--vrb-page-gutter);
	padding-right: var(--vrb-page-gutter);
	padding-inline: var(--vrb-page-gutter);
}

.content-width-full .component-container > .com-content-article,
.content-width-full .component-container > .item-page {
	max-width: none;
}

.content-width-full .main-content > .content-area-container-full,
.content-width-full .main-top > .content-area-container-full,
.content-width-full .main-bottom > .content-area-container-full,
.content-width-full .below-header.content-area-container-full {
	width: 100%;
	max-width: none;
}

/* Footer --------------------------------------------------------------- */
.site-footer {
	background: var(--vrb-bottom-bg-color);
	color: var(--vrb-bottom-text-color);
}

/*
 * Bottom area: optional logo and three flexible module columns.
 * The separate bottom-wide row below has its own design variables so it can
 * hold legal menus or secondary notes independently from the column area.
 */
.footer-bottom-area {
	background: var(--vrb-bottom-bg-color);
	color: var(--vrb-bottom-text-color);
	font-size: var(--vrb-bottom-font-size);
	padding: var(--vrb-bottom-padding-top) 0 var(--vrb-bottom-padding-bottom);
}

.footer-logo {
	text-align: center;
	margin-bottom: var(--vrb-bottom-logo-gap);
}

.footer-logo img {
	display: inline-block;
	width: min(var(--vrb-bottom-logo-width), 100%);
	height: auto;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 32px;
}

.footer-left {
	grid-column: span var(--vrb-bottom-left-columns);
	text-align: var(--vrb-bottom-left-align);
}

.footer-center {
	grid-column: span var(--vrb-bottom-center-columns);
	text-align: var(--vrb-bottom-center-align);
}

.footer-right {
	grid-column: span var(--vrb-bottom-right-columns);
	text-align: var(--vrb-bottom-right-align);
}

.footer-bottom-area a {
	color: var(--vrb-bottom-link-color);
	text-decoration: none;
}

.footer-bottom-area a:hover,
.footer-bottom-area a:focus {
	color: var(--vrb-bottom-link-hover-color);
	text-decoration: underline;
}

.footer-wide-area {
	background: var(--vrb-bottom-wide-bg-color);
	color: var(--vrb-bottom-wide-text-color);
	font-size: var(--vrb-bottom-wide-font-size);
	padding: var(--vrb-bottom-wide-padding-top) 0 var(--vrb-bottom-wide-padding-bottom);
}

.footer-wide-area a {
	color: var(--vrb-bottom-wide-link-color);
	text-decoration: none;
}

.footer-wide-area a:hover,
.footer-wide-area a:focus {
	color: var(--vrb-bottom-wide-link-hover-color);
	text-decoration: underline;
}

.footer-wide {
	text-align: var(--vrb-bottom-wide-align);
}

/*
 * Optional menu helper classes for Joomla menu modules in bottom positions.
 * Add one or more classes in the module's CSS class field, for example:
 * vrb-menu-horizontal vrb-menu-centered
 * vrb-menu-vertical vrb-menu-right
 */
.site-footer .mod-menu,
.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .vrb-menu-horizontal .mod-menu,
.site-footer .vrb-menu-horizontal ul,
.site-footer [class*="vrb-menu-horizontal"] .mod-menu,
.site-footer [class*="vrb-menu-horizontal"] ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em clamp(16px, 3vw, 36px);
}

.site-footer .vrb-menu-vertical .mod-menu,
.site-footer .vrb-menu-vertical ul,
.site-footer [class*="vrb-menu-vertical"] .mod-menu,
.site-footer [class*="vrb-menu-vertical"] ul {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}


.site-footer .vrb-menu-left .mod-menu,
.site-footer .vrb-menu-left ul,
.site-footer [class*="vrb-menu-left"] .mod-menu,
.site-footer [class*="vrb-menu-left"] ul {
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
}

.site-footer .vrb-menu-centered .mod-menu,
.site-footer .vrb-menu-centered ul,
.site-footer [class*="vrb-menu-centered"] .mod-menu,
.site-footer [class*="vrb-menu-centered"] ul {
	justify-content: center;
	align-items: center;
	text-align: center;
}

.site-footer .vrb-menu-right .mod-menu,
.site-footer .vrb-menu-right ul,
.site-footer [class*="vrb-menu-right"] .mod-menu,
.site-footer [class*="vrb-menu-right"] ul {
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
}

.footer-layout-minimal .site-footer {
	background: var(--vrb-footer-bg-color);
}

.footer-copyright-area {
	background: var(--vrb-footer-bg-color);
	color: var(--vrb-footer-text-color);
	padding: var(--vrb-footer-padding-top) 0 var(--vrb-footer-padding-bottom);
}

.footer-copyright {
	font-size: var(--vrb-footer-font-size);
	opacity: 0.72;
	text-align: center;
}

/* Back to top ----------------------------------------------------------
 * Small optional helper for longer pages. It is only rendered when enabled in
 * the Template-Style. JavaScript toggles the visible state after a configurable
 * scroll distance and scrolls back to the top without changing the URL.
 */
.back-to-top {
	position: fixed;
	right: var(--vrb-back-to-top-right);
	bottom: var(--vrb-back-to-top-bottom);
	z-index: 1001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vrb-back-to-top-size);
	height: var(--vrb-back-to-top-size);
	border: 0;
	border-radius: 999px;
	background: var(--vrb-back-to-top-bg-color);
	color: var(--vrb-back-to-top-text-color);
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(var(--vrb-back-to-top-size) * 0.52);
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.back-to-top span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transform: translateY(var(--vrb-back-to-top-symbol-offset));
}

.back-to-top.is-visible {
	opacity: var(--vrb-back-to-top-opacity);
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
	opacity: 1;
}



/* System pages: error / offline ----------------------------------------
 * Joomla loads error.php for 404/403/500-style pages and offline.php during
 * maintenance mode. These styles keep those system states branded while the
 * PHP templates preserve Joomla's real HTTP status handling.
 */
.is-system-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.system-page-header {
	background: var(--vrb-system-header-bg, #000000);
	min-height: var(--vrb-header-height);
	display: flex;
	align-items: center;
}

.system-page-header-inner {
	display: flex;
	align-items: center;
	min-height: var(--vrb-header-height);
}

.system-page-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.system-page-logo {
	max-height: calc(var(--vrb-header-height) - (2 * var(--vrb-logo-vertical-inset)));
}

.system-page-site-name {
	color: #ffffff;
}

.system-page-main {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	padding: clamp(64px, 10vw, 140px) 0;
}

.system-page-card {
	max-width: min(720px, 100%);
}

.system-page-code {
	margin: 0 0 0.75rem;
	font-family: var(--vrb-heading-font);
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.52;
}

.system-page-card h1 {
	margin-bottom: 0.55em;
	font-size: clamp(2rem, 6vw, 4.6rem);
}

.system-page-description {
	max-width: 42rem;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.system-page-actions {
	margin-top: 2rem;
	margin-bottom: 0;
}

.system-page-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.72em 1.35em;
	border: 1px solid var(--vrb-heading-color);
	background: var(--vrb-heading-color);
	color: #ffffff;
	text-decoration: none;
	transition: opacity 180ms ease, transform 180ms ease;
}

.system-page-button:hover,
.system-page-button:focus {
	opacity: 0.82;
	transform: translateY(-1px);
}

.system-page-footer {
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.system-page-header,
	.system-page-header-inner {
		min-height: var(--vrb-sticky-height);
	}

	.system-page-logo {
		max-width: 56vw;
		max-height: calc(var(--vrb-sticky-height) - (2 * var(--vrb-logo-vertical-inset)));
	}

	.system-page-main {
		align-items: flex-start;
		padding: 72px 0;
	}
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
	.vrb-container {
		width: min(var(--vrb-container-width), calc(100% - (2 * var(--vrb-page-gutter-tablet))));
	}

	.component-container-full,
	.content-area-container-full {
		padding-left: var(--vrb-page-gutter-tablet);
		padding-right: var(--vrb-page-gutter-tablet);
		padding-inline: var(--vrb-page-gutter-tablet);
	}
}

@media (max-width: 900px) {
	html {
		scroll-padding-top: calc(var(--vrb-sticky-height) + var(--vrb-anchor-offset));
	}

	[id] {
		scroll-margin-top: calc(var(--vrb-sticky-height) + var(--vrb-anchor-offset));
	}

	.header-placement-overlay.is-page-home.has-no-hero .main-content {
		padding-top: calc(var(--vrb-sticky-height) + var(--vrb-home-content-top-gap));
	}

	.header-placement-normal.is-page-home.has-no-hero .main-content {
		padding-top: var(--vrb-home-content-top-gap);
	}

	.header-placement-normal.header-layout-menu-top-logo-below .header-slider {
		min-height: max(280px, calc(100vh - var(--vrb-mobile-header-total-height)));
	}

	.header-placement-normal.header-layout-menu-top-logo-below .header-slider .vr-slider--viewport {
		height: max(280px, calc(var(--vr-slider-dynamic-height, 100vh) - var(--vrb-mobile-header-total-height)));
		min-height: min(var(--vr-slider-min-height, 520px), max(280px, calc(var(--vr-slider-dynamic-height, 100vh) - var(--vrb-mobile-header-total-height))));
	}

	@supports (height: 100svh) {
		.header-placement-normal.header-layout-menu-top-logo-below .header-slider {
			min-height: max(280px, calc(100svh - var(--vrb-mobile-header-total-height)));
		}

		.header-placement-normal.header-layout-menu-top-logo-below .header-slider .vr-slider--viewport {
			height: max(280px, calc(var(--vr-slider-dynamic-height, 100svh) - var(--vrb-mobile-header-total-height)));
			min-height: min(var(--vr-slider-min-height, 520px), max(280px, calc(var(--vr-slider-dynamic-height, 100svh) - var(--vrb-mobile-header-total-height))));
		}
	}

	.header-placement-overlay.is-page-home.has-no-hero.has-home-sections-reserve-header .startseite-sections {
		padding-top: calc(var(--vrb-sticky-height) + var(--vrb-home-sections-top-gap));
	}

	.header-placement-normal.is-page-home.has-no-hero.has-home-sections-reserve-header .startseite-sections {
		padding-top: var(--vrb-home-sections-top-gap);
	}

	.vrb-container {
		width: min(var(--vrb-container-width), calc(100% - (2 * var(--vrb-page-gutter-mobile))));
	}

	.component-container-full,
	.content-area-container-full {
		padding-left: var(--vrb-page-gutter-mobile);
		padding-right: var(--vrb-page-gutter-mobile);
		padding-inline: var(--vrb-page-gutter-mobile);
	}

	.site-header {
		height: var(--vrb-sticky-height);
	}

	.header-layout-menu-top-logo-below .site-header {
		height: var(--vrb-mobile-header-total-height);
	}

	.header-layout-menu-top-logo-below.has-sticky-header .site-header.is-sticky {
		height: var(--vrb-mobile-header-total-height);
	}

	.header-inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.brand {
		grid-column: 1 / span 10;
	}

	.brand-logo {
		max-width: 56vw;
		max-height: calc(var(--vrb-sticky-height) - (2 * var(--vrb-logo-vertical-inset)));
	}

	.has-mobile-menu .menu-toggle {
		display: block;
		justify-self: var(--vrb-mobile-menu-toggle-justify);
	}

	.has-mobile-menu .site-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		grid-column: 1 / -1;
		justify-self: stretch;
		display: block;
		height: auto;
		background: var(--vrb-burger-menu-bg);
		max-height: 0;
		overflow: hidden;
		transition: max-height 220ms ease;
	}

	.has-mobile-menu.menu-open .site-navigation {
		max-height: 75vh;
	}

	.has-mobile-menu .site-navigation ul,
	.has-mobile-menu .site-navigation .mod-menu {
		display: flex;
		flex-direction: column;
		align-items: var(--vrb-mobile-menu-content-items-align);
		height: auto;
		gap: 0;
		padding: 18px 24px 24px;
		text-align: var(--vrb-mobile-menu-content-align);
	}

	.has-mobile-menu .site-navigation li {
		display: flex;
		width: 100%;
		justify-content: var(--vrb-mobile-menu-content-justify);
		align-items: stretch;
	}

	.has-mobile-menu .site-navigation li + li {
		margin-top: 10px;
	}

	.has-mobile-menu .site-navigation a {
		display: inline-flex;
		justify-content: var(--vrb-mobile-menu-content-justify);
		height: auto;
		min-height: 40px;
		max-width: 100%;
		text-align: var(--vrb-mobile-menu-content-align);
	}

	.header-layout-menu-top-logo-below .header-inner {
		grid-template-rows: var(--vrb-header-menu-row-height) var(--vrb-sticky-height);
	}

	.header-layout-menu-top-logo-below .menu-toggle {
		grid-row: 1;
		grid-column: 1 / -1;
	}

	.header-layout-menu-top-logo-below .brand {
		grid-row: 2;
		grid-column: 1 / -1;
		justify-self: var(--vrb-logo-justify);
	}

	.header-layout-menu-top-logo-below .site-navigation::before {
		display: none;
	}

	.header-layout-logo-center-no-menu .brand {
		grid-column: 1 / -1;
		justify-content: center;
		justify-self: center;
		margin-inline: auto;
	}

	.header-layout-logo-center-no-menu .brand-logo {
		margin-inline: auto;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-left,
	.footer-center,
	.footer-right {
		grid-column: 1;
		text-align: var(--vrb-bottom-mobile-align);
	}

	.footer-wide {
		text-align: var(--vrb-bottom-mobile-align);
	}

	.site-footer .vrb-menu-horizontal .mod-menu,
	.site-footer .vrb-menu-horizontal ul,
	.site-footer [class*="vrb-menu-horizontal"] .mod-menu,
	.site-footer [class*="vrb-menu-horizontal"] ul {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Unterseite responsive ------------------------------------------------- */
@media (max-width: 900px) {
	.subpage-header-spacer {
		height: var(--vrb-sticky-height);
	}

	.subpage-backlink {
		font-size: calc(var(--vrb-menu-font-size) * 0.9);
	}
}