/*
Farbe Petrol:
rgb(30,166,163)
#1ea6a3
*/

html,
body {
	overflow-x: hidden;
}

div.thessa-ping {
	display: none;
}

div.buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

div.buttons button.button-command {
	display: block;
	margin: 0;
	padding: .5rem;
	width: auto;
	min-width: 90px;
	/*height: 48px;*/
	height: auto;
	text-align: center;
	color: #fff;

	border: none;
	border-radius: 10px;
	background-color: #1ea6a3;
	overflow: hidden;

	cursor: pointer;
}
div.buttons button[value="switch"].button-command,
div.buttons button[value="cancel"].button-command {
	background-color: #bbbbbb;
}
div.buttons button.button-command::-moz-focus-inner {
	padding: 0;
	border: 0;
}

/* Voting */

section.cards {
	position: relative;

	width: 300px;
	height: 400px;
	margin: 1rem auto;
	margin-top: 0;
}

/* Die Vote-Buttons */

section.cards > button[name="vote"] {
	position: absolute;

	display: flex;
	justify-content: center;
	align-items: center;

	top: 50%;

	width: 48px;
	height: 48px;

	padding: 0;
	margin: 0;
	margin-top: -24px;

	user-select: none;
	outline: none;
	background-color: #1ea6a3;

	border: none;
	cursor: pointer;
	border-radius: 100%;

	z-index: 10;
}
section.cards > button[name="vote"].negative {
	left: -20px;
}
section.cards > button[name="vote"].positive {
	right: -20px;
}
section.cards > button[name="vote"] > svg {
	width: 32px;
	height: 32px;
}
section.cards > button[name="vote"] > svg > path {
	fill: #fff;
}

section.cards.initializing > button[name="vote"],
section.cards.calculate-results > button[name="vote"],
section.cards.response-error > button[name="vote"] {
	display: none;
}

/* Zähler */

section.cards > div.counter {
	position: absolute;

	top: -35px;

	width: 300px;
	height: auto;
	text-align: right;
}

/* Anpassungen: Mobil */

@media only screen and (max-width: 619px) {
	section.cards > div.counter {
		top: -30px;
	}
}

/* Karte */

section.cards > div.card {
	display: block;
	position: relative;
	width: 300px;
	height: 400px;
	border-radius: 10px;
	box-shadow: 0 0 10px 5px rgb(238, 238, 238);
	overflow: hidden;
	background-color: #fff;
	text-align: center;
}
section.cards > div.card.swipeable {
	cursor: w-resize;
}
section.cards > div.card > img {
	width: 100%;
	height: 100%;
}

section.cards > div.card.loading {
	background-image: url("../Images/AnimThessaAI.svg");
	background-size: 190px auto;
	background-position: center bottom 40px;
	background-repeat: no-repeat;
}
section.cards.calculate-results > div.card {
	background-image: url("../Images/AnimThessaAI.svg"), url("../Images/TileCalculate.png");
	background-size: 190px auto, 300px 400px;
	background-position: center bottom 40px, center center;
	background-repeat: no-repeat, no-repeat;
}
section.cards.response-error > div.card {
	background-image: url("../Images/TileSorry.png");
	background-size: 300px 400px;
	background-position: center;
	background-repeat: no-repeat;
}

section.cards > div.card.touch {
	position: absolute;
	left: var(--touch-clone-x);
	top: var(--touch-clone-y);
	opacity: var(--touch-clone-opacity);
}

section.cards > div.card > article {
	display: flex;
	width: 300px;
	height: 400px;
}
section.cards > div.card > article > div {
	display: block;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
	text-align: center;
	font-size: 1.9rem;
	color: #555;
	user-select: none;
}

section.cards > div.card > div.card-front,
section.cards > div.card > div.card-back {
	display: flex;
	width: 300px;
	height: 400px;
	transition: all 0.25s cubic-bezier(.1, .6, .4, .9);
	user-select: none;
}
section.cards > div.card.display-card-back > div.card-front {
	left: -300px;
}
section.cards > div.card.display-card-back > div.card-back {
	left: 0px;
}
section.cards > div.card:not(.intro) > div.card-front > div,
section.cards > div.card:not(.intro) > div.card-back > div {
	display: block;
	margin: auto;
	padding-left: 35px;
	padding-right: 35px;
	text-align: center;
	color: #555;
	user-select: none;
}
section.cards > div.card:not(.intro) > div.card-front > div {
	font-size: 1.9rem;
}
section.cards > div.card:not(.intro) > div.card-back > div {
	font-size: 1.3rem;
}



section.cards > div.card > label {
	position: absolute;
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	white-space: nowrap;
	font-size: 1rem;
	color: #555;
}

/* Karte mit halber Höhe */

section.cards.small {
	height: 200px;
}
section.cards.small > div.card {
	height: 200px;
}

/* Karte im Intro */

section.cards > div.card.intro > div.card-front {
	position: relative;

	background-image: url("../Images/TileIntroLocation.png");
	background-size: 300px 400px;
	background-position: center;
	background-repeat: no-repeat;
}

section.cards > div.card.intro > div.card-front > div.input-frame {
	display: grid;

	/*
	grid-template-columns: 1fr min-content 1fr;
	grid-template-rows: 1fr min-content min-content 1fr;
	*/
	grid-template-columns: 15px 220px 65px;
	grid-template-rows: 200px min-content min-content auto;

	align-items: center;
	justify-content: center;
	gap: 0 0;

	width: 300px;
	height: 400px;
}

section.cards > div.card.intro > div.card-front > div.input {
	position: absolute;
	left: 15px;
	top: 190px;
	width: 220px;
}
section.cards > div.card.intro > div.card-front > div.input > input {
	width: 100%;
	min-width: 100%;
	padding: .5rem;
	box-shadow: inset 0 0 10px 5px rgb(238, 238, 238);
}
section.cards > div.card.intro > div.card-front > div.input > input.loading {
	background-image: url("../Images/AnimFadeStaggerCircles.svg");
	background-size: 1.5rem 1.5rem;
	background-position: center right .5rem;
	background-repeat: no-repeat;
}

section.cards > div.card.intro > div.card-front > div.button {
	display: flex;
	align-items: center;
	gap: 0 0;

	padding: 5px;

	position: absolute;
	left: 7px;
	top: 225px;

	color: #1ea6a3;

	border-radius: 10px;
	cursor: pointer;
}
section.cards > div.card.intro > div.card-front > div.button > svg {
	width: 20px;
	height: 20px;
	cursor: inherit;
}
section.cards > div.card.intro > div.card-front > div.button > label {
	text-align: left;
	color: inherit;
	cursor: inherit;
}
section.cards > div.card.intro > div.card-front > div.buttons {
	position: absolute;
	left: 15px;
	top: 260px;
}
section.cards > div.card.intro > div.card-front > div.buttons button.button-command {
	height: auto;
}


section.cards > div.card.intro > div.card-back > div.card-back-content {
	display: flex;

	width: 100%;
	height: 100%;

	justify-content: center;
	align-items: center;
	text-align: center;

	padding: 2rem;
	font-size: 1.3rem;
}

/* ****************************************************************************\
|* Ergebnisse                                                                 *|
\* ****************************************************************************/

h2.page-results-title {
	font-size: 1.6rem;
	font-weight: normal;
	color: #bbb;
	margin: 1.5em 0 .5em 0;
}

div.page-search-results {
	position: relative;
	width: 940px;

	margin: 1rem 0;

	display: grid;
	grid-template-columns: 300px 300px 300px;
	grid-template-rows: 400px;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
div.page-search-results.no-results {
	grid-template-columns: 940px;
	grid-template-rows: 400px;
}
/*
div.content-tile-box.no-result {
	width: 620px;
}
*/

/* Anpassungen: Tablett */

@media only screen and (max-width: 939px) {
	div.page-search-results {
		width: 620px;
		grid-template-columns: 300px 300px;
	}
	div.page-search-results.no-results {
		grid-template-columns: 620px;
	}
	/*
	div.content-tile-box.no-result {
		width: 300px;
	}
	*/
}

/* Anpassungen: Mobil */

@media only screen and (max-width: 619px) {
	h2.page-results-title {
		font-size: 1.3rem;
	}

	div.page-search-results {
		width: 300px;
		grid-template-columns: 300px;
	}
	/*
	div.content-tile-box.no-result {
		width: 300px;
	}
	*/
}

/* ****************************************************************************\
|* Ergebnisse - Karten                                                        *|
\* ****************************************************************************/

div.content-tile-box div.header div.primary-headline,
div.content-tile-box a.header div.primary-headline {
	padding-right: 0;
}
div.content-tile-box div.card-front div.header div.primary-headline,
div.content-tile-box div.card-front div.header div.secondary-headline {
	padding-right: 0;
}

div.content-tile-box.group > div.card-front > div.content-tile-box-listing > div.content-tile-box-listing-entry > div.captions > div.primary-headline,
div.content-tile-box.group > div.card-front > div.content-tile-box-listing > a.content-tile-box-listing-entry > div.captions > div.primary-headline {
	overflow: hidden;
	visibility: visible;
	display: -webkit-box;
	display: box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}
div.content-tile-box.group > div.card-front > div.content-tile-box-listing > div.content-tile-box-listing-entry > div.captions > div.secondary-headline,
div.content-tile-box.group > div.card-front > div.content-tile-box-listing > a.content-tile-box-listing-entry > div.captions > div.secondary-headline {
	overflow: hidden;
	visibility: visible;
	display: -webkit-box;
	display: box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

div.content-tile-box.group > div.card-front > div.content-tile-box-listing > div.content-tile-box-listing-entry > div.captions > div.secondary-headline.location-title,
div.content-tile-box.group > div.card-front > div.content-tile-box-listing > a.content-tile-box-listing-entry > div.captions > div.secondary-headline.location-title {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}


div.content-tile-box.group > div.card-front > div.content-tile-box-listing > div.content-tile-box-listing-entry.no-companies > div.captions > div.secondary-headline,
div.content-tile-box.group > div.card-front > div.content-tile-box-listing > a.content-tile-box-listing-entry.no-companies > div.captions > div.secondary-headline {
	overflow: hidden;
	visibility: visible;
	display: -webkit-box;
	display: box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
div.content-tile-box.group div.content-tile-box-listing div.content-tile-box-listing-entry div.symbol div.symbol-header,
div.content-tile-box.group div.content-tile-box-listing a.content-tile-box-listing-entry div.symbol div.symbol-header {
	font-weight: normal;
}

div.content-tile-box.group div.content-tile-box-listing div.content-tile-box-listing-entry div.symbol div.picture,
div.content-tile-box.group div.content-tile-box-listing a.content-tile-box-listing-entry div.symbol div.picture {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
}

div.content-tile-box.group div.content-tile-box-listing div.content-tile-box-listing-entry div.symbol div.picture img,
div.content-tile-box.group div.content-tile-box-listing a.content-tile-box-listing-entry div.symbol div.picture img {
	display: block;
	width: 30px;
	height: 30px;
}
div.content-tile-box.group div.content-tile-box-listing div.content-tile-box-listing-entry div.symbol div.picture img.question-mark,
div.content-tile-box.group div.content-tile-box-listing a.content-tile-box-listing-entry div.symbol div.picture img.question-mark {
	display: block;
	width: 24px;
	height: 24px;
}

div.content-tile-box div.card-front div.icons div.icons-right div.riasec-matching {
	display: inline-block;
	border-radius: 100%;
	box-sizing: content-box;
	width: 32px;
	height: 32px;
	padding: 10px;
	text-align: center;
	color: #fff;
}
div.content-tile-box div.card-front div.icons div.icons-right div.riasec-matching > span {
	font-size: 1.3rem;
	line-height: 1.9rem;
}
div.content-tile-box div.card-front div.icons div.icons-right div.riasec-matching > span::after {
	content: "%";
}


div.content-tile-box > div.card-front > a.item-main-link,
div.content-tile-box > div.card-front > a.item-main-link:hover,
div.content-tile-box > div.card-front > a.item-main-link:active {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 400px;
	color: inherit;
	border-bottom: none;
}

div.content-tile-box > div.card-front,
div.content-tile-box > div.card-back {
	transition: all 0.25s cubic-bezier(.1, .6, .4, .9);
}
div.content-tile-box.display-card-back > div.card-front {
	left: -300px;
}
div.content-tile-box.display-card-back > div.card-back {
	left: 0px;
}
div.content-tile-box > div.card-front > a {
	border: none;
}
div.content-tile-box > div.card-front > div.activity-title,
div.content-tile-box > div.card-front > a > div.activity-title {
	position: absolute;

	left: 0;
	top: 0;
	right: 0;
	height: auto;
	padding: 10px;
	overflow: hidden;

	text-align: center;
	font-size: 1.9rem;
	color: #fff;
}
div.content-tile-box > div.card-front > div.activity-icon,
div.content-tile-box > div.card-front > a > div.activity-icon {
	position: absolute;

	left: 0;
	top: 0;
	width: 300px;
	height: 400px;
	background-position: center;
	background-size: 128px 128px;
}
div.content-tile-box > div.card-front > div.activity-rating-symbol,
div.content-tile-box > div.card-front > a > div.activity-rating-symbol {
	position: absolute;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px 5px;

	left: 0;
	right: 0;
	bottom: 15%;
	height: auto;
	padding: 0;
	overflow: hidden;

	text-align: center;
	font-size: 1.9rem;
	color: #fff;
}
div.content-tile-box > div.card-front > div.activity-rating-symbol div.thumb-up,
div.content-tile-box > div.card-front > a > div.activity-rating-symbol div.thumb-up {
	width: 32px;
	height: 32px;
}
div.content-tile-box > div.card-front > div.activity-rating-symbol div.thumb-up > svg,
div.content-tile-box > div.card-front > a > div.activity-rating-symbol div.thumb-up > svg {
	width: 100%;
	height: 100%;
}
div.content-tile-box > div.card-front > div.activity-rating-symbol div.thumb-up > svg > path,
div.content-tile-box > div.card-front > a > div.activity-rating-symbol div.thumb-up > svg > path {
	fill: #fff;
}

div.content-tile-box > div.card-front > div.activity-percentage,
div.content-tile-box > div.card-front > a > div.activity-percentage {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 4%;
	height: auto;
	padding: 10px;
	overflow: hidden;

	text-align: center;
	font-size: 1.9rem;
	color: #fff;
}


div.content-tile-box > div.card-back > div.card-back-content {
	display: flex;

	width: 100%;
	height: 100%;

	justify-content: center;
	align-items: center;
	text-align: center;

	padding: 2.5rem;
	font-size: 1.3rem;
}
div.content-tile-box > button.card-back-switch {
	cursor: pointer;
}








div.content-tile-box.occupational-fields {
	font-size: .9rem;
}

div.content-tile-box.occupational-fields > div.card-front > div.chart {
	width: 300px;
	height: 190px;

	padding: .5rem;
}
div.content-tile-box.occupational-fields > div.card-front > div.chart img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

div.content-tile-box.occupational-fields > div.card-front > div.listing-occupational-fields {
	width: 300px;
	height: 200px;

	padding: .5rem;
}

div.content-tile-box.occupational-fields > div.card-back > div.listing-occupational-fields {
	width: 300px;
	height: 400px;

	padding: .5rem;
}


div.content-tile-box.occupational-fields div.listing-occupational-fields {
	grid-area: occupational-fields-listing;
}
div.content-tile-box.occupational-fields div.listing-occupational-fields span.listing-occupational-fields-item {
	margin: .2rem 0;
	display: grid;
	grid-template-columns: min-content auto min-content;
	grid-template-rows: auto;
	grid-column-gap: .2rem;
  grid-template-areas: "occupational-fields-listing-symbol occupational-fields-listing-title occupational-fields-listing-value";
}
div.content-tile-box.occupational-fields div.listing-occupational-fields span.listing-occupational-fields-item span.listing-occupational-fields-item-cell {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div.content-tile-box.occupational-fields div.listing-occupational-fields span.listing-occupational-fields-item span.listing-occupational-fields-item-cell.symbol {
	width: 1rem;
	grid-area: occupational-fields-listing-symbol;
	border-radius: 5px;
	text-align: center;
}
div.content-tile-box.occupational-fields div.listing-occupational-fields span.listing-occupational-fields-item span.listing-occupational-fields-item-cell.title {
	grid-area: occupational-fields-listing-title;
}
div.content-tile-box.occupational-fields div.listing-occupational-fields span.listing-occupational-fields-item span.listing-occupational-fields-item-cell.value {
	grid-area: occupational-fields-listing-value;
}
div.content-tile-box.occupational-fields div.listing-occupational-fields span.listing-occupational-fields-item.empty span.listing-occupational-fields-item-cell {
	color: #bbb;
}
div.content-tile-box.occupational-fields div.listing-occupational-fields span.listing-occupational-fields-item.empty span.listing-occupational-fields-item-cell.symbol {
	background-color: #eee;
}