/* ==========================================================================
   RTE content styles, one definition for frontend and backend.
   Frontend: page.includeCSS. Backend: editor.config.contentsCss.
   TYPO3 prefixes every selector with `#<field> .ck-content` for the editor,
   so write them as plain tag/class rules and keep url() relative to this file.
   Colors come from the --rte-* tokens of colors.css, spacing and type from
   tods.css. Selectors containing `main` only match in the frontend.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */
p.lead {
	font-size: 1.15em;
	font-weight: 300;
	line-height: 1.5;
}

small {
	font-size: 0.8em;
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

span.text-lowercase  { text-transform: lowercase; }
span.text-uppercase  { text-transform: uppercase; }
span.text-capitalize { text-transform: capitalize; }

span.text-muted      { color: var(--rte-muted); }
span.text-primary    { color: var(--rte-primary); }
span.text-secondary  { color: var(--rte-secondary); }
span.text-tertiary   { color: var(--rte-tertiary); }
span.text-quaternary { color: var(--rte-quaternary); }
span.text-success    { color: var(--rte-success); }
span.text-info       { color: var(--rte-info); }
span.text-warning    { color: var(--rte-warning); }
span.text-danger     { color: var(--rte-danger); }

.text-column {
	columns: 2;
}

.text-indent {
	margin-inline-start: 4rem;
}

.well {
	background-color: var(--rte-default);
	box-shadow: 0 0 1px #888c;
	padding: 1rem;
}

.well * {
	margin: 0;
}

.well * + * {
	margin: 1rem 0 0;
}

/* --------------------------------------------------------------------------
   Buttons: a.btn is the base, a.btn-<variant> only swaps the variables
   -------------------------------------------------------------------------- */
a.btn {
	--btn-bg: var(--rte-base);
	--btn-on: #fff;
	display: inline-block;
	background-color: var(--btn-bg);
	border: 1px solid var(--btn-border, var(--btn-bg));
	color: var(--btn-on);
	margin: 1em 0;
	padding: 0.5em 2em;
	text-decoration: none;
	border-radius: var(--rte-radius);
	cursor: pointer;
	transition: 0.1s all ease-in-out;
}

a.btn:hover {
	background-color: #fff;
	color: var(--btn-hover, var(--btn-bg));
}

a.btn:focus-visible {
	outline: 2px solid var(--rte-primary);
	outline-offset: 2px;
}

a.btn-default {
	--btn-bg: var(--rte-default);
	--btn-on: var(--rte-on-default, #fff);
	--btn-border: var(--rte-default-border);
	--btn-hover: var(--rte-on-default);
	--btn-outline-fg: var(--rte-ink);
}

a.btn-primary {
	--btn-bg: var(--rte-primary);
	--btn-on: var(--rte-on-primary, #fff);
}

a.btn-secondary {
	--btn-bg: var(--rte-secondary);
	--btn-on: var(--rte-on-secondary, #fff);
	--btn-hover: var(--rte-on-secondary);
	--btn-outline-fg: color-mix(in srgb, var(--rte-secondary) 55%, var(--rte-ink));
}

a.btn-tertiary {
	--btn-bg: var(--rte-tertiary);
	--btn-on: var(--rte-on-tertiary, #fff);
}

a.btn-quaternary {
	--btn-bg: var(--rte-quaternary);
	--btn-on: var(--rte-on-quaternary, #fff);
}

a.btn-success {
	--btn-bg: var(--rte-success);
	--btn-on: var(--rte-on-success, #fff);
}

a.btn-info {
	--btn-bg: var(--rte-info);
	--btn-on: var(--rte-on-info, #fff);
	--btn-hover: var(--rte-on-info);
	--btn-outline-fg: color-mix(in srgb, var(--rte-info) 55%, var(--rte-ink));
}

a.btn-warning {
	--btn-bg: var(--rte-warning);
	--btn-on: var(--rte-on-warning, #fff);
	--btn-hover: var(--rte-on-warning);
	--btn-outline-fg: color-mix(in srgb, var(--rte-warning) 55%, var(--rte-ink));
}

a.btn-danger {
	--btn-bg: var(--rte-danger);
	--btn-on: var(--rte-on-danger, #fff);
}

a.btn-outline-default { --btn-bg: var(--rte-default); --btn-on: var(--rte-on-default, #fff); --btn-border: var(--rte-default-border); --btn-outline-fg: var(--rte-ink); }
a.btn-outline-primary { --btn-bg: var(--rte-primary); --btn-on: var(--rte-on-primary, #fff); }
a.btn-outline-secondary { --btn-bg: var(--rte-secondary); --btn-on: var(--rte-on-secondary, #fff); --btn-outline-fg: color-mix(in srgb, var(--rte-secondary) 55%, var(--rte-ink)); }
a.btn-outline-tertiary { --btn-bg: var(--rte-tertiary); --btn-on: var(--rte-on-tertiary, #fff); }
a.btn-outline-quaternary { --btn-bg: var(--rte-quaternary); --btn-on: var(--rte-on-quaternary, #fff); }
a.btn-outline-success { --btn-bg: var(--rte-success); --btn-on: var(--rte-on-success, #fff); }
a.btn-outline-info { --btn-bg: var(--rte-info); --btn-on: var(--rte-on-info, #fff); --btn-outline-fg: color-mix(in srgb, var(--rte-info) 55%, var(--rte-ink)); }
a.btn-outline-warning { --btn-bg: var(--rte-warning); --btn-on: var(--rte-on-warning, #fff); --btn-outline-fg: color-mix(in srgb, var(--rte-warning) 55%, var(--rte-ink)); }
a.btn-outline-danger { --btn-bg: var(--rte-danger); --btn-on: var(--rte-on-danger, #fff); }

a.btn-outline-default,
a.btn-outline-primary,
a.btn-outline-secondary,
a.btn-outline-tertiary,
a.btn-outline-quaternary,
a.btn-outline-success,
a.btn-outline-info,
a.btn-outline-warning,
a.btn-outline-danger {
	background-color: transparent;
	border-color: var(--btn-border, var(--btn-bg));
	color: var(--btn-outline-fg, var(--btn-bg));
}

a.btn-outline-default:hover,
a.btn-outline-primary:hover,
a.btn-outline-secondary:hover,
a.btn-outline-tertiary:hover,
a.btn-outline-quaternary:hover,
a.btn-outline-success:hover,
a.btn-outline-info:hover,
a.btn-outline-warning:hover,
a.btn-outline-danger:hover {
	background-color: var(--btn-bg);
	color: var(--btn-on);
}

/* --------------------------------------------------------------------------
   Link icons: a mask in the link color, so hover and buttons follow
   the text color. The class names are the legacy ones in the content
   (internal-link, external-link, mail, download) and the link-* classes
   of the style dropdown. The `main` rules are automatic by target/href,
   and only exist in the frontend.
   -------------------------------------------------------------------------- */
:where(
	a.internal-link, a.link-page,
	a.external-link, a.external-link-new-window, a.link-external,
	a.mail, a.link-mail,
	a.download, a.link-file,
	a.video, a.audio,
	a.link-folder, a.link-globe,
	main a[target=_blank], main .ce-uploads-fileName a,
	main a[href*=".pdf"], main a[href*=".zip"], main a[href*="tel:"]
)::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1.2em;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 50%;
	mask-size: 50%;
	padding: 0 0.75rem 0 0;
	position: relative;
	bottom: -2px;
	background-color: currentColor;
}

:where(a.link-arrow, a.link-chevron)::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1.2em;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 50%;
	mask-size: 50%;
	padding: 0 0 0 0.5em;
	position: relative;
	bottom: -2px;
	background-color: currentColor;
}

a.link-arrow::after {
	-webkit-mask-image: url(../images/icons/arrow-right.svg);
	mask-image: url(../images/icons/arrow-right.svg);
}

a.link-chevron::after {
	-webkit-mask-image: url(../images/icons/chevron-right.svg);
	mask-image: url(../images/icons/chevron-right.svg);
}

/* automatic, by target and href (frontend only) */
main :where(a[target=_blank])::before {
	-webkit-mask-image: url(../images/icons/arrow-up-right-from-square-solid.svg);
	mask-image: url(../images/icons/arrow-up-right-from-square-solid.svg);
	-webkit-mask-size: 45%;
	mask-size: 45%;
}

main :where(.ce-uploads-fileName a)::before {
	-webkit-mask-image: url(../images/icons/arrow-down-solid.svg);
	mask-image: url(../images/icons/arrow-down-solid.svg);
}

main :where(a[href*=".pdf"])::before {
	-webkit-mask-image: url(../images/icons/file-pdf-regular.svg);
	mask-image: url(../images/icons/file-pdf-regular.svg);
}

main :where(a[href*=".zip"])::before {
	-webkit-mask-image: url(../images/icons/file-zipper-regular.svg);
	mask-image: url(../images/icons/file-zipper-regular.svg);
	-webkit-mask-size: 45%;
	mask-size: 45%;
}

main :where(a[href*="tel:"])::before {
	-webkit-mask-image: url(../images/icons/phone-solid.svg);
	mask-image: url(../images/icons/phone-solid.svg);
}

/* by class */
a.internal-link::before,
a.link-page::before {
	-webkit-mask-image: url(../images/icons/link-solid.svg);
	mask-image: url(../images/icons/link-solid.svg);
	-webkit-mask-size: 60%;
	mask-size: 60%;
}

a.external-link::before,
a.external-link-new-window::before,
a.link-external::before {
	-webkit-mask-image: url(../images/icons/arrow-up-right-from-square-solid.svg);
	mask-image: url(../images/icons/arrow-up-right-from-square-solid.svg);
	-webkit-mask-size: 45%;
	mask-size: 45%;
}

a.mail::before,
a.link-mail::before {
	-webkit-mask-image: url(../images/icons/envelope-regular.svg);
	mask-image: url(../images/icons/envelope-regular.svg);
	-webkit-mask-size: 60%;
	mask-size: 60%;
	bottom: -3px;
}

a.download::before,
a.link-file::before {
	-webkit-mask-image: url(../images/icons/file-regular.svg);
	mask-image: url(../images/icons/file-regular.svg);
}

a.video::before {
	-webkit-mask-image: url(../images/icons/file-video-regular.svg);
	mask-image: url(../images/icons/file-video-regular.svg);
}

a.audio::before {
	-webkit-mask-image: url(../images/icons/file-audio-regular.svg);
	mask-image: url(../images/icons/file-audio-regular.svg);
}

a.link-folder::before {
	-webkit-mask-image: url(../images/icons/folder.svg);
	mask-image: url(../images/icons/folder.svg);
}

a.link-globe::before {
	-webkit-mask-image: url(../images/icons/globe.svg);
	mask-image: url(../images/icons/globe.svg);
}

a.download[href*=".pdf"]::before,
a.link-file[href*=".pdf"]::before {
	-webkit-mask-image: url(../images/icons/file-pdf-regular.svg);
	mask-image: url(../images/icons/file-pdf-regular.svg);
}

a.download[href*=".zip"]::before,
a.link-file[href*=".zip"]::before {
	-webkit-mask-image: url(../images/icons/file-zipper-regular.svg);
	mask-image: url(../images/icons/file-zipper-regular.svg);
	-webkit-mask-size: 45%;
	mask-size: 45%;
}

/* --------------------------------------------------------------------------
   Tables: the editor adds .table, parseFunc_RTE adds .contenttable
   -------------------------------------------------------------------------- */
:is(.contenttable, table.table) {
	width: 100%;
	border-bottom: 1px solid var(--rte-line);
}

:is(.contenttable, table.table) thead th {
	padding: 1em 2em;
	border-bottom: 1px solid var(--rte-line);
	border-right: 1px solid var(--rte-line);
	border-left: 1px solid var(--rte-line);
	text-transform: uppercase;
	min-width: 18em;
	background-color: var(--rte-surface);
}

:is(.contenttable, table.table).benefits thead th {
	padding: 3em;
	background-color: unset;
	border-left: 0;
}

:is(.contenttable, table.table).benefits thead th .red {
	position: absolute;
	text-transform: initial;
	font-size: 1.2em;
	transform: translate(2em, -1.5em) rotate(-23deg);
	background-color: rgba(255, 255, 255, 0.5);
}

:is(.contenttable, table.table).benefits thead th:not(:first-child) {
	border-top: 1px solid var(--rte-line);
}

:is(.contenttable, table.table) thead th a {
	margin-top: 0.5em;
	text-transform: initial;
}

:is(.contenttable, table.table) th:first-child,
:is(.contenttable, table.table) td:first-child {
	width: 60%;
}

:is(.contenttable, table.table) td {
	padding: 1em 2em;
	border-right: 1px solid var(--rte-line);
	border-left: 1px solid var(--rte-line);
}

:is(.contenttable, table.table) tr:nth-child(2n) {
	background-color: var(--rte-surface-alt);
}

:is(.contenttable, table.table) td .check {
	display: block;
	margin: 0 auto;
	width: 23px;
	height: 20px;
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='20'><path fill='%23627F15' d='M3 8l-3 4 10 8L23 3l-4-3L9 13z'/></svg>");
	text-indent: 25px;
	overflow: hidden;
}

table.table-striped tr:nth-of-type(odd) {
	background: color-mix(in srgb, var(--rte-ink) 4%, transparent);
}

table.table-bordered,
table.table-bordered td,
table.table-bordered th {
	border: 1px solid var(--rte-line);
}

table.table-condensed td,
table.table-condensed th {
	padding: 0.25rem 0.5rem;
}

tr.table-active,  td.table-active  { background-color: color-mix(in srgb, var(--rte-ink) 8%, transparent); }
tr.table-success, td.table-success { background-color: color-mix(in srgb, var(--rte-success) 15%, transparent); }
tr.table-info,    td.table-info    { background-color: color-mix(in srgb, var(--rte-info) 15%, transparent); }
tr.table-warning, td.table-warning { background-color: color-mix(in srgb, var(--rte-warning) 20%, transparent); }
tr.table-danger,  td.table-danger  { background-color: color-mix(in srgb, var(--rte-danger) 15%, transparent); }

/* --------------------------------------------------------------------------
   Lists: the markers are drawn with ::before, as the frontend bullets are
   -------------------------------------------------------------------------- */
ul.list-unstyled,
ul.list-inline {
	list-style: none;
	padding-left: 0;
}

ul.list-inline > li {
	display: inline-block;
	margin-right: 0.75rem;
}

ul.list-check,
ul.list-info,
ul.list-warning,
ul.list-ban,
ul.list-chevron {
	list-style: none;
	padding: 0 0 0 var(--space-m);
}

ul.list-check > li,
ul.list-info > li,
ul.list-warning > li,
ul.list-ban > li,
ul.list-chevron > li {
	position: relative;
}

ul.list-check > li::before,
ul.list-info > li::before,
ul.list-warning > li::before,
ul.list-ban > li::before,
ul.list-chevron > li::before {
	position: absolute;
	left: -1.4em;
	width: 1.2em;
	text-align: center;
}

ul.list-check   > li::before { content: "\2713"; color: var(--rte-success); }
ul.list-info    > li::before { content: "\2139"; color: var(--rte-info); }
ul.list-warning > li::before { content: "\26A0"; color: var(--rte-warning); }
ul.list-ban     > li::before { content: "\2715"; color: var(--rte-danger); }
ul.list-chevron > li::before { content: "\203A"; color: var(--rte-quaternary); }

/* --------------------------------------------------------------------------
   Horizontal rule, as the editor draws it
   -------------------------------------------------------------------------- */
hr {
	background: var(--rte-line);
	border: 0;
	display: inline-block;
	height: 4px;
	margin: 15px 0;
	vertical-align: middle;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Definition lists, as the editor writes them: dl > div > dt + dd*.
   Every div is one cell of a grid that wraps, the dd stack below the dt.
   Layout after the sml theme, without its type rules. Flat dl of other
   extensions are left alone.
   -------------------------------------------------------------------------- */
dl:has(> div) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-s);
	margin: var(--space-s) 0;
}

dl > div > dt {
	padding-block-start: 0.25rem;
	border-block-start: 1px solid currentColor;
}

dl > div > dd {
	margin: 0;
}

dl > div > dd p {
	margin: 0;
}

@media screen and (max-width: 64rem) {
	dl:has(> div) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 40rem) {
	dl:has(> div) {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Legacy classes of the old htmlArea RTE, still used in existing content
   -------------------------------------------------------------------------- */
p.weissaufrot { background-color: #cc3333; color: #ffffff; }
p.blauhgr { background-color: #3333cc; }
span.roteschrift { color: #cc3333; }
span.sehrgross { font-size: 18px; }

ol.component-items-ordered,
ol.action-items-ordered,
ol.list-alpha,
ol.list-roman,
ol.list-zero {
	padding-inline-start: var(--space-m);
}

ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }
ol.action-items-ordered    { color: #8A0020; list-style-type: lower-greek; }
ol.list-alpha { list-style-type: lower-alpha; }
ol.list-roman { list-style-type: upper-roman; }
ol.list-zero  { list-style-type: decimal-leading-zero; }

span.important { color: #8A0020; }
span.name-of-person { color: #10007B; }
span.detail { color: #186900; }