/* Toolbox-Seite. Das orange Wort in der Ueberschrift und die Haken vor den
   Merkmalen liegen als Klasse vor, damit im Seitenbaum keine Farbwerte stehen. */
.ws-tbx-h1 .ws-akzent { color: var(--e-global-color-accent); }
.ws-rolle { font-weight: 500; color: var(--e-global-color-esinksoft); }

.ws-haken { display: inline-flex; align-items: center; gap: 6px; }

.ws-haken::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background: var(--e-global-color-espetrold);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
}

/* Die Formularspalte laeuft beim Scrollen mit, solange zwei Spalten passen. */
@media (min-width: 1041px) {
	.ws-tbx-spalte { position: sticky; top: 98px; }
}

.ws-tbx-formular { box-shadow: 0 34px 68px -34px rgba(31, 31, 31, 0.34); }

.ws-tbx-karte { transition: transform .25s ease, box-shadow .25s ease; }

.ws-tbx-karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 48px -26px rgba(31, 31, 31, 0.32);
}

.ws-tbx-cover img { display: block; }

/* Download-Seiten mit Formular. Das HubSpot-Formular bringt eigene Groessen mit,
   die neben unserer Typografie zu gross wirken. */
.ws-optin-karte .hs-form,
.ws-optin-karte .hs-form input,
.ws-optin-karte .hs-form select,
.ws-optin-karte .hs-form textarea,
.ws-optin-karte .hs-form label,
.ws-optin-karte .hs-form legend,
.ws-optin-karte .hs-form p {
	font-family: var(--e-global-typography-text-font-family), sans-serif !important;
	font-size: 14.5px !important;
	line-height: 1.45 !important;
}

.ws-optin-karte .hs-form label {
	font-weight: 600 !important;
	color: var(--e-global-color-text) !important;
	margin-bottom: 6px !important;
}

.ws-optin-karte .hs-form .hs-richtext,
.ws-optin-karte .hs-form .hs-field-desc,
.ws-optin-karte .hs-form legend {
	font-size: 12.5px !important;
	color: var(--e-global-color-esmuted) !important;
}

.ws-optin-karte .hs-form input[type="text"],
.ws-optin-karte .hs-form input[type="email"],
.ws-optin-karte .hs-form select,
.ws-optin-karte .hs-form textarea {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid var(--e-global-color-esline2) !important;
	border-radius: 10px !important;
	background: var(--e-global-color-efef375) !important;
}

.ws-optin-karte .hs-form .hs-button {
	width: 100% !important;
	padding: 13px 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--e-global-color-accent) !important;
	color: var(--e-global-color-efef375) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.ws-optin-karte .hs-form .hs-button:hover {
	background: var(--e-global-color-esaccentd) !important;
	transform: translateY(-2px);
}

.ws-optin-karte .hs-form .hs-form-field { margin-bottom: 14px !important; }

/* Die Zahlen in der Inhaltskarte sitzen auf gleicher Grundlinie wie der Text. */
.ws-optin-inhalt .ws-kreis { padding-top: 1px; }