/* =========================================================
   TRILUMA UI SYSTEM v2 – CONSOLIDATED TEST v3
   Basis: triluma-ui(4).css (SSOT)
   Ziel: ausschließlich sicher verhaltensneutrale Bereinigung
   Keine bewusste Gestaltungsänderung
   ========================================================= */

/* =========================================================
   1. FONTS
========================================================= */

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EBGaramond';
  src: url('/assets/fonts/EBGaramond.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EBGaramond';
  src: url('/assets/fonts/EBGaramondItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}


/* =========================================================
   2. RESET
========================================================= */

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

html{
  scroll-behavior:smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}


/* =========================================================
   3. VARIABLEN
========================================================= */

:root{
  --tri-blue:#3ba2c4;
  --tri-blue-dark:#1b6d7e;
  --tri-blue-light:#81cde2;

  --tri-red:#e10000;
  --tri-red-light:#e19090;

  --tri-orange:#e78005;
  --tri-orange-light:#f8c68b;

  --tri-grey-light:#c4c8d0;
  --tri-grey-dark:#1f2937;

  --tri-text:#070707;
  --tri-muted:#64748b;
  --tri-border:#e2e8f0;
  --tri-bg:#f1f4f7;       /*  #f8fafc;  */
  --tri-white:#ffffff;
  --tri-black:#000000;
	
	--tri-chat-bguser:#d7efdf;
	--tri-chat-bgactor:#bfe3ed;
	--tri-chat-bgchat:#f3f6f8;
	--tri-chat-inputs:#e4ebed;

  --tri-h1-color: var(--tri-blue);
  --tri-h2-color: var(--tri-blue);
  --tri-h3-color: var(--tri-blue);
  --tri-h4-color: var(--tri-blue);
  --tri-h5-color: var(--tri-blue);
  --tri-h6-color: var(--tri-blue);

  --tri-radius:12px;

  --tri-space-xs:6px;
  --tri-space-sm:12px;
  --tri-space-md:20px;
  --tri-space-lg:40px;
  --tri-space-xl:80px;

  --tri-max-width:1320px;
}


/* =========================================================
   4. BASE
========================================================= */

body{
  font-family:'Roboto', system-ui, sans-serif;
  color:var(--tri-text);
  background:var(--tri-bg);
  line-height:1.6;
}

.tri-visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Sonderbehandlung für reine TAB-User (keine Maus) */
.tri-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tri-skip-link:focus-visible {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: var(--tri-white);
  color: var(--tri-text);
  border: 2px dotted var(--tri-blue-dark);
  border-radius: 999px;
  z-index: 2000;
}

.tri-skip-link:focus:not(:focus-visible) {
  left: -9999px;
}


/* =========================================================
   5. TYPOGRAFIE
========================================================= */

h1,h2,h3,h4,h5,h6{
  font-family:'EBGaramond', serif;
  margin-top:0;
	hyphens:none;
}

h1 {
  font-size:36px;
  line-height:1.2;
  margin-bottom:var(--tri-space-lg);
  color:var(--tri-h1-color);
}

h2 {
  font-size:28px;
  line-height:1.25;
  margin-bottom:var(--tri-space-sm);
  color:var(--tri-h2-color);
}

h3 {
  font-size:22px;
  line-height:1.3;
  margin-bottom:var(--tri-space-sm);
  color:var(--tri-h3-color);
}

h4 {
  font-size:18px;
  line-height:1.3;
  margin-bottom:var(--tri-space-sm);
  color:var(--tri-h4-color);
}

h5 {
  font-size:16px;
  line-height:1.35;
  margin-bottom:var(--tri-space-sm);
  color:var(--tri-h5-color);
}

h6 {
  font-size:14px;
  line-height:1.35;
  margin-bottom:var(--tri-space-xs);
  color:var(--tri-h6-color);
}

p {
  font-size:15px;
  line-height:1.5;
  margin-top:0;
  margin-bottom:var(--tri-space-xs);
}

ul{
  font-size:15px;
  line-height:1.5;
  padding-left:20px;
  margin:0;
  color:var(--tri-text);
}

ol{
  font-size:15px;
  line-height:1.5;
  padding-left:20px;
  margin:0;
  color:var(--tri-text);
}

li + li{
  margin-top:3px;
}

/*  TEXTLINKS IN CONTENT-BEREICHEN - gilt nicht für Header-/Menülinks!  */

main a:not(.tri-btn):not(.tri-header-btn):not(.tri-text-btn),
.tri-footer a:not(.tri-btn):not(.tri-header-btn):not(.tri-text-btn) {
  color: var(--tri-black);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

main a:not(.tri-btn):not(.tri-header-btn):not(.tri-text-btn):hover,
.tri-footer a:not(.tri-btn):not(.tri-header-btn):not(.tri-text-btn):hover {
  color: var(--tri-blue);
  font-weight: 500;
  text-decoration: underline;
}

/* Sonderklassen für "Kleingedrucktes"  */

.tri-legal-small{
  max-width:var(--tri-max-width);
  margin:var(--tri-space-lg) auto var(--tri-space-md);
  padding:0 var(--tri-space-md);
  background:transparent;
}

.tri-legal-small h3{
  font-size:16px;
  line-height:1.0;
  margin-bottom:var(--tri-space-sm);
}

.tri-legal-small h4{
  font-size:13px;
  line-height:1.0;
  margin-bottom:var(--tri-space-xs);
}

.tri-legal-small p{
  margin-top:0;
  margin-bottom:var(--tri-space-xs);
}

.tri-legal-small p small{
  font-size:11px;
  line-height:1.3;
  margin-top:0;
  margin-bottom:var(--tri-space-xs);
  display:block;
}


/* Sonstige Spezialklassen */

.tri-teaser{
  font-family:'EBGaramond', serif;
  font-size:38px;
	letter-spacing: -3%;
  line-height:1.2;
  color:var(--tri-blue);
  margin:0 0 var(--tri-space-md);
}

.tri-headline{
  font-family:'EBGaramond', serif;
	letter-spacing: -4%;
  color:var(--tri-blue);
}

.tri-text{
  font-size:15px;
  line-height:1.5;
  color:var(--tri-text);	
}

.tri-text-hero{
  font-size:17px;
  line-height:1.7;
  color:var(--tri-text);	
}

.tri-text-small{
  font-size:13px;
  line-height:1.4;
  color:var(--tri-muted);
}

.tri-comment{
  font-family:'EBGaramond', serif;
  color:var(--tri-blue);
  margin-bottom:var(--tri-space-sm);
}

.tri-comment-small{
  font-size:13px;
  line-height:1.4;
  color:var(--tri-blue);
}


/* === BRANCH SELECT === */

.tri-branch-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.tri-branch-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:0.2s;
  border:1px solid var(--tri-border);
  font-size:17px;
  font-weight:500;
}

.tri-branch-item:hover{
  background:var(--tri-blue-light);
}

.tri-branch-item.active{
  background:var(--tri-blue);
  color:white;
}

.tri-branch-item img{
  width:35px !important; 
  height:35px !important;
  object-fit:contain !important;
	flex-shrink:0;
	border-radius:6px !important;
}

.tri-branch-item.active img{
  filter:none;
}


/* === ARROW CENTER === */

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


/* =========================================================
   6. SECTION
========================================================= */

.tri-section{
  max-width:var(--tri-max-width);
  margin:auto;
  padding:var(--tri-space-md) var(--tri-space-md);
  scroll-margin-top:130px;
}


/* =========================================================
   7. GRID SYSTEM (Seitenlayout)
========================================================= */

.tri-grid{
  display:grid;
  gap:var(--tri-space-md);
  align-items:stretch;
}

.tri-grid-2-1{
  grid-template-columns:2fr 1fr;
}

.tri-grid-2-1 > :first-child{
  padding-right:40px;
}

.tri-grid-1-2{
  grid-template-columns:1fr 2fr;
}

.tri-grid-1-2 > :last-child{
  padding-left:40px;
}

.tri-grid-3{
  grid-template-columns:repeat(3,1fr);
}


/* =========================================================
   10. IMAGE SYSTEM
========================================================= */

.tri-image{
  width:100%;
  max-width:400px;
  aspect-ratio:1/1;
  border-radius:var(--tri-radius);
  background:#cbd5e1;
}

.tri-media{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

.tri-grid img{
  display:block;
  max-width:90%;
  max-height:90%;
  width:auto;
  height:auto;
  border-radius:var(--tri-radius);
  object-fit:contain;
}


/* =========================================================
   11. BUTTONS
========================================================= */

.tri-btn{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  border:2px solid var(--tri-border);
  cursor:pointer;
  text-decoration:none;
  font-weight:500;
  transition:0.2s;
  position:relative;
}

.tri-btn-primary,
.tri-btn-typ1{
  background:var(--tri-blue);
  color:var(--tri-black);
  border:none;
}

.tri-btn-primary:hover,
.tri-btn-typ1:hover{
  background:var(--tri-blue-dark);
  color:var(--tri-white);
}

.tri-btn-typ2{
  background:var(--tri-white);
  color:var(--tri-text);
  border:2px solid var(--tri-black);
}

.tri-btn-typ2:hover{
  background:var(--tri-blue);
  color:var(--tri-white);
}

.tri-btn-typ3{
  background:var(--tri-white);
  color:var(--tri-red);
  border:2px solid var(--tri-red);
}

.tri-btn-typ3:hover{
  background:var(--tri-red-light);
  color:var(--tri-black);
}

.tri-btn-disabled,
.tri-btn:disabled{
  background:var(--tri-grey-light);
  color:var(--tri-grey-dark);
  cursor:not-allowed;
  opacity:0.6;
  transform:none;
}


/* =========================================================
   11a. HEADER BUTTONS (isolated)
========================================================= */

:root {
  --tri-header-btn-radius: 6px;
  --tri-header-btn-padding: 6px 12px;
  --tri-header-btn-font-size: 14px;
}

/* Base */

	.tri-header-btn {
		display: inline-block;
		padding: var(--tri-header-btn-padding);
		border-radius: 999px;
		font-size: var(--tri-header-btn-font-size);
		font-weight: 500;
		font-family: inherit;
		line-height: 1.2;
		margin: 0;
		appearance: none;
		-webkit-appearance: none;
		vertical-align: middle;
		text-decoration: none;
		cursor: pointer;
		transition: all 0.2s ease;
		border: 1px solid transparent;
	}
	
/* Primary */
.tri-header-btn-primary {
  background: var(--tri-blue);
  color: var(--tri-black);
  border-color: var(--tri-blue);
}

.tri-header-btn-primary:hover {
  background: var(--tri-blue-dark);
  color: var(--tri-orange);
  border-color: var(--tri-blue-dark);
}

.tri-header-btn-primary.is-active {
  background: var(--tri-blue-dark);
  color: var(--tri-orange);
  border-color: var(--tri-blue-dark);
	text-decoration: underline;
}

/* Typ2 */
.tri-header-btn-typ2 {
  background: transparent;
  color: var(--tri-text);
  border-color: var(--tri-blue);
}

.tri-header-btn-typ2:hover {
  background: var(--tri-blue);
  color: var(--tri-white);
}

/* Typ3 */
.tri-header-btn-typ3 {
  background: var(--tri-orange);
  color: var(--tri-text);
  border-color: var(--tri-orange);
}

.tri-header-btn-typ3:hover {
  background: var(--tri-blue);
  color: var(--tri-white);
}


/* =========================================================
   11b. TEXT BUTTONS (isolated)
========================================================= */

:root {
  --tri-text-btn-radius: 6px;
  --tri-text-btn-padding: 2px 4px;
  --tri-text-btn-font-size: 11px;
}

/* Base */
.tri-text-btn {
  display: inline-block;
  padding: var(--tri-text-btn-padding);
  border-radius:999px;
  font-size: var(--tri-text-btn-font-size);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

/* Primary */
.tri-text-btn-primary {
  background: var(--tri-blue);
  color: var(--tri-black);
  border-color: var(--tri-blue);
}

.tri-text-btn-primary:hover {
  background: var(--tri-blue-dark);
  color: var(--tri-orange);
  border-color: var(--tri-blue-dark);
}

/* Typ2 */
.tri-text-btn-typ2 {
  background: transparent;
  color: var(--tri-text);
  border-color: var(--tri-blue);
}

.tri-text-btn-typ2:hover {
  background: var(--tri-blue);
  color: var(--tri-white);
}


/* =========================================================
   12. GLOBAL FOCUS SYSTEM
========================================================= */

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
summary:focus,
[tabindex]:focus{
  outline:none;
}

.tri-nav a,
.tri-btn,
.tri-burger,
.tri-close,
.tri-mobile-menu a{
  position:relative;
}

.tri-nav a:focus-visible::after,
.tri-btn:focus-visible::after,
.tri-burger:focus-visible::after,
.tri-close:focus-visible::after,
.tri-mobile-menu a:focus-visible::after{
  content:"";
  position:absolute;
  inset:-6px -10px;
  border:2px dotted var(--tri-blue-dark);
  border-radius:999px;
  pointer-events:none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px dotted var(--tri-blue-dark);
  outline-offset:3px;
  border-radius:8px;
}

.tri-skip-link:focus-visible{
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: var(--tri-white);
  color: var(--tri-text);
  border: 2px dotted var(--tri-blue-dark);
  border-radius:999px;
  z-index: 2000;
}


/* =========================================================
   13. HEADER
========================================================= */

#tri-header{
  position:sticky;
  top:0;
  z-index:1000;
}

.tri-header{
  position:relative;
  background:var(--tri-white);
  border-bottom:1px solid var(--tri-border);
}

.tri-header-top{
  background:#f1f5f9;
}

.tri-header-top-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:var(--tri-max-width);
  margin:auto;
  padding:var(--tri-space-xs) var(--tri-space-md);
	position: relative;
}

.tri-header-top-left{
  font-family:'EBGaramond', serif;
  font-size:18px;
	font-weight:600;
  color:var(--tri-blue);
}

/* Sprache absolut mittig */
.tri-header-top-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.tri-header-top-right{
  font-family:'EBGaramond', serif;
  font-size:18px;
	font-weight:600;
  color:var(--tri-blue);
}

.tri-header-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--tri-space-sm) var(--tri-space-md);
  max-width:var(--tri-max-width);
  margin:auto;
}

.tri-header .tri-logo img{
  height:80px;
  width:auto;
  max-height:80px;
}

/* Sprachbubbles */
.tri-lang-switch {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  justify-content:center;
}

.tri-lang-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 9px;
  border:1px solid var(--tri-border);
  border-radius:999px;
  background:var(--tri-white);
  color:var(--tri-blue-dark);
  font-size:12px;
  line-height:1.2;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.tri-lang-switch a:hover{
  background:var(--tri-blue);
  border-color:var(--tri-blue);
  color:var(--tri-white);
  text-decoration:none;
}

.tri-lang-switch img{
  display:none;
}

.tri-nav{
  display:flex;
  align-items:center;
  gap:var(--tri-space-md);
}

.tri-header-icon-group{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:0;
  flex:0 0 auto;
}

.tri-header-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  margin:0;
  line-height:0;
  flex:0 0 auto;
  text-decoration:none;
}

.tri-header-icon-link img{
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
  flex:0 0 auto;
}

.tri-mobile-icon-group{
  justify-content:flex-start;
}

.tri-nav a{
  text-decoration:none;
  font-size:14px;
}

.tri-nav a:not(.tri-btn):not(.tri-header-btn){
  color: var(--tri-text);
}

.tri-nav a:not(.tri-btn):not(.tri-header-btn):hover{
  color: var(--tri-blue);
}

.tri-nav-desktop{
  display:flex;
}

/* --- Submenu --- */

.tri-nav-item {
  position: relative;
}

.tri-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--tri-white);
  border: 1px solid var(--tri-border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 240px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  display: none;
  z-index: 1000;
}

.tri-submenu a {
  display: block;
  padding: 8px 16px;
  color: var(--tri-text);
  text-decoration: none;
  font-size: 14px;
}

.tri-submenu a:hover {
  background: var(--tri-blue);
  color: var(--tri-white) !important;
}

/* Hover öffnen */
.tri-nav-item-has-sub:hover .tri-submenu {
  display: block;
}

/* Smooth transition */
.tri-header,
.tri-header-top,
.tri-header-main,
.tri-logo img {
  transition: all 0.25s ease;
}

/* Header gescrollt */
#tri-header.is-scrolled .tri-header-top {
  opacity: 0;
  transform: translateY(-100%);
  height: 0;
  overflow: hidden;
}

#tri-header.is-scrolled .tri-header-main {
  padding-top: 6px;
  padding-bottom: 6px;
}

#tri-header.is-scrolled .tri-logo img {
  height: 52px;
  max-height:52px;
}


/* =========================================================
   14. CURRENT PAGE / ACTIVE NAV
========================================================= */

.tri-nav a[aria-current="page"]:not(.tri-btn):not(.tri-header-icon-link),
.tri-nav a.active:not(.tri-btn):not(.tri-header-icon-link),
.tri-mobile-menu a[aria-current="page"]:not(.tri-btn):not(.tri-header-icon-link),
.tri-mobile-menu a.active:not(.tri-btn):not(.tri-header-icon-link){
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
  color:var(--tri-blue-dark);
}

.tri-nav a.tri-btn[aria-current="page"],
.tri-nav a.tri-btn.active,
.tri-mobile-menu a.tri-btn[aria-current="page"],
.tri-mobile-menu a.tri-btn.active{
  background:var(--tri-blue-dark);
  color:var(--tri-white);
}

.tri-nav a[aria-current="page"]:not(.tri-header-icon-link):hover,
.tri-nav a.active:not(.tri-header-icon-link):hover,
.tri-mobile-menu a[aria-current="page"]:not(.tri-header-icon-link):hover,
.tri-mobile-menu a.active:not(.tri-header-icon-link):hover{
  opacity:1;
}

/* ---------------------------------------------------------
   14.1 Spezifische Active-Styles für Header-Buttons
--------------------------------------------------------- */

.tri-nav a.tri-header-btn-primary[aria-current="page"],
.tri-nav a.tri-header-btn-primary.active,
.tri-mobile-menu a.tri-header-btn-primary[aria-current="page"],
.tri-mobile-menu a.tri-header-btn-primary.active{
  background:var(--tri-blue);
  color:var(--tri-orange);
  border-color:var(--tri-blue);
  text-decoration:underline;
}

.tri-nav a.tri-header-btn-typ2[aria-current="page"],
.tri-nav a.tri-header-btn-typ2.active,
.tri-mobile-menu a.tri-header-btn-typ2[aria-current="page"],
.tri-mobile-menu a.tri-header-btn-typ2.active{
  background:var(--tri-orange);
  color:var(--tri-white);
  border-color:var(--tri-orange);
  text-decoration:underline;
}

.tri-nav a.tri-header-btn-typ3[aria-current="page"],
.tri-nav a.tri-header-btn-typ3.active,
.tri-mobile-menu a.tri-header-btn-typ3[aria-current="page"],
.tri-mobile-menu a.tri-header-btn-typ3.active{
  background:var(--tri-white);
  color:var(--tri-blue);
  border-color:var(--tri-blue);
  text-decoration:underline;
}


/* =========================================================
   15. TRI SPLIT SYSTEM (Baukasten für 2/3 Blöcke in Cards)
   - 2 Spalten: .tri-split
   - 3 Spalten: .tri-split tri-split-3
   - Bildspalten: Linie verschwindet automatisch
========================================================= */

.tri-split{
  display:grid;
  gap:32px;
  align-items:stretch;
  grid-template-columns:1fr 1fr;
}

.tri-split-3{
  grid-template-columns:1fr 1fr 1fr;
}

.tri-split-col{
  position:relative;
  min-width:0;
  height:100%;
}

.tri-split-col > *:last-child{
  margin-bottom:0;
}

/* Trennlinien mit Luft */
.tri-split-col:not(:first-child)::before{
  content:"";
  position:absolute;
  left:-16px;
  top:12px;
  bottom:12px;
  width:1px;
  background:var(--tri-border);
}

/* Linien bei Bildspalten ausblenden */
.tri-split-col:has(img)::before,
.tri-split-col:has(.tri-card-image)::before{
  display:none;
}

.tri-split-col:not(:first-child):has(img)::before,
.tri-split-col:not(:first-child):has(.tri-card-image)::before{
  display:none;
}

/* Wenn die vorherige oder aktuelle Spalte Bild enthält → keine Linie */
.tri-split-col:has(img) + .tri-split-col::before,
.tri-split-col:has(.tri-card-image) + .tri-split-col::before{
  display:none;
}

/* Bilder in Split-Spalten */
.tri-split-col img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}

/* Optional manuelle Bildspalte */
.tri-split-col.tri-split-media::before,
.tri-split-col.tri-split-media + .tri-split-col::before{
  display:none;
}


/* =========================================================
   16. RESPONSIVE
========================================================= */

@media (max-width: 1024px){

  .tri-header .tri-logo img{
    height:72px;
    max-height:72px;
  }

  #tri-header.is-scrolled .tri-logo img{
    height:48px;
    max-height:48px;
  }
}

@media (max-width: 900px){

  .tri-grid-2-1,
  .tri-grid-1-2,
  .tri-grid-3{
    grid-template-columns:1fr;
  }

  .tri-grid-2-1 > :first-child{
    padding-right:0;
  }

  .tri-grid-1-2 > :last-child{
    padding-left:0;
  }

  .tri-teaser{
    font-size:30px;
  }

  .tri-burger{
    display:block;
  }

  .tri-nav-desktop{
    display:none;
  }

  .tri-header-top{
    font-size:12px;
  }

  .tri-header-top-inner{
    flex-direction:column;
    gap:4px;
    text-align:center;
  }

  .tri-header-top-right{
    text-align:center;
  }

  .tri-header .tri-logo img{
    height:64px;
    max-height:64px;
  }

  #tri-header.is-scrolled .tri-logo img{
    height:44px;
    max-height:44px;
  }
}

@media (max-width: 768px){

  .tri-split,
  .tri-split-3{
    grid-template-columns:1fr;
    gap:16px;
  }

  .tri-split-col::before{
    display:none;
  }
}

@media (max-width: 600px){
  
  .tri-btn{
    width:100%;
    text-align:center;
    padding:14px 18px;
  }

  h1{
    font-size:28px;
  }

  h2{
    font-size:22px;
  }

  h3{
    font-size:20px;
  }

  .tri-section{
    padding:16px;
  }

  .tri-header-main{
    padding:12px 16px;
  }

  .tri-header .tri-logo img{
    height:56px;
    max-height:56px;
  }

  #tri-header.is-scrolled .tri-logo img{
    height:40px;
    max-height:40px;
  }
}


/* =========================================================
   17b. GLOBAL POPUP FADE
   Nur Opacity, keine Skalierung / keine Bewegung.
========================================================= */

.tri-popup-fade{
  opacity:0;
  transition:opacity 240ms ease;
  will-change:opacity;
}

.tri-popup-fade.is-open{
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  .tri-popup-fade{
    transition:none;
  }
}


/* =========================================================
   18. PAGE TRANSITIONS
========================================================= */

html {
  background: var(--tri-bg);
}

body.tri-preload {
  opacity: 0;
}

body.tri-ready {
  opacity: 1;
  transition: opacity 280ms ease;
}

body.tri-leaving {
  opacity: 0;
  transition: opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.tri-ready,
  body.tri-leaving {
    transition: none;
  }
}


/* =========================================================
   17. MOBILE NAV – PRO
========================================================= */

.tri-burger{
  display:none;
  font-size:26px;
  background:none;
  border:none;
  cursor:pointer;
}

.tri-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:999;
}

.tri-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.tri-mobile-menu{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:280px;
  background:var(--tri-white);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transform:translateX(100%);
  transition:transform 0.3s ease;
  z-index:1000;
}

.tri-mobile-menu.active{
  transform:translateX(0);
}

.tri-mobile-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.tri-close{
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
}

.tri-mobile-menu .tri-btn{
  width:100%;
  text-align:center;
}


/* =========================================================
   MATCH RESULTS
========================================================= */

.tri-match-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.tri-match-headline{
  text-align:center;
  font-family:'EBGaramond', serif;
  font-size:28px;
  font-weight:700;
  margin-bottom:12px;
  color:var(--tri-blue);
}

.tri-match-headline-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:0px;
}

.tri-match-headline-best{
  color:var(--tri-orange);
}

.tri-best-match{
  border-left-color:var(--tri-orange) !important;
}

.tri-match-more-title{
  text-align:center;
  font-family:'EBGaramond', serif;
  font-size:28px;
  font-weight:700;
  color:var(--tri-blue);
  margin-top:30px;
}

.tri-match-top-grid{
  margin-bottom:30px;
}

.tri-match-more{
  display:none !important;
  margin-top:12px;
}

.tri-match-more.open{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
	align-items:stretch;     /* NEU */
}

.tri-match-more-button{
  text-align:center;
  display:flex;
  justify-content:center;
  margin-top:30px;
}


@media (max-width:980px){

  .tri-match-grid{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   19. FORM CONTROLS
   Globale Checkbox-/Radio-Akzentfarbe
========================================================= */

input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--tri-blue);
}


/* =========================================================
   20. SESSION CHOICE POPUP
========================================================= */

.tri-session-choice-overlay{
  position:fixed;
  inset:0;
  z-index:20000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.55);
}

.tri-session-choice-popup{
  position:relative;
  width:min(450px, 96vw);
  max-height:88vh;
  overflow:auto;
  padding:28px;
  border-radius:22px;
  background:var(--tri-white);
}

.tri-session-choice-close{
  position:absolute;
  top:16px;
  right:16px;
  border:none;
  background:none;
  color:var(--tri-text);
  font-size:32px;
  line-height:1;
  cursor:pointer;
}

.tri-session-choice-title{
  margin:0 42px 18px 0;
}

.tri-session-choice-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

@media(max-width:620px){
  .tri-session-choice-popup{
    padding:20px;
  }
}
/* === TRILUMA_HEADER_MOBILE_FIX26_START === */
/* =========================================================
   TRILUMA HEADER MOBILE FIX v99 / 2026-07-07
   Zweck: Mobile-Menü verlinkt/scrollbar + Top-Bar-Breakpoints
          + Overlay liegt hinter dem Menü.
   ========================================================= */

@media (max-width:1550px){
  .tri-header-top-inner{
    justify-content:space-between;
  }
}

@media (max-width:1130px){
  .tri-header-top-left,
  .tri-header-top-right{
    display:none !important;
  }

  .tri-header-top-inner{
    justify-content:center;
    min-height:34px;
    padding:4px 12px;
  }

  .tri-header-top-center{
    position:static !important;
    left:auto !important;
    transform:none !important;
    width:100%;
    overflow:hidden;
  }

  .tri-header-top-center .tri-lang-switch{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .tri-header-top-center .tri-lang-switch::-webkit-scrollbar{
    display:none;
  }
}

@media (max-width:1180px){
  .tri-nav-desktop{
    display:none !important;
  }

  .tri-burger{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    margin-left:auto;
    border:1px solid var(--tri-border);
    border-radius:999px;
    background:var(--tri-white);
    color:var(--tri-blue-dark);
    font-size:28px;
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
  }

  .tri-header-main{
    gap:16px;
  }

  .tri-overlay{
    z-index:19990 !important;
  }

  .tri-overlay.active{
    pointer-events:auto;
  }

  .tri-mobile-menu{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:100vh;
    height:100dvh;
    width:min(390px, 88vw);
    max-height:100vh;
    max-height:100dvh;
    overflow-y:auto !important;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    gap:10px;
    padding-bottom:28px;
    z-index:20000 !important;
    pointer-events:auto;
  }

  .tri-mobile-main-link{
    display:block;
    font-weight:700;
    color:var(--tri-text);
    text-decoration:none;
    padding:8px 0 4px;
    line-height:1.25;
  }

  .tri-mobile-main-link:hover{
    color:var(--tri-blue);
  }

  .tri-mobile-main-link-cta{
    margin-top:8px;
    color:var(--tri-blue-dark);
  }

  .tri-mobile-subgroup{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:0 0 8px 12px;
    border-left:2px solid var(--tri-border);
  }

  .tri-mobile-subgroup a{
    display:block;
    color:var(--tri-text);
    text-decoration:none;
    font-size:14px;
    line-height:1.3;
    padding:2px 0;
  }

  .tri-mobile-subgroup a:hover{
    color:var(--tri-blue);
  }

  .tri-mobile-icon-group{
    margin-top:10px;
    padding-bottom:10px;
    justify-content:flex-start;
  }
}

@media (max-width:760px){
  .tri-header-main{
    padding:10px 16px;
  }

  .tri-header .tri-logo img,
  #tri-header.is-scrolled .tri-logo img{
    height:52px;
    max-height:52px;
  }
}

@media (max-width:420px){
  .tri-header .tri-logo img,
  #tri-header.is-scrolled .tri-logo img{
    height:44px;
    max-height:44px;
  }

  .tri-burger{
    width:42px;
    height:42px;
    font-size:25px;
  }
}

body.tri-mobile-menu-open{
  overflow:hidden;
}

/* === TRILUMA_THEME_RESTART30_START === */
/* =========================================================
   TRILUMA COLOR THEMES RESTART_30 / 2026-07-10
   Bright bleibt unangetastet. Dark ist eine zusätzliche Schicht.
   ========================================================= */

.tri-theme-toggle{
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  appearance:none;
  -webkit-appearance:none;
  border-radius:8px;
}

.tri-theme-toggle:hover,
.tri-theme-toggle:focus-visible{
  outline:2px solid var(--tri-blue);
  outline-offset:2px;
}



html[data-theme="dark"],
html[data-theme="dark"] body{
  background:var(--tri-dark-bg) !important;
  color:var(--tri-dark-text) !important;
}
/* Konsolidierte Dark-Header-/Footer-Regeln – Test v3 */
html[data-theme="dark"] .tri-footer > section:first-child,
html[data-theme="dark"] .tri-footer > section:first-child > .tri-section{
  background:var(--tri-dark-bg-soft) !important;
}


:root[data-theme="dark"] .tri-header,
:root[data-theme="dark"] .tri-header-main,
:root[data-theme="dark"] .tri-footer,
:root[data-theme="dark"] .tri-mobile-menu,
:root[data-theme="dark"] .tri-submenu,
:root[data-theme="dark"] .tri-card,
:root[data-theme="dark"] .tri-card-nolimit,
:root[data-theme="dark"] .tri-panel,
:root[data-theme="dark"] .tri-box,
:root[data-theme="dark"] .tri-session-choice-popup,
:root[data-theme="dark"] .tri-talkway-modal,
:root[data-theme="dark"] .tri-talkway-popup,
:root[data-theme="dark"] .tri-companion-popup,
:root[data-theme="dark"] .tri-coach-popup,
:root[data-theme="dark"] .tri-trainer-popup{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  box-shadow:var(--tri-dark-shadow);
}

:root[data-theme="dark"] .tri-header-top,
:root[data-theme="dark"] .tri-section,
:root[data-theme="dark"] .tri-section-soft,
:root[data-theme="dark"] .tri-info-box,
:root[data-theme="dark"] .tri-form-box,
:root[data-theme="dark"] .tri-load-box,
:root[data-theme="dark"] .tri-chat-shell,
:root[data-theme="dark"] .tri-chat-area{
  background:var(--tri-dark-bg-soft) !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-dark-border) !important;
}

:root[data-theme="dark"] .tri-card:hover,
:root[data-theme="dark"] .tri-panel:hover,
:root[data-theme="dark"] .tri-box:hover{
  background:linear-gradient(135deg, color-mix(in srgb, var(--tri-blue) 10%, var(--tri-dark-surface)), var(--tri-dark-surface-hover)) !important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] label,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .tri-text,
:root[data-theme="dark"] .tri-text-hero,
:root[data-theme="dark"] .tri-mobile-menu a,
:root[data-theme="dark"] .tri-submenu a{
  color:var(--tri-dark-text) !important;
}

:root[data-theme="dark"] .tri-muted,
:root[data-theme="dark"] .tri-small,
:root[data-theme="dark"] .tri-hint,
:root[data-theme="dark"] .tri-meta,
:root[data-theme="dark"] .tri-card p,
:root[data-theme="dark"] .tri-card li{
  color:var(--tri-dark-muted) !important;
}

:root[data-theme="dark"] a:not(.tri-btn):not(.tri-header-btn):not(.tri-header-icon-link){
  color:var(--tri-blue-light) !important;
}

:root[data-theme="dark"] .tri-nav a:not(.tri-btn):not(.tri-header-btn):not(.tri-header-icon-link){
  color:var(--tri-dark-text) !important;
}

:root[data-theme="dark"] .tri-nav a:not(.tri-btn):not(.tri-header-btn):not(.tri-header-icon-link):hover,
:root[data-theme="dark"] .tri-mobile-menu a:hover,
:root[data-theme="dark"] .tri-submenu a:hover{
  color:var(--tri-white) !important;
  background:var(--tri-blue-dark) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background:var(--tri-dark-surface-2) !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-dark-border) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{
  color:var(--tri-dark-muted) !important;
  opacity:1;
}

:root[data-theme="dark"] .tri-overlay,
:root[data-theme="dark"] .tri-session-choice-overlay{
  background:rgba(0,0,0,.62) !important;
}

:root[data-theme="dark"] .tri-header-icon-link,
:root[data-theme="dark"] .tri-theme-toggle{
  background:transparent !important;
  color:var(--tri-dark-text) !important;
}

:root[data-theme="dark"] .tri-theme-toggle[aria-pressed="true"]{
  outline:2px solid var(--tri-orange);
  outline-offset:2px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="bright"]){
    color-scheme:dark;
    --tri-dark-bg:#2f302f;
    --tri-dark-bg-soft:#282927;
    --tri-dark-surface:#1f201f;
    --tri-dark-surface-2:#2a2b29;
    --tri-dark-surface-hover:#262f31;
    --tri-dark-text:#f4f4f1;
    --tri-dark-muted:#d1d0ca;
    --tri-dark-border:rgba(255,255,255,.14);
    --tri-dark-shadow:0 18px 45px rgba(0,0,0,.32);

    --tri-bg:var(--tri-dark-bg);
    --tri-text:var(--tri-dark-text);
    --tri-muted:var(--tri-dark-muted);
      --tri-grey-dark:var(--tri-dark-text);
    --tri-black:var(--tri-dark-text);

    --tri-chat-bguser:#263a2e;
    --tri-chat-bgactor:#223b43;
    --tri-chat-bgchat:#1c1d1c;
    --tri-chat-inputs:#2a2b29;
  }

  html:not([data-theme="bright"]),
  html:not([data-theme="bright"]) body{
    background:var(--tri-dark-bg) !important;
    color:var(--tri-dark-text) !important;
  }

  :root:not([data-theme="bright"]) .tri-header,
  :root:not([data-theme="bright"]) .tri-header-main,
  :root:not([data-theme="bright"]) .tri-footer,
  :root:not([data-theme="bright"]) .tri-mobile-menu,
  :root:not([data-theme="bright"]) .tri-submenu,
  :root:not([data-theme="bright"]) .tri-card,
  :root:not([data-theme="bright"]) .tri-card-nolimit,
  :root:not([data-theme="bright"]) .tri-panel,
  :root:not([data-theme="bright"]) .tri-box,
  :root:not([data-theme="bright"]) .tri-session-choice-popup,
  :root:not([data-theme="bright"]) .tri-talkway-modal,
  :root:not([data-theme="bright"]) .tri-talkway-popup,
  :root:not([data-theme="bright"]) .tri-companion-popup,
  :root:not([data-theme="bright"]) .tri-coach-popup,
  :root:not([data-theme="bright"]) .tri-trainer-popup{
    background:var(--tri-dark-surface) !important;
    color:var(--tri-dark-text) !important;
    box-shadow:var(--tri-dark-shadow);
  }

  :root:not([data-theme="bright"]) .tri-header-top,
  :root:not([data-theme="bright"]) .tri-section,
  :root:not([data-theme="bright"]) .tri-section-soft,
  :root:not([data-theme="bright"]) .tri-info-box,
  :root:not([data-theme="bright"]) .tri-form-box,
  :root:not([data-theme="bright"]) .tri-load-box,
  :root:not([data-theme="bright"]) .tri-chat-shell,
  :root:not([data-theme="bright"]) .tri-chat-area{
    background:var(--tri-dark-bg-soft) !important;
    color:var(--tri-dark-text) !important;
    border-color:var(--tri-dark-border) !important;
  }

  :root:not([data-theme="bright"]) .tri-card:hover,
  :root:not([data-theme="bright"]) .tri-panel:hover,
  :root:not([data-theme="bright"]) .tri-box:hover{
    background:linear-gradient(135deg, color-mix(in srgb, var(--tri-blue) 10%, var(--tri-dark-surface)), var(--tri-dark-surface-hover)) !important;
  }

  :root:not([data-theme="bright"]) p,
  :root:not([data-theme="bright"]) li,
  :root:not([data-theme="bright"]) label,
  :root:not([data-theme="bright"]) td,
  :root:not([data-theme="bright"]) th,
  :root:not([data-theme="bright"]) small,
  :root:not([data-theme="bright"]) .tri-text,
  :root:not([data-theme="bright"]) .tri-text-hero,
  :root:not([data-theme="bright"]) .tri-mobile-menu a,
  :root:not([data-theme="bright"]) .tri-submenu a{
    color:var(--tri-dark-text) !important;
  }

  :root:not([data-theme="bright"]) .tri-muted,
  :root:not([data-theme="bright"]) .tri-small,
  :root:not([data-theme="bright"]) .tri-hint,
  :root:not([data-theme="bright"]) .tri-meta,
  :root:not([data-theme="bright"]) .tri-card p,
  :root:not([data-theme="bright"]) .tri-card li{
    color:var(--tri-dark-muted) !important;
  }

  :root:not([data-theme="bright"]) a:not(.tri-btn):not(.tri-header-btn):not(.tri-header-icon-link){
    color:var(--tri-blue-light) !important;
  }

  :root:not([data-theme="bright"]) .tri-nav a:not(.tri-btn):not(.tri-header-btn):not(.tri-header-icon-link){
    color:var(--tri-dark-text) !important;
  }

  :root:not([data-theme="bright"]) .tri-nav a:not(.tri-btn):not(.tri-header-btn):not(.tri-header-icon-link):hover,
  :root:not([data-theme="bright"]) .tri-mobile-menu a:hover,
  :root:not([data-theme="bright"]) .tri-submenu a:hover{
    color:var(--tri-white) !important;
    background:var(--tri-blue-dark) !important;
  }

  :root:not([data-theme="bright"]) input,
  :root:not([data-theme="bright"]) textarea,
  :root:not([data-theme="bright"]) select{
    background:var(--tri-dark-surface-2) !important;
    color:var(--tri-dark-text) !important;
    border-color:var(--tri-dark-border) !important;
  }

  :root:not([data-theme="bright"]) input::placeholder,
  :root:not([data-theme="bright"]) textarea::placeholder{
    color:var(--tri-dark-muted) !important;
    opacity:1;
  }

  :root:not([data-theme="bright"]) .tri-overlay,
  :root:not([data-theme="bright"]) .tri-session-choice-overlay{
    background:rgba(0,0,0,.62) !important;
  }

  :root:not([data-theme="bright"]) .tri-header-icon-link,
  :root:not([data-theme="bright"]) .tri-theme-toggle{
    background:transparent !important;
    color:var(--tri-dark-text) !important;
  }

  :root:not([data-theme="bright"]) .tri-theme-toggle[aria-pressed="true"]{
    outline:2px solid var(--tri-orange);
    outline-offset:2px;
  }
}
/* === TRILUMA_THEME_RESTART30_END === */


/* === TRILUMA_THEME_RESTART30_V2_START === */
/*
   Korrektur v2:
   - Grautöne neutraler und etwas dunkler
   - Card-Rahmen bleiben in den Originalfarben
   - öffentliche Popups/Formulare/Chat-Popups im Dark Mode nachziehen
*/


html[data-theme="dark"],
html[data-theme="dark"] body{
  background:var(--tri-dark-bg) !important;
  color:var(--tri-dark-text) !important;
}

/* Konsolidierte Dark-Card-Regeln – Test v3 */
.tri-card ul,
.tri-card ol{
  font-size:15px;
  line-height:1.5;
  color:var(--tri-text);
  max-width:42ch;
  margin-bottom:var(--tri-space-md);
}

.tri-card-nolimit ul,
.tri-card-nolimit ol{
  max-width:90ch;
  margin-bottom:var(--tri-space-md);
}

/* ========================================================= 8. CARD CORE ========================================================= */ .tri-card{
  border:1px solid var(--tri-border);
  border-radius:var(--tri-radius);
  padding:var(--tri-space-md);
  border-left:6px solid var(--tri-blue);
  background:var(--tri-white);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:auto;
  min-height:0;
}

.tri-card > *:last-child{
  margin-bottom:0;
}

.tri-card-cta{
  margin-top:auto;
}

.tri-card-cta .tri-header-btn{
  width:auto;
  display:inline-block;
}

/* ========================================================= 8b. CARD TYP 2 Spezielle Card-Variante: [Bild] [Headline] [Liste/Text] [Buttons] ========================================================= */ .tri-card-typ2-header{
  display:flex;
  gap:var(--tri-space-md);
  align-items:flex-end;
  margin-bottom:var(--tri-space-sm);
}

.tri-card-typ2-header .tri-card-image-md,
.tri-card-typ2-header .tri-card-image-big{
  flex-shrink:0;
  margin-bottom:0;
}

.tri-card-typ2-header h3{
  margin:0 0 6px 0;
  flex:1;
  margin-top:var(--tri-space-sm);
}

.tri-card-typ2 ul,
.tri-card-typ2 ol{
  margin-bottom:var(--tri-space-sm);
  max-width:none;
}

.tri-card-typ2 p{
  margin-bottom:var(--tri-space-sm);
}

/* ========================================================= 9. CARD GRID SYSTEM (für harmonische Card-Reihen) Verwende dieses System für 1/2/3 Cards in Reihen. ========================================================= */ .tri-card-grid{
  display:grid;
  gap:var(--tri-space-md);
  align-items:stretch;
  grid-template-columns:repeat(3, 1fr);
}

/* --- Layout 1 --- */ .tri-card-grid-1,
.tri-card-grid,
.tri-card-grid-1,
.tri-card-grid-2,
.tri-card-grid-3,
.tri-card-grid-4,
.tri-card-grid-1-1-2,
.tri-card-grid-2-1-1,
.tri-card-grid-1-2-1,
.tri-card-grid-1-3,
.tri-card-grid-3-1{
  grid-template-columns:1fr;
}

/* --- Layout 2-1 --- */ .tri-card-grid-2{
  grid-template-columns:repeat(2, 1fr);
}

/* --- Layout 1-1-1 --- */ .tri-card-grid-3{
  grid-template-columns:repeat(3, 1fr);
}

.tri-card-full{
  grid-column:auto;
}

.tri-card-grid > .tri-card{
  height:100%;
}

/* NUR für den Flow-Block */ .tri-card-grid.tri-flow-grid{
  grid-template-columns:2fr auto 2fr;
  align-items:center;
}

/* ========================================================= 9b. CARD GRID EXTENDED (bis 4 Spalten + Layout-Varianten) Erweiterung des bestehenden Systems – kompatibel! ========================================================= */ /* --- Layout 1-1-1-1 --- */ .tri-card-grid-4{
  grid-template-columns:repeat(4, 1fr);
}

/* --- Layout 1-1-2 --- */ .tri-card-grid-1-1-2{
  grid-template-columns:1fr 1fr 2fr;
}

/* --- Layout 2-1-1 --- */ .tri-card-grid-2-1-1{
  grid-template-columns:2fr 1fr 1fr;
}

/* --- Layout 1-2-1 --- */ .tri-card-grid-1-2-1{
  grid-template-columns:1fr 2fr 1fr;
}

/* --- Layout 1-3 --- */ .tri-card-grid-1-3{
  grid-template-columns:1fr 3fr;
}

/* --- Layout 3-1 --- */ .tri-card-grid-3-1{
  grid-template-columns:3fr 1fr;
}

.tri-card-image{
  width:100%;
  max-width:150px;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:var(--tri-radius);
  margin-bottom:var(--tri-space-sm);
}

.tri-card-image-md{
  width:100%;
  max-width:200px;
  height:auto;
  object-fit:contain;
  border-radius:var(--tri-radius);
  margin-bottom:var(--tri-space-sm);
}

.tri-card-image-lg{
  width:100%;
  max-width:350px;
  height:auto;
  object-fit:contain;
  border-radius:var(--tri-radius);
  margin-bottom:var(--tri-space-sm);
}

.tri-card{
  padding:16px;
}

.tri-card-typ2-header{
  flex-direction:column;
  align-items:flex-start;
}

.tri-session-choice-stack .tri-talkway-resume-card{
  height:auto;
}

.tri-session-choice-stack .tri-talkway-resume-card .tri-header-btn{
  margin-top:12px;
  align-self:flex-start;
  width:100%;
  text-align:center;
  justify-content:center;
}

/* Card-Rahmen nicht dunkel überschreiben. Marken-/Originalfarben bleiben stehen. */ html[data-theme="dark"] .tri-card{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-card-nolimit,
html[data-theme="dark"] .tri-companion-card,
html[data-theme="dark"] .tri-vcoach-card,
html[data-theme="dark"] .tri-guide-card,
html[data-theme="dark"] .tri-trainer-card,
html[data-theme="dark"] .tri-talkway-card,
html[data-theme="dark"] .tri-home-talkway-card,
html[data-theme="dark"] .tri-card{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  border-top-color:var(--tri-dark-border) !important;
  border-right-color:var(--tri-dark-border) !important;
  border-bottom-color:var(--tri-dark-border) !important;
  border-color:var(--tri-dark-border) !important;
  border-left-color:#1d5f72 !important;
}

html[data-theme="dark"] .tri-session-choice-stack .tri-talkway-resume-card{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  border-top-color:var(--tri-dark-border) !important;
  border-right-color:var(--tri-dark-border) !important;
  border-bottom-color:var(--tri-dark-border) !important;
}

html[data-theme="dark"] .tri-talkway-resume-card{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-dark-border) !important;
  border-left-color:#1d5f72 !important;
}

html[data-theme="dark"] .tri-card:hover,
html[data-theme="dark"] .tri-companion-card:hover,
html[data-theme="dark"] .tri-vcoach-card:hover,
html[data-theme="dark"] .tri-guide-card:hover,
html[data-theme="dark"] .tri-trainer-card:hover,
html[data-theme="dark"] .tri-talkway-card:hover,
html[data-theme="dark"] .tri-home-talkway-card:hover{
  background:linear-gradient(135deg, color-mix(in srgb, var(--tri-blue) 8%, var(--tri-dark-surface)), var(--tri-dark-surface-hover)) !important;
}

/* Öffentliche Overlays/Popups, die nach Core-CSS geladen werden */
html[data-theme="dark"] .tri-contact-overlay,
html[data-theme="dark"] .tri-contact-popup-overlay,
html[data-theme="dark"] .tri-auth-overlay,
html[data-theme="dark"] .tri-login-overlay,
html[data-theme="dark"] .tri-code-overlay,
html[data-theme="dark"] .tri-session-choice-overlay,
html[data-theme="dark"] .tri-vcoach-popup-overlay,
html[data-theme="dark"] .tri-companion-info-overlay,
html[data-theme="dark"] .tri-trainer-info-overlay,
html[data-theme="dark"] .tri-talkway-info-overlay,
html[data-theme="dark"] .tri-chat-popup-overlay,
html[data-theme="dark"] .tri-popup-overlay,
html[data-theme="dark"] .tri-modal-overlay{
  background:rgba(0,0,0,.62) !important;
}

html[data-theme="dark"] .tri-contact-popup,
html[data-theme="dark"] .tri-contact-modal,
html[data-theme="dark"] .tri-contact-dialog,
html[data-theme="dark"] .tri-contact-panel,
html[data-theme="dark"] .tri-contact-form,
html[data-theme="dark"] .tri-auth-popup,
html[data-theme="dark"] .tri-auth-modal,
html[data-theme="dark"] .tri-login-popup,
html[data-theme="dark"] .tri-login-modal,
html[data-theme="dark"] .tri-code-popup,
html[data-theme="dark"] .tri-protected-popup,
html[data-theme="dark"] .tri-protected-modal,
html[data-theme="dark"] .tri-session-choice-popup,
html[data-theme="dark"] .tri-vcoach-popup,
html[data-theme="dark"] .tri-companion-info-popup,
html[data-theme="dark"] .tri-trainer-info-popup,
html[data-theme="dark"] .tri-talkway-info-popup,
html[data-theme="dark"] .tri-chat-popup,
html[data-theme="dark"] .tri-chat-modal,
html[data-theme="dark"] .tri-chat-window,
html[data-theme="dark"] .tri-companion-popup,
html[data-theme="dark"] .tri-coach-popup,
html[data-theme="dark"] .tri-trainer-popup,
html[data-theme="dark"] [role="dialog"]{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-dark-border-strong) !important;
  box-shadow:var(--tri-dark-shadow) !important;
}

html[data-theme="dark"] .tri-contact-popup *,
html[data-theme="dark"] .tri-contact-modal *,
html[data-theme="dark"] .tri-auth-popup *,
html[data-theme="dark"] .tri-auth-modal *,
html[data-theme="dark"] .tri-login-popup *,
html[data-theme="dark"] .tri-login-modal *,
html[data-theme="dark"] .tri-code-popup *,
html[data-theme="dark"] .tri-protected-popup *,
html[data-theme="dark"] .tri-protected-modal *,
html[data-theme="dark"] .tri-session-choice-popup *,
html[data-theme="dark"] .tri-vcoach-popup *,
html[data-theme="dark"] .tri-companion-info-popup *,
html[data-theme="dark"] .tri-trainer-info-popup *,
html[data-theme="dark"] .tri-talkway-info-popup *,
html[data-theme="dark"] .tri-chat-popup *,
html[data-theme="dark"] .tri-chat-modal *,
html[data-theme="dark"] .tri-chat-window *,
html[data-theme="dark"] .tri-companion-popup *,
html[data-theme="dark"] .tri-coach-popup *,
html[data-theme="dark"] .tri-trainer-popup *{
  color:inherit;
}

html[data-theme="dark"] .tri-contact-popup h1,
html[data-theme="dark"] .tri-contact-popup h2,
html[data-theme="dark"] .tri-contact-modal h1,
html[data-theme="dark"] .tri-contact-modal h2,
html[data-theme="dark"] .tri-auth-popup h1,
html[data-theme="dark"] .tri-auth-popup h2,
html[data-theme="dark"] .tri-login-popup h1,
html[data-theme="dark"] .tri-login-popup h2,
html[data-theme="dark"] .tri-code-popup h1,
html[data-theme="dark"] .tri-code-popup h2,
html[data-theme="dark"] .tri-protected-popup h1,
html[data-theme="dark"] .tri-protected-popup h2,
html[data-theme="dark"] [role="dialog"] .tri-headline,
html[data-theme="dark"] [role="dialog"] h1,
html[data-theme="dark"] [role="dialog"] h2{
  color:var(--tri-blue) !important;
}

html[data-theme="dark"] .tri-contact-popup p,
html[data-theme="dark"] .tri-contact-popup label,
html[data-theme="dark"] .tri-contact-modal p,
html[data-theme="dark"] .tri-contact-modal label,
html[data-theme="dark"] .tri-auth-popup p,
html[data-theme="dark"] .tri-auth-popup label,
html[data-theme="dark"] .tri-login-popup p,
html[data-theme="dark"] .tri-login-popup label,
html[data-theme="dark"] .tri-code-popup p,
html[data-theme="dark"] .tri-code-popup label,
html[data-theme="dark"] .tri-protected-popup p,
html[data-theme="dark"] .tri-protected-popup label,
html[data-theme="dark"] [role="dialog"] p,
html[data-theme="dark"] [role="dialog"] label,
html[data-theme="dark"] [role="dialog"] small{
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] [role="dialog"] input,
html[data-theme="dark"] [role="dialog"] textarea,
html[data-theme="dark"] [role="dialog"] select,
html[data-theme="dark"] .tri-contact-popup input,
html[data-theme="dark"] .tri-contact-popup textarea,
html[data-theme="dark"] .tri-contact-popup select,
html[data-theme="dark"] .tri-auth-popup input,
html[data-theme="dark"] .tri-login-popup input,
html[data-theme="dark"] .tri-code-popup input,
html[data-theme="dark"] .tri-protected-popup input{
  background:var(--tri-dark-surface-2) !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-dark-border-strong) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] [role="dialog"] input::placeholder,
html[data-theme="dark"] [role="dialog"] textarea::placeholder{
  color:var(--tri-dark-muted) !important;
  opacity:1 !important;
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"]{
  accent-color:var(--tri-blue);
}

html[data-theme="dark"] .tri-chat-shell,
html[data-theme="dark"] .tri-chat-area,
html[data-theme="dark"] .tri-chat-body,
html[data-theme="dark"] .tri-chat-history,
html[data-theme="dark"] .tri-chat-messages,
html[data-theme="dark"] .tri-chat-content,
html[data-theme="dark"] .tri-chat-main,
html[data-theme="dark"] .tri-chat-log,
html[data-theme="dark"] .tri-chat-window-body{
  background:var(--tri-chat-bgchat) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-chat-toolbar,
html[data-theme="dark"] .tri-chat-controls,
html[data-theme="dark"] .tri-chat-actions,
html[data-theme="dark"] .tri-chat-header,
html[data-theme="dark"] .tri-popup-toolbar{
  background:rgba(59,162,196,.12) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-chat-input,
html[data-theme="dark"] .tri-chat-input-area,
html[data-theme="dark"] .tri-chat-message-input,
html[data-theme="dark"] .tri-chat-window textarea,
html[data-theme="dark"] .tri-companion-popup textarea,
html[data-theme="dark"] .tri-coach-popup textarea,
html[data-theme="dark"] .tri-trainer-popup textarea{
  background:var(--tri-chat-inputs) !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-dark-border-strong) !important;
}

html[data-theme="dark"] .tri-close,
html[data-theme="dark"] .tri-popup-close,
html[data-theme="dark"] .tri-contact-close,
html[data-theme="dark"] .tri-auth-close,
html[data-theme="dark"] .tri-login-close,
html[data-theme="dark"] .tri-vcoach-popup-close,
html[data-theme="dark"] .tri-companion-info-close,
html[data-theme="dark"] .tri-trainer-info-close{
  color:var(--tri-dark-text) !important;
  background:rgba(255,255,255,.08) !important;
}
/* === TRILUMA_THEME_RESTART30_V2_END === */


/* === TRILUMA_THEME_RESTART30_V3_START === */
/*
   Korrektur v3:
   - Dark-Grautöne als Mittelweg zwischen v1 und v2
   - Popup-/Chat-Stile für Coach, Companion, Trainer vereinheitlichen
   - Toolbar-Buttons im Chat auf Typ2-Optik
   - Sprach-Pills in Popups/Cards abdunkeln
   - Theme-Toggle ohne orange Aktivanmutung
   - Footer-Hinweisbalken bis ganz außen dunkeln
*/


html[data-theme="dark"] .tri-theme-toggle[aria-pressed="true"],
html[data-theme="dark"] .tri-mobile-icon-group .tri-theme-toggle[aria-pressed="true"]{
  outline:none !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .tri-card:hover,
html[data-theme="dark"] .tri-companion-card:hover,
html[data-theme="dark"] .tri-vcoach-card:hover,
html[data-theme="dark"] .tri-guide-card:hover,
html[data-theme="dark"] .tri-trainer-card:hover,
html[data-theme="dark"] .tri-talkway-card:hover,
html[data-theme="dark"] .tri-home-talkway-card:hover{
  background:linear-gradient(135deg, color-mix(in srgb, var(--tri-blue) 8%, var(--tri-dark-surface)), var(--tri-dark-surface-hover)) !important;
}

html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-contact-modal,
  .tri-contact-dialog,
  .tri-contact-panel,
  .tri-contact-form,
  .tri-auth-popup,
  .tri-auth-modal,
  .tri-login-popup,
  .tri-login-modal,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-protected-modal,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-chat-modal,
  .tri-chat-window,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="companion"][class*="popup"]:not([class*="overlay"]),
  [class*="trainer"][class*="popup"]:not([class*="overlay"]),
  [class*="coach"][class*="popup"]:not([class*="overlay"]),
  [class*="chat"][class*="popup"]:not([class*="overlay"]),
  [class*="chat"][class*="modal"]:not([class*="overlay"]),
  [role="dialog"]
){
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  border:1px solid var(--tri-border) !important;
  box-shadow:var(--tri-dark-shadow) !important;
}

html[data-theme="dark"] :is(
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="companion"][class*="popup"]:not([class*="overlay"]),
  [class*="trainer"][class*="popup"]:not([class*="overlay"]),
  [class*="coach"][class*="popup"]:not([class*="overlay"]),
  [class*="chat"][class*="popup"]:not([class*="overlay"])
) :is(
  .tri-chat-shell,
  .tri-chat-area,
  .tri-chat-body,
  .tri-chat-history,
  .tri-chat-messages,
  .tri-chat-content,
  .tri-chat-main,
  .tri-chat-log,
  .tri-chat-window-body,
  [class*="chat-body"],
  [class*="chat-main"],
  [class*="chat-window"],
  [class*="message-list"],
  [class*="messages"]
){
  background:var(--tri-chat-bgchat) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] :is(
  .tri-vcoach-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="companion"][class*="popup"]:not([class*="overlay"]),
  [class*="trainer"][class*="popup"]:not([class*="overlay"]),
  [class*="coach"][class*="popup"]:not([class*="overlay"]),
  [class*="chat"][class*="popup"]:not([class*="overlay"])
) :is(
  .tri-chat-toolbar,
  .tri-chat-controls,
  .tri-chat-actions,
  .tri-chat-header,
  .tri-popup-toolbar,
  [class*="toolbar"],
  [class*="controls"],
  [class*="actions"],
  [class*="session-row"]
){
  background:rgba(59,162,196,.10) !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-border) !important;
}

html[data-theme="dark"] :is(
  .tri-vcoach-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="companion"][class*="popup"]:not([class*="overlay"]),
  [class*="trainer"][class*="popup"]:not([class*="overlay"]),
  [class*="coach"][class*="popup"]:not([class*="overlay"]),
  [class*="chat"][class*="popup"]:not([class*="overlay"])
) :is(
  .tri-chat-toolbar,
  .tri-chat-controls,
  .tri-chat-actions,
  .tri-popup-toolbar,
  [class*="toolbar"],
  [class*="controls"],
  [class*="actions"],
  [class*="session-row"]
) :is(button,a,.tri-header-btn):not(.tri-header-btn-primary):not(.tri-header-btn-typ3):not(.tri-popup-close):not(.tri-close):not([class*="close"]){
  background:transparent !important;
  color:var(--tri-dark-text) !important;
  border:1px solid var(--tri-blue) !important;
  border-radius:999px !important;
  box-shadow:none !important;
}

html[data-theme="dark"] :is(
  .tri-vcoach-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="companion"][class*="popup"]:not([class*="overlay"]),
  [class*="trainer"][class*="popup"]:not([class*="overlay"]),
  [class*="coach"][class*="popup"]:not([class*="overlay"]),
  [class*="chat"][class*="popup"]:not([class*="overlay"])
) :is(
  .tri-chat-toolbar,
  .tri-chat-controls,
  .tri-chat-actions,
  .tri-popup-toolbar,
  [class*="toolbar"],
  [class*="controls"],
  [class*="actions"],
  [class*="session-row"]
) :is(button,a,.tri-header-btn):not(.tri-header-btn-primary):not(.tri-header-btn-typ3):not(.tri-popup-close):not(.tri-close):not([class*="close"]):hover{
  background:var(--tri-blue) !important;
  color:var(--tri-white) !important;
}

html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-auth-popup,
  .tri-login-popup,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="popup"]:not([class*="overlay"]),
  [role="dialog"]
) :is(input,textarea,select){
  background:var(--tri-dark-surface-2) !important;
  color:var(--tri-dark-text) !important;
  border:1px solid var(--tri-border) !important;
}

html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-auth-popup,
  .tri-login-popup,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="popup"]:not([class*="overlay"]),
  [role="dialog"]
) :is(input::placeholder,textarea::placeholder){
  color:var(--tri-dark-muted) !important;
  opacity:1 !important;
}

html[data-theme="dark"] :is(
  .tri-vcoach-popup-close,
  .tri-companion-info-close,
  .tri-trainer-info-close,
  .tri-close,
  .tri-popup-close,
  .tri-contact-close,
  .tri-auth-close,
  .tri-login-close,
  [class*="popup-close"],
  [class*="info-close"],
  [class*="modal-close"]
){
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  border:1px solid var(--tri-border) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.08) !important;
  color:var(--tri-dark-text) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

html[data-theme="dark"] :is(
  .tri-vcoach-popup-close,
  .tri-companion-info-close,
  .tri-trainer-info-close,
  .tri-close,
  .tri-popup-close,
  .tri-contact-close,
  .tri-auth-close,
  .tri-login-close,
  [class*="popup-close"],
  [class*="info-close"],
  [class*="modal-close"]
):hover{
  background:var(--tri-blue) !important;
  color:var(--tri-white) !important;
  border-color:var(--tri-blue) !important;
}

html[data-theme="dark"] :is(
  .tri-companion-langs span,
  .tri-trainer-langs span,
  .tri-vcoach-lang-bubbles span,
  .tri-companion-card-langs span,
  .tri-vcoach-card-langs span,
  .tri-vcoach-popup .tri-vcoach-lang span,
  .tri-vcoach-popup .tri-vcoach-lang-bubbles span,
  .tri-companion-info-popup .tri-companion-langs span,
  .tri-trainer-info-popup .tri-trainer-langs span,
  [class*="langs"] span,
  [class*="lang-bubbles"] span
){
  background:var(--tri-dark-surface-2) !important;
  color:var(--tri-blue-light) !important;
  border:1px solid var(--tri-border) !important;
}

html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-auth-popup,
  .tri-login-popup,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="popup"]:not([class*="overlay"]),
  [role="dialog"]
) :is(.tri-header-btn-typ2,.tri-header-btn-typ3,.tri-header-btn-primary){
  color:inherit;
}

html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-auth-popup,
  .tri-login-popup,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="popup"]:not([class*="overlay"]),
  [role="dialog"]
) .tri-header-btn-typ2{
  background:transparent !important;
  color:var(--tri-dark-text) !important;
  border-color:var(--tri-blue) !important;
}

html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-auth-popup,
  .tri-login-popup,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="popup"]:not([class*="overlay"]),
  [role="dialog"]
) .tri-header-btn-typ2:hover{
  background:var(--tri-blue) !important;
  color:var(--tri-white) !important;
}

html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-auth-popup,
  .tri-login-popup,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="popup"]:not([class*="overlay"]),
  [role="dialog"]
) .tri-header-btn-primary,
html[data-theme="dark"] :is(
  .tri-contact-popup,
  .tri-auth-popup,
  .tri-login-popup,
  .tri-code-popup,
  .tri-protected-popup,
  .tri-session-choice-popup,
  .tri-vcoach-popup,
  .tri-companion-info-popup,
  .tri-trainer-info-popup,
  .tri-talkway-info-popup,
  .tri-chat-popup,
  .tri-companion-popup,
  .tri-coach-popup,
  .tri-trainer-popup,
  [class*="popup"]:not([class*="overlay"]),
  [role="dialog"]
) .tri-header-btn-typ3{
  color:var(--tri-black) !important;
}
/* === TRILUMA_THEME_RESTART30_V3_END === */

/* === TRILUMA_THEME_RESTART30_V4_CORE_START === */
/* v4: etwas dunklere Cards, insgesamt wieder wärmere Hintergründe, kein sichtbarer Rahmen am Theme-Icon. */


html[data-theme="dark"],
html[data-theme="dark"] body{
  background:var(--tri-dark-bg) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-section,
html[data-theme="dark"] .tri-section-soft,
html[data-theme="dark"] .tri-header-top,
html[data-theme="dark"] .tri-footer > section:first-child,
html[data-theme="dark"] .tri-footer > section:first-child > .tri-section{
  background:var(--tri-dark-bg-soft) !important;
}

html[data-theme="dark"] .tri-theme-toggle,
html[data-theme="dark"] .tri-theme-toggle:hover,
html[data-theme="dark"] .tri-theme-toggle:focus,
html[data-theme="dark"] .tri-theme-toggle:focus-visible,
html[data-theme="dark"] .tri-theme-toggle[aria-pressed="true"]{
  outline:0 !important;
  outline-offset:0 !important;
  box-shadow:none !important;
  border-color:transparent !important;
  background:transparent !important;
}
/* === TRILUMA_THEME_RESTART30_V4_CORE_END === */


/* === TRILUMA_THEME_RESTART30_V5_CORE_START === */
/* v5: Overlay transparenter, Rahmen dezenter, Cards dunkler, Hintergründe leicht wärmer. */


html[data-theme="dark"],
html[data-theme="dark"] body{
  background:var(--tri-dark-bg) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-section,
html[data-theme="dark"] .tri-section-soft,
html[data-theme="dark"] .tri-header-top,
html[data-theme="dark"] .tri-footer > section:first-child,
html[data-theme="dark"] .tri-footer > section:first-child > .tri-section{
  background:var(--tri-dark-bg-soft) !important;
}

html[data-theme="dark"] .tri-card:hover,
html[data-theme="dark"] .tri-companion-card:hover,
html[data-theme="dark"] .tri-vcoach-card:hover,
html[data-theme="dark"] .tri-guide-card:hover,
html[data-theme="dark"] .tri-trainer-card:hover,
html[data-theme="dark"] .tri-talkway-card:hover,
html[data-theme="dark"] .tri-home-talkway-card:hover{
  background:linear-gradient(135deg, color-mix(in srgb, var(--tri-blue) 7%, var(--tri-dark-surface)), var(--tri-dark-surface-hover)) !important;
}

html[data-theme="dark"] .tri-overlay,
html[data-theme="dark"] .tri-session-choice-overlay,
html[data-theme="dark"] .tri-contact-overlay,
html[data-theme="dark"] .tri-popup-overlay,
html[data-theme="dark"] .tri-modal-overlay{
  background:rgba(0,0,0,.42) !important;
  backdrop-filter:none !important;
}

html[data-theme="dark"] .tri-session-choice-popup{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  border:1px solid var(--tri-dark-border-strong) !important;
}

html[data-theme="dark"] .tri-session-choice-close{
  color:var(--tri-dark-text) !important;
  background:transparent !important;
  border:0 !important;
}

html[data-theme="dark"] .tri-theme-toggle,
html[data-theme="dark"] .tri-theme-toggle:hover,
html[data-theme="dark"] .tri-theme-toggle:focus,
html[data-theme="dark"] .tri-theme-toggle:focus-visible,
html[data-theme="dark"] .tri-theme-toggle[aria-pressed="true"],
html[data-theme="dark"] .tri-header-icon-link.tri-theme-toggle,
html[data-theme="dark"] .tri-header-icon-link.tri-theme-toggle:hover,
html[data-theme="dark"] .tri-header-icon-link.tri-theme-toggle:focus-visible{
  outline:0 !important;
  outline-offset:0 !important;
  box-shadow:none !important;
  border-color:transparent !important;
  background:transparent !important;
}
/* === TRILUMA_THEME_RESTART30_V5_CORE_END === */

/* === TRILUMA_THEME_RESTART30_V8_CORE_START === */
/*
   RESTART_30 v8:
   - keine bläuliche Hover-Aufhellung der Cards
   - Card-Rahmen dezenter/dunkler
   - linke Akzentkanten im Dark Mode ca. 50% dunkler
   - Hintergründe etwas wärmer
   - Theme-Button ohne sichtbaren Aktiv-/Fokusrahmen
*/
/* Konsolidierte globale Dark-Variablen – Test v2 */
:root[data-theme="dark"]{
  color-scheme:dark;
  --tri-dark-bg:#302c29;
  --tri-dark-bg-soft:#2a2724;
  --tri-dark-surface:#211f1d;
  --tri-dark-surface-2:#2b2825;
  --tri-dark-surface-hover:#211f1d;
  --tri-dark-text:#f3f0ec;
  --tri-dark-muted:#cbc5bd;
  --tri-dark-border:rgba(255,255,255,.09);
  --tri-dark-border-strong:rgba(255,255,255,.13);
  --tri-dark-shadow:0 20px 54px rgba(0,0,0,.44);
  --tri-bg:var(--tri-dark-bg);
  --tri-text:var(--tri-dark-text);
  --tri-muted:var(--tri-dark-muted);
  --tri-border:var(--tri-dark-border);
  --tri-grey-dark:var(--tri-dark-text);
  --tri-black:var(--tri-dark-text);
  --tri-chat-bguser:#26382f;
  --tri-chat-bgactor:#203a42;
  --tri-chat-bgchat:#191918;
  --tri-chat-inputs:#292623;
}

html[data-theme="dark"],
html[data-theme="dark"] body{
  background:var(--tri-dark-bg) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-theme-toggle,
html[data-theme="dark"] .tri-theme-toggle:hover,
html[data-theme="dark"] .tri-theme-toggle:focus,
html[data-theme="dark"] .tri-theme-toggle:focus-visible,
html[data-theme="dark"] .tri-theme-toggle[aria-pressed="true"]{
  outline:none !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

html[data-theme="dark"] .tri-card[style*="tri-orange"],
html[data-theme="dark"] .tri-card[style*="--tri-orange"],
html[data-theme="dark"] [style*="border-left"][style*="tri-orange"]{
  border-left-color:#744003 !important;
}

html[data-theme="dark"] .tri-card[style*="tri-blue"],
html[data-theme="dark"] .tri-card[style*="--tri-blue"],
html[data-theme="dark"] [style*="border-left"][style*="tri-blue"]{
  border-left-color:#1d5f72 !important;
}

html[data-theme="dark"] .tri-card:hover,
html[data-theme="dark"] .tri-panel:hover,
html[data-theme="dark"] .tri-box:hover,
html[data-theme="dark"] .tri-companion-card:hover,
html[data-theme="dark"] .tri-vcoach-card:hover,
html[data-theme="dark"] .tri-guide-card:hover,
html[data-theme="dark"] .tri-trainer-card:hover,
html[data-theme="dark"] .tri-talkway-card:hover,
html[data-theme="dark"] .tri-home-talkway-card:hover,
html[data-theme="dark"] .tri-talkway-resume-card:hover{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-session-choice-popup{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
  border:1px solid var(--tri-dark-border-strong) !important;
}

html[data-theme="dark"] .tri-session-choice-overlay{
  background:rgba(0,0,0,.44) !important;
}
/* === TRILUMA_THEME_RESTART30_V8_CORE_END === */


/* === TRILUMA_THEME_RESTART30_V12_SESSION_OVERLAY_START === */
/*
   RESTART_30 v12:
   Sitzungen-fortsetzen-Overlay übernimmt den Dark-Overlay-Wert des ROI-Popups.
*/
html[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay,
:root[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay,
html[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay.tri-popup-fade,
:root[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay.tri-popup-fade,
#tri-session-choice-overlay.tri-session-choice-overlay-dark-soft {
  background: rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* === TRILUMA_THEME_RESTART30_V12_SESSION_OVERLAY_END === */

/* === RESTART_30 DARK OVERLAY HOTFIX v13 START === */
html[data-theme="dark"] .tri-overlay,
html[data-theme="dark"] .tri-session-choice-overlay,
html[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay,
html[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay.tri-popup-fade,
html[data-theme="dark"] .tri-contact-overlay,
html[data-theme="dark"] .triluma-contact-overlay,
html[data-theme="dark"] .tri-contact-popup-overlay,
html[data-theme="dark"] .tri-auth-overlay,
html[data-theme="dark"] .tri-login-overlay,
html[data-theme="dark"] .tri-code-overlay,
html[data-theme="dark"] .tri-vcoach-popup-overlay,
html[data-theme="dark"] .tri-companion-info-overlay,
html[data-theme="dark"] .tri-trainer-info-overlay,
html[data-theme="dark"] .tri-talkway-info-overlay,
html[data-theme="dark"] .tri-chat-popup-overlay,
html[data-theme="dark"] .tri-chat-overlay,
html[data-theme="dark"] .tri-companion-chat-overlay,
html[data-theme="dark"] .tri-trainer-chat-overlay,
html[data-theme="dark"] .tri-popup-overlay,
html[data-theme="dark"] .tri-modal-overlay,
html[data-theme="dark"] .cp-overlay,
html[data-theme="dark"] .triluma-roi-overlay,
:root[data-theme="dark"] .tri-overlay,
:root[data-theme="dark"] .tri-session-choice-overlay,
:root[data-theme="dark"] #tri-session-choice-overlay.tri-session-choice-overlay,
:root[data-theme="dark"] .triluma-roi-overlay,
#tri-session-choice-overlay.tri-session-choice-overlay-dark-soft {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:host([data-theme="dark"]) .tri-overlay,
:host-context(html[data-theme="dark"]) .tri-overlay {
  background: rgba(0, 0, 0, 0.78) !important;
}
/* === RESTART_30 DARK OVERLAY HOTFIX v13 END === */

/* === RESTART_30 DARK VCOACH POPUP FRAMES v15 START === */
/*
  Sofort-Beratung: Coach-/Guide-Info-Popups im Dark Mode.
  Entfernt nur die störenden Innenrahmen/Aufhellungen der Textbereiche.
  Companion- und Trainer-Popups bleiben unberührt.
*/
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-top,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-main,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-section,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-short,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-top {
  padding: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-section {
  padding: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns {
  border: 0 !important;
}

html[data-theme="dark"] #tri-vcoach-popup-content .tri-popup-columns > div:first-child {
  border-right: 1px dotted rgba(255,255,255,.10) !important;
}

/* Nur Avatar-Rahmen/Overlay behalten; keine großen Rahmen um Bild+Text. */
html[data-theme="dark"] #tri-vcoach-popup-content .tri-avatar-wrap,
html[data-theme="dark"] #tri-vcoach-popup-content .tri-vcoach-popup-avatar {
  box-shadow: none !important;
}
/* === RESTART_30 DARK VCOACH POPUP FRAMES v15 END === */

/* === RESTART_30 DARK STRONG TRI-BLUE v18 START === */
/*
  Dark Theme:
  <strong>-Hervorhebungen im Fließtext sollen sichtbar hervortreten.
  Bright bleibt unverändert.
*/
html[data-theme="dark"] main p strong,
html[data-theme="dark"] main li strong,
html[data-theme="dark"] main td strong,
html[data-theme="dark"] main dd strong,
html[data-theme="dark"] main blockquote strong,
html[data-theme="dark"] .tri-page p strong,
html[data-theme="dark"] .tri-page li strong,
html[data-theme="dark"] .tri-content p strong,
html[data-theme="dark"] .tri-content li strong,
html[data-theme="dark"] .tri-section p strong,
html[data-theme="dark"] .tri-section li strong,
html[data-theme="dark"] .tri-card p strong,
html[data-theme="dark"] .tri-card li strong {
  color: var(--tri-blue, #3aa0b8) !important;
  font-weight: 600;
}

/* Buttons, Navigation, Header/Footer und Überschriften nicht umfärben. */
html[data-theme="dark"] a strong,
html[data-theme="dark"] button strong,
html[data-theme="dark"] h1 strong,
html[data-theme="dark"] h2 strong,
html[data-theme="dark"] h3 strong,
html[data-theme="dark"] h4 strong,
html[data-theme="dark"] .tri-header strong,
html[data-theme="dark"] .tri-footer strong,
html[data-theme="dark"] .tri-btn strong,
html[data-theme="dark"] .tri-header-btn strong,
html[data-theme="dark"] .tri-popup-btn strong {
  color: inherit !important;
  font-weight: inherit;
}
/* === RESTART_30 DARK STRONG TRI-BLUE v18 END === */

/* === RESTART_33 CHAT POPUP ABOVE HEADER HOTFIX v106 START === */
/*
  Fix: Coach-Chat darf beim Fade nicht unter dem sticky Header liegen.
  Ursache: Fade auf #triluma-chat-popup erzeugt einen eigenen Stacking Context.
  Deshalb bekommt der Root-Container selbst eine feste Ebene.
*/
#triluma-chat-popup,
#triluma-companion-chat-popup,
#triluma-trainer-chat-popup{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483400 !important;
  pointer-events:none;
}

#triluma-chat-popup .tri-chat-overlay,
#triluma-companion-chat-popup .tri-companion-chat-overlay,
#triluma-trainer-chat-popup .tri-trainer-chat-overlay{
  pointer-events:auto;
}
/* === RESTART_33 CHAT POPUP ABOVE HEADER HOTFIX v106 END === */

/* === TRILUMA_CORE_TOOLTIPS_V162_START === */
/* Einheitliche Header-/Icon-Tooltips, ca. 25% kleiner; Header-Icon-Abstand vereinheitlicht. */
.tri-header-icon-group{
  gap:6px !important;
}

.tri-mobile-icon-group{
  gap:6px !important;
}

.tri-ui-tooltip{
  position:relative !important;
  overflow:visible !important;
}

.tri-header-icon-group,
.tri-mobile-icon-group,
.tri-header-icon-link{
  overflow:visible !important;
}

.tri-ui-tooltip:hover::after,
.tri-ui-tooltip:focus-visible::after{
  content:attr(data-tri-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 11px);
  transform:translateX(-50%);
  width:max-content;
  min-width:165px;
  max-width:300px;
  padding:10px 13px;
  border-radius:11px;
  background:#141312 !important;
  color:#f2f0ec !important;
  border:2px solid #3ba2c4 !important;
  box-shadow:0 14px 32px rgba(0,0,0,.86) !important;
  font-size:14px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  white-space:normal;
  z-index:2147483500;
  pointer-events:none;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
}

.tri-ui-tooltip:hover::before,
.tri-ui-tooltip:focus-visible::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 3px);
  transform:translateX(-50%);
  border-width:8px 8px 0 8px;
  border-style:solid;
  border-color:#3ba2c4 transparent transparent transparent;
  z-index:2147483501;
  pointer-events:none;
  opacity:1 !important;
  filter:none !important;
}

.tri-nav-desktop .tri-header-icon-group .tri-ui-tooltip:hover::after,
.tri-nav-desktop .tri-header-icon-group .tri-ui-tooltip:focus-visible::after{
  top:calc(100% + 11px);
  bottom:auto;
}

.tri-nav-desktop .tri-header-icon-group .tri-ui-tooltip:hover::before,
.tri-nav-desktop .tri-header-icon-group .tri-ui-tooltip:focus-visible::before{
  top:calc(100% + 3px);
  bottom:auto;
  border-width:0 8px 8px 8px;
  border-color:transparent transparent #3ba2c4 transparent;
}
/* === TRILUMA_CORE_TOOLTIPS_V162_END === */


/* === TRILUMA_EMERGENCY_MODAL_V164_START === */
/* Zentraler Notfallhinweis für Chat-Abbruch bei Eigen-/Fremdgefährdung. */
#tri-emergency-help-modal.tri-emergency-help-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483600 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:28px !important;
  background:rgba(0,0,0,.76) !important;
  color:#f3f0ec !important;
}

#tri-emergency-help-modal .tri-emergency-help-card{
  position:relative !important;
  width:min(1120px, 96vw) !important;
  max-height:88vh !important;
  overflow:auto !important;
  padding:28px 36px 26px !important;
  border-radius:24px !important;
  border:3px solid var(--tri-orange, #e78005) !important;
  background:#2a2725 !important;
  color:#f3f0ec !important;
  box-shadow:0 28px 80px rgba(0,0,0,.62) !important;
}

#tri-emergency-help-modal .tri-emergency-help-close{
  position:absolute !important;
  top:16px !important;
  right:18px !important;
  width:44px !important;
  height:44px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  color:#f3f0ec !important;
  font-size:34px !important;
  line-height:1 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#tri-emergency-help-modal .tri-emergency-help-close:hover,
#tri-emergency-help-modal .tri-emergency-help-close:focus-visible{
  background:var(--tri-blue, #3ba2c4) !important;
  color:#ffffff !important;
  outline:2px solid var(--tri-blue-dark, #1b6d7e) !important;
  outline-offset:2px !important;
}

#tri-emergency-help-modal #tri-emergency-help-title{
  margin:0 58px 10px 0 !important;
  font-family:'Roboto', system-ui, sans-serif !important;
  font-size:25px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  color:var(--tri-white) !important;
}

#tri-emergency-help-modal .tri-emergency-help-lead,
#tri-emergency-help-modal .tri-emergency-help-footer{
  margin:0 0 18px !important;
  color:#f3f0ec !important;
  font-size:16px !important;
  line-height:1.55 !important;
  font-weight:700 !important;
	color:var(--tri-orange, #e78005) !important;
}

#tri-emergency-help-modal .tri-emergency-help-grid{
  display:grid !important;
  grid-template-columns:1.25fr 0.875fr 0.875fr !important;
  gap:28px !important;
  margin:28px 0 24px !important;
}

#tri-emergency-help-modal .tri-emergency-help-country{
  min-width:0 !important;
  padding:20px 18px 18px !important;
  border-radius:20px !important;
  background:#211f1d !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

#tri-emergency-help-modal .tri-emergency-help-country h3{
  margin:0 0 12px !important;
  font-family:'Roboto', system-ui, sans-serif !important;
  font-size:19px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  color:var(--tri-blue) !important;
}

#tri-emergency-help-modal .tri-emergency-help-country p{
  margin:0 0 12px !important;
  color:#f3f0ec !important;
  font-size:15px !important;
  line-height:1.52 !important;
}

#tri-emergency-help-modal .tri-emergency-help-country strong{
  color:#f3f0ec !important;
  font-weight:800 !important;
	color:var(--tri-orange, #e78005) !important;
}

#tri-emergency-help-modal .tri-emergency-help-country a{
  color:var(--tri-blue-light, #81cde2) !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

#tri-emergency-help-modal .tri-emergency-help-country a:hover,
#tri-emergency-help-modal .tri-emergency-help-country a:focus-visible{
  color:var(--tri-orange-light, #f8c68b) !important;
  text-decoration:underline !important;
}

#tri-emergency-help-modal .tri-emergency-help-download{
  padding-top:18px !important;
  margin-top:8px !important;
  border-top:1px solid rgba(255,255,255,.16) !important;
}

#tri-emergency-help-modal .tri-emergency-help-download .tri-header-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:100% !important;
  color:#f3f0ec !important;
  background:transparent !important;
  border:2px solid var(--tri-blue, #3ba2c4) !important;
  text-decoration:none !important;
}

#tri-emergency-help-modal .tri-emergency-help-download .tri-header-btn:hover,
#tri-emergency-help-modal .tri-emergency-help-download .tri-header-btn:focus-visible{
  color:#ffffff !important;
  background:var(--tri-blue, #3ba2c4) !important;
}

#tri-emergency-help-modal .tri-emergency-help-footer{
  padding-top:16px !important;
  margin-top:18px !important;
  border-top:1px solid rgba(255,255,255,.16) !important;
}

@media (max-width:900px){
  #tri-emergency-help-modal .tri-emergency-help-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  #tri-emergency-help-modal .tri-emergency-help-card{
    width:min(760px, 96vw) !important;
    padding:22px 18px 20px !important;
  }

  #tri-emergency-help-modal #tri-emergency-help-title{
    font-size:21px !important;
  }
}
/* === TRILUMA_EMERGENCY_MODAL_V164_END === */


/* === TRILUMA_WEBSITE_I18N_V140B_START === */
.tri-lang-switch-flags{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:7px;
  overflow:visible;
}
.tri-lang-switch-flags .tri-lang-flag{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  width:19px;
  height:19px;
  flex:0 0 19px;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  opacity:.68;
  transform:translateZ(0);
  transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tri-lang-switch-flags .tri-lang-flag img{
  display:block;
  width:19px !important;
  height:19px !important;
  border-radius:50%;
  object-fit:cover;
}
.tri-lang-switch-flags .tri-lang-flag:hover,
.tri-lang-switch-flags .tri-lang-flag:focus-visible,
.tri-lang-switch-flags .tri-lang-flag.is-active{
  opacity:1;
  transform:scale(1.08);
}
.tri-lang-switch-flags .tri-lang-flag.is-active{
  box-shadow:0 0 0 2px var(--tri-blue-light, #81cde2);
}
.tri-lang-switch-flags .tri-ui-tooltip:hover::after,
.tri-lang-switch-flags .tri-ui-tooltip:focus-visible::after{
  top:calc(100% + 11px);
  bottom:auto;
  min-width:110px;
}
.tri-lang-switch-flags .tri-ui-tooltip:hover::before,
.tri-lang-switch-flags .tri-ui-tooltip:focus-visible::before{
  top:calc(100% + 3px);
  bottom:auto;
  border-width:0 8px 8px 8px;
  border-color:transparent transparent #3ba2c4 transparent;
}
.tri-language-modal-open{
  overflow:hidden;
}

/* Erststart: Kein sichtbarer Seitenaufbau vor Popup-/Theme-Initialisierung. */
html.tri-first-start-pending body{
  opacity:0 !important;
  transition:none !important;
}

.tri-language-start-modal{
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}

:root[data-theme="dark"] .tri-language-start-modal{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.tri-language-start-modal.is-open{
  opacity:1;
  visibility:visible;
}

/* Eigenständiges Erststart-Backdrop:
   Der Modal-Container selbst bleibt transparent. */
.tri-language-start-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}

:root[data-theme="bright"] .tri-language-start-backdrop{
  background:rgba(31,41,55,.42);
}

.tri-language-start-card{
  position:relative;
  z-index:1;
  width:min(590px, 100%);
  max-height:min(600px, calc(100vh - 28px));
  overflow:auto;
  padding:20px 26px 18px;
  border:1px solid rgba(129,205,226,.24);
  border-radius:18px;
  background:#25221f;
  color:#f6f3ee;
  box-shadow:0 26px 80px rgba(0,0,0,.46);
  text-align:left;
}
.tri-language-start-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.tri-language-start-logo{
  display:block;
  width:min(220px, 46%);
  height:auto;
}
.tri-language-start-tagline{
  margin:0;
  color:var(--tri-orange);
  font-family:"EB Garamond", Georgia, serif;
  font-size:clamp(18px, 2.4vw, 25px);
  font-weight:500;
  line-height:1.08;
  white-space:nowrap;
}
.tri-language-start-card h2{
  margin:0 0 9px;
  color:var(--tri-blue);
  font-size:clamp(21px, 2.7vw, 26px);
  line-height:1.16;
}
.tri-language-start-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:22px;
  row-gap:1px;
}
.tri-language-start-option{
  appearance:none;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:32px;
  padding:3px 7px;
  border:2px solid transparent;
  border-radius:18px;
  background:transparent;
  color:#f6f3ee;
  font-family:Roboto, Arial, sans-serif;
  font-size:15px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.tri-language-start-option img{
  width:19px;
  height:19px;
  flex:0 0 19px;
  border-radius:50%;
  object-fit:cover;
}
.tri-language-start-option:hover,
.tri-language-start-option:focus-visible{
  background:rgba(58,160,184,.10);
  outline:none;
}
.tri-language-start-option.is-active{
  border-color:var(--tri-blue);
  background:rgba(58,160,184,.08);
}
.tri-language-start-appearance-title{
  margin-top:17px !important;
}
.tri-language-theme-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:26px;
}
.tri-language-theme-option{
  appearance:none;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  min-width:0;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.tri-language-theme-option:hover,
.tri-language-theme-option:focus-visible{
  background:transparent;
  outline:none;
}
.tri-language-theme-option:active{
  transform:scale(.995);
}
.tri-language-theme-option img{
  display:block;
  width:80%;
  aspect-ratio:16/8.7;
  object-fit:cover;
  object-position:top center;
  border:2px solid transparent;
  border-radius:6px;
  margin:0 0 7px;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tri-language-theme-option:hover img,
.tri-language-theme-option:focus-visible img{
  border-color:rgba(58,160,184,.55);
}
.tri-language-theme-option.is-active img{
  border-color:var(--tri-blue);
  box-shadow:0 0 0 1px rgba(58,160,184,.18);
}
.tri-language-theme-title{
  display:none !important;
}
.tri-language-theme-option strong{
  color:#f6f3ee;
  font-size:14px;
  line-height:1.22;
  font-weight:500;
}
.tri-language-theme-option > span:last-child{
  color:#ddd7cf;
  font-size:13px;
  line-height:1.22;
}
.tri-language-start-continue{
  display:block;
  width:160px;
  min-width:160px;
  margin:16px auto 0;
}
:root[data-theme="bright"] .tri-language-start-card{
  border-color:#d6dce3;
  background:#fff;
  color:#1f2937;
  box-shadow:0 24px 70px rgba(31,41,55,.28);
}
:root[data-theme="bright"] .tri-language-start-tagline,
:root[data-theme="bright"] .tri-language-start-option,
:root[data-theme="bright"] .tri-language-theme-option strong{
  color:#1f2937;
}
:root[data-theme="bright"] .tri-language-theme-option > span:last-child{
  color:#4b5563;
}
@media (max-width:720px){
  .tri-language-start-modal{ padding:10px; align-items:flex-start; }
  .tri-language-start-card{ max-height:calc(100vh - 20px); padding:18px; border-radius:14px; }
  .tri-language-start-brand{ gap:14px; }
  .tri-language-start-tagline{ font-size:19px; }
  .tri-language-start-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:12px; }
  .tri-language-theme-grid{ gap:16px; }
}
@media (max-width:480px){
  .tri-language-start-brand{ align-items:flex-start; flex-direction:column; margin-bottom:14px; }
  .tri-language-start-logo{ width:220px; max-width:78%; }
  .tri-language-start-tagline{ white-space:normal; }
  .tri-language-start-grid{ grid-template-columns:1fr; }
  .tri-language-theme-grid{ grid-template-columns:1fr; }
}
/* === TRILUMA_WEBSITE_I18N_V140B_END === */

/* Native DE/EN-Flaggen im Header exakt rund */
.tri-lang-switch-flags a.tri-lang-flag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  min-width:19px;
  min-height:19px;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:transparent;
  overflow:hidden;
  line-height:0;
}

.tri-lang-switch-flags a.tri-lang-flag img {
  display:block;
  width:19px !important;
  height:19px !important;
  min-width:19px;
  min-height:19px;
  border-radius:50%;
  object-fit:cover;
}

/* === RESTART_35 FOOTER CARD FIX v4 START === */
/*
   Ziel:
   - Warnhinweis als normale Footer-Card
   - kein separater breiter Warnbalken mehr
   - Footer schließt sauber an den Seiteninhalt an
   - Dark Theme: klarere, stimmigere Abgrenzung zwischen Seite und Footer
*/

.tri-footer{
  margin-top:0 !important;
  border-top:1px solid var(--tri-border) !important;
  background:var(--tri-bg);
}

.tri-footer-main{
  background:transparent;
}

.tri-footer .tri-section{
  background:transparent !important;
  padding-top:var(--tri-space-md);
  padding-bottom:var(--tri-space-md);
}

.tri-footer-warning-card{
  margin-bottom:var(--tri-space-md);
}

.tri-footer-warning-inner{
  display:flex;
  align-items:center;
  gap:15px;
}

.tri-footer-warning-icon{
  width:60px;
  height:60px;
  flex-shrink:0;
  object-fit:contain;
}

.tri-footer-content{
  align-items:start;
}

@media (max-width: 900px){
  .tri-footer-warning-inner{
    align-items:flex-start;
  }

  .tri-footer-warning-icon-right{
    display:none;
  }
}

@media (max-width: 700px){
  .tri-footer-warning-inner{
    flex-direction:column;
    gap:12px;
  }

  .tri-footer-warning-icon{
    width:52px;
    height:52px;
  }
}

html[data-theme="dark"] .tri-footer{
  background:var(--tri-dark-surface) !important;
  border-top:1px solid var(--tri-dark-border-strong) !important;
}

html[data-theme="dark"] .tri-footer .tri-section{
  background:transparent !important;
}

html[data-theme="dark"] .tri-footer .tri-text,
html[data-theme="dark"] .tri-footer p,
html[data-theme="dark"] .tri-footer li{
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-footer a:not(.tri-btn):not(.tri-header-btn):not(.tri-text-btn){
  color:var(--tri-blue-light) !important;
}

html[data-theme="dark"] .tri-footer a:not(.tri-btn):not(.tri-header-btn):not(.tri-text-btn):hover{
  color:var(--tri-white) !important;
}

html[data-theme="dark"] .tri-footer .tri-comment{
  color:var(--tri-blue) !important;
}

html[data-theme="dark"] .tri-footer .tri-card{
  background:var(--tri-dark-surface) !important;
  color:var(--tri-dark-text) !important;
}

html[data-theme="dark"] .tri-footer .tri-split-col::before{
  background:rgba(255,255,255,.10) !important;
}
/* === RESTART_35 FOOTER CARD FIX v4 END === */

/* === RESTART_35_GATEWAY_FINAL_TRANSPARENCY_FIX_START ===
   Wichtig: Jede halbtransparente Overlay-Farbe über dem Gateway-iframe
   kann den iframe vollständig deckend rendern. Overlay daher wirklich
   transparent halten; Abdunklung/Blur erfolgen ausschließlich am iframe. */
.tri-language-start-modal,
:root[data-theme="dark"] .tri-language-start-modal,
:root[data-theme="bright"] .tri-language-start-modal {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tri-language-start-backdrop,
:root[data-theme="dark"] .tri-language-start-backdrop,
:root[data-theme="bright"] .tri-language-start-backdrop {
  background: transparent !important;
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* === RESTART_35_GATEWAY_FINAL_TRANSPARENCY_FIX_END === */

/* === TRILUMA LEGAL NOTICE BRIGHT THEME FIX 20260802 === */
:root[data-theme="bright"] .tri-legal-notice,
:root[data-theme="bright"] .tri-external-links-notice {
  background: var(--tri-card-bg, #ffffff) !important;
  color: var(--tri-text, #211f1d) !important;
  border-color: var(--tri-border, rgba(0, 0, 0, .14)) !important;
  box-shadow: var(--tri-shadow-card, 0 8px 24px rgba(0, 0, 0, .08)) !important;
}

:root[data-theme="bright"] .tri-legal-notice p,
:root[data-theme="bright"] .tri-external-links-notice p {
  color: var(--tri-text, #211f1d) !important;
}

:root[data-theme="bright"] .tri-legal-notice__title,
:root[data-theme="bright"] .tri-external-links-notice .tri-headline {
  color: var(--tri-blue, #2ba9d6) !important;
}