body {
	overflow-wrap: break-word;
}

h1 {
	/* https://medium.com/@mohitphogat/stop-using-so-many-media-queries-use-clamp-instead-c2a6403a7899
	
	two viewport widths that represent your range:
	412 (Pixel 7a)		->		1140px (desktop)

		40-32 = 8
		1140 - 412 = 728
		vw-percentage = 8/728 = 1,1% => 1.1vw
		add starting point: 32px + 1.1vw
	*/


	font-size: clamp(32px, 5vw, 40px);
  font-weight: 700;
	line-height: 1.2;
	margin-bottom: 24px;
}

h1.xl {
	font-size: clamp(40px, 5vw, 60px);
}

h2 {
	font-size: clamp(22px, 4vw, 28px);
  font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
}

h3 {
	font-size: clamp(16px, 3vw, 20px);
  font-weight: 700;
	margin-bottom: 12px;
}


h4 {
	font-size: 20px;
  font-weight: 300;
	margin-bottom: 12px;
}

h5 {
  font-size: 16px;
  font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 12px;
}

h6 {
	font-size: clamp(11px, 2vw, 14px);
  font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 12px;
}


.paragraph--type--heading h1, 
.paragraph--type--heading h2, 
.paragraph--type--heading h3, 
.paragraph--type--heading h4, 
.paragraph--type--heading h5, 
.paragraph--type--heading h6 {
}

.text-meta {
	font-size: 14px;
}

.fw-100 {
	font-weight: 100;
}
.fw-200 {
	font-weight: 200;
}
.fw-300 {
	font-weight: 300;
}
.fw-400 {
	font-weight: 400;
}
.fw-500 {
	font-weight: 500;
}
.fw-600 {
	font-weight: 600;
}
.fw-700 {
	font-weight: 700;
}




.tablefield-wrapper,
.table-wrapper,
div:has(> table),
form:has(> table) {
	width: 100%;
	overflow-x: auto;
}


.profile_phone {}
.profile_email {}


.profile-picture img {
	border-radius: 50%;
}

.article_summary {
	font-size: 1.2rem;
}

.node-date {
	color: var(--color-gray-500);
}



.node--type-news.node--view-mode-full .layout--onecol {
	max-width: 720px;
}


.img-fluid {
	min-width: 20px;
}






.badge {
	background: var(--color-blue-eastern);
}

.badge:hover {
	background: var(--color-blue-eastern-darker);
}

.badge-secondary {
	background: var(--color-gray-300);
}

.badge-secondary a {
	color: var(--color-gray-700) !important;
}

.badge-secondary:hover {
	background: var(--color-gray-500);
}




.btn:first-of-type {
	margin-left: 0;
}



.view-header {
	margin-bottom: 3rem;
}


.view-footer {
}

.view-footer a span {
	vertical-align: text-bottom;
	margin-left: 0.4rem; 
}


/* Background Colors */

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

.btn.bg-yellow:hover {
	background-color: var(--color-yellow-lighter);
}


.bg-blue {
	background-color: var(--color-blue-eastern);
}

.btn.bg-blue:hover {
	background-color: var(--color-blue-eastern-darker);
}

.bg-blue-lighter {
	background-color: var(--color-blue-eastern-lighter);
}

.bg-blue-darker {
  color: var(--color-gray-50);
	background-color: var(--color-blue-eastern-darker);
}

.btn.bg-blue-darker {
  color: var(--color-gray-50);
	--bs-body-color: var(--color-gray-50);
  background-color: var(--color-blue-eastern-darkest);
}

.bg-blue-darkest {
  color: var(--color-gray-50);
	background-color: var(--color-blue-eastern-darkest);
}



.bg-purple {
  color: var(--color-gray-50);
	background-color: var(--color-purple-jackson);
}

.bg-purple-trans75 {
  color: var(--color-gray-50);
	background-color: var(--color-purple-jackson-trans75);
}

.bg-gray {
	background-color: var(--color-gray-50);

	.badge-secondary {
		background-color: var(--color-gray-300);
	}

	.badge-secondary a {
		color: var(--color-gray-900);
	}

	.badge-secondary:hover {
		background-color: var(--color-gray-500);
	}
}

.btn.bg-gray:hover {
	background-color: var(--color-gray-100);
}

.bg-bronze {
	background-color: var(--color-bronze-darkest);
	color: var(--color-gray-50);
	a {
		color: var(--color-gray-50);
	}
}

.bg-bronze-trans {
	background-color: var(--color-bronze-darkest-trans50);
	color: var(--color-white);
	a {
		color: var(--color-white);
	}
}










.size-s {
	font-size: var(--font-size-s);
}

.size-xs {
	font-size: var(--font-size-xs);
}



.messages {
	margin: 1rem 0;
}










.field-machine-name {
  margin-left: 0.25rem;
  font-family: monospace;
}

.field-ui-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    letter-spacing: 0.025em;
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-500);
    border-radius: 0.75rem;
    background-color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.field-ui-secondary-text {
    margin-top: 0;
    color: var(--color-gray-700);
    font-size: 0.75rem;
    font-weight: 400;
}




a.button.button-action {
	--bs-btn-bg: var(--color-admin-secondary);
	--bs-btn-border-color: var(--color-admin-secondary);
	--bs-btn-hover-bg: var(--color-admin-secondary);
	--bs-btn-hover-border-colorvar(--color-admin-secondary);
	--bs-btn-active-bg: var(--color-admin-secondary);
	--bs-btn-active-border-color: var(--color-admin-secondary);
	--bs-btn-disabled-bg: var(--color-admin-secondary);
	--bs-btn-disabled-border-color: var(--color-admin-secondary);
	
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
		
}



/**************** Carousel *************/


.carousel-image-overlay {
	height: 100%;
	width: 100%;
	background: linear-gradient(to bottom, transparent 30%, var(--color-gray-900));
	position: absolute;
	left: 0;
	top: 0;
}

.carousel-caption  {
	right: 0;
	left: 2rem;
	bottom: 2rem;
	padding: 0;
	text-align: left;
}

.carousel-caption h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.carousel-caption h3 {
	margin-bottom: 2rem;
}


.carousel-control {

}

.carousel-control-prev,
.carousel-control-next {
	bottom: 2rem;
  align-items: end;
	opacity: 1;
	width: 32px;
}

.carousel-control-prev {
	right: calc(2rem + 32px + 1rem);
	left: auto;
}

.carousel-control-next {
	right: 2rem;
}

.carousel-control-prev-icon, 
.carousel-control-next-icon {
	background-color: white;
	border-radius: 50%;
	background-size: inherit;	
}

.carousel-control-prev-icon {
	background-image: url('/themes/custom/ssv_b5/images/chevron_backward_20dp_4F5661_FILL0_wght400_GRAD0_opsz20.svg');
	background-position: 40%;
}

.carousel-control-next-icon {
	background-image: url('/themes/custom/ssv_b5/images/chevron_forward_20dp_4F5661_FILL0_wght400_GRAD0_opsz20.svg');
	background-position: 60%;
}


/**************** Routes ***************/


.node--type-route .route_details li {
	display: flex;
	align-items: center;
  padding-right: 0.8rem;
}

.node--type-route .route_details li:not(:first-child) {
}

.node--type-route .route_details li:not(:first-child)::before {
  content: '|';
  color: var(--color-gray-100);
	margin-right: 0.8rem;
}

.node--type-route .route_details span.unit {
	margin-left: 0.2rem;
}

.node--type-route .route_details img {
	margin-right: 0.2rem;
	height: 20px;
}

.node--type-route .route_details .strava a {
	display: flex;
	align-items: center;
}

.node--type-route .route_details .strava img {
	height: 14px;
	border-radius: 0.3rem;
}

.node--type-route .route_details li.node-date span {
	color: var(--color-gray-300);
	font-style: italic;
	font-size: 0.75rem;
}


/**************** Training ***************/


.training-wrapper {
	padding: 0.5rem 1rem;
	background: var(--color-gray-100);
	border-radius: 0.3rem;
	font-size: 0.8rem;
}

.training_label {
	font-weight: 700;
	font-size: 0.9rem;
}

.training {
	display: grid;
	grid-column-gap: 40px;
	grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
	justify-content: space-between;
	align-items: start;
}


.training_time .field,
.training_place .field {
	display: inline;	
}

.training_contact {
	display: flex;
	}

.training_contact div {
	ppadding: 0 0.5rem;
}

.training_contact div.title {
		font-weight: 700;
}

.training_contact .label div {
	display: inline;
}

.training_contact .profile-picture {
	width: 40px;
	padding-right: 10px;
}

.training_contact .profile-picture img {
	border-radius: 20px;
}


.training_description {
	padding: 10px 0 0;
	font-size: 0.7rem;
}


.views-field-field-training-times li {
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}


.views-field-field-training-times li div {
	display: inline-block;
}


.field--type-time-range {
	white-space: nowrap;
}


.views-field-field-description .field__label {
	display: none;
}


.views-field-field-description .field--name-field-description {
	padding: 10px 0 0;
	font-size: 0.7rem;
}

.views-field-field-treffpunkt .field__label {
	display: none;
}


.field--name-field-contact {
	white-space: nowrap;
}


.block-ssv-trainings-table table th.team {
	width: 30%;
}

.block-ssv-trainings-table table td {
	vertical-align: top;
}

.block-ssv-trainings-table table .field--name-weekday {
	width: 90px;
}


.block-ssv-trainings-table .training-description {
	font-size: 0.8rem;
}


.block-ssv-trainings-table .field-training-times {
	margin-bottom: 0;
}

.block-ssv-trainings-table .field-training-times td {
	border-bottom: 0;
	vertical-align: top;
	padding: 0;
}



/**************** Events ***************/

/*
time.datetime {
	border: 1px dashed;
}

.day {
	font-size: 2.2rem;
	line-height: 2.2rem;
	font-weight: 500;
}

.month {
	font-size: 1.2rem;
	line-height: 1.2rem;
	text-transform: uppercase;
	font-weight: 500;
}

.year {
	font-size: 1rem;
	line-height: 1.1rem;
	font-weight: 300;
}
*/

a.event-teaser {
	text-decoration: none;
	color: var(--bs-body-color);
}

a.event-teaser:hover h3 {
	text-decoration: underline;
	}



.event-date {
  max-width: 70px;
}

.event-date-day {
	font-size: 2.4rem;
	line-height: 2.4rem;
	font-weight: 700;
	text-align: center;
}

.event-date-month {
	font-size: 1.4rem;
	line-height: 1.4rem;
	font-weight: 300;
	text-align: center;
	text-transform: uppercase;
}

.event-details {
}

.event-details h3 {
	margin: 0;
}

.event-date h3,
.event-location h3 {
	margin-bottom: 0;
}