/*
 * TWW styles, some new, some overwrite existing classes
 */
:root {
	--frame-outer-spacing-variant-none: 0rem;
	--frame-outer-spacing-variant-extra-small: 1rem;
	--frame-outer-spacing-variant-small: 1.5rem;
	--frame-outer-spacing-variant-medium: 2rem;
	--frame-outer-spacing-variant-large: 2.5rem;
	--frame-outer-spacing-variant-extra-large: 3rem;
	--gallery-gap: 0.5rem;
	--gallery-columns: 1;
}
.btn-tww-red {
	--bs-btn-color: #000;
	--bs-btn-bg: #ff2b40;
	--bs-btn-border-color: #ff2b40;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #ff2b40;
	--bs-btn-hover-border-color: #ff2b40;
	--bs-btn-focus-shadow-rgb: 213,183,100;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #ff2b40;
	--bs-btn-active-border-color: #ff2b40;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #ff2b40;
	--bs-btn-disabled-border-color: #ff2b40;
}

.text-tww-red {
	color: #ff2b40;
}
.flex-align-middle {
	align-items: center;
}
/*
 * TYPO3 generates "flags-xx" while theme's CSS is using "flag-xx"
 * Since there is no aliasing in CSS, me must add the languages here.
 * Add more if needed.
 */
.flag.flags-us {
	background-position: -160px -154px;
}
.flag.flags-de {
	background-position: -80px -33px;
}
/*
 * Frame spaces
 */
.frame-space-before {
	margin-top: var(--frame-outer-spacing-before, 0);
}
.frame-space-after {
	margin-bottom: var(--frame-outer-spacing-after, 0);
}
.frame-space-before-none {
	--frame-outer-spacing-before: var(--frame-outer-spacing-variant-none);
}
.frame-space-after-none {
	--frame-outer-spacing-after: var(--frame-outer-spacing-variant-none);
}
.frame-space-before-extra-small {
	--frame-outer-spacing-before: var(--frame-outer-spacing-variant-extra-small);
}
.frame-space-after-extra-small {
	--frame-outer-spacing-after: var(--frame-outer-spacing-variant-extra-small);
}
.frame-space-before-small {
	--frame-outer-spacing-before: var(--frame-outer-spacing-variant-small);
}
.frame-space-after-small {
	--frame-outer-spacing-after: var(--frame-outer-spacing-variant-small);
}
.frame-space-before-medium {
	--frame-outer-spacing-before: var(--frame-outer-spacing-variant-medium);
}
.frame-space-after-medium {
	--frame-outer-spacing-after: var(--frame-outer-spacing-variant-medium);
}
.frame-space-before-large {
	--frame-outer-spacing-before: var(--frame-outer-spacing-variant-large);
}
.frame-space-after-large {
	--frame-outer-spacing-after: var(--frame-outer-spacing-variant-large);
}
.frame-space-before-extra-large {
	--frame-outer-spacing-before: var(--frame-outer-spacing-variant-extra-large);
}
.frame-space-after-extra-large {
	--frame-outer-spacing-after: var(--frame-outer-spacing-variant-extra-large);
}
/* List group */
.media {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
}
.media-body {
	-ms-flex: 1;
	flex: 1;
}
ul.list-group {
    --icon-space: 1.3em;
}
.list-group-item {
    padding-left: calc( var(--icon-space) * 1.7);
}
.list-group-item::before {
    content: "\27A4"; /* Black Rightwards Arrowhead */
    display: inline-block;
    margin-left: calc( var(--icon-space) * -1 );
    width: var(--icon-space);
    color: #ff283f;
    font-size: 20px;
}
/* Price list */
.page-11 .table-responsive tbody tr td:last-child {
	text-align: right;
	font-weight: bold;
}
.page-11 .table-responsive tbody tr td:nth-child(2)::first-line {
	font-weight: bold;
}
table.table p {
    margin-bottom: 0;
}
#p9 table.table>tbody>tr>td:last-child, #p9 table.table>thead>tr>th:last-child {
    text-align: right;
    text-wrap: nowrap;
}
/* Images and gallery */
.gallery-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gallery-gap);
}
.gallery-row + .gallery-row,
.gallery-row + nav {
	margin-top: 1rem;
}
.gallery-item {
	width: calc((100% / var(--gallery-columns)) - (var(--gallery-gap) * (var(--gallery-columns) - 1)) / var(--gallery-columns));
}
.gallery-item img,
.gallery-item picture {
	width: 100%;
	height: auto;
}
.gallery-item figure {
	margin-bottom: 0;
}
.gallery-item-size-1 {
	--gallery-columns: 1;
}
.gallery-item-size-2 {
	--gallery-columns: 2;
}
.gallery-item-size-3 {
	--gallery-columns: 3;
}
.gallery-item-size-4 {
	--gallery-columns: 2;
}
.caption-overlay {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 0.2rem 0.5rem;
    box-sizing: border-box;
    font-size: small;
}

/* Forms */
.form-label {
	color: var(--bs-secondary-color) !important;
    font-size: .875em;
}
.form-label .required {
    color: #ff2b40;
}



@media (min-width: 576px) {
	.gallery-item-size-4 {
		--gallery-columns: 4;
	}
}
.gallery-item-size-5 {
	--gallery-columns: 2;
}
@media (min-width: 576px) {
	.gallery-item-size-5 {
		--gallery-columns: 3;
	}
}
@media (min-width: 768px) {
	.gallery-item-size-5 {
		--gallery-columns: 5;
	}
}
.gallery-item-size-6 {
	--gallery-columns: 2;
}
@media (min-width: 576px) {
	.gallery-item-size-6 {
		--gallery-columns: 3;
	}
}
@media (min-width: 768px) {
	.gallery-item-size-6 {
		--gallery-columns: 6;
	}
}

@media only screen and (max-width: 991px) {
    .navbar-nav .nav-item.dropdown > .nav-link.dropdown-toggle {
        padding-bottom: 0;
    }
    .navbar-nav:not(.dropdown-collapsible) .nav-item.dropdown:not(.dropdown-collapsible) > .dropdown-menu {
        margin-bottom: 15px !important;
    }
    .navbar-dark .navbar-collapse.show > .navbar-nav a {
        color: #869ab8;
    }
    .navbar-dark .navbar-collapse.show > .dropdown-item .navbar-nav a {
        color: white;
    }
    .navbar-nav .nav-item.dropdown > .nav-link {
        font-size: unset;
        font-weight: unset;
    }
    .navbar-collapse.show > .navbar-nav {
        background-color: #f9fbfd;
    }
}