/* ==========================================================================
   RTE Styles for CKEditor5 Style-Definitions
   included via editor.config.contentsCss
   TYPO3 automatically prefixes these rules with .ck-content, so here
   you should write them as normal at tag/class level.
   ========================================================================== */

:root {
	--rte-primary: #0d6efd;
	--rte-secondary: #6c757d;
	--rte-tertiary: #6610f2;
	--rte-quaternary: #d63384;
	--rte-success: #198754;
	--rte-info: #0dcaf0;
	--rte-warning: #ffc107;
	--rte-danger: #dc3545;
	--rte-default: #f8f9fa;
	--rte-border-radius: 0.375rem;
}

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

small {
	font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   buttons (.btn, .btn-*, .btn-outline-*)
   -------------------------------------------------------------------------- */
a.btn {
	display: inline-block;
	padding: 0.5rem 1.75rem;
	margin: 0.15em 0.15em 0.15em 0;
	border-radius: var(--rte-border-radius);
	border: 1px solid transparent;
	font-weight: 500;
	text-decoration: none !important;
	line-height: 1.5;
}

a.btn-default    { background: var(--rte-default);    border-color: #ced4da; color: #212529; }
a.btn-primary    { background: var(--rte-primary);    color: #fff; }
a.btn-secondary  { background: var(--rte-secondary);  color: #fff; }
a.btn-tertiary   { background: var(--rte-tertiary);   color: #fff; }
a.btn-quaternary { background: var(--rte-quaternary); color: #fff; }
a.btn-success    { background: var(--rte-success);    color: #fff; }
a.btn-info       { background: var(--rte-info);       color: #212529; }
a.btn-warning    { background: var(--rte-warning);    color: #212529; }
a.btn-danger     { background: var(--rte-danger);     color: #fff; }

/* Outline-variants: same color as above, but only  border+text */
a.btn-outline-default    { background: transparent; border-color: #ced4da;               color: #495057; }
a.btn-outline-primary    { background: transparent; border-color: var(--rte-primary);    color: var(--rte-primary); }
a.btn-outline-secondary  { background: transparent; border-color: var(--rte-secondary);  color: var(--rte-secondary); }
a.btn-outline-tertiary   { background: transparent; border-color: var(--rte-tertiary);   color: var(--rte-tertiary); }
a.btn-outline-quaternary { background: transparent; border-color: var(--rte-quaternary); color: var(--rte-quaternary); }
a.btn-outline-success    { background: transparent; border-color: var(--rte-success);    color: var(--rte-success); }
a.btn-outline-info       { background: transparent; border-color: var(--rte-info);       color: #0a7d96; }
a.btn-outline-warning    { background: transparent; border-color: var(--rte-warning);    color: #997404; }
a.btn-outline-danger     { background: transparent; border-color: var(--rte-danger);     color: var(--rte-danger); }

/* --------------------------------------------------------------------------
   Button hover & active states
   -------------------------------------------------------------------------- */

/* Solid buttons: darken automatically on hover/active, works for every color */
a.btn {
  transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

a.btn-default,
a.btn-primary,
a.btn-secondary,
a.btn-tertiary,
a.btn-quaternary,
a.btn-success,
a.btn-info,
a.btn-warning,
a.btn-danger {
	filter: brightness(1);
}

a.btn-default:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.btn-tertiary:hover,
a.btn-quaternary:hover,
a.btn-success:hover,
a.btn-info:hover,
a.btn-warning:hover,
a.btn-danger:hover {
	filter: brightness(0.92);

}

a.btn-default:active,
a.btn-primary:active,
a.btn-secondary:active,
a.btn-tertiary:active,
a.btn-quaternary:active,
a.btn-success:active,
a.btn-info:active,
a.btn-warning:active,
a.btn-danger:active {
	filter: brightness(0.82);
}

/* Outline buttons: fill on hover, like Bootstrap's outline behavior */
a.btn-outline-default:hover {
	background: var(--rte-default);
	border-color: #ced4da;
	color: #212529;
}
a.btn-outline-primary:hover    { background: var(--rte-primary);    border-color: var(--rte-primary);    color: #fff; }
a.btn-outline-secondary:hover  { background: var(--rte-secondary);  border-color: var(--rte-secondary);  color: #fff; }
a.btn-outline-tertiary:hover   { background: var(--rte-tertiary);   border-color: var(--rte-tertiary);   color: #fff; }
a.btn-outline-quaternary:hover { background: var(--rte-quaternary); border-color: var(--rte-quaternary); color: #fff; }
a.btn-outline-success:hover    { background: var(--rte-success);    border-color: var(--rte-success);    color: #fff; }
a.btn-outline-info:hover       { background: var(--rte-info);       border-color: var(--rte-info);       color: #212529; }
a.btn-outline-warning:hover    { background: var(--rte-warning);    border-color: var(--rte-warning);    color: #212529; }
a.btn-outline-danger:hover     { background: var(--rte-danger);     border-color: var(--rte-danger);     color: #fff; }

/* Active = same fill as hover, just slightly darkened via color-mix() */
a.btn-outline-default:active {
  background: color-mix(in srgb, var(--rte-default) 85%, black);
  border-color: #adb5bd;
  color: #212529;
}
a.btn-outline-primary:active    { background: color-mix(in srgb, var(--rte-primary) 85%, black);    border-color: color-mix(in srgb, var(--rte-primary) 85%, black);    color: #fff; }
a.btn-outline-secondary:active  { background: color-mix(in srgb, var(--rte-secondary) 85%, black);  border-color: color-mix(in srgb, var(--rte-secondary) 85%, black);  color: #fff; }
a.btn-outline-tertiary:active   { background: color-mix(in srgb, var(--rte-tertiary) 85%, black);   border-color: color-mix(in srgb, var(--rte-tertiary) 85%, black);   color: #fff; }
a.btn-outline-quaternary:active { background: color-mix(in srgb, var(--rte-quaternary) 85%, black); border-color: color-mix(in srgb, var(--rte-quaternary) 85%, black); color: #fff; }
a.btn-outline-success:active    { background: color-mix(in srgb, var(--rte-success) 85%, black);    border-color: color-mix(in srgb, var(--rte-success) 85%, black);    color: #fff; }
a.btn-outline-info:active       { background: color-mix(in srgb, var(--rte-info) 85%, black);       border-color: color-mix(in srgb, var(--rte-info) 85%, black);       color: #212529; }
a.btn-outline-warning:active    { background: color-mix(in srgb, var(--rte-warning) 85%, black);    border-color: color-mix(in srgb, var(--rte-warning) 85%, black);    color: #212529; }
a.btn-outline-danger:active     { background: color-mix(in srgb, var(--rte-danger) 85%, black);     border-color: color-mix(in srgb, var(--rte-danger) 85%, black);     color: #fff; }

/* Keyboard focus visibility for all button variants */
a.btn:focus-visible {
	outline: 2px solid var(--rte-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Links with icon-classes (only generic placeholder per ::after,
   real icon-sets have to be done project-specific )
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Links with icon classes (Unicode-based, dependency-free —
   swap for a real icon font/SVG sprite on a per-project basis if needed)
   -------------------------------------------------------------------------- */
a.link-arrow::after    { content: " \2192";  } /* →  */
a.link-chevron::after  { content: " \203A";  } /* ›  */
a.link-page::after     { content: " \1F4C4"; } /* 📄 */
a.link-folder::after   { content: " \1F4C1"; } /* 📁 */
a.link-file::after     { content: " \1F4CE"; } /* 📎 */
a.link-external::after { content: " \2197";  } /* ↗  */
a.link-mail::after     { content: " \2709";  } /* ✉  */
a.link-globe::after    { content: " \1F310"; } /* 🌐 */

a.link-arrow::after,
a.link-chevron::after,
a.link-page::after,
a.link-folder::after,
a.link-file::after,
a.link-external::after,
a.link-mail::after,
a.link-globe::after {
	filter: grayscale(1);
	font-size: 0.85em;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   tables (.table-striped, .table-bordered, .table-condensed)
   -------------------------------------------------------------------------- */
table.table-striped tr:nth-of-type(odd) {
	background: rgba(0, 0, 0, 0.03);
}

table.table-bordered,
table.table-bordered td,
table.table-bordered th {
	border: 1px solid #dee2e6;
}

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

/* row- and cell status */
tr.table-active,   td.table-active   { background-color: rgba(0, 0, 0, 0.08); }
tr.table-success,  td.table-success  { background-color: rgba(25, 135, 84, 0.15); }
tr.table-info,     td.table-info     { background-color: rgba(13, 202, 240, 0.15); }
tr.table-warning,  td.table-warning  { background-color: rgba(255, 193, 7, 0.2); }
tr.table-danger,   td.table-danger   { background-color: rgba(220, 53, 69, 0.15); }

/* --------------------------------------------------------------------------
   lists (.list-*)
   -------------------------------------------------------------------------- */
ul.list-unstyled {
	list-style: none;
	padding-left: 0;
}

ul.list-inline {
	list-style: none;
	padding-left: 0;
}
ul.list-inline > li {
	display: inline-block;
	margin-right: 0.75rem;
}

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

/* --------------------------------------------------------------------------
   text-utilities (span.*)
   -------------------------------------------------------------------------- */

.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-secondary); }
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); }

/* ==========================================================================
   Legacy-Styles (from old dynamiccss.css / htmlArea RTE)
   ========================================================================== */

p.weissaufrot { background-color: #cc3333; color: #ffffff; }
p.blauhgr { background-color: #3333cc; }
span.roteschrift { color: #cc3333; }
span.sehrgross { font-size: 18px; }

/* numbering styles */
ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }
ol.action-items-ordered    { color: #8A0020; list-style-type: lower-greek; }

/* inline-text colors */
span.important { color: #8A0020; }
span.name-of-person { color: #10007B; }
span.detail { color: #186900; }


.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;
}