@charset "utf-8";
@import "bw-tokens.css";
@import "mitfahrplattformen.css";

:root
{
	/* debugging */
	--testrahmen: 1px solid red;
	/* breakpoint handheld → large monitors */
	--breakpoint: 768px;
	/* colors */
	--mfbw-verkehrsblau10: hsla(195.7, 56.1%, 92.0%, 1.00); 
	--mfbw-verkehrsblau10: #dff0f6; 
	--bw-white: #fff; 
	--bw-color-foreground-primary: hsla(26, 9.1%, 15.1%, 1.0);
	--bw-color-foreground-primary: #2a2623; /* fallback */
	--bw-color-foreground-primary-blur: hsla(26, 9.1%, 15.1%, 0.5);
	--bw-color-foreground-on-emphasis: hsla(0, 0%, 100%, 1.0);
	--bw-color-foreground-on-emphasis: #ffffff; /* fallback */
	--bw-color-foreground-focus: hsla(271, 89.8%, 42.2%, 1.0);
	--bw-color-foreground-focus: #71C; /* fallback */
	--bw-color-background-primary: hsla(0, 0%, 100%, 1.0);
	--bw-color-background-primary: #ffffff; /* fallback */
	--bw-color-background-accent: hsla(59, 100%, 50%, 1.0);
	--bw-color-background-accent: #FFFC00; /* fallback */
	--bw-color-background-subtle: hsla(40, 12%, 95.1%, 1.0);
	--bw-color-background-subtle: #F4F3F1; /* fallback */
	--bw-color-background-emphasis: hsla(26, 9.1%, 15.1%, 1.0);
	--bw-color-background-emphasis: #2A2623; /* fallback */
	/* fonts */
	--bw-font-family-sans: 'BaWue Sans Web'; 
	--bw-font-family-serif: 'BaWue Serif Web'; 
	--root-font-sans: var(--bw-font-family-sans), Arial, sans-serif; 
	--root-font-serif: var(--bw-font-family-serif), Georgia, 'Times New Roman', Times, serif; 
	--bw-font-weight-regular: 400;
	--bw-font-weight-bold: 700;
	/* liquid font sizes */
	/* Step -2: 9.7222px → 12.8px */
	--fluid-font-size--2: clamp(0.6076rem, 0.5407rem + 0.3345vw, 0.8rem);
	/* Step -1: 11.6667px → 16px */
	--fluid-font-size--1: clamp(0.7292rem, 0.635rem + 0.471vw, 1rem);
	/* Step 0: 14px → 20px */
	--fluid-font-size-0: clamp(1rem, 0.7446rem + 0.6522vw, 1.25rem);
	/* Step 1: 16.8px → 25px */
	--fluid-font-size-1: clamp(1.05rem, 0.8717rem + 0.8913vw, 1.5625rem);
	/* Step 2: 20.16px → 31.25px */
	--fluid-font-size-2: clamp(1.26rem, 1.0189rem + 1.2054vw, 1.9531rem);
	/* Step 3: 24.192px → 39.0625px */
	--fluid-font-size-3: clamp(1.512rem, 1.1887rem + 1.6164vw, 2.4414rem);
	/* Step 4: 29.0304px → 48.8281px */
	--fluid-font-size-4: clamp(1.8144rem, 1.384rem + 2.1519vw, 3.0518rem);
	/* Step 5: 34.8365px → 61.0352px */
	--fluid-font-size-5: clamp(2.1773rem, 1.6077rem + 2.8477vw, 3.8147rem);
	/* line height */
	--bw-leading-compact: 1.2;
	--bw-leading-narrow: 1.3;
	--bw-leading-wide: 1.5;
	--bw-leading-extra: 3;
	--bw-font-size-100: 1.2rem; 
	--bw-font-size-200: 1.4rem; 
	--bw-font-size-250: 1.6rem; 
	--bw-font-size-300: 1.8rem; 
	--bw-font-size-400: 2rem; 
	--bw-font-size-500: 2.4rem; 
	--bw-font-size-600: 2.8rem; 
	--bw-font-size-700: 3.2rem; 
	--bw-font-size-800: 4rem; 
	--bw-font-size-900: 4.8rem; 
	--bw-font-size-1000: 6.4rem; 
	--bw-font-size-1100: 8rem; 
	/* SVG icons */
	--bw-arrow-right-line: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 4.58582L21.4142 12L14 19.4142L12.5858 18L17.5858 13H3V11H17.5858L12.5858 6.00003L14 4.58582Z' /%3E%3C/svg%3E");
	--bw-arrow-left-line: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4142 6.00003L6.41425 11H21V13H6.41424L11.4142 18L10 19.4142L2.58582 12L10 4.58582L11.4142 6.00003Z' /%3E%3C/svg%3E");
	--bw-arrow-up-right-line: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 5H19V16H17V8.41421L6.25 19.1642L4.83578 17.75L15.5858 7H8V5Z' /%3E%3C/svg%3E");
	--bw-chevron-right-line: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.5858 12L8.29291 4.70712L9.70712 3.29291L18.4142 12L9.70712 20.7071L8.29291 19.2929L15.5858 12Z' /%3E%3C/svg%3E");
	--bw-chevron-right-small-line: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 6.58582L15.4142 12L10 17.4142L8.58582 16L12.5858 12L8.58582 8.00003L10 6.58582Z' /%3E%3C/svg%3E");
	/* distances */
	--bw-space-0: 0; 
	--bw-space-50: 2px; 
	--bw-space-100: 4px; 
	--bw-space-200: 8px; 
	--bw-space-300: 12px; 
	--bw-space-400: 16px; 
	--bw-space-500: 20px; 
	--bw-space-600: 24px; 
	--bw-space-700: 32px; 
	--bw-space-800: 40px; 
	--bw-space-900: 48px; 
	--bw-space-1000: 64px; 
	--bw-space-1100: 80px; 
	--bw-space-1200: 120px; 
	--bw-space-1300: 160px; 
	--bw-space-1400: 200px; 
	--margin-horizontal: 10vw;
	--margin-vertical: 30px;
	--margin-vertical-logo: 1vw;
	--margin-details-content: 1vw;
	--focus-border-offset: 3px;
	/* borders */
	--bw-border-primary: var(--bw-grey-80); 
	--bw-border-subtle: var(--bw-grey-20); 
	--bw-border-disabled: var(--bw-grey-40); 
	--bw-border-on-accent: var(--bw-grey-95); 
	--bw-border-emphasis: var(--bw-grey-95); 
	--bw-border-on-emphasis: var(--bw-white); 
	--bw-border-info: var(--bw-blue-80); 
	--bw-border-success: var(--bw-green-80); 
	--bw-border-warning: var(--bw-red-80); 
	--bw-border-focus: var(--bw-violet-80); 
	--bw-border-focus-on-emphasis: var(--bw-violet-30); 
	--bw-border-width-100: 1px; 
	--bw-border-width-200: 2px; 
	--bw-border-width-300: 3px; 
	--bw-border-radius-100: 3px; 
	--bw-border-radius-200: 6px; 
	--bw-border-radius-300: 8px; 
	/* element dimensions */
	--header_accent-height: clamp(70px, 10vw, 100px);
	--header_hero-height: 25vw;
	--header_hero-height-mobile: 50vw;
	--max-width_main-elements: 1120px;
	--breadcrumb-padding: var(--fluid-font-size--1) 0;
	--carpool_search-height: 65px;
}

/* === Neutralisierung === */

*
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* === Fonts === */

/* BaWue Sans Web und BaWue Serif Web */

/* sans */

/* regular */
@font-face
{
	font-family: 'BaWue Sans Web';
	src:
		url('../fonts/BaWueSansWeb-Regular.woff2') format('woff2'),
		url('../fonts/BaWueSansWeb-Regular.woff')  format('woff');
}
/* regular italic */
@font-face
{
	font-family: 'BaWue Sans Web';
	src:
		url('../fonts/BaWueSansWeb-RegularItalic.woff2') format('woff2'),
		url('../fonts/BaWueSansWeb-RegularItalic.woff')  format('woff');
		font-style: italic;
		
}
/* semi bold */
@font-face
{
	font-family: 'BaWue Sans Web';
	src:
		url('../fonts/BaWueSansWeb-SemiBold.woff2') format('woff2'),
		url('../fonts/BaWueSansWeb-SemiBold.woff')  format('woff');
		font-weight: 600;
}
/* semi bold italic */
@font-face
{
	font-family: 'BaWue Serif Web';
	src:
		url('../fonts/BaWueSansWeb-SemiBoldItalic.woff2') format('woff2'),
		url('../fonts/BaWueSansWeb-SemiBoldItalic.woff')  format('woff');
		font-weight: 600;
		font-style: italic;
}
/* bold */
@font-face
{
	font-family: 'BaWue Sans Web';
	src:
		url('../fonts/BaWueSansWeb-Bold.woff2') format('woff2'),
		url('../fonts/BaWueSansWeb-Bold.woff')  format('woff');
		font-weight: 700;
}
/* bold italic */
@font-face
{
	font-family: 'BaWue Sans Web';
	src:
		url('../fonts/BaWueSansWeb-BoldItalic.woff2') format('woff2'),
		url('../fonts/BaWueSansWeb-BoldItalic.woff')  format('woff');
		font-weight: 700;
		font-style: italic;
}

/* serif */

/*regular */
@font-face
{
	font-family: 'BaWue Serif Web';
	src:
		url('../fonts/BaWueSerifWeb-Regular.woff2') format('woff2'),
		url('../fonts/BaWueSerifWeb-Regular.woff')  format('woff');
}
/* bold */
@font-face
{
	font-family: 'BaWue Serif Web';
	src:
		url('../fonts/BaWueSerifWeb-Bold.woff2') format('woff2'),
		url('../fonts/BaWueSerifWeb-Bold.woff')  format('woff');
		font-weight: 700;
}

/* === Basics === */

body
{
	margin: 0;
	width: 100vw;
	font-family: var(--root-font-sans);
	font-size: var(--fluid-font-size-0);
	color: var(--bw-color-foreground-primary);
	box-sizing: border-box;

}

/* Überschriften */

h1
{
	font-size: var(--fluid-font-size-4);
	font-family: var(--root-font-serif);
}

h2
{
	font-size: var(--fluid-font-size-2);
}


/* --- Hyper Links --- */

a
{
	text-decoration: none;
}

/* === Flow Text Links === */

.link--flow
{
	color: var(--bw-color-foreground-primary);
	cursor: pointer;
	display: inline;
	position: relative;
	text-decoration: none;
	user-select: text;
	-webkit-user-select: text;
	line-height: var(--bw-leading-compact);
	text-decoration-skip-ink: none;
	-webkit-text-decoration-skip-ink: none;
	padding: 0 0.2rem;
	box-shadow: 0 1px var(--bw-color-foreground-primary);
	background-color: initial;
}

.link--flow:hover,
.link--flow:focus-visible,
.link-cta:hover,
.link-cta:focus-visible
{
	background-color: var(--bw-color-background-accent);
	box-shadow: 0 2px var(--bw-color-foreground-primary);
	border-radius: 0;
	text-decoration: none;
}

.link--flow:focus
{
	border-radius: 0;
}

/* Download-Links im Fließtext */

.link--flow.link--download
{
	padding-left: 1.4em;
}

.link--flow.link--download::before
{
	content: "";
	width: 1.1em;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%232a2623' d='M13 3L13 12.0858L15.5 9.58579L16.9142 11L12 15.9142L7.08578 11L8.5 9.58579L11 12.0858L11 3L13 3ZM5 14V19H19V14H21V21H3V14H5Z'/%3E%3C/svg%3E");
}

/* Externe Links im Fließtext */

.link--flow.link--external
{
	padding-left: 1.4em;
}

.link--flow.link--external::before
{
	content: "";
	width: 1.1em;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='%232a2623' clip-rule='evenodd' d='M8 5H19V16H17V8.41421L6.25 19.1642L4.83578 17.75L15.5858 7H8V5Z' /%3E%3C/svg%3E");
}

/* EMail-Links im Fließtext */

.link--flow.link--email,
.link--flow.link--phone
{
	padding-left: 1.4em;
}
.link--flow.link--email::before
{
	content: "";
	width: 1.1em;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjQgMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGZpbGw9JyMyYTI2MjMnIGQ9J00yLjAwMDAyIDRIMjJWMjBIMi4wMDAwMlY0Wk00LjAwMDAyIDcuNzQ2NjJWMThIMjBWNy43NDY2TDEyIDE0LjI5MjFMNC4wMDAwMiA3Ljc0NjYyWk0xOC45NzY0IDZINS4wMjM2MkwxMiAxMS43MDc5TDE4Ljk3NjQgNlonIC8+PC9zdmc+");
}

.link--flow.link--phone::before
{
	content: "";
	width: 1.1em;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%232a2623' d='M3 3h6.5l1.6 5.3-1.6 1.6c1.1 1.9 2.7 3.5 4.6 4.6l1.6-1.6 5.3 1.6V21h-1A17 17 0 0 1 3 4V3Zm2 2a15 15 0 0 0 14 14v-3l-2.7-.9-1.8 1.8-.6-.3A14 14 0 0 1 7.4 10l-.3-.6 1.8-1.8L8 5H5Z' /%3E%3C/svg%3E");
}

/* Link zur Übersicht auf Unterseiten zwischen main und footer */

.post_link-container
{
	margin: 2rem 0;
}

.post_link
{
	color: var(--bw-color-foreground-primary);
	cursor: pointer;
	display: inline;
	position: relative;
	text-decoration: none;
	user-select: text;
	-webkit-user-select: text;
	line-height: var(--bw-leading-compact);
	text-decoration-skip-ink: none;
	-webkit-text-decoration-skip-ink: none;
	box-shadow: 0 1px var(--bw-color-foreground-primary);
	background-color: initial;
	padding: 0 0.2rem 0 1.4em;
}

.post_link:hover,
.post_link:focus-visible
{
	box-shadow: 0 2px var(--bw-color-foreground-primary);
	border-radius: 0;
	text-decoration: none;
}

.post_link:focus
{
	border-radius: 0;
}

.post_link::before
{
	content: "";
	width: 1.1em;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: var(--bw-arrow-left-line);
}


/* Appstore */

.appstore_link:hover
{
	background-color: transparent;
	box-shadow: none;
}

/* Teaser Links */

.teaser__card__container__link--wrapper
{
	color: var(--bw-color-foreground-primary);
}

.teaser__card__link--inside::before, .link-cta::before
{
	content: "";
	width: 1.1em;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: var(--bw-arrow-right-line);
}

/* Link-Texte */

.teaser__card__link--inside, .link-external, .link-cta
{
	color: var(--bw-color-foreground-primary);
	cursor: pointer;
	display: inline;
	position: relative;
	text-decoration: none;
	line-height: var(--bw-leading-compact);
	padding: 0 .2rem 0 1.4em;
}

.teaser__card__link--inside:hover
{
	box-shadow: 0 2px var(--bw-color-foreground-primary);
}


/* === Header === */

header
{
	display: flex;
	flex-direction: column;
}

.header__accent__container
{
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	width: 100vw;
	height: var(--header_accent-height);
	background-color: var(--bw-color-background-accent);
	z-index: 1001;
	box-shadow: 0px 0px 10px 0px var(--bw-color-foreground-primary-blur);
}

.header__accent__inner
{
	width: 100%;
	max-width: var(--max-width_main-elements);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 20px;
}

.header__accent__inner a
{
	box-shadow: none;
}

.header__accent__logo
{
	display: block;
	width: auto;
	height: calc(var(--header_accent-height) / 2);
	margin: 0;
}

@media (min-width: 768px)
{
	.header__accent__logo
	{
		height: calc(var(--header_accent-height) / 2);
	}
}

.header__accent__jump
{
	display: none;
	margin: auto 0;
	font-size: var(--fluid-font-size--1);
	font-weight: var(--bw-font-weight-bold);
	color: var(--bw-color-foreground-primary);
	cursor: pointer;
	display: inline;
	position: relative;
	text-decoration: none;
	line-height: var(--bw-leading-compact);
	padding: 0 .2rem 0 1.4em;
}

.header__accent__jump::before
{
	content: "";
	width: 1.1em;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: var(--bw-arrow-up-right-line);
}

.header__accent__jump:hover
{
	box-shadow: 0 2px var(--bw-color-foreground-primary);
}

@media (min-width: 768px)
{
	.header__accent__jump
	{
		display:block;
	}
}

.header_start_search
{
	display: none;
	height: 0;
}

@media (min-width: 768px)
{
	.header_start_search
	{
		display: block;
		position: absolute;
		width: calc( 100% - 2 * var(--margin-horizontal));
		height: 300px;
		top: var(--header_accent-height);
		left: var(--margin-horizontal);
		margin: 0;
		padding:0;
		z-index:1000;
	}
}

.header__hero, .header__hero__start
{
	position: relative;
	width: 100vw;
	margin-top: var(--header_accent-height);
	z-index: 1;
	background-color: var(--bw-color-background-accent);
}

.header__hero__img 
{
	display:block;
	max-width: var(--max-width_main-elements);
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 768px)
{
	.header__hero__start
	{
		margin-top: calc(var(--header_accent-height) + var(--carpool_search-height));
	}
}

/* Breadcrumb */

.breadcrumb__container
{
	width: 100%;
	max-width: var(--max-width_main-elements);
	font-size: var(--fluid-font-size-0);
	line-height: var(--bw-leading-extra);
	padding: var(--breadcrumb-padding);
	margin:  var(--bw-space-500) auto;
}

.breadcrumb__nav ol
{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	font-size: var(--fluid-font-size-0);
}

.breadcrumb__nav li
{
	display: flex;
	align-items: center;
}

.breadcrumb__nav li + li::before
{
	content: '';
	display: inline-block;
	width: 1.1em;
	height: 1.2em;
	margin: 0 0.5em;
	background-image: var(--bw-chevron-right-line);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.breadcrumb__nav a
{
	color: var(--bw-color-foreground-primary);
	cursor: pointer;
	display: inline;
	position: relative;
	text-decoration: none;
	line-height: var(--bw-leading-compact);
	padding: 0;
	box-shadow: 0 1px var(--bw-color-foreground-primary);
}

.breadcrumb__nav a:hover
{
	box-shadow: 0 2px var(--bw-color-foreground-primary);
}

.breadcrumb__nav li[aria-current="page"]
{
	font-weight:var(--bw-font-weight-bold);
}

/* === Main === */

main 
{ 
/*	margin: 0 var(--margin-horizontal);*/
	max-width: var(--max-width_main-elements);
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 768px) 
{
	main
	{
		padding: 0 40px;
	}
}

/* Welcome */

.welcome__container
{
	margin-bottom: 2.5vw;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.welcome__headline
{
	padding: 0;
}

.welcome__text
{
	padding: 1.25vw 0;
	line-height: var(--bw-leading-narrow);
	-webkit-hyphens: auto; 
	hyphens: auto;
}

.welcome__text.hyphenation--manual 
{
	-webkit-hyphens: manual; 
	hyphens: manual;
}

@media (min-width: 768px)
{
	.welcome__container
	{
		flex-direction: row;
	}

	.welcome__headline
	{
		padding: 0 2.5vw;
		width: 50%;

	}

	.welcome__text
	{
		padding: 2.5vw 2.5vw 0 2.5vw;
		width: 50%;
	}
	
	.welcome__text p 
	{
		vertical-align: bottom;
	}
}


/* Teaser Cards */

/* Cards Portrait */

.teaser__grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 30px 20px;
}

.teaser__card--portrait__container
{
	display: grid;
	grid-template-rows: auto 1fr;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bw-color-background-subtle);
	border-radius: var(--bw-border-radius-100);
	background-color: var(--bw-color-background-subtle);
}

.teaser__card--portrait__container:hover
{
	border-color: var(--bw-color-foreground-primary);
}

.teaser__card--portrait__container.text-only
{
	border: 1px solid transparent;
}

.teaser__card--portrait__container.text-only:hover
{
	border-color: transparent;
}

.teaser__card--portrait__container img
{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	background-color: var(--bw-color-background-accent);
}

.teaser__card--portrait__text
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 20px;
	-webkit-hyphens: auto; 
	hyphens: auto;
}

/* Cards landscape */

.teaser__card--landscape__container
{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: var(--margin-vertical) 0;
	border: 1px solid;
	border-color: var(--bw-color-background-subtle);
	border-radius: var(--bw-border-radius-100);
	color: var(--bw-color-foreground-primary);
}

.teaser__card--landscape__container:hover
{
	border-color: var(--bw-color-foreground-primary);
}

.teaser__card--landscape__item__img
{
	padding: 0;
	padding: 0 2.5vw;
}

.teaser__card--landscape__item__img img
{
	padding: 0;
	aspect-ratio: 1;
}

.teaser__card--landscape__item__txt, 
.teaser__card--landscape__item__headline 
{
	margin: 0;
	padding: 1.25vw 2.5vw;
	font-size: var(--fluid-font-size-0);
	line-height: var(--bw-leading-wide);
}

.teaser__card--landscape__item__txt
{
	-webkit-hyphens: auto;
	hyphens: auto;
	background-color: var(--bw-color-background-subtle);
}

.teaser__card--landscape__item__headline, 
.teaser__card--landscape__item__img
{
	background-color: var(--bw-color-background-accent);
}

@media (min-width: 768px)
{
	.teaser__card--landscape__container 
	{
		flex-direction: row;
		align-items: stretch;
	}
/* 
		min-height: calc(80vw / 2 - var(--margin-horizontal));
 */

	.card-item, 
	.teaser__card--landscape__item__headline, 
	.teaser__card--landscape__item__txt, 
	.teaser__card--landscape__item__img
	{
		width: 50%;
		position: relative;
	}
	.order-reverse
	{
		flex-direction: row-reverse;
	}
}

/* --- PuM --- */

.pum-summary-level1, .pum-summary-level2
{
	font-weight: 700;
	cursor: pointer;
	background-color: var(--bw-color-background-subtle);
}

.pum-summary-level1:hover, .pum-summary-level2:hover
{
	background-color: var(--bw-color-background-accent);
}

.pum-details-level1
{
	padding: var(--fluid-font-size-0) 0;
}

.pum-summary-level1
{
	font-size: var(--fluid-font-size-2);
	padding: var(--fluid-font-size--1) var(--fluid-font-size-0);
}

.pum-details-level2
{
	padding: var(--fluid-font-size-1) 0 var(--fluid-font-size-1) var(--fluid-font-size-1);
}

.pum-summary-level2
{
	font-size: var(--fluid-font-size-1);
	padding: var(--fluid-font-size--2) var(--fluid-font-size--1);
}

.pum-details-image
{
	width: calc(100% - 2 * var(--fluid-font-size-1));
	height: auto;
	margin: var(--fluid-font-size-1);
}

.pum-list
{
	text-indent: 0;
	padding-left: 0;
	margin-left: var(--fluid-font-size-1);
	margin: 0 var(--margin-details-content);
}

.pum-list-item
{
	list-style-type: none;
	padding: calc(0.5 * var(--fluid-font-size-0));
	border-bottom: 1px solid hsla(0, 0%, 50%, 1.0);
}

li.pum-list-item:last-of-type
{
	border: 0;
}

.pum-list-item-start
{
	font-weight: 700;
}

/* FAQs */

.faq-container
{
	margin: 0;
}

.faq-details
{
	border-bottom: 1px solid hsla(0, 0%, 50%, 1.0);
}

.faq-summary
{
	cursor: pointer;
	margin: var(--fluid-font-size--1) 0 var(--fluid-font-size--1) var(--fluid-font-size-0);
	font-weight: var(--bw-font-weight-bold);
	text-indent: calc(-1 * var(--fluid-font-size-0));
}

.faq-list, .faq-list-level2
{
	text-indent: 0;
	padding-left: var(--fluid-font-size-0);
}

.faq-list
{
	margin: var(--fluid-font-size-0);
}

.faq-list-level2
{
	margin: 0 var(--fluid-font-size-0);
}

.faq-list-item
{
	list-style-type: '-';
	padding: calc(0.5 * var(--fluid-font-size-0));
}

.no-list-style
{
list-style-type: none;
}

li.faq-list-item:last-of-type
{
	border: 0;
}

.faq-list-item-start
{
	font-weight: 700;
}

/* --- Mitfahrplattformen --- */

.teaser__card--portrait__container.mp-container
{
	border: 1px solid var(--bw-color-foreground-primary);
}
.teaser__card--portrait__container.mp-container:hover
{
	border-color: var(--bw-color-foreground-focus);
}
.teaser__card--portrait__picture--mp
{
	display: block;
	background-color: var(--bw-color-background-primary);
}
.teaser__card--portrait__picture--mp img
{
	width: calc(100% - 80px);
	margin: auto;
	background: none;
	padding-top: 40px;
	padding-bottom: 40px;
}

@media (min-width: 768px)
{
	.teaser__card--portrait__picture--mp img
	{
		filter: grayscale(100%);
	}
	
	.teaser__card--portrait__picture--mp img:hover
	{
		filter: grayscale(0);
	}
}

/* Description */

.quote
{
	margin: var(--bw-space-1000) 0 var(--bw-space-1000) 0;
}

.quote.with-ref
{
	margin: var(--bw-space-1000) 0 0 0;
}

.quote::before
{
	content: "»";
	position: relative;
	display: inline-block;
	font-size: var(--fluid-font-size-5);
	line-height: 0;
	margin-right: 0;
	margin-top: calc(-1*var(--fluid-font-size-5));
	vertical-align: baseline;
}

.quote::after
{
	content: '«';
}

/* social-media-links */
ul.social-media-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bw-font-size-100);

	img {
		width: var(--bw-font-size-500);
		height: var(--bw-font-size-500);
	}
	li {
		border-top: none;
	}
}

.teaser__card--landscape__container.mp-container
{
	background: none; 
	border: none;
}

.card-item.mp-card-item
{
	background: none; 
	padding: var(--fluid-font-size-2);
}

.mp-card-item p, .mp-card-item ul
{
	-webkit-hyphens: auto; 
	hyphens: auto;
}

.mp-card-item ul
{
	padding:0;
	list-style: none;
}

.mp-card-item ul.bullet
{
	padding-left: var(--bw-space-600);
	list-style: disc;
}

.mp-card-item ol li::marker {
	font-weight: var(--bw-font-weight-bold);
	font-family: var(--root-font-sans);
}

.card-bild.mp-card-bild
{
	display: block;
	width: 80%;
	margin: 5% auto;
}

.card-bild.mp-logo
{
	display: block;
	width: 80%;
	margin: var(--margin-vertical) auto 0 auto;
}

.mp-features ul
{
	padding-left: 0;
	list-style-type: none;
	li ul li {
		/* No border for sub lists */
		border-top: none;
	}
}

.mp-features ul
{
	padding-left: 0;
	list-style-type: none;
}

.mp-feature_list-item
{
	border-top-width: var(--bw-border-width-100);
	border-top-style: solid;
	border-top-color: var(--bw-border-primary);
	padding: 0.5rem 0 0.75rem 0;
}


.mp-list-item-start
{
	font-weight: 700;
}

.mp-appstore_list-item
{
	border: none;
	padding: 0.5rem 0 0.5rem 4rem;
}
/*
@media (min-width: 768px)
{
	.teaser__card--landscape__container.mp-container
	{
		flex-direction: row;
	}
}
*/
/* === Footer === */

footer
{
	background-color: var(--bw-color-background-emphasis);
	min-height: 80px;
	padding: 0;
	margin: 0;
	font-size: var(--fluid-font-size--1);
	color: var(--bw-color-foreground-on-emphasis);
}

.footer__content__container
{
	max-width: var(--max-width_main-elements);
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
	align-items: flex-start;
	min-height: 80px;
	padding: 0 40px 40px 40px;
	margin: 30px auto 0 auto;
}

.footer__logo__container
{
	display: flex;
	flex-direction: column;
	margin: 20px 0;
}

.footer__logo
{
	width: auto;
	height: 32px;
}

.footer__logo__link:hover
{
	background-color: transparent; 
}

.top_logo
{
	margin-bottom: 10px;
}

.mobidata_logo
{
	margin: 0 0 0 3px;
}

.footer__link-list__container
{
	margin: 20px 0;
}

.footer__link-list__list
{
	display: flex;
	flex-direction: column;
	padding: 0 32px;
	list-style: none;
}

.footer__link-list__list a
{
	color: var(--bw-color-foreground-on-emphasis);
	box-shadow: 0 1px var(--bw-color-foreground-on-emphasis);
	outline-offset: 3px;
}

.footer__link-list__list a:hover
{
	box-shadow: 0 2px var(--bw-color-foreground-on-emphasis);
}

.footer__link-list__list li
{
	margin: 0 0 var(--fluid-font-size--1) 0;
}

.footer__top-link__container
{
	display: none;
	align-self: flex-start;
	border-radius: var(--bw-border-radius-100);
	margin-top: 20px;
	margin-left: auto;
	width: 32px;
	height: 32px;
}

.footer__top-link
{
	width: 32px;
	height: 32px;
	background-color: var(--bw-color-background-accent);
	border-radius: var(--bw-border-radius-100);
}

@media (min-width: 768px)
{
	.footer__content__container
	{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.footer__link-list__container
	{
		margin: 0;
		}

	.footer__link-list__list
	{
		flex-direction: row;
	}
	.footer__link-list__list li
	{
		margin: 0 1rem;
	}
	.footer__top-link__container
	{
		display: block;
		margin: 20px 0 0 0;
		text-decoration: none;
		box-shadow: none;
	}
	.footer__top-link__container:hover
	{
		text-decoration: none;
		border: none;
		box-shadow: none;
	}
}