@charset "UTF-8";
/* =====================================================================================================================
   PROJECT CSS – Inhaltsverzeichnis
   =====================================================================================================================

   00) BASE / TYPOGRAFIE / ELEMENTE
       00.01 Typografie (Body, Headings, Listen, Text)
       00.02 Medien / Bilder / Figures
       00.03 Tabellen
       00.04 Forms / Powermail / Code

   01) UTILITIES (Brand + Layout Helpers)
       01.01 Brand Colors (BG / Text / Border)
       01.02 TYPO3 Extra Classes (d-flex, fill, mt-auto, etc.)

   02) BOOTSTRAP OVERRIDES (Komponenten)
       02.01 Buttons
       02.02 Links (inkl. Speziallinks mit Icons)
       02.03 Accordion / Details
       02.04 Alerts
       02.05 Badges
       02.06 List Group
       02.07 Nav / Tabs / Pills
       02.08 Pagination
       02.09 Progress
       02.10 Cards
       02.11 Carousel + Swiper (Unified)
       02.12 Swiper
       02.13 Carousel

   03) LAYOUT MODULES
       03.01 Fixed Toolbar
       03.02 Footer Toolbar
       03.03 Navbar / Offcanvas
       03.04 Header (Sticky / Fixed)

   04) TYPO3 CONTENT PATTERNS
       04.01 Menu Abstract
       04.02 No-Gutters Grid
       04.03 Highlight Split (2-Col Layout)
       04.04 Steps Numbers (Mehrspalter nummeriert)

   05) GRID / SECTIONS / SPACING SYSTEM
       05.01 Custom Gutters
       05.02 Section Spacing / Outer Layout Spacing / Responsive Padding
       05.03 Content Spacing / Inner Layout Spacing / Responsive Margin
       05.04 TYPO3 Spacing Utilities (Erscheinungsbild)

   06) EXTENSIONS
       06.01 News (List View + Masonry 3-Spalter)

   20) SITE LAYOUT (Shell / Frame)
       20.01 Page Shell
       20.02 Header / Logo
       20.03 Navigation (Desktop + Mobile)
       20.04 Main Content
       20.05 Footer

   99) MISC / PROJECT-SPECIFIC
       99.01 Headline Overrides
       99.02 Overlay Layout
       99.03 Pixel Patterns
       99.04 Width Utilities (Responsive)
       99.05 Sonstige Fixes

  100) Cookie Management


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



/* =====================================================================================================================
   00) BASE / TYPOGRAFIE / ELEMENTE
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   00.01) Typografie – Basics & Elemente
   ------------------------------------------------------------------------------------------------- */


body {
  font-family: var(--brand-font-family);
  font-weight: var(--brand-font-weight-light);
  line-height: var(--brand-line-height);
  /* Hier kann man die Grundschriftgrösse verändern, Headlines bleiben gleich */
  font-size: var(--brand-font-size);
  padding-top: 0;
}

body.has-fixed-header {
  padding-top: var(--header-offset, 0px);
}




/* ==================================================
   HEADINGS – RULES & STACK LOGIC
   ================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  line-height: var(--headings-lh);
  font-weight: var(--headings-fw);
  color: var(--brand-heading-color);
}

.card-body h1:first-child,
.card-body h2:first-child,
.card-body h3:first-child,
.card-body h4:first-child,
.card-body h5:first-child,
.card-body h6:first-child,
header h1:first-child,
header h2:first-child,
header h3:first-child,
header h4:first-child,
header h5:first-child,
header h6:first-child,
.aufriss + h1,
.aufriss + h2,
.aufriss + h3,
.aufriss + h4,
.aufriss + h5,
.aufriss + h6,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
.aufriss + h1,
.aufriss + h2,
.aufriss + h3,
.aufriss + h4,
.aufriss + h5 {
   margin-top:0em !important; 
}


/* Größen & Standard-Abstände */
/*body.startseite h1 { font-size: calc(var(--h1-fs) * 0.8); margin-bottom: var(--h1-mb); }*/
h1 { font-size: var(--h1-fs); margin-bottom: var(--h1-mb); }
h2 { font-size: var(--h2-fs); margin-top: var(--h2-mt); margin-bottom: var(--h2-mb); }
h3 { font-size: var(--h3-fs); margin-top: var(--h3-mt); margin-bottom: var(--h3-mb); }
h4 { font-size: var(--h4-fs); margin-top: var(--h4-mt); margin-bottom: var(--h4-mb); }
h5 { font-size: var(--h5-fs); margin-top: var(--h5-mt); margin-bottom: var(--h5-mb); }
h6 { font-size: var(--h6-fs); margin-top: var(--h6-mt); margin-bottom: var(--h6-mb); }

/* --------------------------------------------------
   Automatisierte Headline-Stacks
   (negativer Abstand wird berechnet)
-------------------------------------------------- */

h1 + h2 {
  margin-top: calc(-1 * (var(--h1-mb) - var(--headings-stack-gap)));
}

h2 + h3 {
  margin-top: calc(-1 * (var(--h2-mb) - var(--headings-stack-gap)));
}

h3 + h4 {
  margin-top: calc(-1 * (var(--h3-mb) - var(--headings-stack-gap)));
}

h4 + h5 {
  margin-top: calc(-1 * (var(--h4-mb) - var(--headings-stack-gap)));
}

h5 + h6 {
  margin-top: calc(-1 * (var(--h5-mb) - var(--headings-stack-gap)));
}

/* Optional: Subheadline-Gefühl */
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h4{
  font-weight: var(--brand-font-weight-regular);
  opacity: 0.85;
}




.small, small { font-size: 0.875rem; }

mark {
  padding: 0.2em;
  color: #000;
  background-color: #fcf8e3;
}

/* Paragraphs */
p {
  margin-top: 0;
  margin-bottom: .5rem;
}
p:last-child {
  margin-bottom: 0rem;
}
/* Wenn ein <p> mit Button direkt auf ein anderes <p> folgt */
p + p > a.btn,
p + p > .btn{
  margin-top: .75rem;     /* Luft über dem Button */
  display: inline-block;  /* damit margin-top wirkt */
}

b, strong {
  font-weight: 700;
}



.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: 0.5rem; }

/* Misc */
.initialism {
  font-size: 0.875rem;
  text-transform: uppercase;
}

/* Abkürzungen */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}

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

/* Lists */
ol, ul { padding-left: 1rem; margin-top: 0; margin-bottom: 1rem; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: 0.5rem; margin-left: 0; }

/* Abstand nach Listen */
ul:not(:last-child):not([class*="navbar-nav"]):not([class*="tabs"]) {
    margin-bottom:35px;
}


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

.list-inline {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Eigene Liste mit Symbol (CKEditor definiert) */
ul.icon-symbol {
	padding-left:0em;
}
ul.icon-symbol li {
	position:relative;
	list-style:none;
	list-style-type:none;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
    align-items: center; 
}
/* Icon Pfeil gross */
ul.icon-symbol li {
    margin-bottom:5px;
}

ul.icon-symbol li:before {
  line-height: 1;
  font-weight: normal;
  color: var(--brand-primary);
  margin-right:10px;  
  content:"";
  width:30px;
  height:30px;
  display:inline-block;
  background-size:cover;   
  display: grid;
  place-items: start;     
}

/* Icon Haken klein */
main ul.haken li:before {
   background-image: url("../../../redaktion/icons/icon-haken-quadrat.svg");
}
main ul.pfeil li:before {
   background-image: url("../../../redaktion/icons/icon-pfeil-quadrat.svg");
}
main ul.x li:before {
   background-image: url("../../../redaktion/icons/icon-x-quadrat.svg");
}

/* Linie oben und unten */
main ul.list-border li:first-child {
  border-top: 1px solid var(--brand-border-color-light);
}
main ul.list-border li{
  border-bottom: 1px solid var(--brand-border-color-light);
  padding: 7px 0;
}

main .bg-brand-light ul.list-border li:first-child {
  border-color: #ffffff;
}
main .bg-brand-light  ul.list-border li{
  border-color: #ffffff;
}

main ul.list-border[class*="haken"] li,
main ul.list-border[class*="pfeil"] li {
  margin-bottom:0em !important;
}


/* Blockquotes */
.blockquote { margin-bottom: 1rem; font-size: 1.35rem; }
.blockquote > :last-child { margin-bottom: 0; }

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #6c757d;
}
.blockquote-footer::before { content: "\2014\00A0"; }

.blockquote-footer, .quelle { letter-spacing:0.015em;margin-bottom: 1rem; font-size: 0.85em; color: var(--brand-text-color);text-transform:uppercase;}


blockquote, .zitat {
  font-size: clamp(
    var(--brand-font-size),
    1rem + 0.6vw,
    1.45rem
  );
  font-style: italic;
  margin-bottom:1rem;
}

.lead {
  font-size: clamp(
    var(--brand-font-size),
    1rem + 0.6vw,
    1.45rem
  );
  font-weight: 300;
}


/* Highlight */
.highlight,
mark, span.mark{
  background-color: #ffff00;
  padding: 0.2em 0.4em;
  border-radius: 0.2rem;
}

/* Aufriss */
.aufriss {
	font-weight:bold;
	color:var(--brand-primary-hover);
}
/* Aufriss Primary auf Primary Card */
.bg-brand-primary .aufriss,
.bg-brand-gray .aufriss{
  color: var(--brand-text-color-neg);	
}





/* -------------------------------------------------------------------------------------------------
   00.02)  Figures / Medien / Bilder 
   ------------------------------------------------------------------------------------------------- */


figure { margin: 0 0 1rem; }
/* Wenn nur ein Bild in der Spalte dann keinen Abstand unten */
div[class*="col"] > .frame-type-image:only-child figure {margin-bottom:0em;}
img, svg { vertical-align: middle;}
main figure:not([class*="no-scale"]) img,
main .news img {width:100%; height:auto;}

/* Wenn Spalten gleich hoch und nur ein Element Bild in Spalte, dann auf 100% Höhe ziehen und covern */
div[class*="col-"].d-flex > .frame-type-image,
div[class*="col-"].d-flex > .frame-type-image .ce-image,
div[class*="col-"].d-flex > .frame-type-image .ce-gallery,
div[class*="col-"].d-flex > .frame-type-image .ce-outer,
div[class*="col-"].d-flex > .frame-type-image .ce-inner,
div[class*="col-"].d-flex > .frame-type-image .ce-row,
div[class*="col-"].d-flex > .frame-type-image .ce-column,
div[class*="col-"].d-flex > .frame-type-image figure,
div[class*="col-"].d-flex > .frame-type-image picture {
  height: 100%;
}

/* WICHTIG: picture & figure als Block, sonst bringt height:100% wenig */
div[class*="col-"].d-flex > .frame-type-image figure.image,
div[class*="col-"].d-flex > .frame-type-image picture {
  display: block;
  width: 100%;
}



/* Bild selbst */
div[class*="col-"].d-flex > .frame-type-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
div[class*="col-"].d-flex > .frame-type-image img[src*=".svg"] {
  width: 100%;
  height: auto;
  display: block;
}
div[class*="col-"].d-flex > .frame-type-image {
  display: flex;
  flex: 1;
}

/* SVG Bild über Text (imgorient-27) - SVG einziehen damit nicht am Card-Rand */
.card.imgorient-27 .image.no-scale img[src*="svg"] {
    margin-left:var(--brand-card-padding-x);
    margin-top:var(--brand-card-padding-y);
} 

/* SVG Bild über Text (imgorient-27) - Figure kein margin-bottom */
.card.imgorient-27 figure {
    margin-bottom:0em;
}


.frame-type-image,
.frame-type-image figure:not([class*="no-scale"]),
.frame-type-image .ce-gallery:not(.no-scale) *:not(img) {
	width:100%;
} 

@media (min-width:0px) and (max-width:767px) {
	div[class*="col-"] .frame-type-textpic.ms-auto {
		margin:0 auto !important;
	}
}

.ce-gallery .ce-column + .ce-column {
	margin-left:30px;
}


/* Bildunterschriften */
figcaption {
  font-size:calc(var(--brand-font-size) * 0.75);
  line-height:1.15em;
  margin-top:var(--space-2);
}




/* Bildklassen - ergänzende Angaben zu Bootstrap Standardklassen */

/* Rund */

.rounded-circle {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Border */
picture.border.border-dark {
	border:0px solid black !important;
}

/* Thumbnail */
picture.img-thumbnail {
  padding: 0em;
  background-color: transparent;
  border: transparent;
  border-radius: 0px;
  max-width: 100%;
  height: auto;
}

/* Zitatbild */
/* picture.quote-image = Container */

picture.quote-image {
  position: relative;          /* Bezug für ::before */
  display: block;              /* wichtig für picture */
  margin-left: 50px;           /* Platz h2 + h3 für Icon */
  display: flex;
  align-items: center;
}

/* Bild */

.quote-image img {
  display: block;              /* verhindert Baseline-"unten"-Effekt */
  width: calc(100% - 50px) !important;    /* Bild etwas schmaler ? Platz fürs Icon */
  height: auto;
}

div[class*="col-"].justify-content-center.d-flex .quote-image img {
  /*
	top: 50%;
    transform: translateY(-50%);	
	*/
}




/* Icon-Kreis */
picture.quote-image::before {
  content: "";
  position: absolute;

  /* vertikal exakt zur Bildmitte */
  top: 50%;
  transform: translateY(-50%);

  /* links neben dem Bild */
  left: -40px; /* nicht ganz -50px wegen Schatten */

  width: 100px;
  height: 100px;

  background-color: #fff;
  background-image: url("/fileadmin/templates/standard_v1/images/icons/icon-quote.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px 45px;

  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 2;
}





/* -------------------------------------------------------------------------------------------------
   00.03) Tables (Custom)
   ------------------------------------------------------------------------------------------------- */

table {
  width: 100%;
  margin-bottom: var(--brand-space-lg);
  color: var(--brand-table-color);
  background-color: var(--brand-table-bg);
  overflow: hidden;
}
table:not(.ce-table-bordered) { border: 0px; }

table caption {
  caption-side: bottom;
  padding-top: var(--space-2);
  color: var(--brand-table-caption-color);
  font-size: var(--font-sm);
}

td,
th {
  padding: 10px;
  border-color: var(--brand-table-border-color);
  border-style: solid;
  border-bottom-width: 1px;
}

table thead th {
  color: var(--brand-text-color);
  background-color: var(--brand-bg-soft);
  border-bottom: 2px solid var(--brand-table-border-color);
  vertical-align: middle;
  white-space: nowrap;
}

table tbody td { vertical-align: middle; }

table > :not(caption) > * > * {
  padding: var(--space-3);
  background-color: transparent;
  border-bottom: 1px solid var(--brand-table-border-color);
}

table.ce-table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--brand-table-striped-bg);
  color: var(--brand-table-striped-color);
}

table.ce-table-bordered { border: 1px solid var(--brand-table-border-color); }

table.table-responsive {
  border-radius: var(--brand-border-radius);
  overflow: auto;
}


/* -------------------------------------------------------------------------------------------------
   00.04) Forms / Code / Misc Elements
   ------------------------------------------------------------------------------------------------- */

label { display: inline-block; }

button { border-radius: 0; }

input, button, select, optgroup, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
textarea { resize: vertical; }

button, [role="button"], [type="button"], [type="reset"], [type="submit"] { cursor: pointer; }
select { word-wrap: normal; }
select:disabled { opacity: 1; }

/* Code */
pre, code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; color: #212529; }
code { font-size: 0.875em; color: #d63384; word-wrap: break-word; }
kbd { padding: 0.2rem 0.4rem; font-size: 0.875em; color: #fff; background-color: #212529; border-radius: 0.2rem; }

/* Sub/Sup */
sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }

/* Output/iframe/summary/progress */
output { display: inline-block; }
iframe { border: 0; }
summary { display: list-item; cursor: pointer; }
progress { vertical-align: baseline; }

/* Hidden */
[hidden] { display: none !important; }




/* =========================
   POWERSMAIL – Fieldset Styling
   ========================= */
.tx-powermail {
    margin-top:50px;
}
.powermail_form fieldset.powermail_fieldset{
  padding: 28px 24px 18px;
  margin: 0 0 24px;
  border: 1px solid var(--brand-light);
}
.powermail_form fieldset + fieldset {
    margin-top:50px !important;
}
.powermail_form legend.powermail_legend{
  float: none;
  width: auto;
  padding: 6px 12px;
  margin: 0;
  font-size:0.875rem;
  color:var(--brand-text-color);
  background-color:var(--brand-light);
}

/* Abstand/Optik pro Feld */
.powermail_form .powermail_fieldwrap{
  margin-bottom: 16px;
}

/* =========================
   FLOATING LABEL – CLEAN VERSION
   ========================= */

.powermail_form .powermail_fieldwrap_type_input,
.powermail_form .powermail_fieldwrap_type_textarea,
.powermail_form .powermail_fieldwrap_type_select,
.powermail_form .powermail_fieldwrap_type_captcha{
  position: relative;
  margin-top: 22px;
}

/* Input Styling */
.powermail_form .form-control{
  height: 56px;
  border: 1px solid var(--brand-border-color-dark);
  padding: 20px 10px 10px 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
  font-size:var(--brand-font-size);
  font-weight:300 !important;
}
/* Dropdown - Select */
.powermail_form select.form-control{
  padding: 15px 10px 15px 10px;
}

.powermail_form textarea.form-control{
  height: auto;
  min-height: 120px;
  padding-top: 24px;
}

/* Fokus */
.powermail_form .form-control:focus{
  border-color: #000;
  box-shadow: none;
}

/* Label */
.powermail_form .powermail_fieldwrap > label.control-label,
.powermail_form .powermail_fieldwrap.powermail_fieldwrap_type_captcha > .powermail_field  > label.control-label{
  position: absolute;
  left: 14px;
  top: 16px;
  background: #fff;
  padding: 0 4px;
  pointer-events: none;
  transition: all .18s ease;
  font-size:var(--brand-font-size);
}

/* Wenn Fokus oder gefüllt */
.powermail_form .powermail_fieldwrap:focus-within label.control-label,
.powermail_form .powermail_fieldwrap.is-filled label.control-label{
  top: -8px;
  font-size:0.875rem;
  color: #000;
}

/* Mandatory Stern */
.powermail_form .mandatory{
  color: #c00;
  margin-left: 3px;
}



/* Wenn Fieldset auf no-Label steht */
.powermail_form fieldset.powermail_fieldset.nolabel {
    border:0px solid black !important;
    padding:0em !important;
}
.powermail_fieldset.nolabel legend {
    display:none;
}


/* Submit Button */
.powermail_field .btn[type="submit"] {
    margin-top:30px;
}


/* Checkbox */
.form-check-input[type="checkbox"],
.altcha-checkbox input{
  border-radius: 0px !important;
	border-color:black !important;
}


/* Chapta */
.powermail_fieldwrap_type_captcha .powermail_field {
    display:flex;
    flex-direction:row;
}

/* Captcha */
.altcha {
  background: var(--altcha-color-base, transparent) !important;
  border: 0px solid black !important;
}
.altcha-main {
  padding: 0 !important;
}
.altcha-checkbox {
	width:18px !important;
	height:18px !important;
}





/* =====================================================================================================================
   01) UTILITIES (BRAND + LAYOUT HELPERS)
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   01.01) Brand Utilities – Background / Text / Border
   ------------------------------------------------------------------------------------------------- */

/* Background */
.bg-brand-primary        { background-color: var(--brand-primary) !important; color: #fff !important; }
.bg-brand-secondary      { background-color: var(--brand-secondary) !important; color: #fff !important; }
.bg-brand-success        { background-color: var(--brand-success) !important; color: #fff !important; }
.bg-brand-info           { background-color: var(--brand-info) !important; color: #000 !important; }
.bg-brand-warning        { background-color: var(--brand-warning) !important; color: #000 !important; }
.bg-brand-danger         { background-color: var(--brand-danger) !important; color: #fff !important; }
.bg-brand-light          { background-color: var(--brand-light) !important; color: #000 !important; }
.bg-brand-gray           { background-color: var(--brand-gray) !important; color: #ffffff !important; }
.bg-brand-dark           { background-color: var(--brand-dark) !important; color: #fff !important; }
.bg-brand-accent         { background-color: var(--brand-accent) !important; color: #fff !important; }

.bg-brand-primary-soft   { background-color: var(--brand-primary-soft) !important; }
.bg-brand-secondary-soft { background-color: var(--brand-secondary-soft) !important; }
.bg-brand-success-soft   { background-color: var(--brand-success-soft) !important; }
.bg-brand-info-soft      { background-color: var(--brand-info-soft) !important; }
.bg-brand-warning-soft   { background-color: var(--brand-warning-soft) !important; }
.bg-brand-danger-soft    { background-color: var(--brand-danger-soft) !important; }

/* Textfarben */
.text-brand-primary      { color: var(--brand-primary) !important; }
.text-brand-secondary    { color: var(--brand-secondary) !important; }
.text-brand-success      { color: var(--brand-success) !important; }
.text-brand-info         { color: var(--brand-info) !important; }
.text-brand-warning      { color: var(--brand-warning) !important; }
.text-brand-danger       { color: var(--brand-danger) !important; }
.text-brand-light        { color: var(--brand-light) !important; }
.text-brand-dark         { color: var(--brand-dark) !important; }
.text-brand-accent       { color: var(--brand-accent) !important; }

/* Borderfarben */
.border-brand-primary    { border-color: var(--brand-primary) !important; }
.border-brand-secondary  { border-color: var(--brand-secondary) !important; }
.border-brand-success    { border-color: var(--brand-success) !important; }
.border-brand-info       { border-color: var(--brand-info) !important; }
.border-brand-warning    { border-color: var(--brand-warning) !important; }
.border-brand-danger     { border-color: var(--brand-danger) !important; }
.border-brand-light      { border-color: var(--brand-light) !important; }
.border-brand-dark       { border-color: var(--brand-dark) !important; }
.border-brand-accent     { border-color: var(--brand-accent) !important; }





/* ------------------------- Negative Darstellung auf Primary, Secondary und Dark  ------------------------- */
/* Kontext: Elemente innerhalb .bg-brand-primary sollen "negativ" (hell/kontrastreich) sein */

.bg-brand-primary,
.bg-brand-secondary,
.bg-brand-dark,
.bg-brand-gray{
  color: var(--brand-text-color-neg);
}

.bg-brand-primary :is(h1,h2,h3,h4,h5,h6),
.bg-brand-secondary :is(h1,h2,h3,h4,h5,h6),
.bg-brand-dark :is(h1,h2,h3,h4,h5,h6),
.bg-brand-gray :is(h1,h2,h3,h4,h5,h6){
  color: var(--brand-heading-neg);
}

.bg-brand-primary a,
.bg-brand-secondary a,
.bg-brand-dark a,
.bg-brand-gray a {
  color: var(--brand-link-color-neg);
}
.bg-brand-primary a:hover,
.bg-brand-secondary a:hover,
.bg-brand-dark a:hover,
.bg-brand-gray a:hover {
  text-decoration:underline;
  color: var(--brand-text-color-neg);
}

/* Button darf keine Underline bekommen (auch wenn <a>) */
.bg-brand-primary a,
.bg-brand-primary a:hover,
.bg-brand-primary a:focus,
.bg-brand-primary a:active,
.bg-brand-primary .btn-primary,
.bg-brand-primary .btn-primary:hover,
.bg-brand-primary .btn-primary:focus,
.bg-brand-primary .btn-primary:active,
.bg-brand-secondary a,
.bg-brand-secondary a:hover,
.bg-brand-secondary a:focus,
.bg-brand-secondary a:active,
.bg-brand-secondary .btn-primary,
.bg-brand-secondary .btn-primary:hover,
.bg-brand-secondary .btn-primary:focus,
.bg-brand-secondary .btn-primary:active,
.bg-brand-dark a,
.bg-brand-dark a:hover,
.bg-brand-dark a:focus,
.bg-brand-dark a:active,
.bg-brand-dark .btn-primary,
.bg-brand-dark .btn-primary:hover,
.bg-brand-dark .btn-primary:focus,
.bg-brand-dark .btn-primary:active,
.bg-brand-gray a,
.bg-brand-gray a:hover,
.bg-brand-gray a:focus,
.bg-brand-gray a:active,
.bg-brand-gray .btn-primary,
.bg-brand-gray .btn-primary:hover,
.bg-brand-gray .btn-primary:focus,
.bg-brand-gray .btn-primary:active{
  text-decoration: none;
}





/* ------------------------- Primary HG + Primary Buttons ------------------------- */

/* Links */
.bg-brand-primary a{
  color: var(--brand-link-on-primary);
}
/* Button: btn-primary (invers auf Primary-Hintergrund) */
.bg-brand-primary .btn-primary{
  color: var(--brand-primary);
  background-color: #fff;
  border-color: #fff;
}
.bg-brand-primary .btn-primary:hover{
  color: var(--brand-primary-hover);
  background-color: color-mix(in srgb, #fff 90%, var(--brand-primary) 10%);
  border-color: color-mix(in srgb, #fff 90%, var(--brand-primary) 10%);
}
.bg-brand-primary .btn-primary:active,
.bg-brand-primary .btn-primary.active{
  color: var(--brand-primary-active);
  background-color: color-mix(in srgb, #fff 80%, var(--brand-primary) 20%);
  border-color: color-mix(in srgb, #fff 80%, var(--brand-primary) 20%);
}
.bg-brand-primary .btn-primary:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, #fff 35%, transparent);
}

.bg-brand-primary .btn-primary:disabled,
.bg-brand-primary .btn-primary.disabled{
  color: color-mix(in srgb, var(--brand-primary) 55%, #fff 45%);
  background-color: color-mix(in srgb, #fff 80%, var(--brand-primary) 20%);
  border-color: color-mix(in srgb, #fff 80%, var(--brand-primary) 20%);
  opacity: 1;
}










/* =====================================================================================================================
   01.02) cri_extraclass – Zusätzliche Layout- & Ausrichtungsklassen (TYPO3)
   Verwendet in: TYPO3 Erscheinungsbild → „Zusätzliche CSS-Klassen“
   Zweck:
   - Spaltenverhalten (Flex / Höhe)
   - Element-Ausrichtung (oben / unten / mittig / rechts)
   - Optische Helper (z.B. bottom-line)
   ===================================================================================================================== */


/* Verfügbare Klassen (Auswahl):
   Spalte:
   - d-flex (Voraussetzung)


   Elemente:
   - fill                     → Element füllt Höhe
   - mt-auto                  → Element unten
   - ms-auto                  → Element rechts
   - justify-content-center   → Inhalt vertikal zentriert
   - align-items-center       → Inhalt horizontal zentriert

   Stil:
   - bottom-line
   – border (in Bootstrap automatisch drin)
   – p-1 bis p-5 padding 
*/



/* ---------------------------------------------------------------------------------------------------------------------
   A) Spalten-Layout (Row/Col) – Ausrichtung & Höhenlogik
   --------------------------------------------------------------------------------------------------------------------- */

/*  Cols als Flex-Column (wirkt nur, wenn die Col selbst display:flex bekommt – z.B. via Typo3 .d-flex) */
.row > div[class*="col-"],
.row > div[class*="col-"] > .container-fluid > .container  {
  flex-direction: column;
}

/* Only-child wächst auf volle Höhe
   - Default: :only-child bekommt flex-grow:1 (gleich hohe Cards)
   - Ausnahme: wenn bewusst Ausrichtungsklassen gesetzt sind (unten/mittig/rechts/zentriert) */
.row > div[class*="col-"].d-flex:not(.justify-content-center) > :only-child:not(.mt-auto):not(.my-auto):not(.ms-auto):not(.mx-auto),
.row > div[class*="col-"].d-flex:not(.justify-content-center) > div[class*="shortcut"] > :only-child:not(.mt-auto):not(.my-auto):not(.ms-auto):not(.mx-auto),
.row > div[class*="col-"] > .container-fluid > .container  {
  flex-grow: 1;
}

.row > div[class*="col-"].d-flex:not(.justify-content-center) > div[class*="shortcut"],
.row > div[class*="col-"] > .container-fluid > .container  {
    display:flex;
}

/* Resthöhe/volle Höhe füllen (bei alleinstehendem Element) */
.fill {
  flex: 1 1 auto;
  min-height: 0; /* wichtig für Overflow/Scroll in Children */
}



/* ---------------------------------------------------------------------------------------------------------------------
   B) Element-Ausrichtung (innerhalb eines Elements, z.B. Card)
   Hinweis: greift nur, wenn die Card die jeweilige Bootstrap-Klasse trägt.
   --------------------------------------------------------------------------------------------------------------------- */

/* Vertikal zentrieren innerhalb der Card */
.card.justify-content-center > .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Horizontal zentrieren innerhalb der Card */
.card.align-items-center > .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ---------------------------------------------------------------------------------------------------------------------
   C) Optische Helper (Stil, keine Ausrichtung)
   --------------------------------------------------------------------------------------------------------------------- */

/* Bottom Line (statt Bootstrap .border-bottom zu überschreiben) */
.bottom-line {
  border-bottom: 1px solid var(--brand-border-color) !important;
  padding-top: var(--brand-space-xl);
  padding-bottom: var(--brand-space-xl);
}


/* ---------------------------------------------------------------------------------------------------------------------
   Padding Presets (auswählbar im Menü)
   Hinweis: nutzt Bootstrap p-* Klassen am Card-Wrapper, steuert aber das Padding in .card-body.
   --------------------------------------------------------------------------------------------------------------------- */

.card[class*="p-1"] .card-body { padding: .25rem !important; } /* Space-1 */
.card[class*="p-2"] .card-body { padding: .5rem !important; }  /* Space-2 */
.card[class*="p-3"] .card-body { padding: 1rem !important; }   /* Space-3 */
.card[class*="p-4"] .card-body { padding: 1.5rem !important; } /* Space-4 */
.card[class*="p-5"] .card-body { padding: 3rem !important; }   /* Space-6 */

/* Entfernt Padding am Card-Wrapper, wenn p-* genutzt wird (Padding kommt dann ausschließlich aus .card-body) */
.card[class*="p-"] { padding: 0em !important; }





/* =====================================================================================================================
   02) BOOTSTRAP OVERRIDES (KOMPONENTEN)
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   02.01) Buttons
   ------------------------------------------------------------------------------------------------- */


.btn {
  border-radius: var(--brand-btn-border-radius);
  padding: var(--brand-space-button-y) var(--brand-space-button-x);
  line-height: 1em;
  font-weight: 600;
  font-size:var(--brand-font-size);
}

.btn-lg {
  border-radius: var(--brand-btn-border-radius-lg);
  padding: calc(var(--brand-space-button-y) * 1.5) calc(var(--brand-space-button-x) * 1.5);
  line-height: 1em;
}


.btn[class*="intern"]:before,
.btn[class*="extern"]:before,
.btn[class*="mail"]:before,
.btn[class*="telefon"]:before,
.btn[class*="download"]:before,
.btn[class*="pdf"]:before,
.btn[class*="plus"]:before,
.btn[class*="back"]:before,
.btn[class*="video"]:before,
.btn[class*="audio"]:before,
.btn[class*="tel"]:before{
  font-family: var(--brand-icon-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  position: absolute;
  left: var(--brand-space-button-x);
  top: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
  transition: color .2s ease;
}
.btn[class*="intern"],
.btn[class*="extern"],
.btn[class*="mail"],
.btn[class*="telefon"],
.btn[class*="download"],
.btn[class*="pdf"],
.btn[class*="plus"],
.btn[class*="back"],
.btn[class*="video"],
.btn[class*="audio"],
.btn[class*="tel"]{
  padding: var(--brand-space-button-y) var(--brand-space-button-x) var(--brand-space-button-y) calc(var(--brand-space-button-x) + 20px);
}
.btn-lg[class*="intern"],
.btn-lg[class*="extern"],
.btn-lg[class*="mail"],
.btn-lg[class*="telefon"],
.btn-lg[class*="download"],
.btn-lg[class*="pdf"],
.btn-lg[class*="plus"],
.btn-lg[class*="back"],
.btn-lg[class*="video"],
.btn-lg[class*="audio"],
.btn-lg[class*="tel"]{
  padding: var(--brand-space-button-y) calc(var(--brand-space-button-x) * 1.25) var(--brand-space-button-y) calc((var(--brand-space-button-x) * 1.25) + 20px);
}

/* Default / Neutral Button */
.btn-default {
  --bs-btn-color: var(--brand-text-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--brand-text-color);

  --bs-btn-hover-color: var(--brand-primary-hover);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--brand-primary-hover);

  --bs-btn-active-color: var(--brand-primary-active);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--brand-primary-active);

  --bs-btn-disabled-color: var(--brand-text-color);
  --bs-btn-disabled-bg: var(--brand-gray);
  --bs-btn-disabled-border-color: var(--brand-text-color);
}

/* Primary */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

/* Secondary */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);

  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-secondary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-secondary) 80%, black);

  --bs-btn-active-bg: color-mix(in srgb, var(--brand-secondary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-secondary) 70%, black);
}

/* Outline Primary */
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
}










/* -------------------------------------------------------------------------------------------------
   02.02) Links (Global + Speziallinks)
   ------------------------------------------------------------------------------------------------- */


a {
  color: var(--brand-link-color); /* statt var(--brand-primary) */
  text-decoration: var(--bs-link-decoration);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-weight: 600;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	text-decoration:none;
	display:inline-block;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
h1 a:focus,
h2 a:focus,
h3 a:focus,
h4 a:focus,
h5 a:focus,
h6 a:focus{
	color: var(--brand-link-color);
}

a:hover,
a:focus:hover {
  color: var(--bs-link-hover-color);
  text-decoration: var(--bs-link-hover-decoration);
}

/* Standard: kein Fokusrahmen */
button:focus:not(:focus-visible) { outline: 0; box-shadow:none;}
:focus{
  outline: none;
  box-shadow:none;
}

/* Nur bei Tastatur-Navigation */
:focus-visible{
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}


/* Link im Text */
/*
p > a.intern:not(:first-child),
p > a.extern:not(:first-child),
p > a.mail:not(:first-child), p > a[data-mailto-token]:not(:first-child),
p > a.telefon:not(:first-child),
p > a.download:not(:first-child),
p > a.pdf:not(:first-child),
p > a.plus:not(:first-child),
p > a.video:not(:first-child),
p > a.audio:not(:first-child),
p > a.tel::before, a[href*="tel:"] {
	margin-left:5px;
}
*/

/* Speziallinks – Basis */
a.intern,
a.extern,
a.mail, a[data-mailto-token],
a.telefon,
a.download,
a.pdf,
a.plus,
a.back,
a.video,
a.audio,
a.tel, a[href*="tel:"] {
  text-decoration: none;
  position: relative;
  padding-left: 20px;
  display: inline-flex;
  align-items: center;
}


/* Speziallinks – Icons */
a.intern::before,
a.extern::before,
a.mail::before, a[data-mailto-token]:before,
a.telefon::before,
a.download::before,
a.pdf::before,
a.plus::before,
a.back::before,
a.video::before,
a.audio::before,
a.tel::before, a[href*="tel:"]:before {
  font-family: var(--brand-icon-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  position: absolute;
  left: 0;
  top:5px;
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  color: inherit;
  transition: color .2s ease;
}

a:hover::before { color: inherit; }

/* Unicode-Zuweisungen */
a.intern::before                             { content: "\f061"; }
a.extern::before                             { content: "\f08e"; }
a.mail::before, a[data-mailto-token]:before  { content: "\f0e0"; }
a.telefon::before                            { content: "\f095"; }
a.download::before                           { content: "\e094"; }
a.pdf::before                                { content: "\f1c1"; }
a.plus::before                               { content: "\f0fe"; }
a.back::before                               { content: "\f060"; }
a.video::before                              { content: "\f144"; }
a.audio::before                              { content: "\f025"; }
a.tel::before, a[href*="tel:"]:before         { content: "\f095"; }              







/* -------------------------------------------------------------------------------------------------
   02.03) Accordion + Details (einheitlicher Look mit Bootstrap Icons)
   ------------------------------------------------------------------------------------------------- */

/* Details */
details {
  border: 0px solid var(--brand-accordion-border-color);
  border-radius: var(--brand-accordion-radius);
  margin-bottom: var(--space-2);
  background-color: var(--brand-accordion-body-bg);
  color: var(--brand-accordion-body-color);
}

/* Kopf */
details > summary {
  list-style: none;
  margin: 0;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  background-color: var(--brand-accordion-btn-bg);
  color: var(--brand-accordion-btn-color);
  border-radius: var(--brand-accordion-radius);
}

/* Kopf - wenn auf hellgrauem Hintergrund */
.bg-brand-light details > summary {
	background-color:#ffffff;
}

/* Marker entfernen */
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }

/* Icon */
details > summary::after {
  font-family: "bootstrap-icons";
  content: "\F282"; /* bi-chevron-down */
  font-size: 1.1rem;
  display: inline-block;
  transition: transform .25s ease, color .25s ease;
  color: var(--brand-accordion-btn-color);
}

/* Open */
details[open] > summary {
  color: var(--brand-accordion-active-color);
  background-color: var(--brand-accordion-active-bg);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details[open] > summary::after {
  transform: rotate(180deg);
  color: var(--brand-accordion-active-color);
}

/* Inhalt */
details > *:not(summary) { 
	padding: .75rem 1rem 1rem; 
	background-color:var(--brand-light);
}

/* Inhalt - Wenn auf hellgrauem Hintergrund */
.bg-brand-light details > *:not(summary) { 
	background-color:#ffffff;
}


/* Fokus */
details > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}


/* Bootstrap Accordion */
.accordion-button {
  background-color: var(--brand-accordion-btn-bg);
  color: var(--brand-accordion-btn-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accordion-button::after {
  background-image: none !important;
  font-family: "bootstrap-icons";
  content: "\F282"; /* bi-chevron-down */
  font-size: 1.1rem;
  color: var(--brand-accordion-btn-color);
  margin-left: auto;
  transform: rotate(0deg);
  transition: transform .25s ease, color .25s ease;
}

.accordion-button:not(.collapsed) {
  background-color: var(--brand-accordion-active-bg);
  color: var(--brand-accordion-active-color);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: var(--brand-primary-active);
}

.accordion-button:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.accordion-body {
  background-color: var(--brand-accordion-body-bg);
  color: var(--brand-accordion-body-color);
}

.details-content > div > div > header { display: none; }




/* -------------------------------------------------------------------------------------------------
   02.04) Alerts
   ------------------------------------------------------------------------------------------------- */

.alert-primary {
  --bs-alert-bg: var(--brand-primary-soft);
  --bs-alert-border-color: var(--brand-primary);
  --bs-alert-color: var(--brand-primary-active);
}

.alert-success {
  --bs-alert-bg: color-mix(in srgb, var(--brand-success) 10%, white);
  --bs-alert-border-color: var(--brand-success);
  --bs-alert-color: color-mix(in srgb, var(--brand-success) 70%, black);
}

.alert-warning {
  --bs-alert-bg: color-mix(in srgb, var(--brand-warning) 20%, white);
  --bs-alert-border-color: var(--brand-warning);
  --bs-alert-color: #664d03;
}

.alert-danger {
  --bs-alert-bg: color-mix(in srgb, var(--brand-danger) 15%, white);
  --bs-alert-border-color: var(--brand-danger);
  --bs-alert-color: color-mix(in srgb, var(--brand-danger) 70%, black);
}

.alert-info {
  --bs-alert-bg: color-mix(in srgb, var(--brand-info) 15%, white);
  --bs-alert-border-color: var(--brand-info);
  --bs-alert-color: color-mix(in srgb, var(--brand-info) 70%, black);
}


/* -------------------------------------------------------------------------------------------------
   02.05) Badges
   ------------------------------------------------------------------------------------------------- */
.badge {
	border-radius: var(--radius-sm);
}
.badge {
  margin-right: 5px;
  margin-bottom: 5px;
}

.badge:last-child {
  margin-right: 0;
}

.text-bg-primary,
.badge.bg-primary {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

.badge.bg-primary-soft {
  background-color: var(--brand-primary-soft) !important;
  color: var(--brand-primary-active) !important;
}

.text-bg-secondary,
.badge.bg-secondary {
  background-color: var(--brand-secondary) !important;
  color: #fff !important;
}

.text-bg-success,
.badge.bg-success {
  background-color: var(--brand-success) !important;
  color: #fff !important;
}

.text-bg-danger,
.badge.bg-danger {
  background-color: var(--brand-danger) !important;
  color: #fff !important;
}

.text-bg-warning,
.badge.bg-warning {
  background-color: var(--brand-warning) !important;
  color: #000 !important;
}

.text-bg-info,
.badge.bg-info {
  background-color: var(--brand-info) !important;
  color: #000 !important;
}

.text-bg-light,
.badge.bg-light {
  background-color: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}
.bg-brand-light .badge.bg-light {
	background-color:#ffffff !important;
}

.text-bg-dark,
.badge.bg-dark {
  background-color: var(--brand-dark) !important;
  color: #fff !important;
}


/* -------------------------------------------------------------------------------------------------
   02.06) List Group
   ------------------------------------------------------------------------------------------------- */

.list-group-item {
  border-color: var(--brand-list-group-border-color);
  background-color: var(--brand-list-group-bg);
  color: var(--brand-list-group-color);
}

.list-group-item.active {
  background-color: var(--brand-list-group-active-bg);
  border-color: var(--brand-list-group-active-border-color);
  color: var(--brand-list-group-active-color);
}

.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:not(.active):focus,
.list-group-item-action:not(.active):hover {
  background-color: var(--brand-list-group-action-hover-bg);
  color: var(--brand-list-group-action-hover-color);
}

.list-group-item-action.active {
  background-color: var(--brand-list-group-action-active-bg);
  border-color: var(--brand-list-group-active-border-color);
  color: var(--brand-list-group-action-active-color);
}


/* -------------------------------------------------------------------------------------------------
   02.07) Nav / Tabs / Pills
   ------------------------------------------------------------------------------------------------- */

.nav-tabs {
  margin-left: var(--brand-card-padding-x);
  border-bottom: 0px solid var(--brand-nav-tabs-border);
}

.nav-tabs .nav-item { border: 0px solid black; }

.nav-tabs .nav-link {
  color: white;
  background-color: var(--brand-nav-tabs-color);
  border-color: var(--brand-nav-tabs-color);
  margin-right: 4px;
  padding: var(--brand-card-padding-y-sm) var(--brand-card-padding-x-sm);
  font-weight: var(--brand-font-weight-bold) !important;
}

.nav-tabs .nav-link:hover {
  color: white;
  background-color: var(--brand-nav-tabs-active-color) !important;
  border-color: var(--brand-nav-tabs-active-color) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--brand-text-color);
  background-color: white;
  border-color: var(--brand-nav-tabs-active-border) var(--brand-nav-tabs-active-border) transparent !important;
  border-bottom-color: transparent !important;
}

.nav-tabs .nav-link.active {
  cursor: default;
  pointer-events: none;
}

/* Content */
.tab-content {
  padding: var(--brand-card-padding-x);
  border-radius: var(--brand-radius);
  border: 1px solid var(--brand-nav-tabs-content-border) !important;
}
.tab-content > .tab-panel header {display:none;}
.tab-content > .tab-panel { display: none; }
.tab-content > .tab-panel.active { display: block; }



/* Pills */
.nav-pills .nav-link { color: var(--brand-dark); }

.nav-pills .nav-link:hover {
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary-active);
}

.nav-pills .nav-link.active {
  background-color: var(--brand-primary);
  color: #fff;
}


/* -------------------------------------------------------------------------------------------------
   02.08) Pagination
   ------------------------------------------------------------------------------------------------- */

.page-link {
  color: var(--brand-primary);
  border-color: var(--brand-border-color-dark);
}

.page-link:hover {
  color: var(--brand-primary-hover);
  background-color: var(--brand-primary-soft);
  border-color: var(--brand-primary-hover);
}

.page-item.active .page-link {
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.page-item.disabled .page-link {
  color: var(--brand-gray, #9a9a9a);
  background-color: #fff;
  border-color: var(--brand-border-color);
}


/* -------------------------------------------------------------------------------------------------
   02.09) Progress
   ------------------------------------------------------------------------------------------------- */

.progress { background-color: var(--brand-primary-soft); }

.progress-bar { background-color: var(--brand-primary); }
.progress-bar.bg-success { background-color: var(--brand-success) !important; }
.progress-bar.bg-warning { background-color: var(--brand-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--brand-danger) !important; }
.progress-bar.bg-info    { background-color: var(--brand-info) !important; }


/* -------------------------------------------------------------------------------------------------
   02.10) Cards
   ------------------------------------------------------------------------------------------------- */

.card {
	border-radius:var(--brand-card-radius);
}
.no-gutters .card {
    border-width:0px;	
}
.card-body{
  padding: var(--brand-card-padding-y) var(--brand-card-padding-x);
  display:flex;
  flex-direction:column;
}
/* Wenn andere Elemente eine Klasse .card bekommen */
.card > div[class*="ce-image"] > .ce-gallery img,
[class*="grid-"] > .content-item.card,
.container-fluid.card{
  padding: var(--brand-card-padding-y) var(--brand-card-padding-x);
}

/* Bild Überschrift Text */
.card.imgorient-27 img {
	padding:0em;
}

/* Abstand Padding im Textfeld je nach Aufteilung */
.content > div[class*="grid"] > .content-item > .row > div[class*="col-"] > .card > .card-body,
.content > div[class*="grid"] > .content-item > .row > div[class*="col-"] > .container-fluid.card {
   padding: calc(var(--brand-card-padding-y) * 3) calc(var(--brand-card-padding-x) * 3);  
}
@media (min-width:0px) and (max-width:575px) {
.content > div[class*="grid"] > .content-item > .row > div[class*="col-12"] > .card > .card-body,
.content > div[class*="grid"] > .content-item > .row > div[class*="col-12"] > .container-fluid.card {
   padding:  var(--brand-card-padding-y)  var(--brand-card-padding-y);  
}
}
@media (min-width:576px) and (max-width:767px) {
.content > div[class*="grid"] > .content-item > .row > div[class*="col-sm-12"] > .card > .card-body,
.content > div[class*="grid"] > .content-item > .row > div[class*="col-sm-12"] > .container-fluid.card {
   padding: var(--brand-card-padding-y) calc(((100% - 540px) / 2) + 15px);  
}
}
@media (min-width:768px) and (max-width:991px) {
.content > div[class*="grid"] > .content-item > .row > div[class*="col-md-12"] > .card > .card-body,
.content > div[class*="grid"] > .content-item > .row > div[class*="col-md-12"] > .container-fluid.card {
   padding: var(--brand-card-padding-y) calc(((100% - 720px) / 2) + 15px);  
	}
}
@media (min-width:992px) and (max-width:1199px) {
.content > div[class*="grid"] > .content-item > .row > div[class*="col-lg-12"] > .card > .card-body,
.content > div[class*="grid"] > .content-item > .row > div[class*="col-lg-12"] > .container-fluid.card {
   padding: var(--brand-card-padding-y) calc(((100% - 960px) / 2) + 15px);   
} 
}
@media (min-width:1200px) and (max-width:1399px) {
.content > div[class*="grid"] > .content-item > .row > div[class*="col-xl-12"] > .card > .card-body,
.content > div[class*="grid"] > .content-item > .row > div[class*="col-xl-12"] > .container-fluid.card {
   padding: var(--brand-card-padding-y) calc(((100% - 1140px) / 2) + 15px);    
}
}
@media (min-width:1400px) {
.content > div[class*="grid"] > .content-item > .row > div[class*="col-xxl-12"] > .card > .card-body,
.content > div[class*="grid"] > .content-item > .row > div[class*="col-xxl-12"] > .container-fluid.card {
   padding: var(--brand-card-padding-y) calc(((100% - 1320px) / 2) + 15px);    
}
}

.card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Headlines innerhalb Primary, Secondary und Dark in #ffffff */
.card.bg-brand-primary {
  --bs-heading-color: #fff; /* weiß für alle h1–h6 */
}

.card[class*="justify"] .card-body {
  flex: 0 0 auto;
}

.card[class*="bg-brand"],
.layout-overlay .overlay-text.col-xxl-12 .card,
.layout-overlay .overlay-text.col-xl-12 .card, 
.layout-overlay .overlay-text.col-lg-12 .card, 
.layout-overlay .overlay-text.col-md-12 .card, 
.layout-overlay .overlay-text.col-sm-12 .card, 
.layout-overlay .overlay-text.col-12 .card{
    border-width:0px;
} 
@media (min-width:0px) and (max-width:575px) {
.layout-overlay .overlay-text.col-12 .card{
    border-width:0px;
}    
}
@media (min-width:576px) and (max-width:767px) {
.layout-overlay .overlay-text.col-sm-12 .card {
    border-width:0px;
}    
}
@media (min-width:768px) and (max-width:991px) {
.layout-overlay .overlay-text.col-md-12 .card {
    border-width:0px;
}    
}
@media (min-width:992px) and (max-width:1199px) {
.layout-overlay .overlay-text.col-lg-12 .card {
    border-width:0px;
}   
}
@media (min-width:1200px) and (max-width:1399px) {
.layout-overlay .overlay-text.col-xl-12 .card{
    border-width:0px;
}    
}
@media (min-width:1400px) {
 .layout-overlay .overlay-text.col-xxl-12 .card,
.layout-overlay .overlay-text.col-xl-12 .card, 
.layout-overlay .overlay-text.col-lg-12 .card, 
.layout-overlay .overlay-text.col-md-12 .card, 
.layout-overlay .overlay-text.col-sm-12 .card, 
.layout-overlay .overlay-text.col-12 .card{
    border-width:0px;
}    
}


/* =========================================================
   02.11) CAROUSEL + SWIPER (Unified)
   - Pfeile (Prev/Next) einheitlich
   - Indicators (Bullets/Indicators) einheitlich
   - inkl. Fix für Swiper "dynamic bullets" (sonst bleiben es Kreise)
========================================================= */

/* -------------------------
   Pfeile rechts/links
------------------------- */
.carousel-control-next, 
.carousel-control-prev {
	opacity:1;
	color:#000000 !important;
}
/* Bootstrap: die Icons sind <span class="carousel-control-*-icon"> */
.carousel-control-next-icon,
.carousel-control-prev-icon,
.swiper-button-next,
.swiper-button-prev{
  width: 50px !important;
  height: 50px !important;
  opacity:1 !important;
  /* Bootstrap-Icon entfernen */
  background-image: none !important;

  /* Kreis-Button */
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  border:1px solid var(--brand-border-color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:20;
}



/* Swiper bringt oft Default-Styles über ::after mit */
.swiper-button-next::after,
.swiper-button-prev::after{
  content: "" !important;
}

/* Mask-Icon als "Pfeil" */
.carousel-control-next-icon::before,
.carousel-control-prev-icon::before,
.swiper-button-next::before,
.swiper-button-prev::before{
  content: "";
  width: 30px;
  height: 30px;

  /* Pfeilfarbe */
  background-color: var(--brand-border-color-dark);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Right */
.carousel-control-next-icon::before,
.swiper-button-next::before{
  -webkit-mask-image: url("../images/icons/slider-chevron-right.svg");
  mask-image: url("../images/icons/slider-chevron-right.svg");
}

/* Left */
.carousel-control-prev-icon::before,
.swiper-button-prev::before{
  -webkit-mask-image: url("../images/icons/slider-chevron-left.svg");
  mask-image: url("../images/icons/slider-chevron-left.svg");
}


/* Hoverzustand */

/* Hover- und Tastaturzustand */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon,
.carousel-control-prev:focus-visible .carousel-control-prev-icon,
.carousel-control-next:focus-visible .carousel-control-next-icon,
.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  opacity: 1 !important;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Pfeil im Hover weiß färben */
.carousel-control-prev:hover .carousel-control-prev-icon::before,
.carousel-control-next:hover .carousel-control-next-icon::before,
.carousel-control-prev:focus-visible .carousel-control-prev-icon::before,
.carousel-control-next:focus-visible .carousel-control-next-icon::before,
.swiper-button-prev:hover::before,
.swiper-button-next:hover::before,
.swiper-button-prev:focus-visible::before,
.swiper-button-next:focus-visible::before {
  background-color: #ffffff !important;
}



/* -------------------------
   Indicators (Unified)
------------------------- */

/* Platz unter dem Slider schaffen */
.swiper,
.carousel{
  position: relative;
  padding-bottom: 65px !important;   /* Höhe der Pagination + etwas Luft */
}

.swiper .swiper-pagination,
.carousel .carousel-indicators{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  z-index: 10;
	height:50px;
	align-items:center;
	width:calc(100% - 100px);
	margin:0 auto;
}

/* Items: Swiper bullets + Bootstrap indicator buttons */
.swiper .swiper-pagination-bullet,
.carousel-indicators [data-bs-target]{
  width: 15px !important;
  height: 15px !important;
  background: #ffffff;
  opacity: .85;
  border:1px solid var(--brand-border-color-dark);
  border-radius:50% !important;
  margin: 0 !important;
  transition: opacity .2s ease;
  position: relative;
}

/* Active */
.swiper .swiper-pagination-bullet-active,
.carousel-indicators .active{
  opacity: 1;
  border:1px solid var(--brand-primary);
	background-color:var(--brand-primary);
}

/* Größerer Klickbereich - Usability */
.swiper .swiper-pagination-bullet::after,
.carousel-indicators [data-bs-target]::after{
  content: "";
  position: absolute;
  inset: -8px -6px;
}


/* -------------------------
   Swiper Dynamic Bullets Fix
   (sonst bleiben Bullets "Kreise" / skaliert)
------------------------- */

/* Swiper setzt bei dynamicBullets inline width + transform */
.swiper .swiper-pagination.swiper-pagination-bullets-dynamic{
  width: auto !important;
  transform: none !important;
}

/* Swiper setzt left inline + transform scale() pro Bullet */
/*
.swiper .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
  width: 30px !important;
  height: 3px !important;
  border-radius: 0 !important;
  transform: none !important;
  left: auto !important;
  margin: 0 !important;
}
*/
/* Dynamic Bullets: Swiper-Zentrierung & Sliding deaktivieren */
.swiper-horizontal > .swiper-pagination.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: auto !important;          /* Swiper setzt inline width */
  white-space: normal !important;  /* kein nowrap */
}

/* Bullets nicht mit inline left verschieben */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
  left: auto !important;
  transform: none !important;      /* Swiper scale() raus */
}



/* -------------------------------------------------------------------------------------------------
   02.12) Swiper
   ------------------------------------------------------------------------------------------------- */

.swiper-button-next svg,
.swiper-button-prev svg{
  display: none;
}
.swiper-button-next,
.swiper-button-prev {
	bottom:0 !important;
	top:auto !important;
}



/* -------------------------------------------------------------------------------------------------
   02.13) Carousel
   ------------------------------------------------------------------------------------------------- */

.carousel-control-next, 
.carousel-control-prev {
    width: 50px;
	top:0;
	display:flex;
	align-items: end;
}




/* =====================================================================================================================
   03) LAYOUT MODULES (NAV / TOOLBAR / HEADER)
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   03.01) Fixed Toolbar (rechts)
   ------------------------------------------------------------------------------------------------- */

.brand-toolbar-fixed {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  background-color: var(--brand-primary);
  border-radius: var(--radius) 0 0 var(--radius);
}

.brand-toolbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 50px;
  height: calc(50px + (2 * var(--space-3)));
  background-color: transparent;
  color: #ffffff;
  transition: background-color .2s ease, transform .15s ease, box-shadow .15s ease;
  border-bottom: 1px solid white;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.brand-toolbar-item:last-child { border-bottom: 0px solid white; }




/* -------------------------------------------------------------------------------------------------
   03.02) Toolbar Footer (unten)
   ------------------------------------------------------------------------------------------------- */

.toolbar-content .nav-link {
  padding: 0em;
}




/* -------------------------------------------------------------------------------------------------
   03.03) Navbar / Offcanvas
   ------------------------------------------------------------------------------------------------- */

.offcanvas.offcanvas-top {
  height: auto;
  /*top: 160px;*/
}

/* Social */
.social-icons { margin-right: 140px; }
.social-icon:not(:first-child) { margin-left: 15px; }





/* -------------------------------------------------------------------------------------------------
   03.04) Header / Header fixed
   ------------------------------------------------------------------------------------------------- */

#site-header {
  position: relative;
  transition: box-shadow .2s ease, background-color .2s ease;
}
@media(min-width:0px) {
#site-header {
    height:80px;
}
}
@media(min-width:992px) {
#site-header {
    height:100px;
}   
}
#site-header .navbar,
#site-header .navbar .container,
#site-header .navbar .container .logo,
#site-header .navbar .container .logo * {
    height:100%;
}
#site-header .navbar .logo a {
	display:inline-block;
}
#site-header.is-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

#site-header > .navbar > .container {
align-items:center;
}
@media(min-width:992px) {
#site-header > .navbar > .container {
align-items:end;
}
}




/* =====================================================================================================================
   04) TYPO3 CONTENT PATTERNS (Frames / CE-spezifisch)
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   04.01) Menü Abstract – Links mit Linien
   ------------------------------------------------------------------------------------------------- */

.frame.frame-type-menu_abstract .ce-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.frame.frame-type-menu_abstract .ce-body ul li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--brand-border-color);
}

.frame.frame-type-menu_abstract .ce-body ul li a {
  display: block;
  padding-block: var(--space-3);
  padding-inline: 0;
  color: var(--brand-primary);
  font-weight: var(--brand-font-weight-regular);
  text-decoration: none;
  transition: color 0.2s ease;
}

.frame.frame-type-menu_abstract .ce-body ul li a:hover {
  color: var(--brand-primary-hover);
}

.frame.frame-type-menu_abstract .ce-body ul li a span {
  display: inline-block;
}





/* -------------------------------------------------------------------------------------------------
   04.02) Spalten No-Gutters
   ------------------------------------------------------------------------------------------------- */

/* 04.02.01) Grid-Gutters entfernen */
.content-item[class*="col"].no-gutters .row {
  margin-left: 0em;
  margin-right: 0em;
}

.content-item[class*="col"].no-gutters .row > div[class*="col-"] {
  padding-right: 0em;
  padding-left: 0em;
}

/* 04.02.02) Radius-Regeln: Mehrspalter direkt auf erster Ebene (alles eckig) */
/* Wenn der Mehrspalter direkt auf erster Ebene dann keine runden Ecken */
/* Alles eckig */
main > .content > div[class*="grid-"] > .content-item.no-gutters
  .row > div[class*="col-"] .frame-type-image:only-child img,
main > .content > div[class*="grid-"] > .content-item.no-gutters
  .row > div[class*="col-"] .card:only-child {
  border-top-right-radius: 0em;
  border-bottom-right-radius: 0em;
  border-top-left-radius: 0em;
  border-bottom-left-radius: 0em;
}

/* 04.02.03) Radius-Regeln: Mehrspalter auf Containerbreite */
/* Wenn der Mehrspalter auf Containerbreite */

/* 04.02.03a) Erste Spalte abrunden (links rund, rechts eckig) */
main > .content > .container-fluid > .container > div[class*="grid-"]
  .content-item.no-gutters .row > div[class*="col-"]:first-child
  .frame-type-image:only-child img,
main > .content > .container-fluid > .container > div[class*="grid-"]
  .content-item.no-gutters .row > div[class*="col-"]:first-child
  .card:only-child {
  border-top-left-radius: var(--brand-card-radius);
  border-bottom-left-radius: var(--brand-card-radius);
  border-top-right-radius: 0em;
  border-bottom-right-radius: 0em;
}

/* 04.02.03b) Zweite Spalte abrunden (rechts rund, links eckig) */
main > .content > .container-fluid > .container > div[class*="grid-"]
  .content-item.no-gutters .row > div[class*="col-"]:nth-child(2)
  .frame-type-image:only-child img,
main > .content > .container-fluid > .container > div[class*="grid-"]
  .content-item.no-gutters .row > div[class*="col-"]:nth-child(2)
  .card:only-child {
  border-top-right-radius: var(--brand-card-radius);
  border-bottom-right-radius: var(--brand-card-radius);
  border-top-left-radius: 0em;
  border-bottom-left-radius: 0em;
}







/* -------------------------------------------------------------------------------------------------
   04.03) Zwei-Spalter Highlight-Split / Bild-Cover + Card-Abstände
   ------------------------------------------------------------------------------------------------- */



/* ==================================================
   HIGHLIGHT SPLIT (2col) – FINAL / AUTO HEIGHT
   - Row wächst mit Text
   - Spalten immer gleich hoch (Flex-Stretch)
   - Bild füllt Spaltenhöhe via absolute positioning
   - min-height als Untergrenze
================================================== */

/* ===== ROW ===== */
.highlight-split .row{
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
/* Default: eher klein */
.highlight-split .row{
  min-height: 300px;
}

/* Tablet */
@media (min-width: 768px){
  .highlight-split .row{ min-height: 400px; }
}

/* Desktop */
@media (min-width: 992px){
  .highlight-split .row{ min-height: 500px; }
}

/* Large Desktop */
@media (min-width: 1400px){
  .highlight-split .row{ min-height: 600px; }
}


/* ===== COLUMNS ===== */
.highlight-split .row > div[class*="col-"]{
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: stretch;
}

/* ===== FRAME ===== */
.highlight-split .row > div[class*="col-"] > .frame{
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ==================================================
   IMAGE COLUMN
================================================== */

.highlight-split .frame-type-image{
  position: relative;
  flex: 1;
}

/* TYPO3 CE-Wrapper auf volle Höhe */
.highlight-split .frame-type-image .ce-image,
.highlight-split .frame-type-image .ce-gallery,
.highlight-split .frame-type-image .ce-outer,
.highlight-split .frame-type-image .ce-inner,
.highlight-split .frame-type-image .ce-row,
.highlight-split .frame-type-image .ce-column,
.highlight-split .frame-type-image figure{
  position: relative;
  flex: 1;
  height: 100%;
  margin: 0;
}

/* Wenn Col-12 */
@media (min-width: 0px) and (max-width:575px) {
  .highlight-split div[class*="col-12"] > .frame-type-image img{
    position: static;
    height: auto !important;
  }
}
@media (min-width: 576px) and (max-width:767px) {
  .highlight-split div[class*="col-sm-12"] > .frame-type-image img{
    position: static;
    height: auto !important;
  }
}
@media (min-width: 768px) and (max-width:991px) {
  .highlight-split div[class*="col-md-12"] > .frame-type-image img{
    position: static;
    height: auto !important;
  }
}
@media (min-width: 992px) and (max-width:1199px) {
  .highlight-split div[class*="col-lg-12"] > .frame-type-image img{
    position: static;
    height: auto !important;
  }
}
@media (min-width: 1200px) and (max-width:1399px) {
  .highlight-split div[class*="col-xl-12"] > .frame-type-image img{
    position: static;
    height: auto !important;
  }
}
@media (min-width: 1400px) {
  .highlight-split div[class*="col-xxl-12"] > .frame-type-image img{
    position: static;
    height: auto !important;
  }
}


/* Wenn nicht Col-12*/
@media (min-width: 0px) and (max-width:575px) {
  .highlight-split div:not([class*="col-12"]) > .frame-type-image img{
  position: absolute;
  height: 100% !important;
  }
}
@media (min-width: 576px) and (max-width:767px) {
  .highlight-split div:not([class*="col-sm-12"]) > .frame-type-image img{
  position: absolute;
  height: 100% !important;
  }
}
@media (min-width: 768px) and (max-width:991px) {
  .highlight-split div:not([class*="col-md-12"]) > .frame-type-image img{
  position: absolute;
  height: 100% !important;
  }
}
@media (min-width: 992px) and (max-width:1199px) {
  .highlight-split div:not([class*="col-lg-12"]) > .frame-type-image img{
  position: absolute;
  height: 100% !important;
  }
}
@media (min-width: 1200px) and (max-width:1399px) {
  .highlight-split div:not([class*="col-xl-12"]) > .frame-type-image img{
  position: absolute;
  height: 100% !important;
  }
}
@media (min-width: 1400px) {
  .highlight-split div:not([class*="col-xxl-12"]) > .frame-type-image img{
  position: absolute;
  height: 100% !important;
  }
}



/* Bild absolut füllen */
.highlight-split .frame-type-image img{
  inset: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ==================================================
   TEXT / CARD COLUMN
================================================== */

.highlight-split div[class*="col-"] > .frame-type-text{
  display: flex;
  align-items: center;
}

.highlight-split div[class*="col-"] > .frame-type-text .card-body{
  width: 100%;
}


/* ==================================================
   Pixel-Grafik (dein Pattern)
   Fix: ::before in 1. Spalte (rechts) war "zu groß"
   Ursache: durch "left:100%" + "right:0" aus dem Basisblock
            wird die Breite > 100% (beides gesetzt).
   Lösung: Im vertikalen Modus left/right sauber resetten:
           - 1. Spalte: right:auto + left:100% + width:100%
           - 2. Spalte: left:auto + right:100% + width:100%
================================================== */

.highlight-split .card[class*="bg-brand-"]{
  position: relative;
}

.highlight-split .card[class*="bg-brand-"]::before{
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;

  background-repeat: no-repeat;
  background-size: auto auto;

  /* an Card koppeln */
  top: -2px;
  bottom: -2px;
  left: 0;
  right: 0;
}


/* ==================================================
   VERTIKAL (DEFAULT, NICHT stacked)
   FIX: right/left explizit zurücksetzen, damit Breite stimmt
================================================== */

/* Card in erster Spalte (Pattern rechts) */
.highlight-split div[class*="col-"]:first-child .card[class*="bg-brand-"]::before{
  left: 100%;
  right: auto;     /* <<< FIX (war 0 aus Basis) */
  width: 100%;
  background-position: top left;
}

/* Card in zweiter Spalte (Pattern links) */
.highlight-split div[class*="col-"]:nth-child(2) .card[class*="bg-brand-"]::before{
  right: 100%;
  left: auto;      /* <<< FIX (war 0 aus Basis) */
  width: 100%;
  background-position: top right;
}


/* ==================================================
   HORIZONTAL (STACKED / col-*-12)
   - überschreibt vertikale Positionierung, inkl. width/left/right
================================================== */

@media (max-width:575px){
  .highlight-split div[class*="col-12"]:first-child .card[class*="bg-brand-"]::before{
    top: 100%;
    bottom: auto;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: top left;
  }
  .highlight-split div[class*="col-12"]:nth-child(2) .card[class*="bg-brand-"]::before{
    top: auto;
    bottom: 100%;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: bottom left;
  }
}

@media (min-width:576px) and (max-width:767px){
  .highlight-split div[class*="col-sm-12"]:first-child .card[class*="bg-brand-"]::before{
    top: 100%;
    bottom: auto;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: top left;
  }
  .highlight-split div[class*="col-sm-12"]:nth-child(2) .card[class*="bg-brand-"]::before{
    top: auto;
    bottom: 100%;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: bottom left;
  }
}

@media (min-width:768px) and (max-width:991px){
  .highlight-split div[class*="col-md-12"]:first-child .card[class*="bg-brand-"]::before{
    top: 100%;
    bottom: auto;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: top left;
  }
  .highlight-split div[class*="col-md-12"]:nth-child(2) .card[class*="bg-brand-"]::before{
    top: auto;
    bottom: 100%;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: bottom left;
  }
}

@media (min-width:992px) and (max-width:1199px){
  .highlight-split div[class*="col-lg-12"]:first-child .card[class*="bg-brand-"]::before{
    top: 100%;
    bottom: auto;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: top left;
  }
  .highlight-split div[class*="col-lg-12"]:nth-child(2) .card[class*="bg-brand-"]::before{
    top: auto;
    bottom: 100%;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: bottom left;
  }
}

@media (min-width:1200px) and (max-width:1399px){
  .highlight-split div[class*="col-xl-12"]:first-child .card[class*="bg-brand-"]::before{
    top: 100%;
    bottom: auto;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: top left;
  }
  .highlight-split div[class*="col-xl-12"]:nth-child(2) .card[class*="bg-brand-"]::before{
    top: auto;
    bottom: 100%;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: bottom left;
  }
}

@media (min-width:1400px){
  .highlight-split div[class*="col-xxl-12"]:first-child .card[class*="bg-brand-"]::before{
    top: 100%;
    bottom: auto;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: top left;
  }
  .highlight-split div[class*="col-xxl-12"]:nth-child(2) .card[class*="bg-brand-"]::before{
    top: auto;
    bottom: 100%;
    height: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-position: bottom left;
  }
}


/* ==================================================
   GRAFIKEN – LIGHT / PRIMARY / GRAY
   (nur background-image)
================================================== */

/* ---------- VERTIKAL: Default (60) ---------- */
.highlight-split div[class*="col-"]:first-child .card.bg-brand-light::before{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-light-60.svg");
}
.highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-light::before{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-light-60.svg");
}

.highlight-split div[class*="col-"]:first-child .card.bg-brand-primary::before{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-primary-60.svg");
}
.highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-primary::before{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-primary-60.svg");
}

.highlight-split div[class*="col-"]:first-child .card.bg-brand-gray::before{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-gray-60.svg");
}
.highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-gray::before{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-gray-60.svg");
}

/* ---------- VERTIKAL: Tablet (80) ---------- */
@media (min-width:768px) and (max-width:991px){
  .highlight-split div[class*="col-"]:first-child .card.bg-brand-light::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-light-80.svg");
  }
  .highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-light::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-light-80.svg");
  }

  .highlight-split div[class*="col-"]:first-child .card.bg-brand-primary::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-primary-80.svg");
  }
  .highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-primary::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-primary-80.svg");
  }

  .highlight-split div[class*="col-"]:first-child .card.bg-brand-gray::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-gray-80.svg");
  }
  .highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-gray::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-gray-80.svg");
  }
}

/* ---------- VERTIKAL: Desktop+ (100) ---------- */
@media (min-width:992px){
  .highlight-split div[class*="col-"]:first-child .card.bg-brand-light::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-light-100.svg");
  }
  .highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-light::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-light-100.svg");
  }

  .highlight-split div[class*="col-"]:first-child .card.bg-brand-primary::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-primary-100.svg");
  }
  .highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-primary::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-primary-100.svg");
  }

  .highlight-split div[class*="col-"]:first-child .card.bg-brand-gray::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-rechts-gray-100.svg");
  }
  .highlight-split div[class*="col-"]:nth-child(2) .card.bg-brand-gray::before{
    background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-verti-links-gray-100.svg");
  }
}


/* ==================================================
   HORIZONTAL (STACKED): Images je Breakpoint
   (nur background-image)
================================================== */

/* XS (<=575) = 60 */
@media (max-width:575px){
  .highlight-split div[class*="col-12"]:first-child .card.bg-brand-light::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-light-60.svg"); }
  .highlight-split div[class*="col-12"]:nth-child(2) .card.bg-brand-light::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-60.svg"); }

  .highlight-split div[class*="col-12"]:first-child .card.bg-brand-primary::before{ background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-primary-60.svg"); }
  .highlight-split div[class*="col-12"]:nth-child(2) .card.bg-brand-primary::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-primary-60.svg"); }

  .highlight-split div[class*="col-12"]:first-child .card.bg-brand-gray::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-gray-60.svg"); }
  .highlight-split div[class*="col-12"]:nth-child(2) .card.bg-brand-gray::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-gray-60.svg"); }
}

/* SM (576-767) = 60 */
@media (min-width:576px) and (max-width:767px){
  .highlight-split div[class*="col-sm-12"]:first-child .card.bg-brand-light::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-light-60.svg"); }
  .highlight-split div[class*="col-sm-12"]:nth-child(2) .card.bg-brand-light::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-60.svg"); }

  .highlight-split div[class*="col-sm-12"]:first-child .card.bg-brand-primary::before{ background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-primary-60.svg"); }
  .highlight-split div[class*="col-sm-12"]:nth-child(2) .card.bg-brand-primary::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-primary-60.svg"); }

  .highlight-split div[class*="col-sm-12"]:first-child .card.bg-brand-gray::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-gray-60.svg"); }
  .highlight-split div[class*="col-sm-12"]:nth-child(2) .card.bg-brand-gray::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-gray-60.svg"); }
}

/* MD (768-991) = 80 */
@media (min-width:768px) and (max-width:991px){
  .highlight-split div[class*="col-md-12"]:first-child .card.bg-brand-light::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-light-80.svg"); }
  .highlight-split div[class*="col-md-12"]:nth-child(2) .card.bg-brand-light::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-80.svg"); }

  .highlight-split div[class*="col-md-12"]:first-child .card.bg-brand-primary::before{ background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-primary-80.svg"); }
  .highlight-split div[class*="col-md-12"]:nth-child(2) .card.bg-brand-primary::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-primary-80.svg"); }

  .highlight-split div[class*="col-md-12"]:first-child .card.bg-brand-gray::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-gray-80.svg"); }
  .highlight-split div[class*="col-md-12"]:nth-child(2) .card.bg-brand-gray::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-gray-80.svg"); }
}

/* LG (992-1199) = 100 */
@media (min-width:992px) and (max-width:1199px){
  .highlight-split div[class*="col-lg-12"]:first-child .card.bg-brand-light::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-light-100.svg"); }
  .highlight-split div[class*="col-lg-12"]:nth-child(2) .card.bg-brand-light::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-100.svg"); }

  .highlight-split div[class*="col-lg-12"]:first-child .card.bg-brand-primary::before{ background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-primary-100.svg"); }
  .highlight-split div[class*="col-lg-12"]:nth-child(2) .card.bg-brand-primary::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-primary-100.svg"); }

  .highlight-split div[class*="col-lg-12"]:first-child .card.bg-brand-gray::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-gray-100.svg"); }
  .highlight-split div[class*="col-lg-12"]:nth-child(2) .card.bg-brand-gray::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-gray-100.svg"); }
}

/* XL (1200-1399) = 100 */
@media (min-width:1200px) and (max-width:1399px){
  .highlight-split div[class*="col-xl-12"]:first-child .card.bg-brand-light::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-light-100.svg"); }
  .highlight-split div[class*="col-xl-12"]:nth-child(2) .card.bg-brand-light::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-100.svg"); }

  .highlight-split div[class*="col-xl-12"]:first-child .card.bg-brand-primary::before{ background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-primary-100.svg"); }
  .highlight-split div[class*="col-xl-12"]:nth-child(2) .card.bg-brand-primary::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-primary-100.svg"); }

  .highlight-split div[class*="col-xl-12"]:first-child .card.bg-brand-gray::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-gray-100.svg"); }
  .highlight-split div[class*="col-xl-12"]:nth-child(2) .card.bg-brand-gray::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-gray-100.svg"); }
}

/* XXL (>=1400) = 100 */
@media (min-width:1400px){
  .highlight-split div[class*="col-xxl-12"]:first-child .card.bg-brand-light::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-light-100.svg"); }
  .highlight-split div[class*="col-xxl-12"]:nth-child(2) .card.bg-brand-light::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-100.svg"); }

  .highlight-split div[class*="col-xxl-12"]:first-child .card.bg-brand-primary::before{ background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-primary-100.svg"); }
  .highlight-split div[class*="col-xxl-12"]:nth-child(2) .card.bg-brand-primary::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-primary-100.svg"); }

  .highlight-split div[class*="col-xxl-12"]:first-child .card.bg-brand-gray::before{  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-runter-gray-100.svg"); }
  .highlight-split div[class*="col-xxl-12"]:nth-child(2) .card.bg-brand-gray::before{   background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-gray-100.svg"); }
}





/* -------------------------------------------------------------------------------------------------
   04.03) Mehr-Spalter nummeriert in Steps
   ------------------------------------------------------------------------------------------------- */

/* ==================================================
   STEPS NUMBERS – Card-basiert (verfeinert)
================================================== */

/* Zähler initialisieren */
.steps-numbers .row6col{
  counter-reset: step;
  row-gap: 1.25rem;
}

/* Jede Col zählt hoch */
.steps-numbers .row6col > div[class*="col-"]{
  counter-increment: step;
  position: relative;
}

/* =========================
   Card bleibt Card
========================= */

.steps-numbers .frame.ce.card{
  position: relative;
  /* etwas mehr Luft für Zahl + Tiefe */
  margin-left: 3.5rem;
  border: 1px solid var(--brand-border-color-light);
/*background:
    linear-gradient(
      to right,
      rgba(0,0,0,0),
      rgba(0,0,0,0.175)
    ) top / 100% 1px no-repeat,
    linear-gradient(
      to right,
      rgba(0,0,0,0),
      rgba(0,0,0,0.175)
    ) bottom / 100% 1px no-repeat,
    #fff;*/
}
.steps-numbers .frame.ce.card:not([class*="bg-"]){
    background-color:white;
}
/* Body ganz normal */
.steps-numbers .frame.ce.card .card-body{
  padding: 1rem 1.25rem;
}

/* =========================
   Große Nummer
========================= */

.steps-numbers .row6col > div[class*="col-"] .frame.ce.card::before{
  content: counter(step);
  position: absolute;

  /* leicht eingerückt */
  left: -2.25rem;
  top: 50%;
  transform: translateY(-50%);

  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
    z-index:-2;

  color: var(--brand-primary);

  /* Zahl minimal weicher */
  text-shadow: 0 0 6px rgba(0,0,0,.08);

  pointer-events: none;
}

/* =========================
   Falz-/Schatteneffekt
   (zwischen Zahl & Card)
========================= */

.steps-numbers .row6col > div[class*="col-"] .frame.ce.card::after{
  content: "";
  position: absolute;
  z-index:-1;
  /* zwischen Zahl & Card */
  left: -0.75rem;

  /* Zentrierung: bottom resetten, sonst wird gestreckt */
  top: 50%;
  bottom: auto;

  /* höher als die Card */
  height: 110%;
  width: 18px;

  /* exakt mittig ausrichten */
  transform: translateY(-50%);

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.28) 25%,
    rgba(0,0,0,0.16) 45%,
    rgba(0,0,0,0.06) 70%,
    rgba(0,0,0,0.0) 85%
  );

  filter: blur(3px);
  pointer-events: none;
}

/* =========================
   Typo Feinjustierung
========================= */


/* =========================
   Mobile Anpassung
========================= */

@media (max-width: 575px){

  .steps-numbers .frame.ce.card{
    margin-left: 2.75rem;
  }

  .steps-numbers .row6col > div[class*="col-"] .frame.ce.card::before{
    left: -2.4rem;
    font-size: 3.2rem;
  }

  .steps-numbers .row6col > div[class*="col-"] .frame.ce.card::after{
    left: -1.35rem;
    width: 10px;
  }
}








/* =====================================================================================================================
   05) GRID / SECTIONS / SPACING SYSTEM
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   05.01) Custom Gutters (.row)
   Hinweis: XS (0+) und SM (576+) sind bei dir identisch – bewusst so übernommen.
   ------------------------------------------------------------------------------------------------- */

@media (min-width: 0px) {
  .row {
    margin-right: calc(-.5 * var(--brand-gutter-x-sm));
    margin-left: calc(-.5 * var(--brand-gutter-x-sm));
  }
  .row > * {
    padding-right: calc(var(--brand-gutter-x-sm) * .5);
    padding-left: calc(var(--brand-gutter-x-sm) * .5);
  }
}

@media (min-width: 576px) {
  .row {
    margin-right: calc(-.5 * var(--brand-gutter-x-sm));
    margin-left: calc(-.5 * var(--brand-gutter-x-sm));
  }
  .row > * {
    padding-right: calc(var(--brand-gutter-x-sm) * .5);
    padding-left: calc(var(--brand-gutter-x-sm) * .5);
  }
}

@media (min-width: 768px) {
  .row {
    margin-right: calc(-.5 * var(--brand-gutter-x-md));
    margin-left: calc(-.5 * var(--brand-gutter-x-md));
  }
  .row > * {
    padding-right: calc(var(--brand-gutter-x-md) * .5);
    padding-left: calc(var(--brand-gutter-x-md) * .5);
  }
}

@media (min-width: 992px) {
  .row {
    margin-right: calc(-.5 * var(--brand-gutter-x-lg));
    margin-left: calc(-.5 * var(--brand-gutter-x-lg));
  }
  .row > * {
    padding-right: calc(var(--brand-gutter-x-lg) * .5);
    padding-left: calc(var(--brand-gutter-x-lg) * .5);
  }
}

@media (min-width: 1200px) {
  .row {
    margin-right: calc(-.5 * var(--brand-gutter-x-xl));
    margin-left: calc(-.5 * var(--brand-gutter-x-xl));
  }
  .row > * {
    padding-right: calc(var(--brand-gutter-x-xl) * .5);
    padding-left: calc(var(--brand-gutter-x-xl) * .5);
  }
}

@media (min-width: 1400px) {
  .row {
    margin-right: calc(-.5 * var(--brand-gutter-x-xxl));
    margin-left: calc(-.5 * var(--brand-gutter-x-xxl));
  }
  .row > * {
    padding-right: calc(var(--brand-gutter-x-xxl) * .5);
    padding-left: calc(var(--brand-gutter-x-xxl) * .5);
  }
}




/* -------------------------------------------------------------------------------------------------
   05.02 Section Spacing / Outer Layout Spacing / Responsive Padding
------------------------------------------------------------------------------------------------- */



@media (max-width: 575px) {

  main > .content > .container-fluid,
  footer > .container-fluid,
  #hero > .container-fluid {
    padding-top: var(--brand-space-section-xs);
    padding-bottom: var(--brand-space-section-xs);
  }

  main > .content > .container-fluid:not([class*="bg-"])
  + .container-fluid:not([class*="bg-"]) {
    padding-top: 0;
    padding-bottom: var(--brand-space-section-xs);
  }

  body.startseite #hero > .container-fluid {
    padding-bottom: 0;
    padding-top: var(--space-4);
  }

}


@media (min-width: 576px) {

  main > .content > .container-fluid,
  footer > .container-fluid,
  #hero > .container-fluid {
    padding-top: var(--brand-space-section-sm);
    padding-bottom: var(--brand-space-section-sm);
  }

  main > .content > .container-fluid:not([class*="bg-"])
  + .container-fluid:not([class*="bg-"]) {
    padding-top: 0;
    padding-bottom: var(--brand-space-section-sm);
  }

  body.startseite #hero > .container-fluid {
    padding-bottom: 0;
    padding-top: var(--space-4);
  }

}


@media (min-width: 768px) {

  main > .content > .container-fluid,
  footer > .container-fluid,
  #hero > .container-fluid {
    padding-top: var(--brand-space-section-md);
    padding-bottom: var(--brand-space-section-md);
  }

  main > .content > .container-fluid:not([class*="bg-"])
  + .container-fluid:not([class*="bg-"]) {
    padding-top: 0;
    padding-bottom: var(--brand-space-section-md);
  }

  body.startseite #hero > .container-fluid {
    padding-bottom: 0;
    padding-top: var(--space-4);
  }

}


@media (min-width: 992px) {

  main > .content > .container-fluid,
  footer > .container-fluid,
  #hero > .container-fluid {
    padding-top: var(--brand-space-section-lg);
    padding-bottom: var(--brand-space-section-lg);
  }

  main > .content > .container-fluid:not([class*="bg-"])
  + .container-fluid:not([class*="bg-"]) {
    padding-top: 0;
    padding-bottom: var(--brand-space-section-lg);
  }

  body.startseite #hero > .container-fluid {
    padding-bottom: 0;
    padding-top: var(--space-4);
  }

}


@media (min-width: 1200px) {

  main > .content > .container-fluid,
  footer > .container-fluid,
  #hero > .container-fluid {
    padding-top: var(--brand-space-section-xl);
    padding-bottom: var(--brand-space-section-xl);
  }

  main > .content > .container-fluid:not([class*="bg-"])
  + .container-fluid:not([class*="bg-"]) {
    padding-top: 0;
    padding-bottom: var(--brand-space-section-xl);
  }

  body.startseite #hero > .container-fluid {
    padding-bottom: 0;
    padding-top: var(--space-4);
  }

}


@media (min-width: 1400px) {

  main > .content > .container-fluid,
  footer > .container-fluid,
  #hero > .container-fluid {
    padding-top: var(--brand-space-section-xxl);
    padding-bottom: var(--brand-space-section-xxl);
  }

  main > .content > .container-fluid:not([class*="bg-"])
  + .container-fluid:not([class*="bg-"]) {
    padding-top: 0;
    padding-bottom: var(--brand-space-section-xxl);
  }

  body.startseite #hero > .container-fluid {
    padding-bottom: 0;
    padding-top: var(--space-4);
  }

}





/* -------------------------------------------------------------------------------------------------
   05.03 Content Spacing / Inner Layout Spacing / Responsive Margin
------------------------------------------------------------------------------------------------- */


/* ----------------------------------------
   Sonderfall: no-gutters
---------------------------------------- */

.content-item.no-gutters .row > [class*="col-"] {
  margin-bottom: 0 !important;
}


/* ----------------------------------------
   0) Grid-Module Abstand (Section Rhythmus)
---------------------------------------- */

main > .content > div[class*="grid"][class*="col"] > div:not(.no-gutters):not(.highlight-split) {
  margin-bottom: var(--brand-space-section-xs);
}

@media (min-width:576px) {
main > .content > div[class*="grid"][class*="col"] > div:not(.no-gutters):not(.highlight-split) {
    margin-bottom: var(--brand-space-section-sm);
  }
}

@media (min-width:768px) {
main > .content > div[class*="grid"][class*="col"] > div:not(.no-gutters):not(.highlight-split) {
    margin-bottom: var(--brand-space-section-md);
  }
}

@media (min-width:992px) {
main > .content > div[class*="grid"][class*="col"] > div:not(.no-gutters):not(.highlight-split) {
    margin-bottom: var(--brand-space-section-lg);
  }
}

@media (min-width:1200px) {
main > .content > div[class*="grid"][class*="col"] > div:not(.no-gutters):not(.highlight-split) {
    margin-bottom: var(--brand-space-section-xl);
  }
}

@media (min-width:1400px) {
main > .content > div[class*="grid"][class*="col"] > div:not(.no-gutters):not(.highlight-split) {
    margin-bottom: var(--brand-space-section-xxl);
  }
}


/* ----------------------------------------
   1) Abstände innerhalb einer Column
---------------------------------------- */

.row > [class*="col-"] > *:not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
  margin-bottom: var(--brand-space-xs);
}

@media (min-width:576px) {
  .row > [class*="col-"] > *:not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-sm);
  }
}

@media (min-width:768px) {
  .row > [class*="col-"] > *:not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-md);
  }
}

@media (min-width:992px) {
  .row > [class*="col-"] > *:not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-lg);
  }
}

@media (min-width:1200px) {
  .row > [class*="col-"] > *:not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-xl);
  }
}

@media (min-width:1400px) {
  .row > [class*="col-"] > *:not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-xxl);
  }
}


/* ----------------------------------------
   2) Container-Inhalte
---------------------------------------- */

.container-fluid > .container > *:not(.row):not(:first-child):not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
  margin-bottom: var(--brand-gutter-y-xs);
}

@media (min-width:576px) {
  .container-fluid > .container > *:not(.row):not(:first-child):not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-sm);
  }
}

@media (min-width:768px) {
  .container-fluid > .container > *:not(.row):not(:first-child):not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-md);
  }
}

@media (min-width:992px) {
  .container-fluid > .container > *:not(.row):not(:first-child):not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-lg);
  }
}

@media (min-width:1200px) {
  .container-fluid > .container > *:not(.row):not(:first-child):not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-xl);
  }
}

@media (min-width:1400px) {
  .container-fluid > .container > *:not(.row):not(:first-child):not(:last-child):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: var(--brand-gutter-y-xxl);
  }
}


/* ----------------------------------------
   3) Grid-Container
---------------------------------------- */

.content > div[class*="grid"] > .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]):not([class*="mb-"]){
  margin-bottom: calc(var(--brand-gutter-y-xs) * 1.5);
}

@media (min-width:576px) {
  .content > div[class*="grid"] > .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: calc(var(--brand-gutter-y-sm) * 1.5);
  }
}

@media (min-width:768px) {
  .content > div[class*="grid"] > .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: calc(var(--brand-gutter-y-md) * 1.5);
  }
}

@media (min-width:992px) {
  .content > div[class*="grid"] > .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: calc(var(--brand-gutter-y-lg) * 1.5);
  }
}

@media (min-width:1200px) {
  .content > div[class*="grid"] > .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: calc(var(--brand-gutter-y-xl) * 1.5);
  }
}

@media (min-width:1400px) {
  .content > div[class*="grid"] > .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]):not([class*="mb-"]){
    margin-bottom: calc(var(--brand-gutter-y-xxl) * 1.5);
  }
}


/* ----------------------------------------
   4) Volle Columns / Responsive Stacking
---------------------------------------- */

@media (max-width:575px) {

  .content .row > .col-12:not(:last-child):not([class*="frame-space-after"]),
  #hero .row > .col-12:not(:last-child):not([class*="frame-space-after"]),
  footer .row > .col-12:not(:last-child):not([class*="frame-space-after"]),

  .content .row > .col-6:not(:nth-last-child(-n+2)),
  #hero .row > .col-6:not(:nth-last-child(-n+2)),
  footer .row > .col-6:not(:nth-last-child(-n+2)),

  .content .row > .col-4:not(:nth-last-child(-n+3)),
  #hero .row > .col-4:not(:nth-last-child(-n+3)),
  footer .row > .col-4:not(:nth-last-child(-n+3)),

  .content .row > .col-3:not(:nth-last-child(-n+4)),
  #hero .row > .col-3:not(:nth-last-child(-n+4)),
  footer .row > .col-3:not(:nth-last-child(-n+4)),

  .content .row > .col-2:not(:nth-last-child(-n+6)),
  #hero .row > .col-2:not(:nth-last-child(-n+6)),
  footer .row > .col-2:not(:nth-last-child(-n+6)),

  .content .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]) {
    margin-bottom: var(--brand-gutter-y-xs);
  }

}

@media (min-width:576px) and (max-width:767px) {

  .content .row > .col-sm-12:not(:last-child):not([class*="frame-space-after"]),
  #hero .row > .col-sm-12:not(:last-child):not([class*="frame-space-after"]),
  footer .row > .col-sm-12:not(:last-child):not([class*="frame-space-after"]),

  .content .row > .col-sm-6:not(:nth-last-child(-n+2)),
  #hero .row > .col-sm-6:not(:nth-last-child(-n+2)),
  footer .row > .col-sm-6:not(:nth-last-child(-n+2)),

  .content .row > .col-sm-4:not(:nth-last-child(-n+3)),
  #hero .row > .col-sm-4:not(:nth-last-child(-n+3)),
  footer .row > .col-sm-4:not(:nth-last-child(-n+3)),

  .content .row > .col-sm-3:not(:nth-last-child(-n+4)),
  #hero .row > .col-sm-3:not(:nth-last-child(-n+4)),
  footer .row > .col-sm-3:not(:nth-last-child(-n+4)),

  .content .row > .col-sm-2:not(:nth-last-child(-n+6)),
  #hero .row > .col-sm-2:not(:nth-last-child(-n+6)),
  footer .row > .col-sm-2:not(:nth-last-child(-n+6)),

  .content .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]){
    margin-bottom: var(--brand-gutter-y-sm);
  }

}

@media (min-width:768px) and (max-width:991px) {

  .content .row > .col-md-12:not(:last-child):not([class*="frame-space-after"]),
  #hero .row > .col-md-12:not(:last-child):not([class*="frame-space-after"]),
  footer .row > .col-md-12:not(:last-child):not([class*="frame-space-after"]),

  .content .row > .col-md-6:not(:nth-last-child(-n+2)),
  #hero .row > .col-md-6:not(:nth-last-child(-n+2)),
  footer .row > .col-md-6:not(:nth-last-child(-n+2)),

  .content .row > .col-md-4:not(:nth-last-child(-n+3)),
  #hero .row > .col-md-4:not(:nth-last-child(-n+3)),
  footer .row > .col-md-4:not(:nth-last-child(-n+3)),

  .content .row > .col-md-3:not(:nth-last-child(-n+4)),
  #hero .row > .col-md-3:not(:nth-last-child(-n+4)),
   footer .row > .col-md-3:not(:nth-last-child(-n+4)),

  .content .row > .col-md-2:not(:nth-last-child(-n+6)),
  #hero .row > .col-md-2:not(:nth-last-child(-n+6)),
  footer .row > .col-md-2:not(:nth-last-child(-n+6)),

  .content .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]) {
    margin-bottom: var(--brand-gutter-y-md);
  }

}

@media (min-width:992px) and (max-width:1199px) {

  .content .row > .col-lg-12:not(:last-child):not([class*="frame-space-after"]),
  #hero .row > .col-lg-12:not(:last-child):not([class*="frame-space-after"]),
  footer .row > .col-lg-12:not(:last-child):not([class*="frame-space-after"]),

  .content .row > .col-lg-6:not(:nth-last-child(-n+2)),
  #hero .row > .col-lg-6:not(:nth-last-child(-n+2)),
  footer .row > .col-lg-6:not(:nth-last-child(-n+2)),

  .content .row > .col-lg-4:not(:nth-last-child(-n+3)),
  #hero .row > .col-lg-4:not(:nth-last-child(-n+3)),
  footer .row > .col-lg-4:not(:nth-last-child(-n+3)),

  .content .row > .col-lg-3:not(:nth-last-child(-n+4)),
  #hero .row > .col-lg-3:not(:nth-last-child(-n+4)),
  footer .row > .col-lg-3:not(:nth-last-child(-n+4)),

  .content .row > .col-lg-2:not(:nth-last-child(-n+6)),
  #hero .row > .col-lg-2:not(:nth-last-child(-n+6)),
  footer .row > .col-lg-2:not(:nth-last-child(-n+6)),

  .content .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]) {
    margin-bottom: var(--brand-gutter-y-lg);
  }

}

@media (min-width:1200px) and (max-width:1399px) {

  .content .row > .col-xl-12:not(:last-child):not([class*="frame-space-after"]),
  #hero .row > .col-xl-12:not(:last-child):not([class*="frame-space-after"]),
  footer .row > .col-xl-12:not(:last-child):not([class*="frame-space-after"]),

  .content .row > .col-xl-6:not(:nth-last-child(-n+2)),
  #hero .row > .col-xl-6:not(:nth-last-child(-n+2)),
  footer .row > .col-xl-6:not(:nth-last-child(-n+2)),

  .content .row > .col-xl-4:not(:nth-last-child(-n+3)),
  #hero .row > .col-xl-4:not(:nth-last-child(-n+3)),
  footer .row > .col-xl-4:not(:nth-last-child(-n+3)),

  .content .row > .col-xl-3:not(:nth-last-child(-n+4)),
  #hero .row > .col-xl-3:not(:nth-last-child(-n+4)),
  footer .row > .col-xl-3:not(:nth-last-child(-n+4)),

  .content .row > .col-xl-2:not(:nth-last-child(-n+6)),
  #hero .row > .col-xl-2:not(:nth-last-child(-n+6)),
  footer .row > .col-xl-2:not(:nth-last-child(-n+6)),

  .content .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]) {
    margin-bottom: var(--brand-gutter-y-xl);
  }

}

@media (min-width:1400px) {

  .content .row > .col-xxl-12:not(:last-child):not([class*="frame-space-after"]),
  #hero .row > .col-xxl-12:not(:last-child):not([class*="frame-space-after"]),
  footer .row > .col-xxl-12:not(:last-child):not([class*="frame-space-after"]),

  .content .row > .col-xxl-6:not(:nth-last-child(-n+2)),
  #hero .row > .col-xxl-6:not(:nth-last-child(-n+2)),
  footer .row > .col-xxl-6:not(:nth-last-child(-n+2)),

  .content .row > .col-xxl-4:not(:nth-last-child(-n+3)),
  #hero .row > .col-xxl-4:not(:nth-last-child(-n+3)),
  footer .row > .col-xxl-4:not(:nth-last-child(-n+3)),

  .content .row > .col-xxl-3:not(:nth-last-child(-n+4)),
  #hero .row > .col-xxl-3:not(:nth-last-child(-n+4)),
  footer .row > .col-xxl-3:not(:nth-last-child(-n+4)),

  .content .row > .col-xxl-2:not(:nth-last-child(-n+6)),
  #hero .row > .col-xxl-2:not(:nth-last-child(-n+6)),
  footer .row > .col-xxl-2:not(:nth-last-child(-n+6)),

  .content .container > div:not(:last-child):not([class*="header-container"]):not([class*="frame-space-after"]) {
    margin-bottom: var(--brand-gutter-y-xxl);
  }

}




/* -------------------------------------------------------------------------------------------------
   05.04) TYPO3 Spacing Utilities (Erscheinungsbild)
   vereinheitlicht über responsive Hilfsvariablen
   ------------------------------------------------------------------------------------------------- */

:root {
  --frame-space-gutter-current: var(--brand-gutter-y-xs);
  --frame-space-section-current: var(--brand-space-section-xs);
}

@media (min-width: 576px) {
  :root {
    --frame-space-gutter-current: var(--brand-gutter-y-sm);
    --frame-space-section-current: var(--brand-space-section-sm);
  }
}

@media (min-width: 768px) {
  :root {
    --frame-space-gutter-current: var(--brand-gutter-y-md);
    --frame-space-section-current: var(--brand-space-section-md);
  }
}

@media (min-width: 992px) {
  :root {
    --frame-space-gutter-current: var(--brand-gutter-y-lg);
    --frame-space-section-current: var(--brand-space-section-lg);
  }
}

@media (min-width: 1200px) {
  :root {
    --frame-space-gutter-current: var(--brand-gutter-y-xl);
    --frame-space-section-current: var(--brand-space-section-xl);
  }
}

@media (min-width: 1400px) {
  :root {
    --frame-space-gutter-current: var(--brand-gutter-y-xxl);
    --frame-space-section-current: var(--brand-space-section-xxl);
  }
}

.frame-space-after-extra-small {
  margin-bottom: calc(var(--frame-space-gutter-current) * 0.75);
}

.frame-space-after-small {
  margin-bottom: var(--frame-space-gutter-current);
}

.frame-space-after-medium {
  margin-bottom: calc(var(--frame-space-section-current) * 0.75);
}

.frame-space-after-large {
  margin-bottom: var(--frame-space-section-current);
}

.frame-space-after-extra-large {
  margin-bottom: calc(var(--frame-space-section-current) * 1.5);
}

.frame-space-before-extra-small {
  margin-top: calc(var(--frame-space-gutter-current) * 0.75);
}

.frame-space-before-small {
  margin-top: var(--frame-space-gutter-current);
}

.frame-space-before-medium {
  margin-top: calc(var(--frame-space-section-current) * 0.75);
}

.frame-space-before-large {
  margin-top: var(--frame-space-section-current);
}

.frame-space-before-extra-large {
  margin-top: calc(var(--frame-space-section-current) * 1.5);
}




/* =====================================================================================================================
   06) Extensions
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   06.01) Extension News
   ------------------------------------------------------------------------------------------------- */


/* Allgemein */
.news-date {
	text-transform:uppercase;
	display:flex;
	flex-direction:row;
	align-items:center;
	letter-spacing:1px;
}
.news-date:before {
	content:"";
	width:30px;
	height:2px;
	background-color:var(--brand-primary);
	margin-right:10px;
}

/* Listenansicht */
.news-list-view .teaser {
	margin-bottom:15px;
}



/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin: 3rem 0;
}

.pagination .f3-widget-paginator {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination .f3-widget-paginator li {
    margin: 0;
}

.pagination .f3-widget-paginator li a,
.pagination .f3-widget-paginator li.current {
    min-width: 45px;
    height: 45px;
	display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
	padding: var(--brand-space-button-y) var(--brand-space-button-x);
    border: 1px solid black;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: all .25s ease;
    box-sizing: border-box;
}

.pagination .f3-widget-paginator li a:hover {
    background: transprent;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.pagination .f3-widget-paginator li.current {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    cursor: default;
}

.pagination .f3-widget-paginator li.next a,
.pagination .f3-widget-paginator li.previous a {
    padding: var(--brand-space-button-y) var(--brand-space-button-x);
}

.pagination .f3-widget-paginator li.disabled {
    opacity: .4;
    pointer-events: none;
}

@media (max-width: 576px) {
    .pagination .f3-widget-paginator {
        gap: .35rem;
        flex-wrap: wrap;
    }

    .pagination .f3-widget-paginator li a,
    .pagination .f3-widget-paginator li.current {
        min-width: 38px;
        height: 38px;
        padding: 0 .8rem;
        font-size: .9rem;
    }
}



/* ==================================================
   Masonry News Layout / 3Spalter für News-List
   ================================================== */

.news-list-view {
  margin: 0 auto;
}

/* Masonry Items */
.news-list-view .newsitem-card {
  width: calc((100% - 60px) / 3);
  margin-bottom: 30px;
}

/* Tablet: 2 Spalten */
@media (max-width: 1199px) {
.news-list-view .newsitem-card {
    width: calc((100% - 30px) / 2);
}
}

/* Mobile: 1 Spalte */
@media (max-width: 767px) {
.news-list-view .newsitem-card {
    width: 100%;
  }
}

.news-list-view .newsitem-card figcaption {
    padding:calc(var(--brand-card-padding-x) / 4);
    position:absolute;
    bottom:0em;
    z-index:2;
    background-color:rgba(255,255,255,0.75);
}

.news-list-view .news-date {
	margin-bottom:15px;
}

.news-list-view .newsitem-card figure {
    position:relative;
}

.news-list-view .newsitem-card h3 {
    margin-top:0em;
}



/* ==================================================
   News Single
   ================================================== */

.news-single .news-detail-content {
  position: relative;
}

/* Desktop */
.news-single .news-detail-image--float {
  float: right;
  max-width: 40%;
  margin: 0 0 1rem 1.5rem;
}

/* Tablet & Mobile */
@media (max-width: 991.98px) {
.news-single .news-detail-image--float {
    float: none;
    max-width: 100%;
    width: 100%;
    margin: 2rem 0 2rem 0;
  }
}
/* sorgt dafür, dass Container sauber um float herum fließt */
.news-single .news-detail-content::after {
  content: "";
  display: block;
  clear: both;
}

.news-single .backlink {
  margin-top: 2rem;
}

.news-single  .news-content-row,
.news-single  .news-footer-row { 
  margin-top: var(--brand-space-xs);
}

@media (min-width:576px) {
.news-single .news-content-row,
.news-single .news-footer-row { 
    margin-top: var(--brand-gutter-y-sm);
  }
}

@media (min-width:768px) {
.news-single .news-content-row,
.news-single .news-footer-row { 
    margin-bottom: var(--brand-gutter-y-md);
  }
}

@media (min-width:992px) {
.news-single .news-content-row,
.news-single .news-footer-row { 
    margin-top: var(--brand-gutter-y-lg);
  }
}

@media (min-width:1200px) {
.news-single .news-content-row,
.news-single .news-footer-row { 
    margin-top: var(--brand-gutter-y-xl);
  }
}

@media (min-width:1400px) {
.news-single .news-content-row,
.news-single .news-footer-row { 
    margin-top: var(--brand-gutter-y-xxl);
  }
}

.news-single .border-top {border-top: var(--bs-border-width) var(--bs-border-style) var(--brand-border-color-light) !important;}
.news-single .border-bottom {border-bottom: var(--bs-border-width) var(--bs-border-style) var(--brand-border-color-light) !important;
}



/* =====================================================================================================================
   20) LAYOUT (Site Frame / Regions)
   ===================================================================================================================== */

/* -------------------------------------------------------------------------------------------------
   20.01) Page Shell (html, body, main grid/flex, sticky footer)
   ------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------
   20.02) Header (header, logo, brand area)
   ------------------------------------------------------------------------------------------------- */

/* Logo */
.navbar-brand {
   margin-right: 0em;
}
.logo img {
    height: 100%;
    width: auto;  
}
.logo figure {
  display: flex;
  align-items: stretch;
}

@media (min-width:992px) {
.navbar-brand {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    overflow: hidden;
    float: left;
}
}
.logo figure {
	margin:0em;
}


/* -------------------------------------------------------------------------------------------------
   20.03) Toolbar / Topbar / Utilities (search, language switch, meta nav)
   ------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------
   20.04) Navigation (primary nav, subnav, offcanvas)
   ------------------------------------------------------------------------------------------------- */


/* ---------------------------- Toggler ---------------------------- */

/* Toggler: immer über dem Panel */
  .navbar .navbar-toggler.custom-toggler {
   /* position: fixed;*/
    top: 1rem;
    right: 1rem;
    z-index: 9999; /* über Panel */
  }

  /* Burger-Striche */
  .navbar-toggler.custom-toggler span {
    display: block;
    height: 6px;
    width: 43px;
    background-color: var(--brand-primary);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
    transform-origin: center;
  }

  /* Abstand zwischen den Strichen (falls du ihn nicht schon per flex hast) */
  .navbar-toggler.custom-toggler {
    width: 43px;
    height: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    border: 0;
    background: transparent;
  }


  /* Wenn Menü offen: Toggler wird zum X
     => Wir nutzen den Zustand #mainNav.show und stylen den Button via :has()
     (modern, sauber). Fallback unten. */
  .navbar:has(#mainNav.show) .navbar-toggler.custom-toggler span {
    background-color: var(--brand-primary); /* auf weißem Panel gut sichtbar */
  }
  .navbar:has(#mainNav.show) .navbar-toggler.custom-toggler span:nth-child(1) {
    transform: translateY(14px) rotate(45deg);
  }
  .navbar:has(#mainNav.show) .navbar-toggler.custom-toggler span:nth-child(2) {
    opacity: 0;
  }
  .navbar:has(#mainNav.show) .navbar-toggler.custom-toggler span:nth-child(3) {
    transform: translateY(-14px) rotate(-45deg);
  }




/* ---------------------------- Allgemeine Gestaltung ---------------------------- */

#mainNav {
	font-size:var(--brand-nav-link-font-size);
	display:inline-block;
}

.nav-link {
  padding: var(--brand-nav-link-padding-y) var(--brand-nav-link-padding-x);
  font-weight: normal;
  color: var(--brand-nav-link-color);
}

/* -------------------------------------------------
     Toggle after Pfeil
     ------------------------------------------------- */
   #mainNav .dropdown-toggle::after {
      display: inline-block;
      margin-left: .5em;
      vertical-align: 0em;
      content: "\f078";
      font-family:var(--brand-icon-family);
      border:0px solid black;
    }


/* ---------------------------- Menü Phone ---------------------------- */

@media (min-width:0px) and (max-width:991px) {

/* Offcanvas Panel */
  #mainNav.navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    width: min(90vw, 420px);
    background: #fff;
    z-index: 1050;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s ease;
    padding: 5rem 1.5rem 1.5rem; /* oben Platz für den Toggler */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
    justify-content: space-between;
	box-shadow: -12px 0 30px rgba(0,0,0,.25);
    flex-wrap: nowrap !important; /* wrap killen */
  }
  #mainNav.navbar-collapse.show {
    transform: translateX(0);
  }

 /* Beide direkten Kinder sollen 100% Breite haben */
  #mainNav > .navbar-nav,
  #mainNav > .social-icons {
    width: 100%;
  }
  

  /* Nav Layout */
  #mainNav .navbar-nav {
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: 0;
  }
  #mainNav .social-icons {
    margin-top: auto;
    padding-top: 1rem;
  }


	
	
/* Stufe 1 */
 #mainNav [class*="level1"] > a.nav-link {
    padding: 0.75rem 0;
 }
#mainNav [class*="level1"] > a.nav-link:hover,
#mainNav [class*="level1"] > a.nav-link.show {
	color:var(--brand-primary);
}
#mainNav ul.navbar-nav > li.nav-item {
	border-bottom:1px solid var(--brand-light);	  
}
#mainNav ul.navbar-nav > li.nav-item > a.level1  {
	 display: flex;
     justify-content: space-between;
	font-weight: var(--brand-font-weight-bold);
}

/* Stufe 2 - Dropdown-Menü */
 #mainNav .dropdown-menu {
	 padding-top:0em;
	 padding-bottom:0em;
	 padding-left:1em;
	}
#mainNav .dropdown-item {
	padding:0em;
	}
#mainNav .dropdown-item:hover {
	background-color:transparent;
}
#mainNav [class*="level2"] > a.nav-link {
    padding: 0.75rem 0;
 }
#mainNav [class*="level2"] > a.nav-link:hover {
    background-color:transparent;
	color:var(--brand-primary)
}
#mainNav .dropdown-menu {
	border:0px solid black;	
}
	
	
	
}




/* =====================================================
   NAVBAR DROPDOWN – DESKTOP ONLY
   ===================================================== */
@media (min-width: 992px) {
    
  /* Grundsätzlich: nichts abschneiden */
  header,
  .navbar,
  .navbar-nav {
    overflow: visible;
  }
  header .navbar {
    padding-top:15px;
    padding-bottom:15px;
  }
  /* Hauptmenüpunte - 1.Stufe */
  #mainNav .nav-item {
    margin-left:15px;
  }
  #mainNav .navbar-nav > .nav-item > .nav-link {
    padding-bottom:0em;
  }
  /* Hauptmenüpunkte aktiv */
  #mainNav .nav-item.active > a {
     color:var(--brand-primary-hover);   
  }
  /* Dropdown-Container -2.Stufe */
  #mainNav .nav-item.dropdown {
    position: relative;
  }
  /* Hover öffnet das Menü */
  #mainNav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }

  /* -------------------------------------------------
     Sichtbarer Abstand zwischen Header & Dropdown
     ------------------------------------------------- */
  #mainNav .dropdown-menu {
    display: none;              
    top: 100%;
    margin-top: 35px;           
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border:0px solid black;
  	border-radius:var(--radius);
    padding:0em;
   }
  #mainNav .dropdown-menu .menu-content {
    border-radius: 1rem;        
    overflow:hidden;     
    }

  /* -------------------------------------------------
     UNSICHTBARE HOVER-BRÜCKE (füllt den Gap)
     ------------------------------------------------- */
  #mainNav .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -35px;                 
    height: 35px;               
    background: transparent;
  }
    
  #mainNav .dropdown-item:hover {
      color: var(--brand-text-color);
      background-color: var(--brand-light);
    }


    
    
  
}



/* -------------------------------------------------------------------------------------------------
   20.05) Main / Content (content width, section spacing, container rules)
   ------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------
   20.06) Footer (footer, footer nav, meta)
   ------------------------------------------------------------------------------------------------- */

/* Footerfarbe */
.footer  {
    background-color:var(--brand-dark);
    font-size:calc(var(--brand-font-size) * 0.85);
}
.footer a {
    font-size:calc(var(--brand-font-size) * 0.85);
    font-weight:400 !important;
}
.footer a:before {
  font-weight: 300 !important;
}
.footer ul.nav {
    margin-bottom:0em !important;
}
.footer a:hover {
    text-decoration:underline;
}
.footer-bottom .border-top {
    margin-top:15px;
    padding-top: 15px;
}

/* Weiss einfärben */
.footer .social-icon img {
  filter: brightness(0) invert(1);
}
.footer .social-icon {
    height:100%;
    width:auto;
}


/* Phone Abstände quer  */
/* Spalte 2 und 3 Abstand oben */
@media (min-width:575px) and (max-width:767px) {
    .footer div[class*="col-"]:nth-child(2),
    .footer div[class*="col-"]:nth-child(3),
    .footer div[class*="col-"]:nth-child(4){
        margin-top:15px;
    }
}

/* Tablet Spaltenreihenfolge */
/* Spalte 2 und 3 tauschen */
@media (min-width:768px) and (max-width:991px) {
    .footer div[class*="col-"]:nth-child(1) {
        order: 1;
    }
    .footer div[class*="col-"]:nth-child(2) {
        order: 3;
    }
    .footer div[class*="col-"]:nth-child(3) {
        order: 2;
    }
    .footer div[class*="col-"]:nth-child(4) {
        order: 4;
    }
}







/* =====================================================================================================================
   99) MISC / FIXES / PROJECT-SPECIFIC
   ===================================================================================================================== */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 { font-weight: var(--brand-font-weight-bold); }


/* -------------------------------------------------------------------------------------------------
   99.01.01) Font Weights
   ------------------------------------------------------------------------------------------------- */
/*
h1, .h1,
h2, .h2,
h3, .h3 { font-weight: var(--brand-font-weight-light); }

h4, .h4,
h5, .h5 { font-weight: var(--brand-font-weight-bold); }
*/


/* -------------------------------------------------------------------------------------------------
   99.01.02) First-Child Margin Reset
   ------------------------------------------------------------------------------------------------- */
/*
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child { margin-top: 0em; }
*/


/* -------------------------------------------------------------------------------------------------
   99.01.03) Mobile First (Base Styles)
   ------------------------------------------------------------------------------------------------- */
/*
h1, .h1 { font-size: 2.75rem; margin-bottom: 0.5rem;  margin-top: 0.75rem; }
h2, .h2 { font-size: 2.25rem; margin-bottom: 0.45rem; margin-top: 0.6rem; }
h3, .h3 { font-size: 1.75rem; margin-bottom: 0.4rem;  margin-top: 0.5rem; }
h4, .h4 { font-size: 1.25rem; margin-bottom: 0.35rem; margin-top: 0.4rem; }
h5, .h5 { font-size: 1rem;    margin-bottom: 0.3rem;  margin-top: 0.3rem; }
*/


/* -------------------------------------------------------------------------------------------------
   99.01.04) Kombi-Abstände
   ------------------------------------------------------------------------------------------------- */
/*
h1 + h2 { margin-top: -0.5rem; }
h2 + h3 { margin-top: -0.45rem; }
h3 + h4 { margin-top: -0.4rem; }
h4 + h5 { margin-top: -0.35rem; }
*/


/* -------------------------------------------------------------------------------------------------
   99.01.05) SM (>576px)
   ------------------------------------------------------------------------------------------------- */
/*
@media (min-width: 576px) {
  h1, .h1 { font-size: 3.25rem; margin-bottom: 0.6rem;  margin-top: 1rem; }
  h2, .h2 { font-size: 2.75rem; margin-bottom: 0.55rem; margin-top: 0.8rem; }
  h3, .h3 { font-size: 2.25rem; margin-bottom: 0.5rem;  margin-top: 0.7rem; }
  h4, .h4 { font-size: 1.5rem;  margin-bottom: 0.45rem; margin-top: 0.6rem; }
  h5, .h5 { font-size: 1.25rem; margin-bottom: 0.4rem;  margin-top: 0.5rem; }

  h1 + h2 { margin-top: -0.6rem; }
  h2 + h3 { margin-top: -0.55rem; }
  h3 + h4 { margin-top: -0.5rem; }
  h4 + h5 { margin-top: -0.45rem; }
}
*/


/* -------------------------------------------------------------------------------------------------
   99.01.06) MD (>768px)
   ------------------------------------------------------------------------------------------------- */
/*
@media (min-width: 768px) {
  h1, .h1 { font-size: 3.75rem; margin-bottom: 0.75rem; margin-top: 1.25rem; }
  h2, .h2 { font-size: 3.25rem; margin-bottom: 0.7rem;  margin-top: 1rem; }
  h3, .h3 { font-size: 2.75rem; margin-bottom: 0.65rem; margin-top: 0.85rem; }
  h4, .h4 { font-size: 1.75rem; margin-bottom: 0.6rem;  margin-top: 0.75rem; }
  h5, .h5 { font-size: 1.5rem;  margin-bottom: 0.55rem; margin-top: 0.65rem; }

  h1 + h2 { margin-top: -0.75rem; }
  h2 + h3 { margin-top: -0.7rem; }
  h3 + h4 { margin-top: -0.65rem; }
  h4 + h5 { margin-top: -0.6rem; }
}
*/


/* -------------------------------------------------------------------------------------------------
   99.01.07) LG (>992px)
   ------------------------------------------------------------------------------------------------- */
/*
@media (min-width: 992px) {
  h1, .h1 { font-size: 4rem;   margin-bottom: 1rem;  margin-top: 1.5rem; }
  h2, .h2 { font-size: 3.5rem; margin-bottom: 0.9rem; margin-top: 1.25rem; }
  h3, .h3 { font-size: 3rem;   margin-bottom: 0.8rem; margin-top: 1rem; }
  h4, .h4 { font-size: 2rem;   margin-bottom: 0.75rem; margin-top: 0.85rem; }
  h5, .h5 { font-size: 1.75rem; margin-bottom: 0.7rem; margin-top: 0.75rem; }

  h1 + h2 { margin-top: -1rem; }
  h2 + h3 { margin-top: -0.9rem; }
  h3 + h4 { margin-top: -0.8rem; }
  h4 + h5 { margin-top: -0.75rem; }
}
*/


/* -------------------------------------------------------------------------------------------------
   99.01.08) XL (>1200px)
   ------------------------------------------------------------------------------------------------- */
/*
@media (min-width: 1200px) {
  h1, .h1 { font-size: 4.25rem; margin-bottom: 1.2rem; margin-top: 1.75rem; }
  h2, .h2 { font-size: 3.25rem; margin-bottom: 1rem;  margin-top: 1.5rem; }
  h3, .h3 { font-size: 2.25rem; margin-bottom: 0.9rem; margin-top: 1.25rem; }
  h4, .h4 { font-size: 1.5rem;  margin-bottom: 0.8rem; margin-top: 1rem; }
  h5, .h5 { font-size: 1rem;    margin-bottom: 0.7rem; margin-top: 0.85rem; }

  h1 + h2 { margin-top: -1.2rem; }
  h2 + h3 { margin-top: -1rem; }
  h3 + h4 { margin-top: -0.9rem; }
  h4 + h5 { margin-top: -0.8rem; }
}
*/


/* -------------------------------------------------------------------------------------------------
   99.01.09) XXL (>1400px)
   ------------------------------------------------------------------------------------------------- */
/*
@media (min-width: 1400px) {
  h1, .h1 { font-size: 4.25rem; margin-bottom: 1.4rem; margin-top: 2rem; }
  h2, .h2 { font-size: 3.25rem; margin-bottom: 1.2rem; margin-top: 1.75rem; }
  h3, .h3 { font-size: 2.25rem; margin-bottom: 1rem;  margin-top: 1.5rem; }
  h4, .h4 { font-size: 1.5rem;  margin-bottom: 0.9rem; margin-top: 1.25rem; }
  h5, .h5 { font-size: 1rem;    margin-bottom: 0.8rem; margin-top: 1rem; }

  h1 + h2 { margin-top: -1.4rem; }
  h2 + h3 { margin-top: -1.2rem; }
  h3 + h4 { margin-top: -1rem; }
  h4 + h5 { margin-top: -0.9rem; }
}
*/










/* -------------------------------------------------------------------------------------------------
   99.02) IRIS / Sonstiges / Eigene Gridelemente / Eigene Klassen
   ------------------------------------------------------------------------------------------------- */



/* =========================
   Overlay Headline
========================= */

/* Über die Headerklasse auswählbar */
header.overlay{
  padding: var(--brand-space-lg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0,0,0,.5);
  border-radius: var(--brand-border-radius);
  color: #fff !important;
	z-index:1;
}
header.overlay *{ color:#fff !important; }





/* ==================================================
   GRID-OVERLAY – FINAL VERSION
   Ziel:
   - Balken hat definierte Mindesthöhe (min-height je Breakpoint)
   - Bild darf die Höhe NICHT bestimmen (Background = absolute)
   - Text liegt im Flow (Overlay-Layer = relative) ? wenn Text höher, wächst Abschnitt
   - overlay-text ist vertikal zentriert (default), deine valign-* Klassen überschreiben das
================================================== */


/* =========================
   BASIS / HÖHEN
========================= */

.layout-overlay{
  position: relative;
  min-height: 300px; /* Default */
}

/* Tablet */
@media (min-width: 768px){
  .layout-overlay{ min-height: 400px; }
}

/* Desktop */
@media (min-width: 992px){
  .layout-overlay{ min-height: 500px; }
}

/* Large Desktop */
@media (min-width: 1400px){
  .layout-overlay{ min-height: 600px; }
}

.layout-overlay figure{
  margin-bottom: 0;
}


/* =========================
   BACKGROUND (BILD) – absolut, zählt nicht zur Höhe
========================= */

.overlay-background{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;

  display: flex;
  align-items: center;     /* vertikal */
  justify-content: center; /* horizontal */
}

.overlay-background img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}


/* =========================
   OVERLAY-LAYER (TEXT) – im Flow, kann Höhe treiben
========================= */


/* Damit Vertikal-Zentrierung funktioniert:
   Overlay-Layer muss mindestens so hoch sein wie der Balken */
.overlay-layer{
  position: relative; /* wichtig: NICHT absolute */
  z-index: 2;
  min-height: inherit;   /* übernimmt min-height von .layout-overlay */
  width: 100%;
  display: flex;
  align-items: center;   /* vertikal zentriert */
  pointer-events: none;
}


/* Container/Row nicht auf 100% Höhe zwingen, sonst wirkt's "gestreckt" */
.overlay-layer > .container,
.overlay-layer > .container-fluid{
  width: 100%;
  height: auto;
}

.overlay-layer .row{
  width: 100%;
  height: auto;
  display: flex;

  justify-content: flex-start; /* default */
  align-items: center;         /* default */
}

/* Textbox */
.overlay-text{
  position: relative;
  pointer-events: auto;

  /* optional: falls du weiterhin offsets via CSS Vars nutzt */
  transform: translate(var(--tx, 0), var(--ty, 0));
	margin-top:30px;
	margin-bottom:30px;
}

/* Abstand Overlay-Text wenn Element nicht über ganze Breite */
main > div > :is(.container-fluid, section) > .container > .grid-overlay .overlay-text {
	margin-left: var(--brand-card-padding-x);
}


/* =========================
   HORIZONTAL ALIGN
========================= */

.layout-overlay.align-start  .overlay-layer .row{ justify-content: flex-start; }
.layout-overlay.align-center .overlay-layer .row{ justify-content: center; }
.layout-overlay.align-end    .overlay-layer .row{ justify-content: flex-end; }

.layout-overlay.align-sm-start  .overlay-layer .row{ justify-content: flex-start; }
.layout-overlay.align-sm-center .overlay-layer .row{ justify-content: center; }
.layout-overlay.align-sm-end    .overlay-layer .row{ justify-content: flex-end; }

.layout-overlay.align-md-start  .overlay-layer .row{ justify-content: flex-start; }
.layout-overlay.align-md-center .overlay-layer .row{ justify-content: center; }
.layout-overlay.align-md-end    .overlay-layer .row{ justify-content: flex-end; }

.layout-overlay.align-lg-start  .overlay-layer .row{ justify-content: flex-start; }
.layout-overlay.align-lg-center .overlay-layer .row{ justify-content: center; }
.layout-overlay.align-lg-end    .overlay-layer .row{ justify-content: flex-end; }

.layout-overlay.align-xl-start  .overlay-layer .row{ justify-content: flex-start; }
.layout-overlay.align-xl-center .overlay-layer .row{ justify-content: center; }
.layout-overlay.align-xl-end    .overlay-layer .row{ justify-content: flex-end; }

.layout-overlay.align-xxl-start  .overlay-layer .row{ justify-content: flex-start; }
.layout-overlay.align-xxl-center .overlay-layer .row{ justify-content: center; }
.layout-overlay.align-xxl-end    .overlay-layer .row{ justify-content: flex-end; }


/* =========================
   VERTICAL ALIGN
   (überschreibt default align-items:center)
========================= */

.layout-overlay.valign-top    .overlay-layer{ align-items: flex-start; }
.layout-overlay.valign-middle .overlay-layer{ align-items: center; }
.layout-overlay.valign-bottom .overlay-layer{ align-items: flex-end; }

.layout-overlay.valign-sm-top    .overlay-layer{ align-items: flex-start; }
.layout-overlay.valign-sm-middle .overlay-layer{ align-items: center; }
.layout-overlay.valign-sm-bottom .overlay-layer{ align-items: flex-end; }

.layout-overlay.valign-md-top    .overlay-layer{ align-items: flex-start; }
.layout-overlay.valign-md-middle .overlay-layer{ align-items: center; }
.layout-overlay.valign-md-bottom .overlay-layer{ align-items: flex-end; }

.layout-overlay.valign-lg-top    .overlay-layer{ align-items: flex-start; }
.layout-overlay.valign-lg-middle .overlay-layer{ align-items: center; }
.layout-overlay.valign-lg-bottom .overlay-layer{ align-items: flex-end; }

.layout-overlay.valign-xl-top    .overlay-layer{ align-items: flex-start; }
.layout-overlay.valign-xl-middle .overlay-layer{ align-items: center; }
.layout-overlay.valign-xl-bottom .overlay-layer{ align-items: flex-end; }

.layout-overlay.valign-xxl-top    .overlay-layer{ align-items: flex-start; }
.layout-overlay.valign-xxl-middle .overlay-layer{ align-items: center; }
.layout-overlay.valign-xxl-bottom .overlay-layer{ align-items: flex-end; }


/* ==================================================
   ABOVE / BELOW – MOBILE FLOW + FULL WIDTH
================================================== */

/* XS */
@media (max-width: 767px){

  .layout-overlay.valign-above,
  .layout-overlay.valign-below{
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  /* Text-Layer normal im Flow */
  .layout-overlay.valign-above .overlay-layer,
  .layout-overlay.valign-below .overlay-layer{
    position: static;
    inset: auto;
    display: block;
    pointer-events: auto;
  }

  /* Reihenfolge */
  .layout-overlay.valign-above .overlay-layer{ order: 1; }
  .layout-overlay.valign-above .overlay-background{ order: 2; }

  .layout-overlay.valign-below .overlay-background{ order: 1; }
  .layout-overlay.valign-below .overlay-layer{ order: 2; }

  /* Bild wieder im Flow (sonst kollabiert es) */
  .layout-overlay.valign-above .overlay-background,
  .layout-overlay.valign-below .overlay-background{
    position: relative;
    inset: auto;
  }

  .layout-overlay.valign-above .overlay-background img,
  .layout-overlay.valign-below .overlay-background img{
    height: auto;
  }

  /* FULL WIDTH RESET */
  .layout-overlay.valign-above .overlay-layer > .container,
  .layout-overlay.valign-below .overlay-layer > .container,
  .layout-overlay.valign-above .overlay-layer > .container-fluid,
  .layout-overlay.valign-below .overlay-layer > .container-fluid{
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .layout-overlay.valign-above .overlay-layer .row,
  .layout-overlay.valign-below .overlay-layer .row{
    margin: 0;
    height: auto;
    align-items: stretch;
    justify-content: flex-start;
  }

  .layout-overlay.valign-above .overlay-layer [class*="col-"],
  .layout-overlay.valign-below .overlay-layer [class*="col-"]{
    padding-left: 0;
    padding-right: 0;
  }

  .layout-overlay.valign-above .overlay-text,
  .layout-overlay.valign-below .overlay-text{
    width: 100%;
    max-width: 100%;
    transform: none;
  }
}









/* ==================================================
   Pixelmuster Keyvisual
   Auswahlmöglichkeit, Darstellung
================================================== */


.pixel > *,
.pixel > *{
  position: relative;
  z-index: 1;
}

.pixel,
.pixel{
  position: relative;
  overflow: hidden;
}

.pixel.horizontal.bottom.right::after {
   background-position: bottom left; 
   left: 45%; /* fein verschoben */
   right: 0;
}
.pixel.horizontal.bottom.left:after {
    background-position: bottom right; 
	right:45%; /* fein verschoben */
    left: 0;
}
/* Auf Phone nicht nach rechts oder links verschieben */
@media (min-width:0px) and (max-width:767px) {
.pixel.horizontal.right::after,
.pixel.horizontal.left::after {
   left: 0%; 
   right:0;
}
}
.pixel:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
@media (min-width:0px) {
.pixel.light:after{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-60.svg");
}
}
@media (min-width:768px) {
.pixel.light:after{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-80.svg");
}
}
@media (min-width:992px) {
.pixel.light:after{
  background-image: url("/fileadmin/templates/standard_v1/images/Pixel-brand-hori-hoch-light-100.svg");
}
}







header.text-white * { color: white !important; }











/* ==================================================
   BOOTSTRAP-LIKE WIDTH UTILITIES (RESPONSIVE)
   Mobile First – XS bis XXL
   ================================================== */
.w-auto { width: auto !important; }


/* ==================================================
   XS (0+) – global
   ================================================== */
@media (min-width: 0px) and (max-width:575px) {
.xs-w-25   { width: 25% !important; }
.xs-w-50   { width: 50% !important; }
.xs-w-75   { width: 75% !important; }
.xs-w-100  { width: 100% !important; }
}

/* ==================================================
   SM (>=576px)
   ================================================== */

@media (min-width: 576px) and (max-width: 767px){
  .sm-w-25  { width: 25% !important;margin: 0 auto; }
  .sm-w-50  { width: 50% !important;margin: 0 auto; }
  .sm-w-75  { width: 75% !important;margin: 0 auto; }
  .sm-w-100 { width: 100% !important;margin: 0 auto; }
}


/* ==================================================
   MD (>=768px)
   ================================================== */

@media (min-width: 768px) and (max-width:991px) {
  .md-w-25  { width: 25% !important;margin: 0 auto; }
  .md-w-50  { width: 50% !important;margin: 0 auto; }
  .md-w-75  { width: 75% !important;margin: 0 auto; }
  .md-w-100 { width: 100% !important;margin: 0 auto; }
}


/* ==================================================
   LG (>=992px)
   ================================================== */

@media (min-width: 992px) and (max-width:1199px) {
  .lg-w-25  { width: 25% !important;margin: 0 auto; }
  .lg-w-50  { width: 50% !important;margin: 0 auto; }
  .lg-w-75  { width: 75% !important;margin: 0 auto; }
  .lg-w-100 { width: 100% !important;margin: 0 auto; }
}


/* ==================================================
   XL (>=1200px)
   ================================================== */

@media (min-width: 1200px) and (max-width:1399px) {
  .xl-w-25  { width: 25% !important;margin: 0 auto; }
  .xl-w-50  { width: 50% !important;margin: 0 auto; }
  .xl-w-75  { width: 75% !important;margin: 0 auto; }
  .xl-w-100 { width: 100% !important;margin: 0 auto; }
}


/* ==================================================
   XXL (>=1400px)
   ================================================== */

@media (min-width: 1400px) {
  .xxl-w-25  { width: 25% !important;margin: 0 auto; }
  .xxl-w-50  { width: 50% !important;margin: 0 auto; }
  .xxl-w-75  { width: 75% !important;margin: 0 auto; }
  .xxl-w-100 { width: 100% !important;margin: 0 auto; }
}






/* -------------------------------------------------------------------------------------------------
   100.01) Cookie Management
   ------------------------------------------------------------------------------------------------- */

.cookie-consent-container {
  --color-primary: var(--brand-primary) !important;
  --color-dark-primary: var(--brand-primary-hover) !important;
  --color-dark-primary-10: color-mix(in srgb, var(--brand-primary-hover) 90%, white) !important;
  --color-hsla-primary-50: color-mix(in srgb, var(--brand-primary-hover) 50%, white) !important;
}

footer .frame-type-mindshapecookieconsent_consent .container,
footer .frame-type-mindshapecookieconsent_consent .container .row,
footer .frame-type-mindshapecookieconsent_consent .container .col-12 {
    padding:0em;
    margin:0em;
}

footer .frame-type-mindshapecookieconsent_consent .cookie-consent-open.btn-primary {
    color:white !important;
    background-color:transparent !important;
    border:0px solid black;
    padding:0em;
    font-size: calc(var(--brand-font-size) * 0.85);
    font-weight: 400 !important;
}
footer .frame-type-mindshapecookieconsent_consent .cookie-consent-open.btn-primary:hover {
    text-decoration:underline;
}