/* Einbinden der Fonts */ 
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v40-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/source-sans-3-v15-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-sans-3-v15-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/source-sans-3-v15-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat/montserrat-v31-latin-600.woff2') format('woff2');
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat/montserrat-v31-latin-700.woff2') format('woff2');
}

/* TMX Overrides für die Änderungen in Eclipse 6 */
:root {
    
     /* ============================================================
     TMX Content-Bausteine – zentrale Klassen für Contao-Artikel
     Farben: Navy #190C59 · Gold #AA8743 · Panel #F2F5FA
     ============================================================ */

    --tmx-navy:#190C59;
    --tmx-gold:#AA8743;
    --tmx-ink:#3C4150;
    --tmx-muted:#6B7080;
    --tmx-panel:#F2F5FA;
    --tmx-line:#E2E6EF;

    /* Padding für große Hyperlink-Buttons wie in der alten Version */
    --hyperlink-large-padding-top: 17px;
    --hyperlink-large-padding-bottom: 17px;
    --hyperlink-large-padding-left: 90px;
    --hyperlink-large-padding-right: 90px;
    
    /* Font-Size bei Medium Hyperlink-Buttons anpassen */
    --hyperlink-medium-font-size: 1.1rem;

   /* ============================================================
   Überschriften-Skala (21.08.2026): h3/h4 kleiner und in 600,
   damit die Hierarchie unter Montserrat greift. Überschreibt
   die Theme-Variablen aus styles.css; die Mobile-Größen
   (<768px) sind fest hinterlegt und bleiben unberührt.
   ============================================================ */
  --h3-fontSize: 1.6rem;   /* 24px statt 28px */
  --h4-fontSize: 1.267rem; /* 19px statt 22,5px */
  --h5-fontSize: 1.133rem; /* 17px statt 20px, damit h5 unter h4 liegt (13.11.2026) */
}

/* ============================================================
   Globale Überschriften-Harmonisierung (21.08.2026)
   Navy als Standard. Ausnahmen gewinnen von selbst.
   ============================================================ */
body :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){
  font-family:"Montserrat","Open Sans",Arial,sans-serif;
  letter-spacing:-.01em;
}
body :is(h2,h3,h4){
  color:var(--tmx-navy);
}
body h3, body h4{
  font-weight: 600;
}

/* Keine automatische Silbentrennung in Überschriften.
   Die deutschen Trennmuster brechen teilweise falsch. */
:is(h1,h2,h3,h4,h5,h6){
  hyphens: manual;
}

/* Äußere Spalte wieder transparent machen */
.column.bg-accent,
.column.bg-second,
.column.bg-gray,
.column.bg-white,
.column.bg-black,
.column.bg-customColor1,
.column.bg-customColor2 {
    background-color: transparent !important;
}

.column.bg-accent > .attributes{
    background-color: var(--accentColor);
}
.column.bg-second > .attributes {
    background-color: var(--secondColor);
}
.column.bg-gray > .attributes {
    background-color: var(--bgColorGray);
}
.column.bg-black > .attributes {
    background-color: #000;
}   
.column.bg-white > .attributes {
    background-color: #fff;
}
.column.bg-customColor1 > .attributes {
    background-color: var(--customColor1);
}
.column.bg-customColor2 > .attributes {
    background-color: var(--customColor2);
}
.column.bg-accent.box-rounded-25 > .attributes {
    border-radius: 25px;
}
.ce_hyperlink-extended a.link-sec-color-outline {
    color: var(--secondColor);
    border-color: var(--secondColor);
}

#mmenu .mod_navigation ul li a.highlight-rounded50-color-accent {
	background-color: var(--accentColor);
}

.header .mainmenu ul li a.highlight-rounded50-color-accent span {
	background-color: var(--accentColor);
	padding: 10px 20px;
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* TMX: eigenes Bild für die Pfeil-Preview im Revolution Slider */
.tp-arr-imgholder {
    /* background-image: url("files/cto_layout/img/demo_digitization/pic3.jpg") !important; */
    background-image: none !important;
}

/* ENDE DER ANPASSUNGEN WEGEN ECLIPSE 6 */

.hidden-menu {
    display: none !important;
}

.nav-item-pruefstaende:hover + .nav-item-pruefstaende-menue .megamenu {
    display: block !important;
}

/* Ergaenzung Listen mit Haken */ 
.check-list li {
  list-style-type:"✔ ";
  list-style-position: outside;
  margin: 0 0 0 20px;
  padding: 0 0 0 5px;
  text-align: left;
}

/* Aenderung der Hintergrundfarbe einer Infobox für den Typ Info auf CI-Farbe */ 
.ce_infobox_info {
 background: #57aeba;
 font-size: 16px;
}

.ce_text.format-p-large li {
    font-size: 1.3rem;
}

/* nicht mehr in verwendung */
.news-contact {
    background-color: rgb(248, 248, 248);
    padding: 40px;
}
.news-contact h2 h3 h6 {
    margin-bottom: 20px;
}

/* Bildunterschriften sollen zentriert ausgegeben werden */
.image_container .caption {
    display: block;
    text-align: center;
}

/* Laufweite der Überschrift verlängernändern */
.newslist-v5 h4, .newslist-v5 .h4 {
    /* padding-right: 140px; */
    padding-right: 10px;
}

/* TMX Diagramm */
.tmx-diagramm text {
    font-family: "Open Sans" !important;
    fill: #333 !important;
    transition: fill 0.3s ease; /* Weicher Übergang für den Hover */
}
.tmx-diagramm use {
    stroke: #666 !important;
    transition: stroke 0.3s ease;
}

.padding-25 .container {
    padding-right: 25% !important;
}
.padding-25 {
    padding: 25px;
}
.border-15 {
    border-radius: 15px;
}

.product-card ul li::before {
  content: "✓";
  position: absolute;
  left: 15px;
  color: #57aeba;
  font-weight: bold;
}
.product-card ul li {
  padding-left: 20px;
}

.th-bg-primary table th {
    background-color: var(--customColor1);
}
.th-bg-secondary table th {
    background-color: var(--secondColor);
}


/* --- 1. Panel: heller Hintergrund + Goldlinie links -----------------
   Auf ein TEXT-Element (Element-Klasse) ODER eine Reihe (Reihen-Klasse). */
.tmx-panel{
  background:var(--tmx-panel);
  border-left:3px solid var(--tmx-gold);
  border-radius:2px;
  padding:1.5rem 1.7rem;
  margin:0 0 1.6rem;
}
.tmx-panel > *:last-child{ margin-bottom:0; }

/* --- 2. Überschrift mit Goldlinie links -----------------------------
   Element-Klasse auf ein Überschrift-Element. */
.tmx-head-rule{
  position:relative;
  padding-left:0;
  padding-top:1.15rem;
  /* Die Linie braucht Luft nach oben, sonst liest sie sich als
     Unterstreichung des vorherigen Absatzes statt als Kapitelmarke. */
  margin-top:3.6rem;
  color:var(--tmx-navy);
}
.tmx-head-rule::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:auto;
  width:52px; height:3px;
  border-radius:2px;
  background:var(--tmx-gold);
}

/* --- 3. FAQ-Box: Trennlinie oben + Goldbalken an der Frage ----------
   Reihen-Klasse auf die Autogrid-Reihe (Überschrift = Frage, dann Antwort). */
.tmx-faq{
  border-top:1px solid var(--tmx-line);
  padding-top:1.6rem;
  margin-top:2.2rem;
}
.tmx-faq h2,
.tmx-faq h3{
  margin-top:0;
  padding-left:0;
  font-weight:600;
  color:var(--tmx-navy);
}

/* --- 4. Beispiel-Box: dezenter Kasten mit Rahmen -------------------
   Reihen- ODER Element-Klasse. */
.tmx-example{
  background:var(--tmx-panel);
  border:1px solid var(--tmx-line);
  border-radius:3px;
  padding:1.1rem 1.3rem;
  margin:1.3rem 0;
  font-size:.96rem;
}
.tmx-example > *:last-child{ margin-bottom:0; }

/* --- 5. Feature-Box: Navy-Fläche, helle Schrift -------------------
   Reihen-Klasse für hervorgehobene Kennwerte/Nutzen. */
.tmx-feature{
  background:var(--tmx-navy);
  color:#fff;
  border-radius:4px;
  padding:1.5rem 1.7rem;
  margin:1.6rem 0;
}
.tmx-feature :is(h1,h2,h3,h4,strong){ color:#fff; }
.tmx-feature a{ color:#C7A968; }
.tmx-feature > *:last-child{ margin-bottom:0; }

/* --- 5b. Modifier: zweispaltige Innenaufteilung ---------------------
   Zusätzlich zu .tmx-feature als Reihen-Klasse auf eine Autogrid-
   Reihe mit zwei Spalten (z. B. 8/4): Text links, Dauer/Kennwert
   rechts. Nutzt das Theme-Raster, kein eigenes Grid. */
.tmx-feature--split{
  align-items:center;
}
@media(min-width:768px){
  .tmx-feature--split .column:last-child{ text-align:right; }
}
.tmx-feature--split .column:last-child strong{
  display:block;
  font-size:1.3rem;
  color:#fff;
}

/* --- 6. Kontakt-/CTA-Box: zentrierte Fläche mit Button ------------
   Reihen-Klasse. Button = normaler Link mit .tmx-btn (Element-Klasse). */
.tmx-cta{
  background:var(--tmx-panel);
  border:1px solid var(--tmx-line);
  border-radius:4px;
  padding:1.8rem;
  margin:2.5rem 0 1rem;
  text-align:center;
}
.tmx-cta > *:last-child{ margin-bottom:0; }
.tmx-btn{
  display:inline-block;
  background:var(--tmx-navy);
  color:#fff !important;
  text-decoration:none;
  font-weight:600;
  padding:.7rem 1.6rem;
  border-radius:3px;
}
.tmx-btn:hover{ background:#241473; }

/* Button auf Navy-Flächen: Gold statt Navy (sonst unsichtbar) */
.tmx-feature .tmx-btn{
  background:var(--tmx-gold);
  color:#fff !important;
}
.tmx-feature .tmx-btn:hover{
  background:#C7A968;  /* helleres Gold */
}

/* --- 7. Trennlinie -------------------------------------------------
   Element-Klasse auf ein leeres Text-/Trenner-Element,
   oder nutze Contaos Trennelement mit dieser Klasse. */
.tmx-divider{
  border:0;
  border-top:1px solid var(--tmx-line);
  margin:2.4rem 0;
}
.tmx-divider--gold{
  border-top:2px solid var(--tmx-gold);
  width:64px;
  margin:2rem 0;
}

/* --- 8. Inhaltsverzeichnis ----------------------------------------
   Reihen-Klasse auf eine Autogrid-Reihe mit einem Listen-/Text-Element. */
.tmx-toc{
  background:var(--tmx-panel);
  border:1px solid var(--tmx-line);
  border-radius:4px;
  padding:1.2rem 1.4rem;
  margin:0 0 2.4rem;
}
.tmx-toc p, .tmx-toc .tmx-toc__label{
  font-weight:700;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--tmx-gold);
  margin:0 0 .7rem;
}
.tmx-toc ol, .tmx-toc ul{ margin:0; padding-left:1.1rem; }
.tmx-toc li{ margin:.28rem 0; }
.tmx-toc a{ color:var(--tmx-navy); font-weight:600; text-decoration:none; }
.tmx-toc a:hover{ text-decoration:underline; }

/* Anker sauber unter Sticky-Header springen lassen */
:target{ scroll-margin-top:5rem; }

/* --- 9. Zwischenüberschriften (h3) im Fliesstext -------------------
   OHNE Element-Klasse. Contao hängt Klassen an den umschliessenden
   div, nicht an die Überschrift – deshalb greifen wir die h3 direkt
   im Text-Element ab. Farbe, Schrift und Trennlinie in einem Zug.
   Wrapper: .mod_newsreader (Contao-Newsreader-Modul). */
:is(.mod_newsreader,.tmx-prose) .ce_text h3, 
:is(.mod_newsreader,.tmx-prose) h3.ce_headline{
  color:var(--tmx-navy);
  /* font-family:"Montserrat","Open Sans",Arial,sans-serif; */
  font-weight:600;
  letter-spacing:-.01em;
  border-top:1px solid var(--tmx-line);
  padding-top:1.7rem;
  margin:2.6rem 0 .8rem;
}
 
/* Erstes h3 eines Kapitels: kein Trenner.
   Greift automatisch, wenn das Text-Element direkt auf ein
   Überschriften-Element folgt – also genau am Kapitelanfang. */
:is(.mod_newsreader,.tmx-prose) .ce_headline + .ce_text h3:first-child{
  border-top:0;
  padding-top:0;
  margin-top:2rem;
}
 
/* Notausgang, falls die Automatik im Einzelfall nicht greift:
   Klasse tmx-no-rule auf das Text-Element setzen. */
.tmx-no-rule h3{
  border-top:0;
  padding-top:0;
}

/* Kein Trenner in Kästen und in der FAQ – dort trennt der Kasten
   beziehungsweise die Reihe selbst.
   Der Präfix .mod_newsreader ist nötig, sonst ist die Regel
   schwächer als die h3-Grundregel darüber und greift nicht. */
:is(.mod_newsreader,.tmx-prose) :is(.tmx-panel,.tmx-feature,.tmx-cta,.tmx-faq) h3{
  border-top:0;
  padding-top:0;
  margin-top:0;
}

:is(.mod_newsreader,.tmx-prose) .tmx-feature h3{ color:#fff; }
 
/* --- 10. Abbildung mit Bildunterschrift ----------------------------
   Reihen-Klasse. Enthält ein „Eigenes HTML"-Element (SVG oder <img>)
   und darunter ein Text-Element als Bildunterschrift. */
.tmx-figure{
  margin:2rem 0;
}
.tmx-figure img,
.tmx-figure svg{
  display:block;
  width:100%;
  height:auto;
}
.tmx-figure figcaption,
.tmx-figure .tmx-figure__caption{
  font-size:.88rem;
  color:var(--tmx-muted);
  line-height:1.55;
  margin-top:.6rem;
}
/* Auf schmalen Viewports bleiben Diagramme lesbar statt herunterskaliert */
@media(max-width:760px){
  .tmx-figure{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tmx-figure img,
  .tmx-figure svg{ min-width:720px; }
  .tmx-figure::after{
    content:"\2190 seitlich scrollbar";
    display:block;
    font-size:.78rem;
    color:var(--tmx-muted);
    margin-top:.4rem;
  }
}
 
 
/* --- 11. Vergleichstabelle -----------------------------------------
   .tmx-table-scroll als Reihen-Klasse, .tmx-table auf die Tabelle. */
.tmx-table-scroll{
  overflow-x:auto;
  margin:1.8rem 0;
}
table.tmx-table{
  border-collapse:collapse;
  width:100%;
  min-width:720px;
  font-size:.94rem;
}
.tmx-table th{
  background:var(--tmx-navy);
  color:#fff;
  font-weight:600;
  text-align:left;
  padding:.75rem .9rem;
  font-size:.86rem;
}
.tmx-table td{
  padding:.75rem .9rem;
  border-bottom:1px solid var(--tmx-line);
  vertical-align:top;
}
.tmx-table tr:nth-child(even) td{ background:#FAFBFD; }
.tmx-table tr.is-highlight td{
  background:#EEF2FA;
  font-weight:600;
  color:var(--tmx-navy);
}
/* Hervorhebung einzelner Zellwerte, z. B. „nein" in der Spalte Schlupffrei */
.tmx-no{ color:var(--tmx-gold); font-weight:700; }
 
 
/* --- 12. Kicker über einer Überschrift ------------------------------
   Element-Klasse auf ein kurzes Text-Element direkt über der H1/H2.
   Entspricht der Kicker-Systematik der TMX-Folien und greift die
   Typografie des .tmx-toc-Labels auf. */
/* 13.11.2026: --rule ohne Grundklasse bekam die Kicker-Typografie nicht (wirkte dünner) */
.tmx-kicker, .ce_text.tmx-kicker p,
.tmx-kicker--rule, .ce_text.tmx-kicker--rule p{
  font-weight:700;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  /* color:var(--tmx-gold); */
  /* color: var(--tmx-muted); */
  color: var(--secondColor);
  line-height: 1.3;
  margin:0 0 .6rem;
}
.tmx-kicker p, .tmx-kicker--rule p{ margin:0; }

/* Goldlinie am Kicker, wenn Kicker und Linie kombiniert werden */
.tmx-kicker--rule{
  position:relative;
  padding-top:22px;
}
.tmx-kicker--rule::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:52px; height:3px;
  background:var(--tmx-gold);
}

/* ============================================================
   Block A – neue Bausteine (21.08.2026)
   ============================================================ */

/* --- 14. Quellenliste am Artikelende --------------------------------
   Element-Klasse auf das Text-Element mit der <ul>. Bereits im
   HTML der Wissensseite verwendet – Definition fehlte bisher. */
.tmx-sources ul{
  margin:0;
  padding-left:1.1rem;
}
.tmx-sources li{
  font-size:.88rem;
  color:var(--tmx-muted);
  line-height:1.6;
  margin:.3rem 0;
}

/* --- 15. Begriff-Erklärung-Liste (Speclist) -------------------------
   Reihen-Klasse auf die Autogrid-Reihe; darin ein „Eigenes HTML"-
   Element mit:
   <dl><div><dt>Begriff</dt><dd>Erklärung</dd></div> ...weitere Paare...</dl>
   Zweispaltig ab 900 px, Nummerierung vor dem Element in --secondColor.
   Für Lastenheft-Inhalte, Leistungsumfänge, Normenübersichten –
   KEINE Datentabelle (dafür .tmx-table). */
.tmx-speclist dl{
  counter-reset:spec;
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem 2.2rem;
  margin:1.6rem 0;
}
@media(min-width:900px){
  .tmx-speclist dl{ grid-template-columns:1fr 1fr; }
}
.tmx-speclist dl > div{
  border-top:1px solid var(--tmx-line);
  padding-top:.9rem;
  counter-increment:spec;
}
.tmx-speclist dt{
  position:relative;
  padding-left:2.5rem;
  font-weight:600;
  color:var(--tmx-navy);
  margin:0 0 .25rem;
}
.tmx-speclist dt::before{
  content:counter(spec,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.05em;
  font-size:.92rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--secondColor,#7B99BD);
}
.tmx-speclist dd{
  margin:0;
  padding-left:2.5rem;
  color:var(--tmx-ink);
  font-size:.96rem;
  line-height:1.6;
}

/* --- 15a. Speclist-Modifier (12.10.2026) ----------------------------
   Zusätzlich zu .tmx-speclist am selben Element. Für Aufzählungen ohne
   Reihenfolge, bei denen die Nummern eine Ordnung vortäuschen würden.
   --card:  weiße Karten, nur auf grauen Abschnitten (bg-gray)
   --plain: ohne Nummern, Rückfallebene auf weißem Grund */
.tmx-speclist--card dt, .tmx-speclist--card dd,
.tmx-speclist--plain dt, .tmx-speclist--plain dd{ padding-left:0; }
.tmx-speclist--card dt::before,
.tmx-speclist--plain dt::before{ content:none; }
.tmx-speclist--card dl{ gap:1rem 1.2rem; }
.tmx-speclist--card dl > div{
  border-top:0;
  background:#fff;
  border-radius:4px;
  padding:1.1rem 1.3rem;
  box-shadow:0 1px 3px rgba(25,12,89,.08);
}

/* --- 15c. Links in Speclisten (26.10.2026) --- */
.tmx-speclist a{ color:var(--accentColor); }
.tmx-speclist a:hover{ text-decoration:underline; }

/* --- 17. Contao-5.3-Akkordeon (Handorgel) im Look von ce_accordion.style2 (19.10.2026) */
.tmx-accordion .handorgel__header{
  margin:0 0 8px;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:0;
}
.content-accordion.tmx-accordion .handorgel__header button.handorgel__header__button{
  display:block;
  width:100%;
  position:relative;
  text-align:left;
  padding:1.1rem 1.25rem 1.1rem 4rem;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  color:var(--tmx-ink);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,42,.03),0 4px 10px rgba(15,23,42,.04);
  cursor:pointer;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.content-accordion.tmx-accordion .handorgel__header button.handorgel__header__button::before{
  content:"\f067";
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:1.5rem;
  height:1.5rem;
  text-align:center;
  font:1rem/1.6rem FontAwesome;
  font-weight:normal;
  border:2px solid;
  border-radius:50%;
  transition:color .25s ease,border-color .25s ease;
  opacity:.55;
}
.content-accordion.tmx-accordion .handorgel__header button.handorgel__header__button:hover::before,
.content-accordion.tmx-accordion .handorgel__header--open button.handorgel__header__button::before,
.content-accordion.tmx-accordion .handorgel__header button.handorgel__header__button[aria-expanded="true"]::before{
  opacity:1;
}
.content-accordion.tmx-accordion .handorgel__header button.handorgel__header__button:hover{
  color:var(--accentColor);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 16px rgba(15,23,42,.06);
}
.content-accordion.tmx-accordion .handorgel__header--open button.handorgel__header__button,
.content-accordion.tmx-accordion .handorgel__header button.handorgel__header__button[aria-expanded="true"],
.content-accordion.tmx-accordion .handorgel__header--open button.handorgel__header__button:hover{
  color:#fff;
  background:var(--accentColor);
  border:1px solid var(--accentColor);
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 18px rgba(15,23,42,.10);
}
.content-accordion.tmx-accordion .handorgel__header--open button.handorgel__header__button::before,
.content-accordion.tmx-accordion .handorgel__header button.handorgel__header__button[aria-expanded="true"]::before{
  content:"\f068";
  color:#fff;
  border-color:#fff;
}
.tmx-accordion .handorgel__content,
.tmx-accordion .handorgel__content__inner{
  background:transparent;
  border:0;
  box-shadow:none;
}
.tmx-accordion .handorgel__content__inner{
  padding:22px 4px 18px;
}

/* --- 18. Hero-Karte für Wissensseiten (20.10.2026) --- */
.ce_text.tmx-hero-card{
  position:relative;
  z-index:1;
  background:#fff;
  text-align:center;
  padding:1.6rem 0 0;
}
.ce_text.tmx-hero-card h1{
  color:var(--tmx-navy);
  margin:0;
}
.ce_text.tmx-hero-card p{
  font-size:1.2rem;
  line-height:1.5;
  color:var(--tmx-ink);
  max-width:44em;
  margin:.9rem auto 0;
}
@media (min-width:768px){
  .ce_text.tmx-hero-card{
    margin:-140px 48px 0;
    padding:2.6rem 3rem .4rem;
    border-radius:4px 4px 0 0;
  }
}

/* --- Fix: Portfolio-Raster vor Isotope bereits dreispaltig (26.10.2026) */
.mod_portfoliolist_v7{ display:flow-root; }
.mod_portfoliolist_v7 > .item{ float:left; }

/* --- Sprachwechsler DE/EN im Header (Modul 764, 12.11.2026) ---
   Der ThemeDesigner blendet .header .mod_langswitcher aus. Diese Regel zeigt nur
   den Contao-Sprachwechsler (mod_changelanguage) ab 768 px; mobil steht er im mmenu. */
@media (min-width:768px){
  #header .mod_changelanguage.mod_langswitcher,
  .stickyheader .mod_changelanguage.mod_langswitcher{ display:block; }
}

/* --- Sprachwechsler: Weltsymbol vor dem aktiven Sprachkürzel (13.11.2026) ---
   SVG als Maske, Farbe folgt der Schriftfarbe (currentColor); gilt für Header,
   Sticky-Header und mobiles Menü in DE und EN. */
.mod_changelanguage.mod_langswitcher{ overflow:visible; } /* Dropdown DE/EN wurde vom Container abgeschnitten */
.mod_changelanguage .mod_langswitcher_inside > span{ font-size:15px; font-weight:600; }
.mod_changelanguage .mod_langswitcher_inside > span::before{
  content:""; display:inline-block; width:1.3em; height:1.3em; margin-right:.4em; vertical-align:-.3em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center/contain;
}