/* basis.css – abgeschlossen, nur bei HTML-Standardänderungen anfassen 
 * abgesegnet von seiner Heiligkeit chatgpt_v5.2 */
/* ============================================================
 *  basis.css
 *
 *  feierlich geprüft, für gut befunden und abgesegnet
 *  durch seine Durchlaucht:
 *  chatgpt_v5.2 – Hüter der Variablen,
 *  Bewahrer der Breakpoints,
 *  Schutzpatron sauberer Stylesheets 😇
 *
 *  Möge dieses CSS stets:
 *  – konsistent bleiben
 *  – nicht ausufern
 *  – und niemals !important missbrauchen
 *
 *  Amen.
 * ============================================================ */
:root {
  --font-sans-serif: system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-monospace: monospace, Courier New;
  --font-size: 1rem;
  --font-weight: 400;
  --line-height: 1.5;
  --body-font-family: var(--font-sans-serif);
  --body-font-size: var(--font-size);
  --body-font-weight: var(--font-weight);
  --body-line-height: var(--line-height);
  --body-font-color: var(--schwarz-hex);
  --body-background: var(--weiss-hex);
  --border-style: solid;
  --border-width: 1px;
  --border-color: var(--gray-2);
  --border-radius:     7px;
  --border-radius-sm:  5px;
  --border-radius-md:  12px;
  --border-radius-lg:  16px;
  --border-radius-xl:  20px;
  --border-radius-2xl: 24px;
  --weiss-hex:   #ffffff;
  --weiss-rgb:   255, 255, 255;
  --weiss-1:     #f2f2f2;
  --weiss-2:     #d9d9d9;
  --grau-hex:    #cccccc;
  --grau-rgb:    204, 204, 204;
  --grau-1:      #b3b3b3;
  --grau-2:      #999999;
  --schwarz-hex: #000000;
  --schwarz-rgb: 0, 0, 0;
  --gray-1:      #f8f9fa;
  --gray-2:      #e9ecef;
  --gray-3:      #dee2e6;
  --gray-4:      #adb5bd;
  --gray-5:      #6c757d;
  --gray-hex:    #6c757d;
  --gray-rgb:    108, 117, 125;
  --gray-6:      #495057;
  --gray-7:      #343a40;
  --rot-1:       #fda4af;
  --rot-2:       #fb7185;
  --rot-3:       #e11d48;
  --rot-hex:     #e11d48;
  --rot-rgb:     220, 53, 69;
  --rot-4:       #f43f5e;
  --rot-5:       #be123c;
  --rot-6:       #9f1239;
  --rot-7:       #881337;
  --green-1:     #d1e7dd;
  --green-2:     #a3cfbb;
  --green-3:     #75b798;
  --green-4:     #198754;
  --green-hex:   #198754;
  --green-rgb:   25, 135, 84;
  --green-5:     #146c43;
  --green-6:     #0f5132;
  --green-7:     #0a3622;
  --blue-1:      #cfe2ff;
  --blue-2:      #9ec5fe;
  --blue-3:      #6ea8fe;
  --blue-4:      #0d6efd;
  --blue-hex:    #0d6efd;
  --blue-rgb:    13, 110, 253;
  --blue-5:      #0a58ca;
  --blue-6:      #084298;
  --blue-7:      #052c65;
  --pink-1:      #f7d6e6;
  --pink-2:      #eeaeca;
  --pink-3:      #e275ad;
  --pink-4:      #d63384;
  --pink-hex:    #d63384;
  --pink-rgb:    214, 51, 132;
  --pink-5:      #ab296a;
  --pink-6:      #801f52;
  --pink-7:      #561538;
  --purple-1:    #e2d9f3;
  --purple-2:    #c5b3e6;
  --purple-3:    #a98eda;
  --purple-4:    #6f42c1;
  --purple-hex:  #6f42c1;
  --purple-rgb:  111, 66, 193;
  --purple-5:    #59359a;
  --purple-6:    #432874;
  --purple-7:    #2e1a4d;
  --yellow-1:    #fff3cd;
  --yellow-2:    #ffe69c;
  --yellow-3:    #ffda6a;
  --yellow-4:    #ffc107;
  --yellow-hex:  #ffc107;
  --yellow-rgb:  255, 193, 7;
  --yellow-5:    #cc9a06;
  --yellow-6:    #997404;
  --yellow-7:    #664d03;
  --orange-1:    #ffe5d0;
  --orange-2:    #fecba1;
  --orange-3:    #fea772;
  --orange-4:    #fd7e14;
  --orange-hex:  #fd7e14;
  --orange-rgb:  253, 126, 20;
  --orange-5:    #cc650f;
  --orange-6:    #994c0b;
  --orange-7:    #663208;
  --teal-1:      #d2f4ea;
  --teal-2:      #a6e9d5;
  --teal-3:      #79dfc0;
  --teal-4:      #20c997;
  --teal-hex:    #20c997;
  --teal-rgb:    32, 201, 151;
  --teal-5:      #198754;
  --teal-6:      #146c43;
  --teal-7:      #0f5132;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  --body-margin-x: 0;
  --body-margin-y: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  text-align: left;
  color: var(--body-font-color);
  background-color: var(--body-background);
  margin: var(--body-margin-y) var(--body-margin-x);
}
/* =============================================================================
 * Überschriften h1 - h6 dienen zur semantischen Gliederung des Inhalts 
 * Klassen .h1 - .h6 dienen lediglich zur visuellen Hervorhebung 
 * ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
h1, .h1 {
  font-size: 2.5rem;
}
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
h2, .h2 {
  font-size: 2rem;
}
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
h3, .h3 {
  font-size: 1.75rem;
}
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
h4, .h4 {
  font-size: 1.5rem;
}
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}
strong, .strong {
	font-weight: bold;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
.lead {
	 font-size: 1.25rem;
	 font-weight: 300;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 0;
  margin-right: 0;
  border: 0;
  border-top: solid 1px #999999;
}

.cleaner {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.cleaner-md {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
	.cleaner-lg {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.cleaner-xl {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
 .cleaner-2xl {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
 .cleaner-3xl {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
 .cleaner-4xl {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
.bg-light {
 background-color: var(--weiss-1);
}

button.scroll-link {
		cursor: pointer;
	}

address {
  font-style: normal;
  line-height: inherit;
  margin-bottom: 1rem;
}

blockquote {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 1rem;
}

abbr[title] {
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: help;
}

b, strong {
  font-weight: bolder;
}

cite {
  font-weight: bold;
  font-style: italic;
}
details summary {
	width: 150px;
	cursor: pointer;
}
pre, code, kbd, samp {
  font-family: var(--font-monospace);
  font-size: inherit;
}
code.code-text {
 color: var(--pink-5);
 font-size: 1rem;
}

	.code-tag {
		color: var(--pink-4);
	}
	.code-tag::before {
		content: "<";
	}
	.code-tag::after {
		content: ">";
	}

kbd {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 5px;
  padding-left: 5px;
  border: var(--border-style) var(--border-width) #454545;
  border-radius: 5px;
}
 .footer-links a {
  color: #222;
 }

/* Helferlein - Listen */
ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

ol ol, ol ul, ul ul, ul ol {
  margin-bottom: 0;
}

.unstyled {
  list-style: none;
  padding-left: 0;
}

.h-styled {
  padding-left: 0;
  list-style: none;
}

.h-styled-item {
  display: inline-block;
}

.h-styled-item:not(:last-child) {
  margin-right: 0.5rem;
}

.listgroup {
  --var-listgroup-color: #242526;
  --var-listgroup-background: #fff;
  --var-listgroup-border-width: 1px;
  --var-listgroup-border-color: #e9ecef;
  --var-listgroup-border-radius: 12px;
  --var-listgroup-padding-x: 0.75rem;
  --var-listgroup-padding-y: 0.5rem;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--var-listgroup-border-radius);
}

.listgroup-item {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--var-listgroup-color);
  text-decoration: none;
  background-color: var(--var-listgroup-background);
  border: solid 1px #e9ecef;
}

.listgroup-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.listgroup-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.listgroup-item + .listgroup-item {
  border-top-width: 0;
}

/* Helferlein: figure, .figure-img figcaption, img, img-fluid, .img-vorschau */
figure {
--fig-border-width: 1px;
--fig-border-style: solid;
--fig-border-color: var(--schwarz-hex);
	margin: 0 0 0 1rem;
}
.figure-img {
	display: inline-block;
}
.figure-img img {
	margin-bottom: 0.5rem;
 line-height: 1;
}
figcaption {
  font-size: 0.875em;
  color: var(--body-font-color);
}

img {
	vertical-align: middle;
}
.img-fluid {
	max-width: 100%;
	height: auto;
}
.img-vorschau {
	padding: 0.25rem;
 background-color: var(--body-background);
 border: var(--fig-border-width) var(--fig-border-style) var(--fig-border-color);
 border-radius: var(--border-radius);
 max-width: 100%;
 height: auto;
}
/* Textausrichtungen ========================= */
.text-start {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-top {
  vertical-align: top;
}
.text-middle {
  vertical-align: middle;
}
.text-bottom {
  vertical-align: bottom
}
/* Ende Textausrichtungen ====================== */

/* layout-styles.css – abgeschlossen & versiegelt
 * regelt ausschließlich Layout (Container, Rows, Columns)
 * keine UI, keine Farben, keine Effekte
 *
 * geprüft und abgesegnet vom
 * FeinschliffMonster 😇
 *
 * wer hier noch etwas ergänzt,
 * möge vorher drei gute Gründe nennen
 */
:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-3xl: 1600px;
  --breakpoint-4xl: 1800px;
}

.container, .container-sm, .container-md, .container-lg, .container-xl, .container-2xl, .container-3xl, .container-4xl, .container-full {
  --margin-x: auto;
  --padding-x: 0.75rem;
  width: 100%;
  margin-left: var(--margin-x);
  margin-right: var(--margin-x);
  padding-left: var(--padding-x);
  padding-right: var(--padding-x);
}

@media (max-width: 576px) {
.container, .container-sm {
  max-width: 540px;
}
}

@media (max-width: 768px) {
.container, .container-sm, .container-md {
  max-width: 720px;
}
}

@media (max-width: 992px) {
.container, .container-sm, .container-md, .container-lg {
  max-width: 960px;
}
}

@media (max-width: 1200px) {
.container, .container-sm, .container-md, .container-lg, .container-xl {
  max-width: 1140px;
}
}

@media (max-width: 1400px) {
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-2xl {
  max-width: 1320px;
}
}

@media (max-width: 1600px) {
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-2xl, .container-3xl {
  max-width: 1580px;
}
}

@media (min-width: 1800px) {
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-2xl, .container-3xl, .container-4xl {
  max-width: 1780px;
}
}

.row {
  --row-margin-x: 1.5rem;
  --row-margin-y: 0;
  --row-padding-x: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--row-margin-y));
  margin-left: calc(-0.5 * var(--row-margin-x));
  margin-right: calc(-0.5 * var(--row-margin-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--row-padding-x) * 0.5);
  padding-right: calc(var(--row-padding-x) * 0.5);
  margin-top: var(--row-margin-y);
}

.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}

@media (min-width: 576px) {
.col-sm {
  flex: 1 0 0%;
}

.col-sm-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-sm-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-sm-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-sm-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-sm-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-sm-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-sm-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-sm-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-sm-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-sm-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-sm-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-sm-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-sm-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-sm-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-sm-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-sm-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-sm-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-sm-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-sm-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-sm-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
}

@media (min-width: 768px) {
.col-md {
  flex: 1 0 0%;
}

.col-md-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-md-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-md-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-md-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-md-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-md-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-md-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-md-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-md-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-md-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-md-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-md-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-md-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-md-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-md-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-md-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-md-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-md-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-md-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-md-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
}

@media (min-width: 992px) {
.col-lg {
  flex: 1 0 0%;
}

.col-lg-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-lg-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-lg-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-lg-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-lg-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-lg-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-lg-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-lg-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-lg-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-lg-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-lg-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-lg-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-lg-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-lg-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-lg-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-lg-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-lg-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-lg-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-lg-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-lg-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
}

@media (min-width: 1200px) {
.col-xl {
  flex: 1 0 0%;
}

.col-xl-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-xl-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-xl-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-xl-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-xl-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-xl-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-xl-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-xl-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-xl-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-xl-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-xl-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-xl-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-xl-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-xl-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-xl-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-xl-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-xl-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-xl-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-xl-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-xl-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
}

@media (min-width: 1400px) {
.col-2xl {
  flex: 1 0 0%;
}

.col-2xl-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-2xl-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2xl-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-2xl-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-2xl-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-2xl-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-2xl-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-2xl-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-2xl-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-2xl-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-2xl-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-2xl-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-2xl-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2xl-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-2xl-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2xl-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-2xl-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-2xl-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-2xl-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-2xl-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
}

@media (min-width: 1600px) {
.col-3xl {
  flex: 1 0 0%;
}

.col-3xl-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-3xl-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-3xl-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3xl-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-3xl-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-3xl-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-3xl-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-3xl-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-3xl-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-3xl-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-3xl-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-3xl-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-3xl-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-3xl-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-3xl-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-3xl-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3xl-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-3xl-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-3xl-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-3xl-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
}

@media (min-width: 1800px) {
.col-4xl {
  flex: 1 0 0%;
}

.col-4xl-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-4xl-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-4xl-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-4xl-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4xl-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-4xl-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-4xl-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-4xl-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-4xl-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-4xl-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-4xl-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-4xl-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-4xl-12 {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-4xl-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-4xl-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-4xl-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-4xl-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-4xl-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-4xl-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-4xl-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
}

/* Helferlein: Ausrichtung - Text */
.text-start {
  text-align: left;
}

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

.text-end {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-top {
  vertical-align: top;
}

.text-middle {
  vertical-align: middle;
}

.text-bottom {
  vertical-align: bottom;
}

/* Helferlein: Ausrichtung - Elemente wie Button */
.ausrichten-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ausrichten-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ausrichten-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.ausrichten-gleich {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
 * Flex- & Ausrichtungs-Helferlein
 *
 * geprüft, durchdacht und mit klarem Verstand gestaltet
 * keine Magie, keine Seiteneffekte, keine Überraschungen
 *
 * Regeln:
 * – Display aktiviert Layout, Helferlein modifizieren es
 * – Shortcuts existieren, aber die Quelle bleibt erkennbar
 * – Tabellen bleiben Tabellen
 *
 * Dieser Abschnitt gilt als:
 * ABGESCHLOSSEN & GESEGNET
 *
 * Wer hier Änderungen vornimmt,
 * möge wissen, was er tut – und warum.
 * ============================================================ */

.d-block {
 display: block;
}

.d-inline {
 display: inline;
}

.d-inline-block {
 display: inline-block;
}

.d-flex {
 display: flex;
}

.d-contents {
  display: contents;
}

.d-inline-flex {
 display: inline-flex;
}

/* =================================================
 * Display-Helferlein: Tabellen
 * nur für tabellarische Darstellung gedacht
 * kein Layout-Ersatz für Grid oder Flex
 =================================================== */

.d-table {
 display: table;
}

.d-inline-table {
 display: inline-table;
}

.d-table-caption {
 display: table-caption;
}

.d-table-cell {
 display: table-cell;
}

.d-table-column {
 display: table-column;
}

.d-table-row {
 display: table-row;
}

.d-table-column-group {
 display: table-column-group;
}

.d-table-header-group {
 display: table-header-group;
}

.d-table-footer-group {
 display: table-footer-group;
}

.d-table-row-group {
 display: table-row-group;
}

.d-none {
 display: none;
}

.flex-direction-column, .flex-column {
 flex-direction: column;
}

.flex-direction-column-reverse, .flex-column-reverse {
 flex-direction: column-reverse;
}

.flex-direction-row, .flex-row {
 flex-direction: row;
}

.flex-direction-row-reverse, .flex-row-reverse {
 flex-direction: row-reverse;
}

/* ================================================== */

.align-items-baseline, .items-baseline {
 align-items: baseline;
}

.align-items-center, .items-center {
 align-items: center;
}

.align-items-flex-end, .items-flex-end {
 align-items: flex-end;
}

.align-items-flex-start, .items-flex-start {
 align-items: flex-start;
}

.align-items-stretch, .items-stretch {
  align-items: stretch;
}
/* ===================================================
 * Flex-Helferlein: align-content
 * wirkt nur bei mehrzeiligem Flex-Layout (flex-wrap)
 */

.align-content-center, .content-center {
 align-content: center;
}

.align-content-flex-end, .content-flex-end {
 align-content: flex-end;
}

.align-content-flex-start, .content-flex-start {
 align-content: flex-start;
}

.align-content-space-around, .content-space-around {
 align-content: space-around;
}

.align-content-space-between, .content-space-between {
 align-content: space-between;
}

.align-content-stretch, .content-stretch {
 align-content: stretch;
}

/* ========================================= */

.align-self-auto, .self-auto {
 align-self: auto;
}
.align-self-baseline, .self-baseline {
	align-self: baseline;
}
.align-self-center, .self-center {
	align-self: center;
}
.align-self-start, .self-start{
	align-self: flex-start;
}
.align-self-end, .self-end {
	align-self: flex-end;
}
.align-self-stretch, .self-stretch {
	align-self: stretch;
}

/* Helferlein: Abstaende */

:root {
	--gutter-0: 0;
	--gutter-sm: 0.125rem;
	--gutter-md: 0.25rem;
	--gutter-lg: 0.5rem;
	--gutter-xl: 0.75rem;
	--gutter-1: 1rem;
	--gutter-1sm: 1.125rem;
	--gutter-1md: 1.25rem;
	--gutter-1lg: 1.5rem;
	--gutter-1xl: 1.75rem;
	--gutter-2: 2rem;
	--gutter-2sm: 2.125rem;
	--gutter-2md: 2.25rem;
	--gutter-2lg: 2.5rem;
	--gutter-2xl: 2.75rem;
	--gutter-3: 3rem;
	--gutter-3sm: 3.125rem;
	--gutter-3md: 3.25rem;
	--gutter-3lg: 3.5rem;
	--gutter-3xl: 3.75rem;
	--gutter-4: 4rem;
	--gutter-4sm: 4.125rem;
	--gutter-4md: 4.25rem;
	--gutter-4lg: 4.5rem;
	--gutter-4xl: 4.75rem;
	--gutter-5: 5rem;
}

.g-0,
.gx-0 {
  --gutter-x: 0;
}

.g-0,
.gy-0 {
  --gutter-y: 0;
}

.gap {
	gap: auto;
}
.gap-0 {
	gap: var(--gutter-0);
}
.gap-sm {
	gap: var(--gutter-sm);
}
.gap-md {
	gap: var(--gutter-md);
}
.gap-lg {
	gap: var(--gutter-lg);
}
.gap-xl {
	gap: var(--gutter-xl);
}
.gap-1 {
	gap: var(--gutter-1);
}
.gap-1sm {
	gap: var(--gutter-1sm);
}
.gap-1md {
	gap: var(--gutter-1md);
}
.gap-1lg {
	gap: var(--gutter-1lg);
}
.gap-1xl {
	gap: var(--gutter-1xl);
}
.gap-2 {
	gap: var(--gutter-2);
}
.gap-2sm {
	gap: var(--gutter-2sm);
}
.gap-2md {
	gap: var(--gutter-2md);
}
.gap-2lg {
	gap: var(--gutter-2lg);
}
.gap-2xl {
	gap: var(--gutter-2xl);
}
.gap-3 {
	gap: var(--gutter-3);
}
.gap-3sm {
	gap: var(--gutter-3sm);
}
.gap-3md {
	gap: var(--gutter-3md);
}
.gap-3lg {
	gap: var(--gutter-3lg);
}
.gap-3xl {
	gap: var(--gutter-3xl);
}
.gap-4 {
	gap: var(--gutter-4);
}
.gap-4sm {
	gap: var(--gutter-4sm);
}
.gap-4md {
	gap: var(--gutter-4md);
}
.gap-4lg {
	gap: var(--gutter-4lg);
}
.gap-4xl {
	gap: var(--gutter-4xl);
}
.gap-5 {
	gap: var(--gutter-5);
}

/* Aussenabstand von Elemente */
:root {
	--space-auto: auto;
 --space-0: 0;
 --space-md: 0.25rem;
 --space-lg: 0.5rem;
 --space-xl: 0.75rem;
 --space-1: 1rem;
 --space-1md: 1.25rem;
 --space-1lg: 1.5rem;
 --space-1xl: 1.75rem;
 --space-2: 2rem;
 --space-2md: 2.25rem;
 --space-2lg: 2.5rem;
 --space-2xl: 2.75rem;
 --space-3: 3rem;
 --space-3md: 3.25rem;
 --space-3lg: 3.5rem;
 --space-3xl: 3.75rem;
 --space-4: 4rem;
 --space-4md: 4.25rem;
 --space-4lg: 4.5rem;
 --space-4xl: 4.75rem;
 --space-5: 5rem;
 --space-5md: 5.25rem;
 --space-5lg: 5.5rem;
 --space-5xl: 5.75rem;	
}

.m-auto {
  margin: auto;
}

.m-0 {
  margin: 0;
}

.m-md {
  margin: var(--space-md);
}

.m-lg {
  margin: var(--space-lg);
}

.m-xl {
  margin: var(--space-xl);
}

.m-1 {
  margin: var(--space-1);
}

.m-1md {
  margin: var(--space-1md);
}

.m-1lg {
  margin: var(--space-1lg);
}

.m-1xl {
  margin: var(--space-1xl);
}

.m-2 {
  margin: var(--space-2);
}

.m-2md {
  margin: var(--space-2md);
}

.m-2lg {
  margin: var(--space-2lg);
}

.m-2xl {
  margin: var(--space-2xl);
}

.m-3 {
  margin: var(--space-3);
}

.m-3md {
  margin: var(--space-3md);
}

.m-3lg {
  margin: var(--space-3lg);
}

.m-3xl {
  margin: var(--space-3xl);
}

.m-4 {
  margin: var(--space-4);
}

.m-4md {
  margin: var(--space-4md);
}

.m-4lg {
  margin: var(--space-4lg);
}

.m-4xl {
  margin: var(--space-4xl);
}

.m-5 {
  margin: var(--space-5);
}

.m-5md {
  margin: var(--space-5md);
}

.m-5lg {
  margin: var(--space-5lg);
}

.m-5xl {
  margin: var(--space-5xl);
}

.mt-0 {
  margin-top: var(--space-0);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mt-1 {
  margin-top: var(--space-1);
}

.mt-1md {
  margin-top: var(--space-1md);
}

.mt-1lg {
  margin-top: var(--space-1lg);
}

.mt-1xl {
  margin-top: var(--space-1xl);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-2md {
  margin-top: var(--space-2md);
}

.mt-2lg {
  margin-top: var(--space-2lg);
}

.mt-2xl {
  margin-top: var(--space-2xl);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-3md {
  margin-top: var(--space-3md);
}

.mt-3lg {
  margin-top: var(--space-3lg);
}

.mt-3xl {
  margin-top: var(--space-3xl);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-4md {
  margin-top: var(--space-4md);
}

.mt-4lg {
  margin-top: var(--space-4lg);
}

.mt-4xl {
  margin-top: var(--space-4xl);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-5md {
  margin-top: var(--space-5md);
}

.mt-5lg {
  margin-top: var(--space-5lg);
}

.mt-5xl {
  margin-top: var(--space-5xl);
}

.mb-0 {
  margin-bottom: var(--space-0);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-1md {
  margin-bottom: var(--space-1md);
}

.mb-1lg {
  margin-bottom: var(--space-1lg);
}

.mb-1xl {
  margin-bottom: var(--space-1xl);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-2md {
  margin-bottom: var(--space-2md);
}

.mb-2lg {
  margin-bottom: var(--space-2lg);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-3md {
  margin-bottom: var(--space-3md);
}

.mb-3lg {
  margin-bottom: var(--space-3lg);
}

.mb-3xl {
  margin-bottom: var(--space-3xl);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-4md {
  margin-bottom: var(--space-4md);
}

.mb-4lg {
  margin-bottom: var(--space-4lg);
}

.mb-4xl {
  margin-bottom: var(--space-4xl);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.mb-5md {
  margin-bottom: var(--space-5md);
}

.mb-5lg {
  margin-bottom: var(--space-5lg);
}

.mb-5xl {
  margin-bottom: var(--space-5xl);
}

.my-0 {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}

.my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.my-1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.my-1md {
  margin-top: var(--space-1md);
  margin-bottom: var(--space-1md);
}

.my-1lg {
  margin-top: var(--space-1lg);
  margin-bottom: var(--space-1lg);
}

.my-1xl {
  margin-top: var(--space-1xl);
  margin-bottom: var(--space-1xl);
}

.my-2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.my-2md {
  margin-top: var(--space-2md);
  margin-bottom: var(--space-2md);
}

.my-2lg {
  margin-top: var(--space-2lg);
  margin-bottom: var(--space-2lg);
}

.my-2xl {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.my-3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.my-3md {
  margin-top: var(--space-3md);
  margin-bottom: var(--space-3md);
}

.my-3lg {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.my-3xl {
  margin-top: var(--space-3lg);
  margin-bottom: var(--space-3lg);
}

.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.my-4md {
  margin-top: var(--space-4md);
  margin-bottom: var(--space-4md);
}

.my-4lg {
  margin-top: var(--space-4lg);
  margin-bottom: var(--space-4lg);
}

.my-4xl {
  margin-top: var(--space-4xl);
  margin-bottom: var(--space-4xl);
}

.my-5 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.my-5md {
  margin-top: var(--space-5md);
  margin-bottom: var(--space-5md);
}

.my-5lg {
  margin-top: var(--space-5lg);
  margin-bottom: var(--space-5lg);
}

.my-5xl {
  margin-top: var(--space-5xl);
  margin-bottom: var(--space-5xl);
}

.ms-auto {
  margin-left: var(--space-auto);
}

.ms-0 {
  margin-left: var(--space-0);
}

.ms-md {
  margin-left: var(--space-md);
}

.ms-lg {
  margin-left: var(--space-lg);
}

.ms-xl {
  margin-left: var(--space-xl);
}

.ms-1 {
  margin-left: var(--space-1);
}

.ms-1md {
  margin-left: var(--space-1md);
}

.ms-1lg {
  margin-left: var(--space-1lg);
}

.ms-1xl {
  margin-left: var(--space-1xl);
}

.ms-2 {
  margin-left: var(--space-2);
}

.ms-2md {
  margin-left: var(--space-2md);
}

.ms-2lg {
  margin-left: var(--space-2lg);
}

.ms-2xl {
  margin-left: var(--space-2xl);
}

.ms-3 {
  margin-left: var(--space-3);
}

.ms-3md {
  margin-left: var(--space-3md);
}

.ms-3lg {
  margin-left: var(--space-3lg);
}

.ms-3xl {
  margin-left: var(--space-3xl);
}

.ms-4 {
  margin-left: var(--space-4);
}

.ms-4md {
  margin-left: var(--space-4md);
}

.ms-4lg {
  margin-left: var(--space-4lg);
}

.ms-4xl {
  margin-left: var(--space-4xl);
}

.ms-5 {
  margin-left: var(--space-5);
}

.ms-5md {
  margin-left: var(--space-5md);
}

.ms-5lg {
  margin-left: var(--space-5lg);
}

.ms-5xl {
  margin-left: var(--space-5xl);
}

.me-auto {
  margin-right: var(--space-auto);
}

.me-0 {
  margin-right: var(--space-0);
}

.me-md {
  margin-right: var(--space-md);
}

.me-lg {
  margin-right: var(--space-lg);
}

.me-xl {
  margin-right: var(--space-xl);
}

.me-1 {
  margin-right: var(--space-1);
}

.me-1md {
  margin-right: var(--space-1md);
}

.me-1lg {
  margin-right: var(--space-1lg);
}

.me-1xl {
  margin-right: var(--space-1xl);
}

.me-2 {
  margin-right: var(--space-2);
}

.me-2md {
  margin-right: var(--space-2md);
}

.me-2lg {
  margin-right: var(--space-2lg);
}

.me-2xl {
  margin-right: var(--space-2xl);
}

.me-3 {
  margin-right: var(--space-3);
}

.me-3md {
  margin-right: var(--space-3md);
}

.me-3lg {
  margin-right: var(--space-3lg);
}

.me-3xl {
  margin-right: var(--space-3xl);
}

.me-4 {
  margin-right: var(--space-4);
}

.me-4md {
  margin-right: var(--space-4md);
}

.me-4lg {
  margin-right: var(--space-4lg);
}

.me-4xl {
  margin-right: var(--space-4xl);
}

.me-5 {
  margin-right: var(--space-5);
}

.me-5md {
  margin-right: var(--space-5md);
}

.me-5lg {
  margin-right: var(--space-5lg);
}

.me-5xl {
  margin-right: var(--space-5xl);
}

.mx-auto {
  margin-left: var(--space-auto);
  margin-right: var(--space-auto);
}

.mx-0 {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}

.mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

.mx-lg {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}

.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}

.mx-1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.mx-1md {
  margin-left: var(--space-1md);
  margin-right: var(--space-1md);
}

.mx-1lg {
  margin-left: var(--space-1lg);
  margin-right: var(--space-1lg);
}

.mx-1xl {
  margin-left: var(--space-1xl);
  margin-right: var(--space-1xl);
}

.mx-2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.mx-2md {
  margin-left: var(--space-2md);
  margin-right: var(--space-2md);
}

.mx-2lg {
  margin-left: var(--space-2lg);
  margin-right: var(--space-2lg);
}

.mx-2xl {
  margin-left: var(--space-2xl);
  margin-right: var(--space-2xl);
}

.mx-3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.mx-3md {
  margin-left: var(--space-3md);
  margin-right: var(--space-3md);
}

.mx-3lg {
  margin-left: var(--space-3lg);
  margin-right: var(--space-3lg);
}

.mx-3xl {
  margin-left: var(--space-3xl);
  margin-right: var(--space-3xl);
}

.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.mx-4md {
  margin-left: var(--space-4md);
  margin-right: var(--space-4md);
}

.mx-4lg {
  margin-left: var(--space-4lg);
  margin-right: var(--space-4lg);
}

.mx-4xl {
  margin-left: var(--space-4xl);
  margin-right: var(--space-4xl);
}

.mx-5 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.mx-5md {
  margin-left: var(--space-5md);
  margin-right: var(--space-5md);
}

.mx-5lg {
  margin-left: var(--space-5lg);
  margin-right: var(--space-5lg);
}

.mx-5xl {
  margin-left: var(--space-5xl);
  margin-right: var(--space-5xl);
}

/* Innenabstand von Elemente */
:root {
	--spacing-0: 0;
 --spacing-xs: 0.125rem;
 --spacing-sm: 0.25rem;
 --spacing-md: 0.375rem;
 --spacing-lg: 0.5rem;
 --spacing-xl: 0.75rem;
 --spacing-1: 1rem;
 --spacing-1xs: 1.125rem;
 --spacing-1sm: 1.25rem;
 --spacing-1md: 1.375rem;
 --spacing-1lg: 1.5rem;
 --spacing-1xl: 1.75rem;
 --spacing-2: 2rem;
 --spacing-2xs: 2.125rem;
 --spacing-2sm: 2.25rem;
 --spacing-2md: 2.375rem;
 --spacing-2lg: 2.5rem;
 --spacing-2xl: 2.75rem;
 --spacing-3: 3rem;
 --spacing-3xs: 3.125rem;
 --spacing-3sm: 3.25rem;
 --spacing-3md: 3.375rem;
 --spacing-3lg: 3.5rem;
 --spacing-3xl: 3.75rem;
 --spacing-4: 4rem;
 --spacing-4xs: 4.125rem;
 --spacing-4sm: 4.25rem;
 --spacing-4md: 4.375rem;
 --spacing-4lg: 4.5rem;
 --spacing-4xl: 4.75rem;
 --spacing-5: 5rem;
 --spacing-5xs: 5.125rem;
 --spacing-5sm: 5.25rem;
 --spacing-5md: 5.375rem;
 --spacing-5lg: 5.5rem;
 --spacing-5xl: 5.75rem;	
}

.p-0 {
  padding: var(--spacing-0);
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-1 {
  padding: var(--spacing-1);
}

.p-1xs {
  padding: var(--spacing-1xs);
}

.p-1sm {
  padding: var(--spacing-1sm);
}

.p-1md {
  padding: var(--spacing-1md);
}

.p-1lg {
  padding: var(--spacing-1lg);
}

.p-1xl {
  padding: var(--spacing-1xl);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-2xs {
  padding: var(--spacing-2xs);
}

.p-2sm {
  padding: var(--spacing-2sm);
}

.p-2md {
  padding: var(--spacing-2md);
}

.p-2lg {
  padding: var(--spacing-2lg);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-3xs {
  padding: var(--spacing-3xs);
}

.p-3sm {
  padding: var(--spacing-3sm);
}

.p-3md {
  padding: var(--spacing-3md);
}

.p-3lg {
  padding: var(--spacing-3lg);
}

.p-3xl {
  padding: var(--spacing-3xl);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-4xs {
  padding: var(--spacing-4xs);
}

.p-4sm {
  padding: var(--spacing-4sm);
}

.p-4md {
  padding: var(--spacing-4md);
}

.p-4lg {
  padding: var(--spacing-4lg);
}

.p-4xl {
  padding: var(--spacing-4xl);
}

.p-5 {
  padding: var(--spacing-5);
}

.p-5xs {
  padding: var(--spacing-5xs);
}

.p-5sm {
  padding: var(--spacing-5sm);
}

.p-5md {
  padding: var(--spacing-5md);
}

.p-5lg {
  padding: var(--spacing-5lg);
}

.p-5xl {
  padding: var(--spacing-5xl);
}

.pt-0 {
  padding-top: var(--spacing-0);
}

.pt-xs {
  padding-top: var(--spacing-xs);
}

.pt-sm {
  padding-top: var(--spacing-sm);
}

.pt-md {
  padding-top: var(--spacing-md);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

.pt-1 {
  padding-top: var(--spacing-1);
}

.pt-1xs {
  padding-top: var(--spacing-1xs);
}

.pt-1sm {
  padding-top: var(--spacing-1sm);
}

.pt-1md {
  padding-top: var(--spacing-1md);
}

.pt-1lg {
  padding-top: var(--spacing-1lg);
}

.pt-1xl {
  padding-top: var(--spacing-1xl);
}

.pt-2 {
  padding-top: var(--spacing-2);
}

.pt-2xs {
  padding-top: var(--spacing-2xs);
}

.pt-2sm {
  padding-top: var(--spacing-2sm);
}

.pt-2md {
  padding-top: var(--spacing-2md);
}

.pt-2lg {
  padding-top: var(--spacing-2lg);
}

.pt-2xl {
  padding-top: var(--spacing-2xl);
}

.pt-3 {
  padding-top: var(--spacing-3);
}

.pt-3xs {
  padding-top: var(--spacing-3xs);
}

.pt-3sm {
  padding-top: var(--spacing-3sm);
}

.pt-3md {
  padding-top: var(--spacing-3md);
}

.pt-3lg {
  padding-top: var(--spacing-3lg);
}

.pt-3xl {
  padding-top: var(--spacing-3xl);
}

.pt-4 {
  padding-top: var(--spacing-4);
}

.pt-4xs {
  padding-top: var(--spacing-4xs);
}

.pt-4sm {
  padding-top: var(--spacing-4sm);
}

.pt-4md {
  padding-top: var(--spacing-4md);
}

.pt-4lg {
  padding-top: var(--spacing-4lg);
}

.pt-4xl {
  padding-top: var(--spacing-4xl);
}

.pt-5 {
  padding-top: var(--spacing-5);
}

.pt-5xs {
  padding-top: var(--spacing-5xs);
}

.pt-5sm {
  padding-top: var(--spacing-5sm);
}

.pt-5md {
  padding-top: var(--spacing-5md);
}

.pt-5lg {
  padding-top: var(--spacing-5lg);
}

.pt-5xl {
  padding-top: var(--spacing-5xl);
}

.pb-0 {
  padding-bottom: var(--spacing-0);
}

.pb-xs {
  padding-bottom: var(--spacing-xs);
}

.pb-sm {
  padding-bottom: var(--spacing-sm);
}

.pb-md {
  padding-bottom: var(--spacing-md);
}

.pb-lg {
  padding-bottom: var(--spacing-lg);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pb-1 {
  padding-bottom: var(--spacing-1);
}

.pb-1xs {
  padding-bottom: var(--spacing-1xs);
}

.pb-1sm {
  padding-bottom: var(--spacing-1sm);
}

.pb-1md {
  padding-bottom: var(--spacing-1md);
}

.pb-1lg {
  padding-bottom: var(--spacing-1lg);
}

.pb-1xl {
  padding-bottom: var(--spacing-1xl);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

.pb-2xs {
  padding-bottom: var(--spacing-2xs);
}

.pb-2sm {
  padding-bottom: var(--spacing-2sm);
}

.pb-2md {
  padding-bottom: var(--spacing-2md);
}

.pb-2lg {
  padding-bottom: var(--spacing-2lg);
}

.pb-2xl {
  padding-bottom: var(--spacing-2xl);
}

.pb-3 {
  padding-bottom: var(--spacing-3);
}

.pb-3xs {
  padding-bottom: var(--spacing-3xs);
}

.pb-3sm {
  padding-bottom: var(--spacing-3sm);
}

.pb-3md {
  padding-bottom: var(--spacing-3md);
}

.pb-3lg {
  padding-bottom: var(--spacing-3lg);
}

.pb-3xl {
  padding-bottom: var(--spacing-3xl);
}

.pb-4 {
  padding-bottom: var(--spacing-4);
}

.pb-4xs {
  padding-bottom: var(--spacing-4xs);
}

.pb-4sm {
  padding-bottom: var(--spacing-4sm);
}

.pb-4md {
  padding-bottom: var(--spacing-4md);
}

.pb-4lg {
  padding-bottom: var(--spacing-4lg);
}

.pb-4xl {
  padding-bottom: var(--spacing-4xl);
}

.pb-5 {
  padding-bottom: var(--spacing-5);
}

.pb-5xs {
  padding-bottom: var(--spacing-5xs);
}

.pb-5sm {
  padding-bottom: var(--spacing-5sm);
}

.pb-5md {
  padding-bottom: var(--spacing-5md);
}

.pb-5lg {
  padding-bottom: var(--spacing-5lg);
}

.pb-5xl {
  padding-bottom: var(--spacing-5xl);
}

.py-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.py-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.py-1xs {
  padding-top: var(--spacing-1xs);
  padding-bottom: var(--spacing-1xs);
}

.py-1sm {
  padding-top: var(--spacing-1sm);
  padding-bottom: var(--spacing-1sm);
}

.py-1md {
  padding-top: var(--spacing-1md);
  padding-bottom: var(--spacing-1md);
}

.py-1lg {
  padding-top: var(--spacing-1lg);
  padding-bottom: var(--spacing-1lg);
}

.py-1xl {
  padding-top: var(--spacing-1xl);
  padding-bottom: var(--spacing-1xl);
}

.py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.py-2xs {
  padding-top: var(--spacing-2xs);
  padding-bottom: var(--spacing-2xs);
}

.py-2sm {
  padding-top: var(--spacing-2sm);
  padding-bottom: var(--spacing-2sm);
}

.py-2md {
  padding-top: var(--spacing-2md);
  padding-bottom: var(--spacing-2md);
}

.py-2lg {
  padding-top: var(--spacing-2lg);
  padding-bottom: var(--spacing-2lg);
}

.py-2xl {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

.py-3xs {
  padding-top: var(--spacing-3xs);
  padding-bottom: var(--spacing-3xs);
}

.py-3sm {
  padding-top: var(--spacing-3sm);
  padding-bottom: var(--spacing-3sm);
}

.py-3md {
  padding-top: var(--spacing-3md);
  padding-bottom: var(--spacing-3md);
}

.py-3lg {
  padding-top: var(--spacing-3lg);
  padding-bottom: var(--spacing-3lg);
}

.py-3xl {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.py-4xs {
  padding-top: var(--spacing-4xs);
  padding-bottom: var(--spacing-4xs);
}

.py-4sm {
  padding-top: var(--spacing-4sm);
  padding-bottom: var(--spacing-4sm);
}

.py-4md {
  padding-top: var(--spacing-4md);
  padding-bottom: var(--spacing-4md);
}

.py-4lg {
  padding-top: var(--spacing-4lg);
  padding-bottom: var(--spacing-4lg);
}

.py-4xl {
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
}

.py-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

.py-5xs {
  padding-top: var(--spacing-5xs);
  padding-bottom: var(--spacing-5xs);
}

.py-5sm {
  padding-top: var(--spacing-5sm);
  padding-bottom: var(--spacing-5sm);
}

.py-5md {
  padding-top: var(--spacing-5md);
  padding-bottom: var(--spacing-5md);
}

.py-5lg {
  padding-top: var(--spacing-5lg);
  padding-bottom: var(--spacing-5lg);
}

.py-5xl {
  padding-top: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
}

.ps-0 {
  padding-left: var(--spacing-0);
}

.ps-xs {
  padding-left: var(--spacing-xs);
}

.ps-sm {
  padding-left: var(--spacing-sm);
}

.ps-md {
  padding-left: var(--spacing-md);
}

.ps-lg {
  padding-left: var(--spacing-lg);
}

.ps-xl {
  padding-left: var(--spacing-xl);
}

.ps-1 {
  padding-left: var(--spacing-1);
}

.ps-1xs {
  padding-left: var(--spacing-1xs);
}

.ps-1sm {
  padding-left: var(--spacing-1sm);
}

.ps-1md {
  padding-left: var(--spacing-1md);
}

.ps-1lg {
  padding-left: var(--spacing-1lg);
}

.ps-1xl {
  padding-left: var(--spacing-1xl);
}

.ps-2 {
  padding-left: var(--spacing-2);
}

.ps-2xs {
  padding-left: var(--spacing-2xs);
}

.ps-2sm {
  padding-left: var(--spacing-2sm);
}

.ps-2md {
  padding-left: var(--spacing-2md);
}

.ps-2lg {
  padding-left: var(--spacing-2lg);
}

.ps-2xl {
  padding-left: var(--spacing-2xl);
}

.ps-3 {
  padding-left: var(--spacing-3);
}

.ps-3xs {
  padding-left: var(--spacing-3xs);
}

.ps-3sm {
  padding-left: var(--spacing-3sm);
}

.ps-3md {
  padding-left: var(--spacing-3md);
}

.ps-3lg {
  padding-left: var(--spacing-3lg);
}

.ps-3xl {
  padding-left: var(--spacing-3xl);
}

.ps-4 {
  padding-left: var(--spacing-4);
}

.ps-4xs {
  padding-left: var(--spacing-4xs);
}

.ps-4sm {
  padding-left: var(--spacing-4sm);
}

.ps-4md {
  padding-left: var(--spacing-4md);
}

.ps-4lg {
  padding-left: var(--spacing-4lg);
}

.ps-4xl {
  padding-left: var(--spacing-4xl);
}

.ps-5 {
  padding-left: var(--spacing-5);
}

.ps-5xs {
  padding-left: var(--spacing-5xs);
}

.ps-5sm {
  padding-left: var(--spacing-5sm);
}

.ps-5md {
  padding-left: var(--spacing-5md);
}

.ps-5lg {
  padding-left: var(--spacing-5lg);
}

.ps-5xl {
  padding-left: var(--spacing-5xl);
}

.pe-0 {
  padding-right: var(--spacing-0);
}

.pe-xs {
  padding-right: var(--spacing-xs);
}

.pe-sm {
  padding-right: var(--spacing-sm);
}

.pe-md {
  padding-right: var(--spacing-md);
}

.pe-lg {
  padding-right: var(--spacing-lg);
}

.pe-xl {
  padding-right: var(--spacing-xl);
}

.pe-1 {
  padding-right: var(--spacing-1);
}

.pe-1xs {
  padding-right: var(--spacing-1xs);
}

.pe-1sm {
  padding-right: var(--spacing-1sm);
}

.pe-1md {
  padding-right: var(--spacing-1md);
}

.pe-1lg {
  padding-right: var(--spacing-1lg);
}

.pe-1xl {
  padding-right: var(--spacing-1xl);
}

.pe-2 {
  padding-right: var(--spacing-2);
}

.pe-2xs {
  padding-right: var(--spacing-2xs);
}

.pe-2sm {
  padding-right: var(--spacing-2sm);
}

.pe-2md {
  padding-right: var(--spacing-2md);
}

.pe-2lg {
  padding-right: var(--spacing-2lg);
}

.pe-2xl {
  padding-right: var(--spacing-2xl);
}

.pe-3 {
  padding-right: var(--spacing-3);
}

.pe-3xs {
  padding-right: var(--spacing-3xs);
}

.pe-3sm {
  padding-right: var(--spacing-3sm);
}

.pe-3md {
  padding-right: var(--spacing-3md);
}

.pe-3lg {
  padding-right: var(--spacing-3lg);
}

.pe-3xl {
  padding-right: var(--spacing-3xl);
}

.pe-4 {
  padding-right: var(--spacing-4);
}

.pe-4xs {
  padding-right: var(--spacing-4xs);
}

.pe-4sm {
  padding-right: var(--spacing-4sm);
}

.pe-4md {
  padding-right: var(--spacing-4md);
}

.pe-4lg {
  padding-right: var(--spacing-4lg);
}

.pe-4xl {
  padding-right: var(--spacing-4xl);
}

.pe-5 {
  padding-right: var(--spacing-5);
}

.pe-5xs {
  padding-right: var(--spacing-5xs);
}

.pe-5sm {
  padding-right: var(--spacing-5sm);
}

.pe-5md {
  padding-right: var(--spacing-5md);
}

.pe-5lg {
  padding-right: var(--spacing-5lg);
}

.pe-5xl {
  padding-right: var(--spacing-5xl);
}

.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.px-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.px-1xs {
  padding-left: var(--spacing-1xs);
  padding-right: var(--spacing-1xs);
}

.px-1sm {
  padding-left: var(--spacing-1sm);
  padding-right: var(--spacing-1sm);
}

.px-1md {
  padding-left: var(--spacing-1md);
  padding-right: var(--spacing-1md);
}

.px-1lg {
  padding-left: var(--spacing-1lg);
  padding-right: var(--spacing-1lg);
}

.px-1xl {
  padding-left: var(--spacing-1xl);
  padding-right: var(--spacing-1xl);
}

.px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.px-2xs {
  padding-left: var(--spacing-2xs);
  padding-right: var(--spacing-2xs);
}

.px-2sm {
  padding-left: var(--spacing-2sm);
  padding-right: var(--spacing-2sm);
}

.px-2md {
  padding-left: var(--spacing-2md);
  padding-right: var(--spacing-2md);
}

.px-2lg {
  padding-left: var(--spacing-2lg);
  padding-right: var(--spacing-2lg);
}

.px-2xl {
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}

.px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.px-3xs {
  padding-left: var(--spacing-3xs);
  padding-right: var(--spacing-3xs);
}

.px-3sm {
  padding-left: var(--spacing-3sm);
  padding-right: var(--spacing-3sm);
}

.px-3md {
  padding-left: var(--spacing-3md);
  padding-right: var(--spacing-3md);
}

.px-3lg {
  padding-left: var(--spacing-3lg);
  padding-right: var(--spacing-3lg);
}

.px-3xl {
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
}

.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.px-4xs {
  padding-left: var(--spacing-4xs);
  padding-right: var(--spacing-4xs);
}

.px-4sm {
  padding-left: var(--spacing-4sm);
  padding-right: var(--spacing-4sm);
}

.px-4md {
  padding-left: var(--spacing-4md);
  padding-right: var(--spacing-4md);
}

.px-4lg {
  padding-left: var(--spacing-4lg);
  padding-right: var(--spacing-4lg);
}

.px-4xl {
  padding-left: var(--spacing-4xl);
  padding-right: var(--spacing-4xl);
}

.px-5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}

.px-5xs {
  padding-left: var(--spacing-5xs);
  padding-right: var(--spacing-5xs);
}

.px-5sm {
  padding-left: var(--spacing-5sm);
  padding-right: var(--spacing-5sm);
}

.px-5md {
  padding-left: var(--spacing-5md);
  padding-right: var(--spacing-5md);
}

.px-5lg {
  padding-left: var(--spacing-5lg);
  padding-right: var(--spacing-5lg);
}

.px-5xl {
  padding-left: var(--spacing-5xl);
  padding-right: var(--spacing-5xl);
}

/* ####################################### */

table {
  caption-side: inherit;
  border-collapse: collapse;
	 text-align: left;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgba(var(--schwarz-rgb), 0.75);
  text-align: left;
  font-weight: 600;
}

thead, tbody, tfoot, tr, th, td {
  border-style: solid;
  border-width: 0;
  border-color: inherit;
  text-align: left;
}

.table {
  --table-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-background-color: var(--body-background);
  --table-border-color: var(--border-color);
  --table-streifen-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-streifen-background-color: rgba(var(--grau-rgb), 0.25);
  --thead-streifen-font-color: rgba(var(--schwarz-rgb));
  --thead-streifen-background-color: rgba(var(--grau-rgb));
  --table-active-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-active-background-color: rgba(var(--grau-rgb), 0.65);
  --table-hover-font-color: rgba(var(--schwarz-rgb), 0.85);
  --table-hover-background-color: rgba(var(--grau-rgb), 0.5);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  text-align: left;
  border-color: var(--table-border-color);
}

.table > :not(caption) > * > * {
  padding: 0.375rem 0.5rem;
  color: var(--table-font-color);
  background-color: var(--table-background-color);
  border-bottom-width: var(--border-width);
}

.table > thead {
  vertical-align: middle;
}

.table > tbody {
  vertical-align: top;
}

.table-rahmen > :not(caption) > * {
  border-width: var(--border-width) 0;
}

.table-rahmen > :not(caption) > * > * {
  border-width: 0 var(--border-width);
}

.table-rahmenlos > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-rahmenlos > :not(:first-child) {
  border-top-width: 0;
}

.table-streifen-even > tbody > tr:nth-child(even) > * {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-streifen-even > thead > tr {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.table-streifen-odd > tbody > tr:nth-child(odd) > * {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-streifen-odd > thead > tr {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.table-spalten-even > tbody > tr > :nth-child(even) {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-spalten-even > thead > tr > :nth-child(even) {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.table-spalten-odd > tbody > tr > :nth-child(odd) {
  --table-font-color: var(--table-streifen-font-color);
  --table-background-color: var(--table-streifen-background-color);
}

.table-spalten-odd > thead > tr > :nth-child(odd) {
  --table-font-color: var(--thead-streifen-font-color);
  --table-background-color: var(--thead-streifen-background-color);
}

.trust {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--blue-rgb), 0.25);
  --table-border-color: var(--blue-5);
  --table-streifen-background-color: rgba(var(--blue-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--blue-rgb), 0.75);
  --thead-streifen-font-color: var(--weiss-hex);
}

.alert {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--rot-rgb), 0.25);
  --table-border-color: var(--rot-5);
  --table-streifen-background-color: rgba(var(--rot-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--rot-rgb), 0.75);
  --thead-streifen-font-color: var(--weiss-hex);
}

.info {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--yellow-rgb), 0.25);
  --table-border-color: var(--yellow-5);
  --table-streifen-background-color: rgba(var(--yellow-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--yellow-rgb), 0.75);
  --thead-streifen-font-color: var(--schwarz-hex);
}

.confirm {
  --table-font-color: var(--schwarz-hex);
  --table-background-color: rgba(var(--green-rgb), 0.25);
  --table-border-color: var(--green-5);
  --table-streifen-background-color: rgba(var(--green-rgb), 0.1);
  --thead-streifen-background-color: rgba(var(--green-rgb), 0.75);
  --thead-streifen-font-color: var(--weiss-hex);
}

/* ####################################### */
#contentNavInner button {
		text-align: left;
	}
/* Mobile-Collapse nur unter 1200px sichtbar */
.contentnav-mobile { display: none; }

@media (max-width: 1199.98px) {
  .contentnav-mobile { display: block; margin-bottom: 1rem; }
}

/* Desktop: rechte Inhaltsnav sticky (optional) */
@media (min-width: 1200px) {
  #contentNavMountDesktop {
    position: sticky;
    top: 10.25rem; /* an deine sticky navbar anpassen */
  }
}

/* Panel-Logik (eigene Klasse, NICHT .collapse-panel, NICHT .is-open) */
.contentnav-panel { display: none; margin-top: .5rem; }
.contentnav-panel.cn-open { display: block; }