/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.8.7
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2018 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/

/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-family: 'typewriter', sans-serif;
  font-size: 1.15rem;
  color: var(--IL);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.chosen-container * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  z-index: 1010;
  width: 100%;
  border: 0.1rem solid var(--IL);
  margin-top: var(--xxs);
  border-radius: 0.5rem;
  background: var(--basic-light);
  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  clip: rect(0, 0, 0, 0);
  -webkit-clip-path: inset(100% 100%);
          clip-path: inset(100% 100%);
}

.chosen-container.chosen-with-drop .chosen-drop {
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
}

.chosen-container a {
  cursor: pointer;
}

.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
}

.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  border: 0.1rem solid var(--basic-light);
  border-radius: 0.5rem;
  background-color: var(--basic-light);
  background-clip: padding-box;
  color: var(--IL);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.725rem;
}

.chosen-container-single .chosen-default {
  color: #999;
}

.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.15rem;
  font-family: 'typewriter', sans-serif;
}

.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}

.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../../files/core/css/chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single .chosen-single div {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 18px;
  height: 100%;
}

.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../../files/core/css/chosen-sprite.png") no-repeat 0px 4px;
}

.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010!important;
  margin: 0;
  margin-top: var(--xxs);
  border: 0.1rem solid var(--IL);
  border-radius: 0.5rem;
  padding: 3px 4px;
  white-space: nowrap;
}

.chosen-container-single .chosen-search input[type="text"] {
  margin: 1px 0;
  padding: 4px 20px 4px 5px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 0.1rem solid var(--basic-light);
  background: url("../../files/core/css/chosen-sprite.png") no-repeat 100% -20px;
  font-family: 'typewriter', sans-serif;
  line-height: normal;
  border-radius: 0;
}

.chosen-container-single .chosen-drop {
  margin-top: var(--xxs);
  border-radius: 0.5rem;
  background-clip: padding-box;
  z-index: 1000;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  -webkit-clip-path: inset(100% 100%);
          clip-path: inset(100% 100%);
}

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  color: var(--IL);
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  overflow: hidden;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results ul {
  border-radius: 0.5rem;
  overflow: hidden;
  outline: 0.1rem solid var(--IL);
}

.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  word-wrap: break-word;
  -webkit-touch-callout: none;
  overflow: hidden;
}

.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}

.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  opacity: 0.5;
  cursor: default;
}

.chosen-container .chosen-results li.highlighted {
  background-color: var(--basic-dark);
  overflow: hidden;
}

.chosen-container .chosen-results li.current-semester {
  background-color: var(--highlight);
}

.chosen-container .chosen-results li.no-results {
  color: var(--accent-light);
  display: list-item;
  background: transparent
}

.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-family: 'ss_semibold', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--SO);
  cursor: default;
}

.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}

.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: auto;
  min-height: 1.9rem;
  border: 0.1rem solid var(--basic-light);
  border-radius: 0.5rem;
  background-color: var(--basic-light);
  cursor: text;
}

.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: 1px 0;
  padding: 0;
  height: 25px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--IL);
  font-size: 100%;
  font-family: 'typewriter', sans-serif;
  line-height: normal;
  border-radius: 0;
  width: 25px;
}

.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 3px 5px 3px 0;
  padding: 3px 20px 3px 5px;
  max-width: 100%;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  line-height: 0.9rem;
  background-color: var(--basic-dark);
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  color: var(--IL);
  cursor: default;
}

.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 4px;
  right: 3px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../../files/core/css/chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  background-color: var(--basic-light);
  color: var(--IL);
}

.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: var(--basic-dark);
}

.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  opacity: 0.5;
  cursor: default;
}

/* @end */
/* @group Active  */
.chosen-container-active .chosen-single {
  border: 0.1rem solid var(--IL);
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border: 0.1rem solid var(--IL);
}

.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}

.chosen-container-active .chosen-choices {
  border: 0.1rem solid var(--IL);
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: var(--IL)!important;
}

/* @end */
/* @group Disabled Support */
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}

.chosen-disabled .chosen-single {
  cursor: default;
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

/* @end */
/* @group Right to Left */
.chosen-rtl {
  text-align: right;
}

.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}

.chosen-rtl .chosen-single span {
  margin-right: 0;
  margin-left: 26px;
  direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
  margin-left: 38px;
}

.chosen-rtl .chosen-single div {
  right: auto;
  left: 3px;
}

.chosen-rtl .chosen-single abbr {
  right: auto;
  left: 26px;
}

.chosen-rtl .chosen-choices li {
  float: right;
}

.chosen-rtl .chosen-choices li.search-field input[type="text"] {
  direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  right: auto;
  left: 4px;
}

.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}

.chosen-rtl .chosen-results li.group-option {
  padding-right: 15px;
  padding-left: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
}

.chosen-rtl .chosen-search input[type="text"] {
  padding: 4px 5px 4px 20px;
  background: url("../../files/core/css/chosen-sprite.png") no-repeat -30px -20px;
  direction: rtl;
}

.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}

.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}

/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .chosen-rtl .chosen-search input[type="text"],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type="text"],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url("../../files/core/css/chosen-sprite@2x.png") !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}

/* @end */

/* ===================================== */
/* Basis-Regeln (ohne Media/Container)   */
/* ===================================== */

.grid-span {
    margin-bottom: 0;
    grid-column: span 1; 
    max-width: 100vw;
}

/* Grund-Setups für diverse Grids */
.grid-4x1,
.grid-3x1,
.grid-2_1,
.grid-1_1,
.grid-1_2,
.grid-3x1-inline,
.grid-2_1-inline,
.grid-1_1-inline,
.grid-1_2-inline,
.grid-3_1-inline {
    display: grid;
    gap: var(--s);
    height: max-content;
}

.grid-smallgap {
    gap: var(--xxs);
}
.grid-biggap {
    gap: var(--xs);
}

.grid-4x1,
.grid-3x1,
.grid-2_1,
.grid-1_1,
.grid-1_2 {
    /* Mobil/kleine Container: 1-spaltige Darstellung */
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: calc(100vw - 1.6rem);
    min-width: calc(380px - 1.6rem);
}

/* Inline-Varianten */
.grid-3x1-inline {
    grid-template-columns: 1fr 1fr 1fr;
}
.grid-2_1-inline {
    grid-template-columns: 2fr 1fr;
}
.grid-4x1,
.grid-1_1-inline {
    grid-template-columns: 1fr 1fr;
}
.grid-1_2-inline {
    grid-template-columns: 1fr 2fr;
}
.grid-3_1-inline {
    grid-template-columns: 3fr 1fr;
}

/* Spalten-Spans für die "klassischen" 3x1/4x1-Grids */
.grid-3x1 .grid-span { 
    grid-column: span 1; 
}
.grid-4x1 .grid-span { 
    grid-column: span 2; 
    margin-bottom: 0;
}

/* Damit das Drumherum ein Container ist: */
.inside,
.grid-container {
    container-type: inline-size;
    height: max-content; /* oder auto */
}

/* Limitierung */
.limited {
    width: 100%;
    max-width: 37rem;
    margin: 0 auto;
}
.grid-span.limited {
    max-width: 60rem;
}

/* "Zweiteilige" Container-Queries (bereits in deinem Code) */
@container (min-width: 660px) {
    .box-header {
        grid-column: span 2;
    }
}

@container (min-width: 1024px) {
    .box-header {
        grid-column: span 3;
    }
}

/* Hilfsklassen für Flex-Gaps */
.biggap,
.smallgap {
    display: flex;
    flex-direction: column;
}
.biggap {
    gap: var(--xs);
}
.smallgap {
    gap: var(--xxs);
}

/* Spaltenbelegung in Form von col-X */
.col-1,
.col-2,
.col-3 { 
    grid-column: span 1; 
}

/* Inline-Grid: wie viele Spalten col-X da belegen soll */
.grid-3x1-inline .col-2 {
    grid-column: span 2; 
}
.grid-3x1-inline .col-3 {
    grid-column: span 3; 
}

/* Formularkörper (8-Spalten-Raster) */
.formbody {
    display: grid;
    gap: var(--xxs);
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
}
.widget,
.w100,
.w75,
.w50,
.w25 { 
    grid-column: span 8; 
}
.w12 { 
    grid-column: span 4; 
}
form .row {
    display: grid;
    gap: var(--xxs);
    grid-template-columns: 3rem 1fr;
    grid-template-rows: 1fr;
    align-items: center;
}
form .row input {
    grid-row: 1;
    grid-column: 1;
}
form .row label {
    grid-row: 1;
    grid-column: 2;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    font-size: 1rem;
    white-space: normal;
    margin-top: 0;
}

/* Apply text-wrap: balance only if supported */
@supports (text-wrap: balance) {
    form .row label {
        text-wrap: balance;
    }
}

/* Feed-Item */
.feedItem {
    width: 100%;
}

/* ===================================== */
/* Container Queries (statt @media)      */
/* ===================================== */

/* 
   1) Ursprünglich @media (min-width: 480px)
      => jetzt @container (min-width: 480px) 
*/
@container (min-width: 480px) {
    .grid-3x1 {
        /* Ab 480px Containerbreite => 2 Spalten */
        grid-template-columns: 1fr 1fr;
    }
    .grid-3x1 .grid-span { 
        grid-column: span 2; 
    }

    .widget,
    .w100,
    .w75,
    .w50 { 
        grid-column: span 8; 
    }
    .w25 { 
        grid-column: span 4; 
    }
    .w12 { 
        grid-column: span 2; 
    }
    .col-1,
    .col-2 { 
        grid-column: span 1; 
    }
    .col-3 { 
        grid-column: span 3; 
    }
}

/* 
   2) Ursprünglich @media (max-width: 714px)
      => jetzt @container (max-width: 714px)
      (Beispiel: feedItem-Abstand)
*/


/* 
   3) Ursprünglich @media (min-width: 715px)
      => jetzt @container (min-width: 715px)
      (FeedItem: halbe Breite)
*/
@container (min-width: 650px) {
    .feedItem {
        width: calc(50% - 6px);
    }
}

/* 
   4) Ursprünglich @media (min-width: 800px)
      => jetzt @container (min-width: 800px)
*/
@container (min-width: 800px) {
    .grid-4x1 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-4x1 .grid-span { 
        grid-column: span 4; 
    }

    .grid-3x1 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-3x1 .grid-span { 
        grid-column: span 3; 
    }
    .grid-2_1 {
        grid-template-columns: 2fr 1fr;
    }
    .grid-1_1 {
        grid-template-columns: 1fr 1fr;
    }
    .grid-1_2 {
        grid-template-columns: 1fr 2fr;
    }

    .limited {
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
    }

    .widget,
    .w100 {
        grid-column: span 8;
    }
    .w75 {
        grid-column: span 6;
    }
    .w50 { 
        grid-column: span 4; 
    }
    .w25 { 
        grid-column: span 2; 
    }
    .w12 { 
        grid-column: span 1; 
    }
}

@container (min-width: 1024px) {
    .feedItem {
        width: calc((100% / 3) - 8px);
    }
}


/*
   5) Ursprünglich @media (min-width: 1200px)
      => jetzt @container (min-width: 1200px)
      (hier oben existiert bereits ein Container-Query für 1200px,
       wir erweitern das ggf. oder packen es zusammen)
*/
@container (min-width: 1200px) {
    .grid-4x1,
    .grid-3x1,
    .grid-2_1,
    .grid-1_1 {
        max-width: 1332px;
    }
}


/* ===================================== */
/* Grid-Flex: spaltenweise Darstellung   */
/* ===================================== */

.grid-flex {
  /* Statt Grid jetzt Spaltenfluss */
  column-count: 1;                /* Mobil: eine Spalte */
  column-gap: var(--xxs);         /* Abstand zwischen Spalten */
  width: 100%;
}

.grid-flex > * {
  /* Elemente sollen nicht zwischen Spalten getrennt werden */
  break-inside: avoid;
  margin-top: var(--xxs);
  display: block;                 /* wichtig bei inline-Inhalten */
}
.grid-flex > .box-header,
.grid-flex > *:first-of-type {
  margin-top: 0;                  /* Überschrift oben keinen Abstand */
}

/* Container Queries */
@container (min-width: 660px) {
  .grid-flex {
    column-count: 2;              /* mittlere Container: 2 Spalten */
  }
  .box-header {
    column-span: all;             /* Überschrift über alle Spalten */
  }
}

@container (min-width: 1024px) {
  .grid-flex {
    column-count: 3;              /* größere Container: 3 Spalten */
  }
  .event-main .grid-flex,
  .task-modules .grid-flex {
    column-count: 2;              /* Sonderfälle mit 2 Spalten */
  }
  .box-header {
    column-span: all;
  }
}

.event-main,
.event-sidebar {
    /* Damit die Spalten nicht zu breit werden */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s);
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
}

body {
	position: relative;
	/* overflow-y: scroll; */
	min-width: calc(380px - 1.6rem);
}

#main .inside {
	padding-top: 4.5rem;
	min-height: 100vh;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.veranstaltungsdetails #main .inside,
.kursseite #main .inside,
.reisedetails #main .inside {
	padding-top: 0;
}
.veranstaltungsdetails #main .inside::before,
.kursseite #main .inside::before,
.reisedetails #main .inside::before {
	background-color: transparent!important;
	transition: background-color 0.3s ease;
}
.veranstaltungsdetails.nav-scrolled #main .inside::before,
.kursseite.nav-scrolled #main .inside::before,
.reisedetails.nav-scrolled #main .inside::before {
	background-color: var(--basic)!important;
}

#main .inside>div {
	margin-left: 0.75rem;
	margin-right: 0.75rem;
	width: calc(100% - 1.5rem);
	max-width: 1332px;
}

#main .inside>div.frameless {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.frame {
	margin-left: 0.75rem;
	margin-right: 0.75rem;
	width: calc(100% - 1.5rem);
}

@media (min-width: 800px) {
	#main .inside>div.frameless {
		margin-left: 0.75rem;
		margin-right: 0.75rem;
		width: calc(100% - 1.5rem);
	}

	.frame {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

#main .inside>div:last-of-type {
	margin-bottom: var(--l);
}

.invisible {
	display: none !important;
}

.limited,
#main .inside>div.limited {
	max-width: 60rem;
}

.center {
	margin-top: auto;
	margin-bottom: auto;
}





/* TEXTBLÖCKE */


.txt-left {
	text-align: left;
	margin-right: auto;
}

.txt-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.txt-right {
	text-align: right;
	margin-left: auto;
}

.text p {
	margin-bottom: 0.75rem;
	line-height: 125%;
}

h1,
h2 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

h1::before,
h2::before {
	font-family: 'icon';
	margin-right: 0.5rem;
	font-size: 0.9em;
}

.h0,
.heroheader {
	text-align: center;
}

.toggler h2 {
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.rte ul {
	padding-left: 1.35rem;
}

.rte li {
	padding-left: 0.5rem;
}

.rte li::marker {
	content: '\25BA';
	font-size: 0.9em;
}

.rte p {
	margin-bottom: 0.75rem;
}

.verse-box {
	min-height: 10rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--s) var(--xs) var(--xs) var(--xs) !important;
}

.reference,
.dailyVerses.bibleVerse {
	margin-top: var(--xxs);
}





/* LOADER */

#loader,
#loader2,
.loader {
	position: fixed;
	display: flex;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100vh;
	justify-content: center;
	 align-items: center;
}

.nachrichtenbox .loader {
	width: 100%;
	height: 100%;
}

#loader .spinner,
#loader2 .spinner,
.loader .spinner {
	z-index: 1;
	width: 3rem;
	height: 3rem;
	border: 0.3125rem solid var(--light);
	border-top: 0.3125rem solid var(--accent-light);
}

button #loader2,
#loader2.minimize {
	width: auto !important;
	height: auto !important;
}

.nachrichtenbox .loader .spinner,
button #loader2 .spinner {
	width: 1.5rem;
	height: 1.5rem;
	border: 0.2rem solid var(--light);
	border-top: 0.2rem solid var(--accent-light);
}
button[data-value='no']:hover, 
button[data-value='no'].active { 
	background-color: var(--ST); 
	color: var(--white) 
}
button[data-value='pendant']:hover, 
button[data-value='pendant'].active { 
	background-color: var(--BW); 
	color: var(--white) 
}
button[data-value='yes']:hover, 
button[data-value='yes'].active { 
	background-color: var(--PT); 
	color: var(--white) 
}
.add-section {
	padding: 0 var(--xs);
}
.bulk-actions {
	display: flex;
	gap: 0.15rem 1rem;
	flex-wrap: wrap;
}
.add-button,
a.add-button {
	font-family: 'bn_bold';
	font-size: 0.9rem;
	color: var(--accent-light);
	margin-bottom: var(--xxs);
	white-space: nowrap;
}
.add-button::before {
	font-family: 'icon';
	content: '\e92b';
	margin-right: 0.25rem;
}
.add-button.select-toggle[data-action='select-all']::before {
	content: '\e91b';
}
.add-button.select-toggle[data-action='clear']::before {
	content: '\e951';
}
.add-button.bulk-toggle-visibility::before {
	content: '\e95a';
}
.add-button.bulk-delete::before {
	content: '\f014';
}
.add-button.bulk-export::before {
	content: '\e9c7';
}
.add-button.bulk-message::before {
	content: '\e90d';
}
.add-button[disabled] {
	opacity: 0.25;
	pointer-events: none;
}




/* BILDER */

img,
figure {
	width: 100%;
	height: 100%;
}

img {
	/* object-fit nur explizit pro Kontext setzen, kein globales cover */
	border-radius: 0.25rem;
	overflow: hidden;
}

/* ── .ghost – Opt-in Blur-up + Shimmer beim Bildladen ── */
@keyframes fig-shimmer {
    0%   { background-position: 100% 100%; }
    100% { background-position:   0%   0%; }
}
.ghost {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* eigener Stacking-Context: ::before(90) schlägt news_card-image-bg(77) & img(88) zuverlässig */
}
.ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--basic-dark2);
    background-image: linear-gradient(135deg, transparent 35%, var(--shimmer-color) 50%, transparent 65%);
    background-size: 300% 300%;
    background-repeat: no-repeat;
    animation: fig-shimmer 2.6s infinite linear;
    z-index: 90;
    pointer-events: none;
    transition: opacity 0.5s ease;
		border-radius: 0.25rem;
}
.ghost.img-loaded::before {
    opacity: 0;
    pointer-events: none;
    animation: none;
}
/* Avatar-Ghosts: Hintergrund in Avatar-Farbe (--item-color erbt vom .chat-item.box) */
.chat-avatar.ghost::before {
    background-color: var(--item-color, var(--basic-dark2));
}
/* img im Ghost bleibt unsichtbar bis img-loaded gesetzt –
   verhindert Flash of broken/unloaded img während der 0.5s ::before-Transition */
.ghost img {
    opacity: 0;
}
.ghost.img-loaded img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ── Auto-Ghost für .card und .bar (ohne explizite .ghost-Klasse) ─────────────── */
/* CSS greift für <img>-Karten (sofort); CSS-Klassen-Hintergründe (.card-ausbildung  */
/* etc.) werden per JS mit getComputedStyle erkannt → .ghost dynamisch gesetzt.      */
.card:has(img):not(.ghost),
.card[style*="background-image"]:not(.ghost),
.bar:has(img):not(.ghost),
.bar[style*="background-image"]:not(.ghost) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.card:has(img):not(.ghost)::before,
.card[style*="background-image"]:not(.ghost)::before,
.bar:has(img):not(.ghost)::before,
.bar[style*="background-image"]:not(.ghost)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--basic-dark2);
    background-image: linear-gradient(135deg, transparent 35%, var(--shimmer-color) 50%, transparent 65%);
    background-size: 300% 300%;
    background-repeat: no-repeat;
    animation: fig-shimmer 2.6s infinite linear;
    z-index: 90;
    pointer-events: none;
    transition: opacity 0.5s ease;
		border-radius: 0.25rem;
}
.card.img-loaded::before,
.bar.img-loaded::before {
    opacity: 0;
    animation: none;
    pointer-events: none;
}

.ce_text figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ce_text img {
	max-width: 48rem;
	max-height: 27rem;
	object-fit: contain;
	margin-left: auto;
	margin-right: auto;
}

.ce_gallery.grid-span {
	min-width: calc(380px - 1.6rem);
}

.bgimg {
	overflow: hidden;
}





/* SPACES */

.st-xxs { margin-top: var(--xxs) !important }
.st-xs { margin-top: var(--xs) !important }
.st-s { margin-top: var(--s) !important }
.st-m { margin-top: var(--m) !important }
.st-l { margin-top: var(--l) !important }
.st-xl { margin-top: var(--xl) !important }
.st-xxl { margin-top: var(--xxl) !important }

.sb-xxs { margin-bottom: var(--xxs) !important }
.sb-xs { margin-bottom: var(--xs) !important }
.sb-s { margin-bottom: var(--s) !important }
.sb-m { margin-bottom: var(--m) !important }
.sb-l { margin-bottom: var(--l) !important }
.sb-xl { margin-bottom: var(--xl) !important }
.sb-xxl { margin-bottom: var(--xxl) !important }

@media (orientation: landscape) {
	.rst-xxs { margin-top: 1vh !important }
	.rst-xs { margin-top: 2vh !important }
	.rst-s { margin-top: 3vh !important }
	.rst-m { margin-top: 4vh !important }
	.rst-l { margin-top: 5vh !important }
	.rst-xl { margin-top: 6vh !important }
	.rst-xxl { margin-top: 7vh !important }

	.rsb-xxs { margin-bottom: 1vh !important }
	.rsb-xs { margin-bottom: 2vh !important }
	.rsb-s { margin-bottom: 3vh !important }
	.rsb-m { margin-bottom: 4vh !important }
	.rsb-l { margin-bottom: 5vh !important }
	.rsb-xl { margin-bottom: 6vh !important }
	.rsb-xxl { margin-bottom: 7vh !important }
}
@media (orientation: portrait) {
	.rst-xxs { margin-top: 1vw !important }
	.rst-xs { margin-top: 2vw !important }
	.rst-s { margin-top: 3vw !important }
	.rst-m { margin-top: 4vw !important }
	.rst-l { margin-top: 5vw !important }
	.rst-xl { margin-top: 6vw !important }
	.rst-xxl { margin-top: 7vw !important }

	.rsb-xxs { margin-bottom: 1vw !important }
	.rsb-xs { margin-bottom: 2vw !important }
	.rsb-s { margin-bottom: 3vw !important }
	.rsb-m { margin-bottom: 4vw !important }
	.rsb-l { margin-bottom: 5vw !important }
	.rsb-xl { margin-bottom: 6vw !important }
	.rsb-xxl { margin-bottom: 7vw !important }
}

@media screen and (min-width: 800px) {
	.st-s {
		margin-top: calc(1.25 * var(--s)) !important
	}

	.st-m {
		margin-top: calc(1.25 * var(--m)) !important
	}

	.st-l {
		margin-top: calc(1.25 * var(--l)) !important
	}

	.st-xl {
		margin-top: calc(1.25 * var(--xl)) !important
	}

	.st-xxl {
		margin-top: calc(1.25 * var(--xxl)) !important
	}

	.sb-s {
		margin-bottom: calc(1.25 * var(--s)) !important
	}

	.sb-m {
		margin-bottom: calc(1.25 * var(--m)) !important
	}

	.sb-l {
		margin-bottom: calc(1.25 * var(--l)) !important
	}

	.sb-xl {
		margin-bottom: calc(1.25 * var(--xl)) !important
	}

	.sb-xxl {
		margin-bottom: calc(1.25 * var(--xxl)) !important
	}
}

@media screen and (min-width: 1200px) {
	.st-s {
		margin-top: calc(1.5 * var(--s)) !important
	}

	.st-m {
		margin-top: calc(1.5 * var(--m)) !important
	}

	.st-l {
		margin-top: calc(1.5 * var(--l)) !important
	}

	.st-xl {
		margin-top: calc(1.5 * var(--xl)) !important
	}

	.st-xxl {
		margin-top: calc(1.5 * var(--xxl)) !important
	}

	.sb-s {
		margin-bottom: calc(1.5 * var(--s)) !important
	}

	.sb-m {
		margin-bottom: calc(1.5 * var(--m)) !important
	}

	.sb-l {
		margin-bottom: calc(1.5 * var(--l)) !important
	}

	.sb-xl {
		margin-bottom: calc(1.5 * var(--xl)) !important
	}

	.sb-xxl {
		margin-bottom: calc(1.5 * var(--xxl)) !important
	}
}





/* BOXES */

.box,
.ce_accordion {
	padding: var(--xxs);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--xxs);
	max-width: calc(100vw - 1.5rem);
}

.box.frameless {
	padding: 0;
}

.box>* {
	z-index: 10;
	overflow: visible !important;
}

.box>div:last-of-type {
	margin-bottom: 0;
}

.box-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
}

.box>.box-header {
	height: 1.6rem;
}
.toggler .box-header {
	padding: 0;
}
.box>.box-header h2,
.toggler .box-header h2 {
	margin-top: 0;
	margin-bottom: 0;
}

.toggler .box-header h2 {
	font-size: 1.3rem;
}

.box>.box-header span,
.toggler .box-header span {
	margin-right: 0.5rem;
	font-size: 1.1rem;
}

.box-header,
.box-area,
.box-area-dark {
	padding: var(--xxs);
}
.box h3 {
	padding-left: 0.1rem;
	padding-right: 0;
}

.box-area {
	gap: var(--xxs);
}

.box-area .box-header,
.box-area-dark .box-header {
	padding-top: 0;
	padding-bottom: 0;
}

.bgimg:after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	content: '';
	background-image: url('/files/core/images/Bibelausstellung.jpeg');
	background-size: cover;
	background-position: center;
	filter: blur(0.75rem) saturate(1.2) brightness(130%);
	opacity: 0.2;
	transform: scale(1.1);
}

.changeTrigger {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: var(--xxs);
	margin-bottom: var(--s);
	border-radius: 0.5rem;
	background: var(--SO);
	overflow: hidden!important;
}
.changeTrigger>div {
	overflow: hidden;
}

.changeTrigger a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 2.5rem;
	cursor: default;
}
.changeTrigger :not(.inactive) a,
.changeTrigger .inactive a:hover {
	background-color: var(--IL);
	color: var(--white);
}
.changeTrigger:has(.inactive:hover) :not(.inactive) a {
	background-color: var(--PD);
}
.changeTrigger :not(.inactive) a {
	cursor: default;
}
.changeTrigger .inactive:hover {
	cursor: pointer;
}
.changeTrigger .inactive a {
	color: var(--white);
	cursor: pointer;
}

#dynamicContent .mod_login>.box {
	padding: 0;
}

.profilbox {
	margin-top: 2.5rem;
	overflow: visible !important;
	padding-top: 3rem;
	align-items: center;
	text-align: center;
}

.profilbox figure {
	position: absolute;
	width: 5rem;
	height: 5rem;
	top: -2.5rem;
	left: 0;
	right: 0;
	content: '';
	z-index: 333;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}

.profilbox ul {
	list-style: none;
	margin-top: 1rem;
	margin-bottom: 1.8rem;
	display: grid;
	grid-auto-flow: row;
	gap: 0.3725rem;
	width: 100%;
	padding-left: var(--xxs);
	padding-right: var(--xxs);
}

.profilbox li {
	min-height: 1.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	position: relative;
	padding-left: 2.3rem;
	padding-right: 0.4rem;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
}

.profilbox li:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1.8rem;
	content: '\e90e';
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.profilbox li.empty:before {
	content: '\e92d';
}

.profilbox .button_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-bottom: 1rem;
}




/* BAR */

.bar {
	line-height: inherit;
	display: flex;
	height: 2.5rem;
}

.bar-xs {
	height: 2rem;
}

.bar_pre {
	display: flex;
	position: relative;
	height: 100%;
	width: 2.5rem;
	align-items: center;
	justify-content: center;
}

.with_img .bar_pre {
	width: 3.75rem;
	padding-right: 1.25rem;
}

.bar_img_wrapper {
	position: relative;
	height: 100%;
}

.bar_img {
	position: absolute;
	left: -1.25rem;
	height: 2.5rem;
	width: 2.5rem;
	content: '';
	border: 0.125rem solid var(--white);
}

.bar_main {
	padding: 0.2rem var(--xxs) 0 var(--xxs);
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.bar .bar_main * {
	white-space: nowrap;
}
.bar-xs .bar_main {
	padding: 0 var(--xxs);
	font-size: 0.8rem;
}

.with_img .bar_main {
	padding-left: 1.5rem;
}

.bar_end {
	display: grid !important;
	height: 2.25rem;
	gap: 0.125rem;
	justify-content: center;
	align-items: center;
	grid-auto-flow: column;
	margin: 0.125rem;
	margin-left: auto;
}

.bar_end-clear,
.bar_end-filled {
	height: 2.25rem;
	width: 2.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.coming .bar_end-filled.progress-bar {
	background: transparent;
	color: var(--fx-color)!important;
}	
.bar_name {
	line-height: 100%;
}

.bar h1,
.bar h2,
.bar h3,
.bar h4,
.bar h5,
.bar h6 {
	margin-top: 0;
	margin-bottom: 0;
}

.search-container form {
	margin-bottom: 0;
	padding: 0;
}

.searchbar {
	display: flex;
	flex-direction: row !important;
	gap: var(--xxs);
}

.filter-bar {
	display: grid;
	gap: var(--xxs);
	align-items: flex-start;
}

.stundenplan .filter-bar {
	grid-template-columns: 1fr;
} 

.filter-bar select {
	width: 100%;
}

@media screen and (min-width: 27rem) {
	.stundenplan .filter-bar {
		grid-template-columns: 7rem auto;
	}
}


.filter-bar label {
	padding-left: 0;
}


#filter {
	display: flex;
	flex-direction: row;
	gap: var(--xs);
	align-self: center;
	align-items: center;
	margin-left: auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.copy-to-clipboard {
	display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr auto;
	align-items: center;
	position: relative;
}

.copy-to-clipboard div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 1.9rem;
	width: -webkit-fill-available;
}

.copy-to-clipboard div p {
	margin: 0;
	padding: 0;
	line-height: 1.1rem;
}

button.bar {
	height: 2.25rem;
	padding: 0.25rem;
}

button.bar .bar_end {
	grid-template-columns: 2rem;
	height: 2rem;
	gap: 0.125rem;
	margin: 0.125rem;
	margin-left: auto;
}

button.bar .bar_end-clear,
button.bar .bar_end-filled {
	height: 2rem;
	width: 2rem;
}

.circle {
	background-color: var(--PD);
	color: var(--white);
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	font-family: 'bn_bold';
	font-size: 0.7rem;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* DOWNLOAD-ELEMENT */
.download-element .bar_pre {
	background: var(--white);
}
.download-element .mime_icon {
	height: 1.9rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.download-element .mime_icon div {
	position: relative;
	height: 100%;
	width: 1.4rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 0.125rem;
	font-family: 'bn_bold';
	font-size: 0.7rem;
	color: var(--white);
	background-image: url('../../files/core/images/mime/MIME_leer.svg');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.85;
	line-height: normal;
}

.download-element:hover .mime_icon div {
	opacity: 1;
}

.mime_icon.mime_ppt div,
.mime_icon.mime_pptx div {
	background-image: url('../../files/core/images/mime/MIME__Presentation.svg');
}

.mime_icon.mime_pdf div {
	background-image: url('../../files/core/images/mime/MIME__PDF.svg');
}

.mime_icon.mime_rtf div,
.mime_icon.mime_txt div,
.mime_icon.mime_doc div,
.mime_icon.mime_docx div,
.mime_icon.mime_odt div {
	background-image: url('../../files/core/images/mime/MIME__Text.svg');
}

.mime_icon.mime_xls div,
.mime_icon.mime_xlsx div,
.mime_icon.mime_csv div {
	background-image: url('../../files/core/images/mime/MIME__Tabellen.svg');
}

.mime_icon.mime_jpg div,
.mime_icon.mime_jpeg div,
.mime_icon.mime_png div,
.mime_icon.mime_gif div,
.mime_icon.mime_webp div,
.mime_icon.mime_svg div,
.mime_icon.mime_tif div,
.mime_icon.mime_tiff div,
.mime_icon.mime_bmp div,
.mime_icon.mime_pdn div,
.mime_icon.mime_psd div {
	background-image: url('../../files/core/images/mime/MIME__Bild.svg');
}

.mime_icon.mime_mp3 div,
.mime_icon.mime_m4a div,
.mime_icon.mime_aac div,
.mime_icon.mime_wav div,
.mime_icon.mime_ogg div {
	background-image: url('../../files/core/images/mime/MIME__Audio.svg');
}

.mime_icon.mime_mp4 div,
.mime_icon.mime_avi div,
.mime_icon.mime_mov div,
.mime_icon.mime_mpg div,
.mime_icon.mime_mpeg div,
.mime_icon.mime_divx div {
	background-image: url('../../files/core/images/mime/MIME__Video.svg');
}

.mime_icon.mime_html div,
.mime_icon.mime_php div,
.mime_icon.mime_css div,
.mime_icon.mime_xml div,
.mime_icon.mime_xhtml div,
.mime_icon.mime_js div {
	background-image: url('../../files/core/images/mime/MIME__Code.svg');
}

.mime_icon.mime_zip div,
.mime_icon.mime_rar div,
.mime_icon.mime_ace div,
.mime_icon.mime_cab div {
	background-image: url('../../files/core/images/mime/MIME__Container.svg');
}




/* HERO & HEADER */

.hero {
	aspect-ratio: 32/9;
}

.grid-header {
	display: flex;
	align-items: center;
	height: 1.4rem;
}

.grid-header:before {
	margin-right: 0.5rem;
	font-weight: normal;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* ===== EVENTHEADER: BASE ===== */
/* Base: einfacher responsive Header (application_form, reference_form, library_mediadetails) */
.eventheader {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s);
  text-align: center;
}
.veranstaltungsdetails .eventheader,
.reisedetails .eventheader,
.kursseite .eventheader {
	padding: calc(var(--l) + 1rem) var(--s) var(--s);
  min-height: 16rem;
}
.myApplication .eventheader {
	margin-bottom: 0;
}

.eventheader__figure {
  position: relative;
  z-index: 2;
  width: clamp(8rem, 40vw, 18rem);
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
}

.eventheader figure:not(.eventheader__figure) {
	max-width: 7rem;
	height: auto;
}
/* Geblurrter Hintergrund für nicht-quadratische Bilder */
.eventheader__figure::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--figure-img) center / cover no-repeat;
  filter: blur(1rem) opacity(0.75);
  transform: scale(1.1);
  z-index: 0;
}

.eventheader__figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Quadratische Bilder: kein Blur-BG nötig, cover statt contain */
.eventheader__figure--square::before {
  display: none;
}

.eventheader__figure--square img {
  object-fit: cover;
}

.eventheader .flags {
	justify-content: center;
}

.eventheader__info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eventheader h1 {
	font-size: 2rem;
  margin: 0;
}

.eventheader__date {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: center;
  font-family: 'bn_bold';
  font-size: 1.1rem;
  opacity: 0.8;
}

.eventheader__date .icon {
  font-size: 0.9rem;
}

.eventheader__semester {
  opacity: 0.65;
  font-family: 'ss_regular';
  font-size: 0.85rem;
}

/* --- Actions --- */
.eventheader__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--xs);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s);
}
.eventheader__actions .button {
	min-width: auto;
	height: auto;
	gap: 0.3rem;
  padding: 0.3rem 0.65rem;
}

/* Anmelde-Button im Header */
.button.eventheader__register-btn {
  background: var(--IL);
  color: var(--white);
}
.button.eventheader__register-btn:hover {
  color: var(--white);
}

/* Highlight-Pulse für Anmeldung */
@keyframes highlight-pulse {
  0%   { outline: 3px solid var(--IL); outline-offset: 0; }
  50%  { outline: 3px solid var(--IL); outline-offset: 0.4rem; }
  100% { outline: 3px solid transparent; outline-offset: 0.6rem; }
}
.highlight-pulse {
  animation: highlight-pulse 0.8s ease-out;
  border-radius: var(--border-radius, 0.5rem);
}

/* Download-Overlay auf dem Bild (Desktop/Mouse) */
.eventheader__download--overlay {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  padding: 0.4rem;
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
	display: flex;
  justify-content: center;
	align-items: center;
  background: rgba(0,0,0,0.55);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.25s;
  font-size: 1rem;
  gap: 0;
}

.eventheader__figure:hover .eventheader__download--overlay {
  opacity: 1;
}

/* Touch: Download-Overlay permanent sichtbar */
.eventheader__download--overlay.is-touch-visible {
  opacity: 0.8;
}

/* Share-Popover */
.share-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  flex-direction: column;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: var(--basic-dark);
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.2);
  z-index: 100;
  min-width: 11rem;
}

.share-popover.is-open {
  display: flex;
  animation: sharePopoverIn 0.15s ease-out;
}

@keyframes sharePopoverIn {
  from { opacity: 0; transform: translateY(0.3rem) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.share-popover__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-family: 'bn_regular';
  text-decoration: none;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.share-popover__item:hover {
  background: var(--basic-light);
}

.share-popover__item i {
  width: 1.4rem;
  text-align: center;
  font-size: 1.1rem;
}

/* Brand Colors */
.share-popover__item[data-share-service="whatsapp"] i { color: #25D366; }
.share-popover__item[data-share-service="facebook"] i { color: #1877F2; }
.share-popover__item[data-share-service="instagram"] i { color: #E4405F; }
.share-popover__item[data-share-service="x"] i { color: var(--accent); }
.share-popover__item[data-share-service="telegram"] i { color: #0088cc; }
.share-popover__item[data-share-service="email"] i { color: var(--accent); }
.share-popover__item[data-share-service="copy"] i { color: var(--accent); }

.share-popover__item.copied {
  color: var(--SO);
}

.share-popover__item.copied i {
  color: var(--SO);
}

/* ===== CINEMATIC (event/travel mit Bild) ===== */
.eventheader--cinematic {
  max-width: 1332px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.eventheader__bg {
  position: absolute;
  top: 0; left: 0; right: 0;
	height: 25rem;
	background-image: var(--hero-image);
	background-size: cover;
	background-size: 115% auto;
  background-position: center;
  filter: blur(3vw) saturate(1) brightness(1) opacity(0.35);
  z-index: 0;
  pointer-events: none;
}

/* Fallback: Gradient-Overlay für Browser ohne mask-image */
.eventheader__gradient {
  position: absolute;
  top: 10rem; left: 0; right: 0;
  height: 25rem;
  background: linear-gradient(0deg, var(--basic) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Bevorzugt: CSS mask auf dem BG — lässt echten Seiten-Hintergrund durchscheinen */
@supports (mask-image: linear-gradient(black, transparent)) or (-webkit-mask-image: linear-gradient(black, transparent)) {
  .eventheader__bg {
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  }
  .eventheader__gradient {
    display: none;
  }
}

.eventheader--cinematic .eventheader__figure {
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.2);
}

.dark-theme.eventheader--cinematic .eventheader__figure {
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.4);
}

/* ===== COURSE (klassisches Layout wie vorher) ===== */
.eventheader--course {
  margin-left: var(--xs);
  margin-right: var(--xs);
}

.eventheader--course .eventheader__figure {
  width: var(--profile-img);
  height: var(--profile-img);
  aspect-ratio: auto;
  border-radius: 50%;
  margin: 0 auto;
}

.eventheader--course .eventheader__figure::before {
  display: none;
}

.eventheader--course .eventheader__figure img {
  object-fit: cover;
}

.eventheader--course .eventheader__download--overlay {
  display: none;
}

/* ===== DESKTOP (800px+) ===== */
@media screen and (min-width: 800px) {
	.eventheader {
		flex-direction: row;
		align-items: center;
		text-align: left;
		justify-content: flex-start;
		gap: var(--m);
	}
	.veranstaltungsdetails .eventheader,
	.reisedetails .eventheader,
	.kursseite .eventheader {
		min-height: 20rem;
		padding: 5rem var(--xs) var(--m);
	}

  .eventheader .flags,
  .eventheader__date,
  .eventheader__actions {
    justify-content: flex-start;
  }

  .eventheader__figure {
    width: clamp(10rem, 18vw, 14rem);
  }

  /* Course: originales 7rem Grid */
  .eventheader--course {
    display: grid;
    grid-template-columns: 7rem auto;
    gap: var(--s);
  }

  .eventheader--course .eventheader__figure {
    width: var(--profile-img);
    height: var(--profile-img);
  }

  .eventheader--course .eventheader__flags,
  .eventheader--course .eventheader__date,
  .eventheader--course .eventheader__actions {
    justify-content: flex-start;
  }

  .eventheader--course .eventheader__info {
    align-items: flex-start;
    text-align: left;
  }
}

/* Dark-Theme: geblurrtes Bild dunkler */
[data-theme="dark"] .eventheader__bg,
.dark-theme .eventheader__bg {
  filter: blur(3vw) saturate(1.2) brightness(0.5);
}





/* CARD */

.card {
	aspect-ratio: 1/1;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
#welcome .card,
.newInLibrary .card,
.card.content-youtube {
	aspect-ratio: 16/9;
}
.card.andmore {
	height: 100%;
	justify-content: center;
}
.andmore:hover {
	color: var(--dark)!important;
}
.feed_maingrid a {
	font-size: 65%;
}
.feed_subgrid a {
	font-size: 35%;
}
.empty.slick-slide {
	aspect-ratio: 1/1;
	background-color: var(--basic-dark);
	display: flex!important;
	justify-content: center;
	align-items: center;
	padding: var(--xs);
	border-radius: 0.5rem;
}

.card a::not(.button) {
	width: 100%;
	height: 100%;
	display: flex;
}

.card iframe {
	width: 100%;
	height: 100%;
	border: none;
}





/* BUTTON */

.button_wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

button,
.button,
.button-wrapper a,
.bar-btn,
.card-btn.active {
	display: flex;
	align-items: center;
	cursor: pointer !important;
	overflow: hidden;
	transform: scale(99%);
}

button,
.button,
.button-wrapper a,
.card-btn {
	justify-content: center;
}

button,
.button,
.button-wrapper a {
	height: 2.25rem;
	min-width: 10rem;
	border: none;
	padding: 0 0.75rem;
	display: inline-flex;
}

button,
.button,
.button-wrapper a,
.bar-btn {
	transform: scale(100%);
}

.card-btn {
	transform: scale(100%);
}

button:hover,
.button:hover,
.button-wrapper a:hover,
.bar-btn:hover,
.card-btn:hover {
	transform: scale(100.5%);
}

button.active,
.button:active,
.button-wrapper a:active,
.bar-btn:active,
.card-btn:active {
	transform: scale(99.5%);
}

.trumbowyg-box button,
.trumbowyg-box button:hover,
.trumbowyg-box button:active {
	filter: none;
	min-width: auto;
	text-align: center;
}
.trumbowyg-box {
	border-radius: 0.25rem;
	overflow: hidden;
}
.trumbowyg-editor-box {
	background-color: var(--white);
}

.bar-btn,
.bar-btn:hover {
	color: var(--black);
}

.buttonicon {
	margin-right: 0.25rem;
}

.smallbutton {
	height: 1.9rem;
	min-width: 1.9rem;
	padding: 0 0.5rem;
}

/* GLOBAL TILE UI */
.ui-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr));
	gap: 0.4rem;
	padding: 0.65rem 0.75rem 0.75rem;
}

.ui-tile-btn,
a.ui-tile-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.28rem;
	padding: 0.45rem 0.25rem 0.25rem;
	border-radius: 0.6rem;
	cursor: pointer;
	border: none;
	font-size: 0.8rem;
	font-family: 'bn_bold', sans-serif;
	transition: background 0.12s, transform 0.1s, color 0.12s;
	min-width: 0;
	height: auto;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	filter: none;
	color: inherit;
}

.ui-tile-btn i,
.ui-tile-btn span.icon {
	font-size: 1.35rem;
}

/* GLOBAL MASK LIST */
.mask-list {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mask-scrollbar-thumb, rgba(0,0,0,0.2)) transparent;
}

.mask-list::-webkit-scrollbar {
	width: var(--mask-scrollbar-width, 6px);
}

.mask-list::-webkit-scrollbar-track {
	background: transparent;
}

.mask-list::-webkit-scrollbar-thumb {
	background-color: var(--mask-scrollbar-thumb, rgba(0,0,0,0.2));
	border-radius: 3px;
}

.mask-list::-webkit-scrollbar-thumb:hover {
	background-color: var(--mask-scrollbar-thumb-hover, rgba(0,0,0,0.35));
}

.mask-list.scroll-fade-top {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2vh, black 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 2vh, black 100%);
}

.mask-list.scroll-fade-bottom {
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 2vh), transparent 100%);
	mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 2vh), transparent 100%);
}

.mask-list.scroll-fade-both {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2vh, black calc(100% - 2vh), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 2vh, black calc(100% - 2vh), transparent 100%);
}

.button-wrapper a {
	display: inline-flex;
}

.card-btn:hover {
	z-index: 99;
}

.button.disabled {
	cursor: default !important;
	opacity: 0.5;
	filter: none !important;
}

.button.disabled:not(.nudge) {
	transform: none !important;
}

.button.disabled:not(.nudge):hover {
	transform: none !important;
}

.button.active,
.button.active:hover {
	cursor: default!important;
	transform: none!important;
}

.toggler button {
	box-shadow: none !important;
	background-color: transparent !important;
	padding: 0 var(--xxs) !important;
	transform: none !important;
	display: flex;
	font-size: 1.2rem;
	flex-direction: row-reverse;
	justify-content: space-between;
	width: 100%;
	height: auto;
	min-height: calc(2.25rem - (2 * var(--xxs)));
	text-align: left;
	filter: none !important;
}

.toggler button:before {
	font-family: 'icon';
	content: '\e92b';
}

.toggler.active button:before {
	content: '\e925';
}

.accordion {
	padding: var(--xxs);
}

#adminDecisionWrapper button {
	height: 4rem;
	width: 4rem;
	min-width: 4rem;
	font-size: 2.8rem;
}

#recommendationButtons button {
	height: 2.5rem;
	width: 2.5rem;
	min-width: 2.5rem;
	font-size: 1.8rem;
}





/* NAVIGATIONSLEISTEN allgemein */

#right1,
#right2,
#messenger,
#warenkorb,
#login-sidebar {
	position: fixed;
	top: 0;
	right: -13rem;
	bottom: 0;
	width: 13rem;
	z-index: 888;
	opacity: 0.7;
	overflow-y: auto;
	scroll-behavior: unset;
	display: flex;
	flex-direction: column;
}
#messenger {
	width: 100%;
	right: -100%;
}
#warenkorb {
	width: 23rem;
	right: -23rem;
}
/* Login-Sidebar: gleiche Breite wie Messenger */
#login-sidebar {
	width: 100%;
	right: -100%;
}
@media screen and (min-width: 500px) {
	#messenger {
		width: 23rem;
		right: -23rem;
	}
	.open-nav_messenger #messenger {
		transform: translateX(-23rem);
	}
	#login-sidebar {
		width: 23rem;
		right: -23rem;
	}
	.open-nav_login #login-sidebar {
		transform: translateX(-23rem);
	}
}

#right1 .inside,
#right2 .inside,
#messenger .inside,
#warenkorb .inside,
#login-sidebar .inside {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* body:before {
	position: fixed;
	top: 0;
	right: -13rem;
	width: 12.5rem;
	height: 4.5rem;
	content: '';
	z-index: 889;
	opacity: 0;
	background-image: linear-gradient(0deg, transparent, var(--basic-light) 30%);
	-webkit-mask-image: linear-gradient(0deg, transparent, var(--basic-light) 20%);
	mask-image: linear-gradient(0deg, transparent, var(--basic-light) 20%);
} */

.open-nav_main #right1,
.open-nav_account #right2 {
	transform: translateX(-13rem);
	opacity: 1;
}
.open-nav_warenkorb #warenkorb {
	transform: translateX(-23rem);
	opacity: 1;
}
.open-nav_messenger #messenger,
.open-nav_login #login-sidebar {
	transform: translateX(-100%);
	opacity: 1;
}

/* Ab 1750px quetschen Messenger und Warenkorb den #main-Bereich */
@media screen and (min-width: 1750px) {
	#right1, #right2, #messenger, #warenkorb, #login-sidebar {
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	#main {
		transition: margin-right 0.3s ease;
	}
	.open-nav_warenkorb #main,
	.open-nav_messenger #main {
		margin-right: 23rem;
	}
}

.navmenu,
.chat-bar {
	min-height: 1px;
	display: flex;
	flex-direction: column;
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	flex: 1;
}
.navmenu {
	padding-top: 4.5rem;
}

.navmenu a,
.navmenu strong {
	height: 2.25rem;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
}

.navmenu a:hover {
	transform: scale(101%);
}

.navmenu a:active {
	transform: scale(100%);
}

.navmenu strong {
	width: 100%;
	cursor: default;
}

.navmenu ul {
	list-style: none;
	padding-inline-start: 0;
	padding: var(--xs);
	display: grid;
	grid-auto-flow: row;
	gap: var(--xxs);
}

.navmenu li>*:before {
	margin-right: 0.4rem;

}

.navmenu .button_wrapper a.link {
	padding: 0 !important;
}





/* NAVIGATION Hauptmenü */

#nav_main .bibelschule>*:before {
	content: '\e90a';
}

#nav_main .israelreisen>*:before {
	content: '\e91a';
}

#nav_main .veranstaltungen>*:before {
	content: '\e936';
}

#nav_main li.gaestehaus>*:before {
	content: '\f0f2';
	font-size: 0.9em;
}

#nav_main .shop>*:before {
	content: '\e92f';
}

#nav_main .die-bmo>*:before {
	content: '\e90c';
}

#nav_main .freunde-werden>*:before {
	content: '\e915';
}





/* NAVIGATION Accountmenü */

/* Login-Sidebar: Formular-Styling */
#login-sidebar .mod_login {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 5rem var(--xs) var(--xs);
}

#login-sidebar .mod_login .box {
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	max-width: 100%;
	padding: 0;
}

#login-sidebar .mod_login input.text {
	width: 100%;
}

#login-sidebar .mod_login .widget-submit .submit {
	width: 100%;
	min-width: unset;
}

#login-sidebar .login-sidebar-error {
	padding: var(--xxs);
	border-radius: 0.25rem;
	font-size: 0.9rem;
}

#login-sidebar .login-sidebar-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	padding-top: 5rem;
}

#nav_account .dashboard>*:before {
	content: '\e902';
}

#nav_account .meinedaten>*:before {
	content: '\e922';
}

#nav_account .profil>*:before {
	content: '\e92c';
}

#nav_account .sekretariat>*:before {
	content: '\e922';
}

#nav_account .Bewerbung>*:before {
	content: '\a922';
}

#nav_account .stundenplan>*:before {
	content: '\e924';
}

h2.kurse:before,
#nav_account .kurse>*:before {
	content: '\a933';
}

#nav_account .aufgaben>*:before {
	content: '\e90e';
}

#nav_account .verwaltungstools>*:before {
	content: '\e922';
}

#nav_account .profile>*:before {
	content: '\e926';
}

#nav_account .notizen>*:before {
	content: '\e937';
}

#nav_account .beitraege>*:before {
	content: '\e907';
}

#nav_account .archiv>*:before {
	content: '\e90f';
}

#nav_account .bibliothek>*:before {
	content: '\e90b';
}

#nav_account .studienbegleiter>*:before {
	content: '\e935';
}

#nav_account .einstellungen>*:before {
	content: '\e93a';
}

#nav_account .logout>*:before {
	content: '\e91e';
}



/* NAVIGATION Schnellwahl */

#nav_fixed .logo a {
	background-image: url(../../files/core/logo/BMOlogo_farbe.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.dark-theme #nav_fixed .logo a {
	background-image: url(../../files/core/logo/logo_weiss.svg);
}

#nav_fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999 !important;
	height: 4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.75rem;
	/* Leerer Bereich der Nav ist durchklickbar; Kinder (Logo, Shortmenu usw.) bleiben aktiv */
	pointer-events: none;
}
#nav_fixed * {
	pointer-events: auto;
}

#main .inside:before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4rem;
	z-index: 777;
}

@media (min-width: 1700px) {
	#main .inside:before {
		display: none;
	}
}

#nav_fixed .shortmenu {
	display: grid;
	grid-auto-flow: column;
	gap: 0.5rem;
}

#nav_fixed a {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--fx-color-inverted);
	position: relative;
}

#nav_fixed .logo a {
	width: 7rem;
	height: 3rem;
}

#nav_fixed a.mbutton:before {
	content: '\e918'
}

#nav_fixed a.logout:before {
	content: '\e91e'
}

#nav_fixed a.account:before {
	content: '\e900'
}

#nav_fixed a.abutton:before {
	content: '\e900'
}

#nav_fixed a.shop:before {
	content: '\e939'
}

#nav_fixed a.pbutton:before {
	content: '\e934';
}

#nav_fixed .active {
	position: relative;
	font-family: 'bn_bold';
	font-size: 1.3rem;
	color: var(--white);
	background-color: var(--SO);
	border-radius: 50%;
}

#nav_fixed a.abutton.active:before {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 0.95rem;
	width: 0.95rem;
	content: '\e918';
	display: flex;
	justify-content: center;
	align-items: center;
}





/* NAVIGATION Footer */

#nav_footer {
	margin-top: auto;
	display: flex;
	width: 100%;
	height: 4rem;
	justify-content: center;
}

#nav_footer .channels {
	margin-bottom: 1rem;
}

#nav_footer ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#nav_footer li {
	margin-right: 1rem;
	display: flex;
	align-items: center;
}

#nav_footer li:last-child {
	margin-right: 0;
}

#nav_footer .channels a {
	margin-right: 0.75rem;
}

#nav_footer .channels a:last-of-type {
	margin-right: 0;
}

#nav_footer strong {
	cursor: default;
}





/* FORMULARE */

*:focus {
	outline: none;
}

.widget {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: wrap;
}

.widget div:not(.download-element *) {
	display: flex;
	flex-direction: column-reverse;
}

.widget .rating {
	display: flex;
	flex-direction: row;
}

.widget-submit {
	align-items: center;
	box-shadow: none;
	margin-bottom: 0;
	flex-wrap: wrap;
}

input.text,
input.chosen-search-input,
input.password,
input.date,
select {
	flex: 1 1 auto;
	height: 2rem;
	padding: 0 var(--xxs);
	padding-right: 0;
	min-width: 5rem;
	width: 100%;
	max-width: -webkit-fill-available;
}
input.chosen-search-input ul,
input.chosen-search-input li {
	list-style: none;
}

.texteditor,
textarea {
	width: 100%;
	min-width: calc(100% - 13rem);
	resize: vertical;
	min-height: 6rem;
	padding: var(--xxs);
}

.texteditor {
	padding: 0;
}

.texteditor textarea {
	display: none;
}

label,
legend {
	margin-top: 0.2rem;
	margin-bottom: 0;
	padding-left: 0.2rem;
}

.radio_container {
	margin-bottom: 0;
}

.radio_container .options_wrapper {
	margin-top: var(--xxs);
	display: flex;
	flex-direction: column;
}

.fieldset_wrapper {
	display: flex;
	min-height: 1.5rem;
	margin-bottom: var(--s);
}

.fieldset_wrapper>div {
	display: flex;
	width: 50%;
	max-width: 12rem;
	align-items: center;
}

fieldset {
	border: none;
}

fieldset input[type="radio"]+label,
fieldset input[type="checkbox"]+label,
.radio_container .options_wrapper label {
	font-size: inherit;
	text-transform: none;
	margin: 0;
}
label p {
	text-transform: none;
	font-size: 1rem;
}

.radio_container .options_wrapper span {
	margin-bottom: var(--s);
}

fieldset span {
	margin-right: var(--s);
}

.checkbox_container {
	margin-top: 0;
	margin-bottom: var(--xs);
}

.checkbox_container:first-of-type {
	margin-top: var(--s);
}

.checkbox_container:last-of-type {
	margin-bottom: var(--s);
}

.radio_container span,
.checkbox_container span {
	display: flex;
	align-items: center;
}

.radio_container label,
.checkbox_container label {
	margin: 0;
	width: auto;
	text-align: left;
}

.widget-submit {
	margin-top: 1rem;
}

input:disabled,
input:disabled+label,
textarea:disabled,
textarea:disabled+label {
	opacity: 0.5;
}

input[type='radio'],
input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* oder clip-path: inset(50%); */
}


input[type='radio']+label,
input[type='checkbox']+label {
	position: relative;
	padding-left: calc(1.2rem + var(--xs));
	cursor: pointer;
	min-height: 1.2rem;
	display: inline;
	align-items: center;
}

input[type='radio']+label:before,
input[type='checkbox']+label:before,
input[type='radio']+label:after,
input[type='checkbox']+label:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	width: 1.2rem;
	height: 1.2rem;
}

input[type='radio']+label:before,
input[type='checkbox']+label:before {
	background-color: var(--basic-light);
}

input[type='radio']+label:after,
input[type='checkbox']+label:after {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'icon';
	color: var(--IL);
}

input[type='radio']:checked+label:after {
	content: '\e938';
	font-size: 85%;
}

input[type='checkbox']:checked+label:after {
	content: '\e90e';
}

.rating-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s);
	margin-bottom: var(--s);
}

@media (min-width: 24rem) {
	.rating-fields {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 35rem) {
	.rating-fields {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 46rem) {
	.rating-fields {
		grid-template-columns: repeat(4, 1fr);
	}
}

.widget-rating {
	margin-bottom: var(--xxs);
	max-width: 10rem;
	grid-column: auto;
	flex-direction: column;
	flex-wrap: nowrap;
}

.widget .rating {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	flex-direction: row!important;
}

.rating span {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 0;
}

.rating input[type='radio']+label {
	position: relative;
	cursor: pointer;
	height: 1.6rem;
	width: 1.6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.rating input[type='radio']:checked+label:before,
.rating input[type='radio']+label:before {
	background-color: transparent;
}

.rating input[type='radio']+label:after {
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	width: 100%;
	content: '\a960';
	/* Sternsymbol */
	color: var(--basic-light);
	/* Grauer Stern für nicht ausgewählte */
	font-size: 1.6rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Orange für die Sterne mit der 'checked'-Klasse */
.rating input[type="radio"]:hover+label:after,
.rating input[type='radio']+label.checked:after {
	color: var(--BW);
	/* Orange für den aktuell ausgewählten Stern */
	font-size: 1.6rem;
	transition: 0.5s ease-in-out;
}

.widget-yesno {
	pointer-events: all;
}
.widget-yesno p {
	display: flex;
	align-items: center;
	cursor: default;
}
.widget-yesno>div>div {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.widget-yesno label {
	display: flex!important;
	min-width: 2.6rem;
	height: 2rem;
	width: 2.6rem;
	margin: auto;
	padding: 0;
	padding-left: 0!important;
	pointer-events: all;
	background-color: var(--basic-light);
	color: var(--SO);
}
.widget-yesno:has(input:checked) {
	pointer-events: all!important;
}
.widget-yesno label::before,
.widget-yesno label::after {
	display: none!important;
}
.widget-yesno input[value='yes']+label {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.widget-yesno input[value='no']+label {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.widget-yesno input:checked+label {
	transform: none;
	filter: drop-shadow(0 0.1rem 0.125rem rgba(51, 51, 51, 0.2));
	cursor: default!important;
}
.widget-yesno input:checked+label,
.widget-yesno label:hover {
	background-color: var(--IL);
	color: var(--white);
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: relative;
}
.switch-label input[type="checkbox"] {
  display: none;
}
.switch-label .slider {
  width: 2.2rem;
  height: 1.2rem;
  background-color: var(--SO);
  border-radius: 1rem;
  position: relative;
  transition: background 0.3s;
}
.switch-label .slider::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--white);
  left: 0.1rem;
  top: 0.1rem;
  transition: transform 0.3s;
}
.switch-label input:checked ~ .slider {
  background-color: var(--IL);
}
.switch-label input:checked ~ .slider::before {
  transform: translateX(1rem);
}
.slider-text {
  font-family: 'bn_bold';
  font-size: 0.85rem;
  opacity: 0.8;
}
.switch-label input:checked ~ .slider-text {
  opacity: 1;
}





/* MODAL */

.modal {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 556;
	padding: var(--s) var(--xs);
	padding-top: 5rem;
	padding-bottom: 5rem;
	overflow-y: auto;
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	opacity: 0;
	transform: translateY(100vh) scale(0.5);
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.modal-content {
	width: 100%;
	max-width: 60rem;
	margin: auto;
	transform-origin: center;
	position: relative;
}

.modal-content.box {
	padding: 0!important;
}

.modal-content .modal-header {
	padding: var(--xs);
	padding-bottom: 0;
	font-family: 'bn_bold';
	font-size: 1.3rem;
	display: flex;
	justify-content: space-between;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.modal-content .modal-box {
	padding: var(--xxs);
}

.task-modules {
	display: flex;
	flex-direction: column;
	gap: var(--xs);
}

.modal.modal-show {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.modal.modal-show .modal-content {
	animation: scaleContent 0.3s ease-in-out forwards;
}

.btn-close-x {
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes scaleContent {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}

.modal.modal-show {
	animation: moveUp 0.3s ease-in-out forwards, changeBackground 0.2s ease-in-out 0.1s forwards;
}

@keyframes moveUp {
	0% {
		transform: translateY(100vh) scale(0.5);
	}

	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes changeBackground {
	0% {
		background-color: transparent;
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
	}

	100% {
		background-color: hsla(0, 0%, 97%, 0.5);
		-webkit-backdrop-filter: blur(0.5rem);
		backdrop-filter: blur(0.5rem);
	}
}

.dark-theme .modal.modal-show {
	animation: changeDarkBackground 0.2s ease-in-out 0.1s forwards;
}

@keyframes changeDarkBackground {
	0% {
		background-color: transparent;
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
	}

	100% {
		background-color: hsla(0, 0%, 3%, 0.7);
		-webkit-backdrop-filter: blur(0.5rem);
		backdrop-filter: blur(0.5rem);
	}
}

.modal:not(.modal-show) {
	transition-duration: 0.1s;
}

.modal:not(.modal-show) .modal-content {
	animation: scaleDownContent 0.3s ease-in-out forwards;
}

@keyframes scaleDownContent {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

.modal:not(.modal-show) {
	animation: moveDown 0.3s ease-in-out forwards;
}

@keyframes moveDown {
	0% {
		transform: translateY(0) scale(1);
	}

	100% {
		transform: translateY(100vh) scale(0.5);
	}
}

body.modal-open {
	overflow: hidden;
}



/* OPERATOR */

.operatorbar-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 555;
	margin: 0 !important;
	border-radius: 0 !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: var(--basic-dark);
	opacity: 0;
}

.operatorbar,
.notification {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	gap: 0.5rem;
	align-items: center;
	border-radius: 0 !important;
	border-top-left-radius: 0.5rem !important;
	border-top-right-radius: 0.5rem !important;
}

.operatorbar {
	background-color: var(--basic-light) !important;
	max-width: none !important;
}

.dark-theme .operatorbar-wrapper {
	background-color: var(--light);
}

.operatorbar button {
	height: 2.5rem;
	width: 2.5rem;
	min-width: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.5rem;
	padding: 0;
	font-family: 'icon';
	font-size: 1.6rem;
	background-color: transparent;
	color: var(--accent-light) !important;
	filter: none !important;
	transform: none !important;
	position: relative;
}

.operatorbar button:hover {
	color: var(--accent) !important;
	filter: none !important;
	transform: none !important;
}

.notification {
	justify-content: center;
	align-items: center;
	font-family: 'ss_semibold';
	color: var(--white) !important;
}

#openModalButton::before {
	content: '\e94d';
}

#multiSelectButton::before {
	content: '\e94f';
}

#allSelectButton::before {
	content: '\e91b';
}

.edit-mode-active.toggle-select-active #toggleSelectButton::before,
#toggleSelectButton::before {
	content: '\e951';
}

.edit-mode-active #toggleSelectButton::before,
.toggle-select-active #toggleSelectButton::before {
	content: '\e91b';
}

#showLabelButton::before {
	content: '\e909';
}

#createNewDateButton::before {
	content: '\e923';
}

#showLabelButton::after,
#printLabelButton::after {
	font-family: 'bn_bold';
	background-color: var(--PT);
	color: var(--light);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1.125rem;
	min-width: 1.125rem;
	font-size: 0.75rem;
	content: attr(data-count);
	position: absolute;
	right: 0.2rem;
	bottom: 0.2rem;
	transition: 0.3s ease-in-out;
	border: 1px solid var(--basic-light);
}

#printLabelButton:hover::after,
#showLabelButton:hover::after {
	background-color: var(--IT);
}

#printLabelButton::before {
	content: '\e952';
}

#toggleEditModeButton::before,
#editButton::before,
button.button_edit::before {
	content: '\e937';
}

.button_addToLabellist::before,
#selectedAddedToLabellistButton::before {
	content: '\e95c';
}

.button_addToLabellist.item-on-labellist::before {
	content: '\e95d';
	color: var(--ST);
}

#clearButton::before {
	content: '\e928';
}

#deleteFromLabellistButton::before,
#deleteButton::before,
#selectedDeleteButton::before,
button.button_delete::before {
	content: '\f014';
}

#openModalButton,
#selectedEditLabelButton {
	color: var(--IL);
}

button[disabled],
#selectedAddedToLabellistButton,
#selectedDeleteButton,
#printLabelButton,
#deleteFromLabellistButton,
#showLabelButton[data-count="0"] {
	opacity: 0.5;
	cursor: default !important;
}

.items-selected #selectedAddedToLabellistButton,
.items-selected #selectedDeleteButton,
.items-selected #printLabelButton,
.items-selected #deleteFromLabellistButton,
#showLabelButton:not([data-count="0"]) {
	opacity: 1;
	cursor: pointer !important;
}

@media (min-width: 800px) {
	.operatorbar {
		gap: var(--s);
		justify-content: center;
	}
}

.bar.tt .smallbutton,
.bar.tt .smallbutton:hover {
	font-size: 1rem;
	padding: 0 0.3rem;
	min-width: auto;
}

/* Dropdown Container */
.operator-dropdown {
    position: relative;
    display: inline-block;
}

/* Zentrale Rollen-Definitionen (Icons + Hintergrundfarben an einer Stelle) */

/* Default-Werte (Fallback) */
:root {
	--role-icon: '\e900';
	--role-bg: var(--basic-light);
}

/* Rollen-spezifische Variablen (apply to the element that carries data-view) */
.operatorbar button.dropdown-trigger[data-view="leader"],
.dropdown-item[data-view="leader"] {
	--role-icon: '\e976';
	--role-bg: var(--operatorColor);
}

.operatorbar button.dropdown-trigger[data-view="participant_active"],
.dropdown-item[data-view="participant_active"] {
	--role-icon: '\e900';
	--role-bg: var(--BW);
}

.operatorbar button.dropdown-trigger[data-view="participant_passive"],
.dropdown-item[data-view="participant_passive"] {
	--role-icon: '\e900';
	--role-bg: var(--IL);
}

.operatorbar button.dropdown-trigger[data-view="participant_autonomous"],
.dropdown-item[data-view="participant_autonomous"] {
	--role-icon: '\e900';
	--role-bg: var(--ST);
}

.operatorbar button.dropdown-trigger[data-view="edit"],
.dropdown-item[data-view="edit"] {
	--role-icon: '\e937';
	--role-bg: var(--operatorColor);
}

/* Gemeinsame Darstellung, verwendet die oben gesetzten Variablen */
.operatorbar button.dropdown-trigger::after {
	font-family: 'icon';
	content: var(--role-icon);
	background-color: var(--role-bg);
	color: var(--white);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1.125rem;
	min-width: 1.125rem;
	font-size: 0.75rem;
	position: absolute;
	right: 0.2rem;
	bottom: 0.2rem;
	transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.operatorbar button.dropdown-trigger:hover::after {
	transform: scale(1.1);
}

/* Dropdown Menu */
.dropdown-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 1rem);
    background: var(--basic-light);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    width: 16rem;
    z-index: 1000;
    overflow: hidden;
		left: 50%;
    transform: translateX(-50%);
}

.operator-dropdown.open .dropdown-menu {
    display: block;
    animation: slideUpFadeIn 0.2s ease;
}

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Dropdown Items */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--xxs);
    width: 100%;
    padding: var(--xxs) var(--xs);
    background: transparent;
    border: none;
    color: var(--IL);
    font-family: 'typewriter';
    font-size: 1.1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    height: auto;
    min-width: auto;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--second-light);
}

.dropdown-item.active {
    background: var(--second-light);
		cursor: default;
		color: var(--accent)
}

.dark-theme .dropdown-item {
    border-bottom-color: var(--medium);
}

.dark-theme .dropdown-item:hover {
    background: var(--medium);
}

/* Dropdown-Item/Icon-Nutzung über die gleichen Variablen */
.dropdown-item  .item-badge::before {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'icon';
	font-size: 0.85rem;
	color: var(--white);
	flex-shrink: 0;
	width: 1.2rem;
	height: 1.2rem;
	text-align: center;
	content: var(--role-icon);
}

/* Badge-Farbe für Item-Badge aus der zentralen Variable */
.dropdown-item .item-badge {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: var(--role-bg);
	margin-right: var(--xxs);
}

/* Spezielle Button-Icons für Event-Operator */
#viewSwitcherButton::before {
    content: '\e95a'; /* visibility/eye */
}

#addDateButton::before {
    content: '\e923'; /* event/calendar */
}

#editModeButton::before {
    content: '\e937'; /* edit */
}

#settingsButton::before {
    content: '\e93a'; /* settings */
}

#exportDataButton::before {
    content: '\e9c7'; /* download */
}

#addTaskButton::before {
    content: '\e90e'; /* assignment */
}

#addCriterionButton::before {
    content: '\e99e'; /* grade */
}

#addContentButton::before {
    content: '\e92b'; /* add_box */
}

#uploadFileButton::before {
    content: '\e9c8'; /* upload */
}

/* Button States */
#editModeButton.active {
    color: var(--ST) !important;
}

/* Notification Styles (falls noch nicht vorhanden) */
.operator-notification {
    position: fixed;
    bottom: calc(2.5rem + 1rem);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: var(--xs) var(--s);
    border-radius: 0.5rem;
    font-family: 'ss_semibold';
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
    white-space: nowrap;
}

.operator-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.operator-notification.code-green {
    background-color: var(--PT);
    color: var(--light);
}

.operator-notification.code-red {
    background-color: var(--ST);
    color: var(--light);
}

.operator-notification.code-blue {
    background-color: var(--IL);
    color: var(--light);
}

.operator-notification.code-orange {
    background-color: var(--BW);
    color: var(--light);
}

/* Bearbeitungsmodus Styles */
body.edit-mode-active .editable-section {
    position: relative;
    outline: 2px dashed var(--accent-light);
    outline-offset: 4px;
    transition: outline 0.2s ease;
}

body.edit-mode-active .editable-section:hover {
    outline-color: var(--accent);
}

body.edit-mode-active .edit-button {
    display: inline-flex !important;
}

.edit-button {
    display: none;
}






/* STARTSEITE */

#welcome .textblock {
	text-align: center;
	display: none;
}

#welcome h1 {
	margin-bottom: var(--m);
	font-size: 1.8vw;
}

#welcome h1 span {
	line-height: 100%;
}

#welcome h1 .column1 {
	font-size: 6.7em;
	line-height: 85%;
}

#welcome h1 .column2 {
	font-size: 3.4em;
}

#welcome h1 .column3 {
	font-size: 2.2em;
}

#welcome .textblock p {
	display: none;
}

#welcome .card-btn a {
	color: transparent;
	font-size: 1px;
	height: 100%;
	width: 100%;
}

#welcome .card-ausbildung {
	background-image: url('../../files/core/images/bg-bibelschule.webp');
}

#welcome .card-israelreisen {
	background-image: url('../../files/core/images/bg-israelreisen.webp');
}

#welcome .card-gaestehaus {
	background-image: url('../../files/core/images/bg-gaestehaus.webp');
}

#welcome .card-bmo {
	background-image: url('../../files/core/images/bg-bmo.webp');
}

#start-events .grid-header:before {
	content: '\e936';
}

@media (orientation: landscape) and (max-width: 799px) {
	#welcome .limited {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media (min-width: 800px) {
	#welcome .textblock {
		margin-right: 1rem;
		text-align: right;
		display: block;
	}
}

@media (min-width: 1332px) {
	#welcome .textblock p {
		display: block;
	}

	#welcome h1 {
		font-size: 1rem;
	}
}





/* LOGIN */

body.login .mod_article,
body.passwort .mod_article,
.login_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 8.5rem); 
	width: 100%;
	padding-bottom: 10vh;
}

.cover {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

body.login .mod_article {
	margin-bottom: 0 !important;
	justify-content: flex-start;
}

.mod_login,
.mod_lostPassword,
.mod_lostPasswordNotificationCenter {
	width: 100%;
	max-width: 30rem;
	justify-self: center;
}
#dynamicContent .mod_login {
	max-width: none;
}
.box .box-area .box .box-area {
	padding: 0;
}

.mod_login h1 {
	text-align: center;
	margin-bottom: var(--s);
}





/* BIBELSCHULE */

.bibelschule .ausbildungsprogramme .profilbox {
	padding-top: var(--xs);
	margin-top: 0;
}

.bibelschule .ausbildungsprogramme .profilbox figure {
	top: 0.75rem;
	left: 0.4rem;
	right: auto;
	width: var(--profile-img);
	height: var(--profile-img);
	max-width: 5rem;
	max-height: 5rem;
	margin-bottom: 0;
}

.bibelschule .ausbildungsprogramme .profilbox_header {
	text-align: left;
	padding-left: 6rem;
	min-height: 5rem;
	justify-content: center;
	display: flex;
	flex-direction: column;
	margin-right: auto;
}

.bewerbung figure {
	width: var(--profile-img);
	height: var(--profile-img);
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--xs);
}

.bewerbungsformular .grid-2_1 {
	width: 100%;
}

.bewerbungsformular .eventheader {
	margin-bottom: 0;
}

#application_form-program figure {
	width: 3rem;
	height: 3rem;
}

.progress-percentage {
	font-family: 'bn_bold'; 
	font-size: 0.9rem;
	color: var(--light);
	display: none;
	margin-right: 0.5rem;
	width: 1.11rem;
	height: 1.11rem;
	border-radius: 50%;
	background: linear-gradient(90deg, var(--PT) 0%, var(--PT) var(--progress-percentage), var(--fx-color) var(--progress-percentage), var(--fx-color) 100%);
	justify-content: center;
	align-items: center;
}

.progress-percentage {
	display: flex;
}

.bewerbungsformular .checked .progress-percentage {
	display: none;
}

.bewerbungsformular .checked .box-title::before {
	content: "\e942";
}

#application_form-program,
#attendanceType,
.selectfield-wrapper {
	display: flex;
	flex-direction: row;
	border-radius: 0.5rem;
	overflow: hidden;
	flex-wrap: wrap;
}
.selectfield-wrapper .widget-radio label {
	display: flex;
	flex-direction: column;
	padding: 0;
}
.selectfield input+label {
	padding-left: 0;
}
.selectfield.box {
	transition: 0.3s ease-in-out;
	background-color: transparent;
	border-radius: 0;
	min-height: 2.5rem;
	width: auto;
	flex: 1;
}
.selectfield.box * {
	color: var(--white);
	line-height: 1;
	text-align: center;
}
.selectfield.box strong,
.selectfield.box h3 {
	font-family: 'bn_bold';
}
.selectfield.box strong {
	font-size: 1.2rem;
}
.widget.selectfield,
.widget.selectfield div {
	flex-direction: column;
	justify-content: center;
}
.selectfield:has(input:checked),
.widget-radio:has(input:checked),
.widget-checkbox:has(input:checked) {
	cursor: default!important;
}

.selectfield:has(input:checked),
.widget-radio:has(input:checked) {
	pointer-events: none;
}
.selectfield .image_wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: var(--xxs);
}	

label h3 {
	margin: 0;    
	line-height: 1;
  align-items: center;
  display: flex;
}
fieldset label span {
	margin-right: var(--xxs);
}

label::before,
label::after {
	margin-top: auto;
	margin-bottom: auto;
}

.selectfield label::before,
.selectfield label::after,
.selectfield:has(input:checked) label::before,
.selectfield:has(input:checked) label::after {
	display: none!important;
}

.selectfield:has(input:checked),
.selectfield:hover {
	background-color: var(--IL)!important;
	color: var(--white)!important;
}
.selectfield-wrapper:has(.selectfield:hover) .selectfield:has(input:checked):not(:hover) {
	background-color: var(--PD)!important;
}
.selectfield:has(input:checked) *,
.selectfield:hover * {
	color: var(--white)!important;
}

section.ce_accordion {
	z-index: 1;
}

section.ce_accordion.active {
	z-index: 2;
}

.progress-bar {
	position: relative;
	background: var(--fx-color);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: background-size 0.3s ease, filter 0.3s ease;
}
#application_progress {
	min-height: 2rem;
}
.progress-bar.active {
	background: var(--highlight);
}

.progress-bar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	opacity: calc(var(--progress-percentage) + 5%)!important;
	width: calc(var(--progress-percentage) * 1%);
	background: var(--PT);
	transition: width 0.3s ease;
	filter: saturate(calc(var(--progress-percentage) / 100));
}
.tt .progress-bar::before {
	background: var(--SO);
}
.tt.active .progress-bar {
	background: var(--highlight);
}
.tt.active .progress-bar::before {
	background: var(--SO);
	filter: none;
}
.tt.next .bar_pre {
	background: var(--ST);
}
#state_check,
.state_check {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	font-family: 'bn_bold';
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.active .state_check.top {
  z-index: 2;
	clip-path: inset(0 100% 0 0); /* Start: alles sichtbar */
  transition: clip-path 0.3s linear;
}
.active .state_check.bottom {
	color: var(--black);
  z-index: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.3s linear;
}

.today .box-header span {
	font-family: 'bn_bold';
	font-size: 0.85rem;
	color: var(--white);
	padding: 0 0.5rem;
	height: 1.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--PD);
	border-radius: 0.25rem;
}
#header-messages {
	margin-left: auto;
	display: flex;
	gap: var(--xxs);
}

.progress-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1rem;
	height: 1rem;
	margin: auto;
	border: 2px solid var(--white);
	border-top-color: var(--second-light);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes nudge {

	0%,
	8% {
		transform: translateX(0);
		/* Ausgangsposition */
	}

	4% {
		transform: translateX(10px);
		/* Erste Bewegung nach rechts */
	}

	12% {
		transform: translateX(10px);
		/* Zweite Bewegung nach rechts */
	}

	16% {
		transform: translateX(0);
		/* Zurück zur Ausgangsposition */
	}

	100% {
		transform: translateX(0);
		/* Bleibt in der Ausgangsposition (Pause) */
	}
}

.nudge {
	animation: nudge 8s ease-in-out infinite;
}

.progress-bar .progress-filled {
	height: 100%;
	background: var(--PT);
	transition: width 0.3s ease;
}

@media (min-width: 480px) {
	.bibelschule .ausbildungsprogramme.grid-3x1 {
		grid-template-columns: 1fr;
	}

	.bibelschule .ausbildungsprogramme.grid-3x1 .grid-span {
		grid-column: 1 / 2;

	}
}

@media (min-width: 660px) {
	.bibelschule .ausbildungsprogramme.grid-3x1 {
		grid-template-columns: 1fr 1fr;
	}

	.bibelschule .ausbildungsprogramme.grid-3x1 .grid-span {
		grid-column: 1 / 3;

	}
}

@media (min-width: 1024px) {
	.bibelschule .ausbildungsprogramme.grid-3x1 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.bibelschule .ausbildungsprogramme.grid-3x1 .grid-span {
		grid-column: 1 / 4;

	}

	.bibelschule .ausbildungsprogramme .profilbox {
		margin-top: calc(var(--profile-img) / 2);
		padding-top: calc(var(--profile-img) / 2 + 0.75rem);
	}

	.bibelschule .ausbildungsprogramme .profilbox figure {
		top: calc(var(--profile-img) / 2 * -1);
		max-width: none;
		max-height: none;
		left: 0;
		right: 0;
		margin-bottom: 0;
	}

	.bibelschule .ausbildungsprogramme .profilbox_header {
		text-align: center;
		padding-left: 0;
		min-height: 0;
		justify-content: center;
		display: flex;
		flex-direction: column;
		margin-right: 0;
	}
}





/* DASHBOARD */

#eventHeader:before {
	content: '\e936';
}

#seminaryheader:before {
	content: '\e90a';
}

#feedHeader:before {
	content: '\e935';
}

#dailyVerse h2:before {
	content: '\e90a';
}

.feedItem .grid-1_1 {
	grid-template-columns: 1fr 1fr;
	min-width: auto;
}

.newInEvents .box-title:before {
	content: '\e936';
}

.newInNews .box-title:before {
	content: '\e907';
}

.newInLibrary .box-title:before {
	content: '\e90b';
}

.newInArchiv .box-title:before {
	content: '\e90f';
}

.hasContent {
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0.1rem var(--xs);
}
.hasContent h2 {
	text-align: center;
	margin-bottom: 0.25vw;
}
.hasContent span {
	display: flex;
	align-items: center;
	justify-content: center;
}


/* STUNDENPLAN */

.tt .bar_pre {
	font-size: 0.85rem;
	line-height: 1rem;
}

.tt .bar_pre::before {
	position: absolute;
	left: 0;
	width: 2.5rem;
	height: 100%;
	content: '-';
	display: flex;
	justify-content: center;
	align-items: center;
}



/* BEITRÄGE */

.newInNews,
.newInNews .box-area {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

.newInNews .box-title {
	display: none;
}

.newInNews-item {
	aspect-ratio: 1 / 1;
	filter: none !important;
	transform: none !important;
	cursor: default;
	background-color: transparent !important;
}

.newInNews-item:hover {
	filter: none !important;
	transform: none !important;
}

.newInNews-item .slick,
.newInNews-item.slick {
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	min-width: auto;
	max-width: none;
	margin-bottom: 0 !important;
}

.newInNews-item .slick-list {
	-webkit-mask-image: none;
	mask-image: none;
	padding: 0 !important;
	height: 100%;
	width: 100%;
}

.newInNews-item .slick-track {
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0 !important;
}

.newInNews-item .slick-dots {
	bottom: 0.5rem;
	z-index: 99;
	font-size: 1.5rem;
}

.imgCount_1 .slick-dots {
	display: none;
}

.newInNews-item .slick-dots li {
	margin: 0;
	height: 1.5rem;
}

.newInNews-item .slick-dots li button {
	padding: 0;
	height: 1.5rem;
}

.newInNews-item .slick-dots li button:before {
	font-size: 1.5rem;
	height: 1.5rem;
}

.newInNews-item .slick-slide {
	height: 100%;
	max-height: 100%;
	width: 100% !important;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
}

.news_card-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: contain;
	width: inherit !important;
	height: inherit !important;
	max-width: 100%;
	max-height: 100%;
	z-index: 88;
	margin: auto;
}

.news_card-image-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	background-size: cover;
	background-position: center center;
	z-index: 77;
	filter: blur(1rem) opacity(0.75);
	transform: scale(1.1);
}

.newInNews .box-footer {
	padding-left: var(--xs);
	padding-right: var(--xs);
	word-wrap: break-word;
}





/* BIBLIOTHEK */

/* Vor Release unbedingt entfernen */
.bibliothek #nav_fixed,
.bibliothek #nav_footer,
.bibliothek #detailsBorrowMediaButton {
	display: none;
}
.medialist .card {
	aspect-ratio: auto;
	position: relative;
	justify-content: space-between;
	background-color: var(--white);
	color: hsl(0, 0%, 37%);
	cursor: pointer;
}

.newInLibrary-item {
	justify-content: space-between;
}

.medialist .top {
	padding: var(--xs);
	min-height: 8rem;
}

.newInLibrary-item .top {
	padding: var(--xxs);
}

.newInLibrary-item .top,
.newInLibrary-item .bottom {
	width: 100%;
}

.medialist .bar_pre {
	width: 1.75rem !important;
	font-size: 0.75rem;
	font-family: 'sc_regular';
	text-align: center;
}

.medialist .bar_pre span {
	transform: rotate(-90deg);
	white-space: nowrap;
}

.medialist .bar_main {
	padding: 0;
	justify-content: flex-start;
}

.medialist .bar_main .bar_name {
	font-size: 1.15rem;
	margin-top: 0.25rem;
}

.medialist .bar_main .subtitle {
	font-family: 'ss_regular';
	font-weight: normal;
	font-size: 0.9rem;
	line-height: 100%;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.bar_info {
	display: flex;
	gap: var(--xxs);
}
.medialist .bar_info {
	margin-top: 0;
}

.medialist .publish-info {
	font-size: 0.65rem;
}

.newInLibrary-item .bottom,
.medialist .bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: hsl(0, 0%, 97%);
	padding: 0;
}

.button_wrapper.operator_buttons {
	margin-right: var(--xs);
	flex-wrap: nowrap;
	gap: 0;
	font-size: 0.9rem;
}

.medialist .bottom a {
	width: auto;
	text-align: center;
}

.button_wrapper.operator_buttons button {
	color: hsl(0, 0%, 65%);
}

.button_wrapper.operator_buttons button:hover {
	color: hsl(0, 0%, 44%);
}

.button_borrow,
.button_return {
	transition: 0.3s ease-in-out;
}

.button_borrow {
	background-color: var(--PT);
}

.button_borrow::before,
.button_return::before {
	font-family: 'icon';
}

.button_borrow::before {
	content: '\e94b';
}

.button_return::before {
	content: '\e94e';
}

#detailsBorrowMediaButton,
#detailsBorrowMediaButton:hover,
#detailsReturnMediaButton,
#detailsReturnMediaButton:hover {
	color: var(--white);
}

#detailsBorrowMediaButton::after {
	content: 'ausleihen';
	margin-left: 0.25rem;
}

#detailsReturnMediaButton::after {
	content: 'zurückgeben';
	margin-left: 0.25rem;
}

.button_wrapper.operator_buttons button,
.button_wrapper.operator_buttons button:hover {
	background-color: transparent !important;
	filter: none !important;
	transform: none !important;
	font-size: 1.4rem;
}

.button_wrapper.operator_buttons .button_edit,
.button_wrapper.operator_buttons .button_addToLabellist,
.button_wrapper.operator_buttons .button_delete {
	display: none;
}

.edit-mode-active .button_wrapper.operator_buttons .button_return,
.edit-mode-active .button_wrapper.operator_buttons .button_borrow,
.edit-mode-active .medialist .bottom .flag.borrowed {
	display: none;
}

.edit-mode-active .button_wrapper.operator_buttons .button_edit,
.edit-mode-active .button_wrapper.operator_buttons .button_addToLabellist,
.edit-mode-active .button_wrapper.operator_buttons .button_delete {
	display: flex;
}

@media (pointer: fine) {
	.button_wrapper.operator_buttons .button_borrow {
		opacity: 0;
	}

	.button_wrapper.operator_buttons .button_return,
	.card:hover  .button_wrapper.operator_buttons .button_borrow {
		opacity: 1;
	}
}

.medialist .flags {
	margin: var(--xs);
}

.medialist .widget-checkbox {
	position: absolute;
	top: var(--xs);
	right: var(--xs);
}

.operator_buttons .operator_checkbox label:before,
.medialist .widget-checkbox label:before {
	background-color: hsl(0, 0%, 92%);
}
.operator_checkbox {
	display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  padding-left: 0.5rem;
  padding-bottom: 0.15rem;
}

.flags {
	display: flex;
	flex-direction: row;
	font-size: 0.9rem;
	font-family: 'bn_bold';
	flex-wrap: wrap;
	gap: 0.25rem;
}

.flag {
	height: 1.2rem;
	padding: 0.15rem 0.4rem;
	display: inline-flex;
	align-items: center;
	line-height: 1rem;
	border-radius: 0.2rem;
	background-color: var(--SO);
	color: var(--white);
	white-space: nowrap;
}

.flag::before {
	font-family: 'icon';
	margin-right: 0.15rem;
}

.flag--archive {
	background-color: var(--fx-color);
	gap: 0.25rem;
}
.flag--archive i {
	font-size: 0.8em;
}

.flag.signature {
	font-family: 'sc_regular';
	font-size: 0.8rem;
}

.flag.location {
	font-family: 'bn_bold';
	gap: 0.125rem;
	padding: 0.15rem 0.2rem;
	background-color: transparent;
	overflow: hidden;
}

.flag.location span {
	height: 99.5%;
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	border-radius: 0.1rem;
}

.flag.location span:not(:first-child) {
	background-color: hsla(0, 0%, 100%, 0.25);
}

.flag.dateAdded {
	padding: 0.15rem 0.3rem;
	padding-left: 0.2rem;
}

.flag.dateAdded::before {
	content: "\e92b";
	font-size: 0.65rem;
	margin-right: 0;
}
.holiday-flags {
	display: flex;
	gap: 0.15rem var(--xxs);
}
.flag.holiday,
.flag.specialDay,
.flag.jewishHoliday,
.flag.birthday {
	font-size: 0.85rem;
	font-family: 'bn_bold';
}
el .flag.holiday {
	background-color:var(--ST); 
}
el .flag.specialDay {
	background-color: var(--BW);
}
el .flag.jewishHoliday {
	background-color: var(--IL);
}
el .flag.birthday {
	background-color: var(--IT);
}
span.flag {
	cursor: default;
}

.medialist .card .operatortools,
.medialist .card .button_wrapper {
	display: flex;
}

.medialist .card .widget-checkbox {
	display: none;
	width: auto;
}

.multi-select-active .medialist .card .button_wrapper .button_borrow,
.multi-select-active .medialist .card .button_wrapper .button_return {
	display: none;
}

.multi-select-active .medialist .card .widget-checkbox {
	display: flex;
}

.datatable {
	gap: var(--xxs);
}
.datatable.box {
	padding: 0;
}
.datatable .column {
	display: grid;
	grid-template-columns: 9rem auto;
	gap: 0.25rem;
	align-items: center;
}
.datatable label {
	overflow: hidden;
}

#mediadetails .memberbox {
	display: none;
}

.mediadetails label {
	display: flex;
	align-items: center;
}

.mediadetails .title div {
	font-family: 'ss_semibold';
	font-size: 1.25rem;
}

.mediadetails .subtitle div {
	font-size: 1.125rem;
}

@media screen and (min-width: 800px) {
	.datatable .column {
		display: grid;
		grid-template-columns: 14rem auto;
		gap: 0.25rem;
	}
}

#coverImage {
	background-color: var(--basic-dark);
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	text-align: center;
	font-family: 'bn_bold';
	color: var(--basic);
}

#coverImage img {
	object-fit: contain;
}

.eventheader .title {
	margin-bottom: 0;
	margin-top: 0.25rem;
}

.eventheader .subtitle {
	font-size: 1.125rem;
}

#registration-deadline-text {
	font-size: 1rem;
	font-family: 'bn_regular'!important;
	margin-left: 0.25rem;
}


.handorgel__header__button {
	-webkit-user-select: none;
	user-select: none;
}

.dropzone {
	border: 0.15rem dashed var(--accent-light);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	text-align: center;
	cursor: pointer;
	min-height: 2.5rem;
}

.file-preview {
	display: none;
	position: relative;
}

.file-preview img {
	max-width: 100px;
	max-height: 100px;
}

.file-preview .success-icon {
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--PW);
	color: white;
	border-radius: 50%;
	padding: 5px;
	font-size: 14px;
}

.avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%!important;
	height: 10rem;
	width: 10rem;
	background-color: var(--PD);
}
.avatar img {
	border-radius: 50%!important;
	object-fit: cover;
	overflow: hidden!important;
	display: block;
}


.mod_lostPasswordNotificationCenter input[name="username"],
.mod_lostPasswordNotificationCenter label[for="ctrl_username"] {
	display: none;
}

.eventhint {
	background-color: var(--BW);
	color: var(--white);
	padding: 0.05rem 0.2rem 0;
	border-radius: 0.2rem;
	display: inline-block;
	max-width: 10rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	top: 0.85rem;
	right: 2.75rem;
}
#search-container {
	z-index: 99;
}
#results {
	z-index: 1;
}

.meta {
	font-size: 0.8rem;
}


/* ========================================================================
   Content Element Manager Styles
   ======================================================================== */

/* Checkboxen - verfügbar auch ohne EditMode */
.has-checkbox {
  padding-left: 3rem;
}
.participant-item.has-checkbox {
	padding-left: 2.3rem;
}
.element-checkbox {
  display: none;
  position: absolute;
  top: 0;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	justify-content: center;
	align-items: center;
	background: var(--operatorColor);
  z-index: 100;
	border-radius: 0.5rem 0 0  0.5rem;
}
.has-checkbox .element-checkbox {
  display: flex;
}
.element-checkbox:hover {
	background: var(--operatorColor);
}
.element-checkbox input[type="checkbox"]+label {
	width: 1.2rem; 
  padding-left: 1.25rem;
	margin-top: 0;
}

/* Controlbuttons */
.element-controls {
  display: none;
}
body.edit-mode-active .has-controls {
  padding-right: 2rem;
}
body.edit-mode-active .element-controls {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  z-index: 100;
  border-radius: 0 0.5rem 0.5rem 0;
  overflow: hidden;
  background: var(--operatorColor);
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  transition: width 0.2s ease-in-out, backdrop-filter 0.2s ease-in-out, padding 0.2s ease-in-out;
}
/* Sichtbarer Zustand des Panels */
body.edit-mode-active .controls-active .element-controls {
  width: 12rem;
  padding-left: 1.7rem;
  padding-right: 0.5rem;
}
body.edit-mode-active .vertical-layout.controls-active .element-controls {
	width: 4.75rem;
}
/* Toggle-Button */
body.edit-mode-active .element-controls .controls-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'icon';
  color: var(--white);
  position: absolute;
  top: 0;
  left: -1.5rem;
  bottom: 0;
  width: 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--operatorColor);
  z-index: 1;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
}
body.edit-mode-active .element-controls .controls-toggle::before {
  content: '\e928';
  transition: transform 0.5s ease;
}
/* Toggle-Button Active State */
body.edit-mode-active .controls-active .element-controls .controls-toggle {
  background: transparent;
  transform: translateX(2rem);
  border-radius: 0;
}
body.edit-mode-active .controls-active .element-controls .controls-toggle::before {
	transform: scaleX(-1);
}
/* Buttons Container */
.controls-buttons {
  display: flex;
	flex-direction: row;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  justify-content: space-around;
  width: 100%;
  padding: 0 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.vertical-layout .controls-buttons {
  flex-direction: column;
	gap: var(--xs);
}
/* Sichtbarer Zustand des Buttons Containers */
body.edit-mode-active .controls-active .element-controls .controls-buttons {
  opacity: 1;
  transition-delay: 0.1s; /* wartet bis das Panel sich öffnet */
}
/* Einzelne Buttons */
.toggle-visibility,
.edit-element,
.drag-handle,
.delete-element {
  display: flex;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-family: 'icon';
  color: var(--white);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
  transition:
	opacity 0.2s ease 0.1s,
	transform 0.2s ease 0.1s,
	visibility 0s linear 0.3s;
}
.controls-delete {
	display: flex;
  border: none;
	align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-family: 'icon';
  color: var(--white);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
  transition:
    opacity 0.2s ease 0.1s,
    transform 0.2s ease 0.1s,
    visibility 0s linear 0.3s;
}
/* Sichtbarer Zustand der Buttons */
body.edit-mode-active .controls-active .element-controls .controls-buttons div {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  transition-delay: 0.15s; /* erscheinen nach Panel-Öffnung */
}
.toggle-visibility {
  background: var(--PT);
}
.toggle-visibility[data-visible="0"] {
  background: var(--SO);
}
.edit-element {
  background: var(--BW);
}
.delete-element,
.controls-delete {
  background: var(--AE);
}
.drag-handle {
  cursor: row-resize;
  background: var(--LI);
	font-size: 0.7rem;
}
.drag-handle.disabled {
  background: var(--LI);
  opacity: 0.3;
  cursor: not-allowed;
}
.toggle-visibility .icon,
.edit-element .icon,
.drag-handle .icon,
.delete-element .icon,
.controls-delete .icon {
  font-size: 0.75rem;
}
.toggle-visibility:hover,
.edit-element:hover,
.delete-element:hover,
.controls-delete:hover {
  filter: brightness(1.1);
}
.drag-handle:not(.disabled):hover {
  filter: brightness(1.1);
}
/* Invisible Element - Nur Content transparent, nicht Controls */
body.edit-mode-active .box.element-invisible > *:not(.element-controls):not(.element-checkbox) {
  opacity: 0.5;
}
/* Controls und Checkbox bleiben voll sichtbar */
body.edit-mode-active .box.element-invisible .element-controls,
body.edit-mode-active .box.element-invisible .element-checkbox {
  opacity: 1;
}
.sortable-ghost {
  opacity: 0.4;
}
.sortable-drag {
  opacity: 0.8;
  transform: rotate(2deg);
}
.sortable-chosen {
  cursor: move;
}
/* Literature Items Container */
.literature-items-container {
  display: flex;
  flex-direction: column;
  gap: var(--xxs);
  min-height: 2.5rem; /* Damit Empty State Platz hat */
}
/* Empty State Styling */
.literature-empty-state {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.literature-empty-state p {
  color: var(--text-muted);
}

.literature-empty-state .icon {
  display: block;
  margin-bottom: var(--xs);
  opacity: 0.4;
}

/* Mehrspaltiges Layout für Inhaltselemente */
@media (min-width: 620px) {
  .responsive-columns {
    column-count: 2;
    column-gap: 2rem;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}


.chosen-container-single .chosen-search {
	margin: 0.3rem;
}

/* ONLINE-STATUS IN BENUTZERPROFIL-AVATAR */
.online-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 0.15rem solid var(--basic-dark);
    transition: all 0.2s ease;
}
.bar-btn .online-status {
		border-color: var(--white);
}

.online-status.online {
    background-color: var(--PT);
    animation: pulse 2s infinite;
}

/* Im-Chat-Präsenz: blau statt grün */
.online-status.in-chat {
    background-color: var(--IL);
    animation: pulse-chat 2s infinite;
}

@keyframes pulse {
    0%, 100% { background-color: var(--PT); }
    50%       { background-color: var(--IT); }
}

@keyframes pulse-chat {
    0%, 100% { background-color: var(--IL); opacity: 1; }
    50%       { background-color: var(--IL); opacity: 0.6; }
}

.hint {
	text-align: center;
}

.bubble {
	margin-left: 0.5rem;
  font-size: 1rem;
  padding: 0.1em 0.6em;
  background-color: var(--SO)!important;
  color: var(--white);
  font-family: 'bn_bold' !important;
}
/* GRÖSSEN */

html {
    font-size: 16px;
}
@media screen and (min-width: 800px) {
    html {
        font-size: 16px;
    }
}
:root {
    --xxs: 0.375rem;
    --xs: 0.75rem;
    --s: 1rem;
    --m: 2rem;
    --l: 4rem;
    --xl: 8rem;
    --xxl: 16rem;
    --profile-img: clamp(5rem, 10vw, 7rem);
}




/* FARBEN */

:root {
    --white: hsl(0, 0%, 100%);

    --light: hsl(0, 0%, 100%);
    --dark: hsl(0, 0%, 20%);

    --basic-light: hsl(0, 0%, 97%);
    --basic: hsl(0, 0%, 93%);
    --basic-dark: hsl(0, 0%, 88%);
    --basic-dark2: hsl(0, 0%, 85%);

    --second-light: hsl(0, 0%, 80%);
    --second-dark: hsl(0, 0%, 73%);

    --accent-light: hsl(0, 0%, 65%);
    --accent: hsl(0, 0%, 44%);
    --accent-dark: hsl(0, 0%, 37%);
    --dark-fixed: hsl(0, 0%, 37%);

    --black: hsl(0, 0%, 20%);	

    --PD: hsl(240, 2%, 51%);
    --BW: hsl(30, 89%, 50%);
    --BW2: hsl(30, 89%, 47%);
    --BW-dark: hsl(30, 78%, 40%);
    --ST: hsl(12, 78%, 36%);
    --HT: hsl(11, 68%, 32%);
    --PT: hsl(180, 50%, 53%);
    --IT: hsl(180, 100%, 27%);
    --IL: hsl(204, 64%, 45%);
    --LI: hsl(0, 0%, 37%);
    --SO: hsl(0, 0%, 67%);
    --PF: hsl(301, 25%, 47%);
    --AE: hsl(0, 100%, 50%);

    --highlight: hsl(57, 100%, 50%);
    --operatorColor: rgb(180, 180, 180);

    --fx-color: rgba(255, 255, 255, 0.75);
    --fx-color-inverted: rgba(0, 0, 0, 0.3);
    --shimmer-color: rgba(0, 0, 0, 0.25);
}
.dark-theme,
.bg-BW,
.code-red,
.code-orange,
.code-blue,
.code-green {
    --light: hsl(0, 0%, 25%);
    --dark: hsl(0, 0%, 100%);

    --basic-light: hsl(0, 0%, 22%);
    --basic: hsl(0, 0%, 18%);
    --basic-dark: hsl(0, 0%, 16%);
    --basic-dark2: hsl(0, 0%, 14%);

    --second-light: hsl(0, 0%, 20%);
    --second-dark: hsl(0, 0%, 12%);

    --accent-light: hsl(0, 0%, 97%);
    --accent: hsl(0, 0%, 100%);
    --accent-dark: hsl(0, 0%, 93%);

    --operatorColor: rgb(30, 30, 30);

    --fx-color: rgba(0, 0, 0, 0.3);
    --fx-color-inverted: rgba(255, 255, 255, 1);
    --shimmer-color: rgba(255, 255, 255, 0.15);
}

/* Basisfarben */

body,
#loader {
    background-color: var(--basic);
    background-image: linear-gradient(0deg, var(--basic-dark) 4rem, var(--basic) 60%);
    background-attachment: fixed;
    color: var(--accent-dark);
}
body.dark-theme,
.dark-theme #loader {
    background-color: var(--basic);
    background-image: linear-gradient(0deg, var(--light) 4rem, var(--basic) 60%);
    background-attachment: fixed;
}


/* Backgroundfarben */

.card-btn,
.bar-btn,
.bar_img {
    background-color: var(--white);

}
#main .inside:before,
.profilbox li,
.card.hasContent,
.chat-bar {
    background-color: var(--basic);
}
.navmenu {
    background-color: var(--basic-light);
}
input.text,
.chat-input-wrapper.searchbar,
.chat-dom-search-bar,
input.chosen-search-input,
input.password,
input.date,
select,
.texteditor,
textarea,
#application_form-program,
#attendanceType,
.selectfield-wrapper,
input[type='radio']+label:before, 
input[type='checkbox']+label:before {
    background-color: var(--fx-color);
}
.box,
.card,
.formbody,
.ce_accordion {
    background-color: var(--basic-dark);
}
.box-area-dark {
    background-color: var(--second-light);
}
#nav_fixed a.abutton.active:before {
    background-color: var(--fx-color-inverted);
}
.herobutton,
#nav_fixed a.abutton.active:hover:before,
button,
.button,
.button-wrapper a,
.card-btn.active {
    background-color: var(--accent);
}
.navmenu a:hover,
.ui-tile-btn:hover,
.ui-tile-btn.active,
.ui-tile-btn.is-active,
.ccp-item:hover,
.bap-info-row:hover {
    background-color: var(--light);
}

.ui-tile-btn {
    color: var(--accent-light);
}

.ui-tile-btn:hover {
    color: var(--accent-dark);
}

.ui-tile-btn--danger:hover,
.ui-tile-btn--danger.active,
.ui-tile-btn--danger.is-active {
    background-color: rgba(225,0,0,0.15);
    color: var(--AE) !important;
}

.ui-tile-btn--info:hover,
.ui-tile-btn--info.active,
.ui-tile-btn--info.is-active,
.ui-tile-btn--info.notify-active {
    background-color: rgba(41,129,188,0.15);
    color: var(--IL) !important;
}

/* Buttons/CTA-Elemente global nicht schrumpfen (bewusst nicht in bmo_basics) */
button,
.button,
.smallbutton,
.ui-tile-btn,
.card-btn,
.abutton,
.button-wrapper a {
    flex-shrink: 0;
}

.bg-BW .button {
    background-color: var(--accent-dark);
}
.bar_pre {
    background-color: var(--PD);
}
.bar_end-filled,
.profilbox li.empty:before {
    background-color: var(--SO);
}
.bg-BW {
    background-image: linear-gradient(-7deg, var(--BW) 40%, var(--BW2) 100%)!important;
}
.bibelschule .herobutton {
    background-color: var(--BW);
}
.code-blue {
    background-color: var(--IL)!important;
}
.code-green,
.profilbox li:before {
    background-color: var(--PT)!important;
}
.tt.active .bar_pre,
.highlight,
.navmenu strong {
    background-color: var(--highlight);
}
.code-orange {
    background-color: var(--BW)!important;
}
.code-red {
    background-color: var(--AE)!important;
}
.bgimg,
.navmenu .button_wrapper a.link:hover,
.bewerbungsformular .accordion .formbody {
    background-color: transparent;
}


/* Schriftfarben */

.profilbox li:before,
.herobutton,
.herobutton:hover,
.bar_pre,
.bar_end-filled,
.bg-BW,
.dark-theme .verse-box,
.code-blue,
.code-orange,
.code-red,
.code-green,
.dark-theme .bibleVerse a,
.dark-theme #application_form-program *,
.dark-theme #attendanceType *,
.dark-theme .selectfield-wrapper *,
#application_form-program .selectfield:hover,
#attendanceType .selectfield:hover,
.selectfield-wrapper .selectfield:hover,
#application_form-program .selectfield:has(input:checked),
#attendanceType .selectfield:has(input:checked),
.selectfield-wrapper .selectfield:has(input:checked) {
    color: var(--white)!important;
}
.profilbox li:before,
.bar_end-filled,
.navmenu .button_wrapper a.link:hover,
#nav_fixed a.abutton.active:before,
button:hover,
.button:hover,
.button-wrapper a:hover {
    color: var(--light);
}

button,
.button,
.button-wrapper a, 
.card-btn,
.navmenu .button_wrapper a.link {
    color: var(--basic-light);
}
a,
.toggler button:before,
.widget-select:before {
    color: var(--accent-light);
}
.open-nav_main #nav_fixed .menu:before,
.open-nav_warenkorb #nav_fixed .shop:before,
.open-nav_messenger #nav_fixed .postfach:before,
a:hover,
#nav_footer strong,
label,
legend,
.toggler:hover button:before,
.box-title,
.hasContent,
.bar,
.bar:hover,
.toggler button {
    color: var(--accent-dark);
}
.card-btn,
.card-btn:hover,
.bar-btn,
.bar-btn:hover {
    color: hsl(0, 0%, 37%);
}
.navmenu strong,
.highlight,
#application_form-program *,
#attendanceType *,
.selectfield-wrapper * {
    color: var(--dark-fixed);
}
#welcome h1,
.bibelschule .heroheader,
p a,
p a:hover {
    color: var(--BW);
}
span.mandatory {
    color: var(--ST);
}
.bewerbungsformular .checked .box-title::before {
    color: var(--PT);
}
input,
select,
.texteditor,
textarea,
.handwritten,
.verse-box,
.dailyVerses.bibleVerse a {
    color: var(--IL);
}
#nav_footer .ci_facebook:hover {
    color: #1877F2;
}
#nav_footer .ci_instagram:hover {
    -webkit-text-fill-color: transparent; background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%); background-clip: text;
}
#nav_footer .ci_youtube:hover {
    color: #ff0000;
}
.dark-theme.open-nav_main #nav_fixed .menu:before,
.dark-theme.open-nav_warenkorb #nav_fixed .shop:before,
.dark-theme.open-nav_messenger #nav_fixed .postfach:before {
    color: var(--PD);
}
.trumbowyg-editor,
.tt.active .bar_pre {
    color: var(--black)!important;
}


/* Rahmen */

input.text,
.chat-input-wrapper.searchbar,
.chat-dom-search-bar,
input.chosen-search-input,
input.password,
input.date,
select,
.texteditor,
textarea {
    border: none;
}
input.text,
.chat-input-wrapper.searchbar,
.chat-dom-search-bar,
input.chosen-search-input,
input.password,
input.date,
select,
.texteditor,
textarea {
    border: 0.1rem solid transparent;
    transition: 0.5s ease-in-out;
}
input.text:focus,
.chat-input-wrapper.searchbar:has(:focus),
.chat-dom-search-bar:has(:focus),
input.chosen-search-input:focus,
input.password:focus,
.texteditor:focus,
textarea:focus,
select:focus.accordion {
    border: 0.1rem solid var(--IL);
}
.border-green {
    border: 0.1rem solid var(--PT);
}



/* SCHRIFT */

@font-face {
    font-family: 'bn_bold';
    src: url('../../files/core/fonts/bebasneue_bold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'bn_regular';
    src: url('../../files/core/fonts/bebasneue_regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ss_regular';
    src: url('../../files/core/fonts/sourcesanspro-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ss_italic';
    src: url('../../files/core/fonts/sourcesanspro-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ss_semibold';
    src: url('../../files/core/fonts/sourcesanspro-semibold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'sc_regular';
    src: url('../../files/core/fonts/sourcecodepro-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'calligraphy';
    src: url('../../files/core/fonts/great_wishes-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'handwrite';
    src: url('../../files/core/fonts/always_together-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'typewriter';
    src: url('../../files/core/fonts/typewriter-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'icon';
    src: url('../../files/core/fonts/icomoon.woff?ver=20220314') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Basisschrift */

body {
    font-family: 'ss_regular', sans-serif;
    font-size: 1rem;
}


/* Schriftarten */

.icon,
.grid-header:before,
.box>.box-header span,
.toggler .box-header span,
.profilbox li:before,
.navmenu li>*:before,
.widget-select:before,
#nav_fixed a:before,
button::before {
    font-family: 'icon'!important;
    font-weight: normal!important;
}
a,
.h0,
h1, 
h2,
.bar_pre,
.bar_end-clear,
.bar_end-filled,
.bar_end span,
button,
.button, 
.button-wrapper a,
.card-btn,
.navmenu strong,
#nav_footer strong,
.hasContent {
    font-family: 'bn_bold';
    font-weight: normal;
}
.reference,
.dailyVerses.bibleVerse a {
    font-family: 'bn_regular';
}
h3,
h4,
strong,
.bar_name,
.profilbox li {
    font-family: 'ss_semibold';
}
figcaption {
    font-family: 'ss_italic';
}
.bar_info {
    font-family: 'sc_regular';
}
.handwritten,
.verse,
.dailyVerses.bibleText {
    font-family: 'calligraphy';
    line-height: 150%;
}
input.text,
.chat-input-wrapper.searchbar,
.chat-dom-search-bar,
input.chosen-search-input,
input.password,
input.date,
select,
.texteditor,
textarea {
    font-family: 'typewriter';
    letter-spacing: -0.5px;
}
p a,
.message-text a {
    font-family: inherit;
    font-size: inherit;
    font-weight: bolder;
}
a.bar-btn {
    font-family: inherit;
    color: var(--black)!important;
}


/* Schriftgrößen */

.andmore p {
    font-size: 2rem;
}
.h0,
.heroheader {
    font-size: 2.4rem;
}
h1,
#nav_footer a.ci_youtube {
    font-size: 1.8rem;
}
#nav_fixed a,
#nav_footer .channels a,
.bibelschule .ausbildungsprogramme .profilbox_header h1,
.card.hasContent span {
    font-size: 1.6rem;
}
h2 {
    font-size: 1.4rem;
}
.box h2,
.grid-header:before,
.profilbox li:before,
.card.hasContent {
    font-size: 1.3rem;
}
input.text,
.chat-input-wrapper.searchbar,
input.chosen-search-input,
input.password,
input.date,
select,
.texteditor,
textarea,
a,
button,
.button, 
.button-wrapper a,
.card-btn,
.navmenu strong,
#nav_footer a,
#nav_footer strong {
    font-size: 1.15rem;
}
.verse,
.radio_container label,
.checkbox_container label,
.reference,
.dailyVerses.bibleVerse a,
.smalllink,
.dailyVerses.bibleText {
    font-size: 1rem;
}
h3 {
    font-size: 0.9rem;
}
.widget-select:before,
label,
legend,
figcaption {
    font-size: 0.8rem;
}
h4 {
    font-size: 0.75rem;
}
#nav_fixed a.abutton.active:before {
    font-size: 0.6rem;
}
.card,
.bar {
    font-size: 1rem;
}
.bar_name {
    font-size: 1em;
}
.bar_info {
    font-size: 0.65em;
}
.feedItem .grid-1_1 .card {
    font-size: 0.85rem;
}


/* Auszeichnungen */

a {
    text-decoration: none;
    cursor: pointer;
}
h3 {
    font-weight: normal;
}
h3,
h4,
label,
legend {
    text-transform: uppercase;
}
h4 {
    letter-spacing: 0.05em;
    opacity: 0.8;
}
.radio_container label,
.checkbox_container label {
    text-transform: none;
}
button,
.button,
.verse-box {
    overflow-wrap: break-word;
    text-wrap: balance;
}






/* ECKENRUNDUNGEN */

/* Abgerundete Ecken */

input[type='checkbox']+label:before {
    border-radius: 0.25rem;
}
.round,
.chat-input-wrapper.searchbar,
.chat-dom-search-bar,
.box,
.hero,
.card,
button,
.button,
.button-wrapper a,
.bar-btn,
.card-btn.active,
.box>*,
.bar_end-filled,
.formbody,
input,
.texteditor,
textarea,
select,
.profilbox li,
.navmenu a,
.navmenu strong,
.ce_accordion {
    border-radius: 0.5rem;
}
.bar_pre,
.profilbox li:before {
    border-top-left-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
} 


/* Rund */

#loader .spinner,
#loader2 .spinner,
.loader .spinner,
.bar_img,
#nav_fixed .active img,
#nav_fixed a.abutton.active:before,
input[type='radio']+label:before {
    border-radius: 50%;
    overflow: hidden;
}





/* SCHATTEN */

button:hover,
.button:hover,
.button-wrapper a:hover,
.bar-btn:hover,
.card-btn:not(.disabled):hover {
    filter: drop-shadow(0 0.1rem 0.4rem rgba(51, 51, 51, 0.2));
}
button,
.button,
.button-wrapper a,
.bar-btn,
.card-btn:not(.disabled),
button:active,
.button:active,
.button-wrapper a:active,
.bar-btn:active,
.card-btn:not(.disabled):active,
.navmenu a:active,
.ui-tile-btn:active {
    filter: drop-shadow(0 0.1rem 0.125rem rgba(51, 51, 51, 0.2));
}
.modal-content {
    filter: drop-shadow(0 0.1rem 0.4rem rgba(51, 51, 51, 0.2));
}
#right1,
#right2,
#messenger,
#warenkorb,
#login-sidebar {
    filter: drop-shadow(0.5rem 0 0.4rem rgba(51, 51, 51, 0.5));
}
.navmenu a,
.navmenu strong {
    filter: drop-shadow(0 0 0 transparent);
}
.new-media {
    border: 0.2rem solid var(--PT);
    border-radius: 0.6rem;
}





/* ANIMATIONEN */

/* Übergänge */

.slick-slide,
.ce_accordion{
    transition: 0.5s ease-in-out;
}
.navmenu a,
.navmenu strong {
    transition: 0.15s ease-in-out;
}
body:before,
#right1,
#right2,
#messenger,
#warenkorb,
#login-sidebar,
button,
.button,
.button-wrapper a,
.bar-btn,
.card-btn,
#nav_footer .channels a,
.slick-slide:hover {
    transition: 0.2s ease-in-out;
}
*:active {
    transition: 0.05s ease-in-out;
}

/* Spin */

#loader .spinner,
#loader2 .spinner,
.loader .spinner,
.nachrichtenbox .loader .spinner,
button #loader2 .spinner {
  animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Inhaltladeanimation */

.animate-bottom {
    position: relative;
    animation-name: animatebottom;
    animation-duration: 0.9s;
    animation-timing-function: ease-in-out;
}
@keyframes animatebottom {
    from { bottom:-1rem; transform: scale(98%); opacity:0 }
    to { bottom:0px; transform: scale(100%); opacity:1 }
}
.hidden {
    opacity: 0;
    transform: translateY(100px); /* Verschiebe die Elemente nach unten */
    transition: all 0.5s ease-in-out;
}
.visible {
    opacity: 1;
    transform: translateY(0);
}
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('../../files/core/css/./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('../../files/core/fonts/slick.eot');
    src: url('../../files/core/fonts/slick.eot?#iefix') format('embedded-opentype'), url('../../files/core/fonts/slick.woff') format('woff'), url('../../files/core/fonts/slick.ttf') format('truetype'), url('../../files/core/fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: var(--s);
}

.slick-dots
{
    position: absolute;
    bottom: calc(var(--s) * -2);

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 1rem;
    height: 1rem;
    margin: 0 0.2rem;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 1rem;
    height: 1rem;
    padding: 0.2rem;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 0.7rem;
    line-height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    width: 1rem;
    height: 1rem;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
}
.card-slider:not(.slick-initialized) {
    visibility: hidden;
}
.slick-list {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}
.slick-track {
    overflow: hidden;
    display: flex;
    gap: var(--xs);
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    min-height: 1px;
    opacity: 0.7;
}
.slick-slide:hover,
.slick-slide.slick-current {
    opacity: 1; 
}
@media (min-width: 800px) {
    .slick-list {
        -webkit-mask-image: linear-gradient(120deg, black, black calc(100% - 25rem), rgba(0, 0, 0, 0.05) 95%, transparent);
        mask-image: linear-gradient(120deg, black, black calc(100% - 25rem), rgba(0, 0, 0, 0.05) 95%, transparent);
        -webkit-mask-size: auto 100%;
        mask-size: auto 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: right;
        mask-position: right;
    }
    .slick-slide {
        opacity: 1;
        max-height: calc((100vw - (3.5 * var(--xs)) - 1.5rem) / 3);
    }
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: flex;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: flex;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.mod_eventlist .slick-slide {
    max-width: 80vw;
    height: 30vh; 
    max-height: 20rem;
}
@media (orientation: landscape) {
  .mod_eventlist .slick-slide {
    height: 60vh;
    max-height: 15rem;
  }
}
@media (min-width: 800px) {
  .mod_eventlist .slick-slide {
    height: calc((100vw - 1.5rem - (3.5 * var(--xs))) / 3);
    max-height: calc((1332px - (2 * var(--xs))) / 3);
  }
}

@media (min-width: 65rem) {
  .mod_eventlist .slick-slide {
    height: calc((100vw - 1.5rem - (4.5 * var(--xs))) / 4);
    max-height: calc((1332px - (3 * var(--xs))) / 4);
  }
}
#trumbowyg-icons,.trumbowyg-icons{overflow:hidden;visibility:hidden;height:0;width:0}#trumbowyg-icons svg,.trumbowyg-icons svg{height:0;width:0}.trumbowyg-box *,.trumbowyg-box *::before,.trumbowyg-box *::after,.trumbowyg-modal *,.trumbowyg-modal *::before,.trumbowyg-modal *::after{box-sizing:border-box}.trumbowyg-box svg,.trumbowyg-modal svg{width:17px;height:100%;color:#222;fill:#222}.trumbowyg-box{display:flex;flex-direction:column;min-height:300px}.trumbowyg-editor-box{display:block;flex:1}.trumbowyg-box,.trumbowyg-editor-box{position:relative;width:100%;border:1px solid #d7e0e2}.trumbowyg-box .trumbowyg-editor{min-height:100%;margin:0 auto}.trumbowyg-box.trumbowyg-fullscreen{background:#fefefe;border:none !important}.trumbowyg-editor-box,.trumbowyg-textarea{position:relative;box-sizing:border-box;padding:20px;width:100%;border-style:none;resize:none;outline:none;overflow:auto;user-select:text}.trumbowyg-editor-box.trumbowyg-autogrow-on-enter,.trumbowyg-textarea.trumbowyg-autogrow-on-enter{transition:height 300ms ease-out}.trumbowyg-editor-box{padding:0}.trumbowyg-editor{outline:none;padding:20px}.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(0,0,0,0) !important;text-shadow:0 0 7px #333}@media screen and (min-width: 0 \0 ){.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(200,200,200,.6) !important}}@supports(-ms-accelerator: true){.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(200,200,200,.6) !important}}.trumbowyg-box-blur .trumbowyg-editor img,.trumbowyg-box-blur .trumbowyg-editor hr{opacity:.2}.trumbowyg-textarea{position:relative;display:block;overflow:auto;border:none;font-size:14px;font-family:"Consolas","Courier","Courier New",monospace;line-height:18px}.trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea{height:1px !important;width:25%;min-height:0 !important;padding:0 !important;background:none;opacity:0 !important}.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea{display:block;flex:1;margin-bottom:1px}.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor-box{display:none}.trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea{opacity:.8;background:none}.trumbowyg-editor-box[contenteditable=true]:empty:not(:focus)::before{content:attr(placeholder);color:#999;pointer-events:none;white-space:break-spaces}.trumbowyg-button-pane{display:flex;flex-wrap:wrap;width:100%;min-height:36px;background:#ecf0f1;border-bottom:1px solid #d7e0e2;margin:0;padding:0 5px;position:relative;list-style-type:none;line-height:10px;backface-visibility:hidden;overflow:hidden;z-index:11}.trumbowyg-button-pane::before,.trumbowyg-button-pane::after{content:" ";display:block;position:absolute;top:35px;left:0;right:0;width:100%;height:1px;background:#d7e0e2}.trumbowyg-button-pane::after{top:71px}.trumbowyg-button-pane .trumbowyg-button-group{display:flex;flex-wrap:wrap}.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg{color:rgba(0,0,0,0)}.trumbowyg-button-pane .trumbowyg-button-group::after{content:" ";display:block;width:1px;background:#d7e0e2;margin:0 5px;height:35px;vertical-align:top}.trumbowyg-button-pane .trumbowyg-button-group:last-child::after{content:none}.trumbowyg-button-pane button{display:block;position:relative;width:35px;height:35px;padding:1px 6px !important;margin-bottom:1px;overflow:hidden;border:none;cursor:pointer;background:none;vertical-align:middle;transition:background-color 150ms,opacity 150ms}.trumbowyg-button-pane button.trumbowyg-textual-button{width:auto;line-height:35px;user-select:none}.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),.trumbowyg-button-pane button.trumbowyg-disable,.trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button){opacity:.2;cursor:default;pointer-events:none}.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before,.trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before{background:#e3e9eb}.trumbowyg-button-pane button:not(.trumbowyg-disable):hover,.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,.trumbowyg-button-pane button.trumbowyg-active{background-color:#fff;outline:none}.trumbowyg-button-pane .trumbowyg-open-dropdown::after{display:block;content:" ";position:absolute;top:27px;right:3px;height:0;width:0;border:3px solid rgba(0,0,0,0);border-top-color:#555}.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button{padding-left:10px !important;padding-right:18px !important}.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after{top:17px;right:7px}.trumbowyg-button-pane .trumbowyg-right{margin-left:auto}.trumbowyg-dropdown{max-width:300px;max-height:250px;overflow-y:auto;overflow-x:hidden;white-space:nowrap;border:1px solid #d7e0e2;padding:5px 0;border-top:none;background:#fff;color:#222;margin-left:-1px;box-shadow:rgba(0,0,0,.1) 0 2px 3px;z-index:12}.trumbowyg-dropdown button{display:block;width:100%;height:35px;line-height:35px;text-decoration:none;background:#fff;padding:0 20px 0 10px;color:#222;border:none;cursor:pointer;text-align:left;font-size:15px;transition:all 150ms}.trumbowyg-dropdown button:hover,.trumbowyg-dropdown button:focus{background:#ecf0f1}.trumbowyg-dropdown button svg{float:left;margin-right:14px}.trumbowyg-modal{position:absolute;top:0;left:50%;transform:translateX(-50%);max-width:520px;width:100%;height:350px;z-index:12;overflow:hidden;backface-visibility:hidden}.trumbowyg-modal-box{position:absolute;top:0;left:50%;transform:translateX(-50%);max-width:500px;width:calc(100% - 20px);padding-bottom:45px;z-index:1;background-color:#fff;text-align:center;font-size:14px;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;box-shadow:rgba(0,0,0,.2) 0 2px 3px;backface-visibility:hidden}.trumbowyg-modal-box .trumbowyg-modal-title{font-size:24px;font-weight:bold;margin:0 0 20px;padding:15px 0 13px;display:block;border-bottom:1px solid #d7e0e2}.trumbowyg-modal-box .trumbowyg-progress{width:100%;height:3px;position:absolute;top:58px}.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar{background:#2bc06a;width:0;height:100%;transition:width 150ms linear}.trumbowyg-modal-box .trumbowyg-input-row{position:relative;margin:15px 12px;border:1px solid #dedede;overflow:hidden}.trumbowyg-modal-box .trumbowyg-input-infos{text-align:left;transition:all 150ms;width:150px;border-right:1px solid #dedede;padding:0 7px;background-color:#fbfcfc;position:absolute;left:0;top:0;bottom:0}.trumbowyg-modal-box .trumbowyg-input-infos label{color:#69878f;overflow:hidden;height:27px;line-height:27px}.trumbowyg-modal-box .trumbowyg-input-infos label,.trumbowyg-modal-box .trumbowyg-input-infos label span{display:block;height:27px;line-height:27px;transition:all 150ms}.trumbowyg-modal-box .trumbowyg-input-infos .trumbowyg-msg-error{color:#e74c3c}.trumbowyg-modal-box .trumbowyg-input-html{padding:1px 1px 1px 152px}.trumbowyg-modal-box .trumbowyg-input-html,.trumbowyg-modal-box .trumbowyg-input-html input,.trumbowyg-modal-box .trumbowyg-input-html textarea,.trumbowyg-modal-box .trumbowyg-input-html select{font-size:14px}.trumbowyg-modal-box .trumbowyg-input-html input,.trumbowyg-modal-box .trumbowyg-input-html textarea,.trumbowyg-modal-box .trumbowyg-input-html select{transition:all 150ms;height:27px;line-height:27px;border:0;width:100%;padding:0 7px}.trumbowyg-modal-box .trumbowyg-input-html input:hover,.trumbowyg-modal-box .trumbowyg-input-html input:focus,.trumbowyg-modal-box .trumbowyg-input-html textarea:hover,.trumbowyg-modal-box .trumbowyg-input-html textarea:focus,.trumbowyg-modal-box .trumbowyg-input-html select:hover,.trumbowyg-modal-box .trumbowyg-input-html select:focus{outline:1px solid #95a5a6}.trumbowyg-modal-box .trumbowyg-input-html input:focus,.trumbowyg-modal-box .trumbowyg-input-html textarea:focus,.trumbowyg-modal-box .trumbowyg-input-html select:focus{background:#fbfcfc}.trumbowyg-modal-box .trumbowyg-input-html input[type=checkbox]{width:16px;height:16px;padding:0}.trumbowyg-modal-box .trumbowyg-input-html-with-checkbox{text-align:left;padding:3px 1px 1px 3px}.trumbowyg-modal-box .trumbowyg-input-error input,.trumbowyg-modal-box .trumbowyg-input-error select,.trumbowyg-modal-box .trumbowyg-input-error textarea{outline:1px solid #e74c3c}.trumbowyg-modal-box .trumbowyg-input-error .trumbowyg-input-infos label span:first-child{margin-top:-27px}.trumbowyg-modal-box .error{margin-top:25px;display:block;color:red}.trumbowyg-modal-box .trumbowyg-modal-button{position:absolute;bottom:10px;right:0;text-decoration:none;color:#fff;display:block;width:100px;height:35px;line-height:33px;margin:0 10px;background-color:#333;border:none;cursor:pointer;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;font-size:16px;transition:all 150ms}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{right:110px;background:#2bc06a}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus{background:#40d47e;outline:none}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{background:#25a25a}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{color:#555;background:#e6e6e6}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus{background:#fbfbfb;outline:none}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{background:#d5d5d5}.trumbowyg-overlay{position:absolute;background-color:rgba(255,255,255,.5);height:100%;width:100%;left:0;display:none;top:0;z-index:10}body.trumbowyg-body-fullscreen{overflow:hidden}.trumbowyg-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;margin:0;padding:0;z-index:99999}.trumbowyg-fullscreen.trumbowyg-box,.trumbowyg-fullscreen .trumbowyg-editor-box{border:none}.trumbowyg-fullscreen .trumbowyg-editor-box,.trumbowyg-fullscreen .trumbowyg-textarea{height:auto !important;overflow:auto}.trumbowyg-fullscreen .trumbowyg-overlay{height:100% !important}.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg{color:#222;fill:rgba(0,0,0,0)}.trumbowyg-editor object,.trumbowyg-editor embed,.trumbowyg-editor video,.trumbowyg-editor img{max-width:100%}.trumbowyg-editor video,.trumbowyg-editor img{height:auto}.trumbowyg-editor img{cursor:move}.trumbowyg-editor canvas:focus{outline:none}.trumbowyg-editor.trumbowyg-reset-css{background:#fefefe !important;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif !important;font-size:14px !important;line-height:1.45em !important;color:#333 !important;font-weight:normal !important}.trumbowyg-editor.trumbowyg-reset-css a{color:#15c !important;text-decoration:underline !important}.trumbowyg-editor.trumbowyg-reset-css div,.trumbowyg-editor.trumbowyg-reset-css p,.trumbowyg-editor.trumbowyg-reset-css ul,.trumbowyg-editor.trumbowyg-reset-css ol,.trumbowyg-editor.trumbowyg-reset-css blockquote{box-shadow:none !important;background:none !important;margin:0 !important;margin-bottom:15px !important;line-height:1.4em !important;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif !important;font-size:14px !important;border:none !important}.trumbowyg-editor.trumbowyg-reset-css iframe,.trumbowyg-editor.trumbowyg-reset-css object,.trumbowyg-editor.trumbowyg-reset-css hr{margin-bottom:15px !important}.trumbowyg-editor.trumbowyg-reset-css blockquote{margin-left:32px !important;font-style:italic !important;color:#555 !important}.trumbowyg-editor.trumbowyg-reset-css ul{list-style:disc !important}.trumbowyg-editor.trumbowyg-reset-css ol{list-style:decimal !important}.trumbowyg-editor.trumbowyg-reset-css ul,.trumbowyg-editor.trumbowyg-reset-css ol{padding-left:20px !important}.trumbowyg-editor.trumbowyg-reset-css ul ul,.trumbowyg-editor.trumbowyg-reset-css ol ol,.trumbowyg-editor.trumbowyg-reset-css ul ol,.trumbowyg-editor.trumbowyg-reset-css ol ul{border:none !important;margin:2px !important;padding:0 !important;padding-left:24px !important}.trumbowyg-editor.trumbowyg-reset-css hr{display:block !important;height:1px !important;border:none !important;border-top:1px solid #ccc !important}.trumbowyg-editor.trumbowyg-reset-css h1,.trumbowyg-editor.trumbowyg-reset-css h2,.trumbowyg-editor.trumbowyg-reset-css h3,.trumbowyg-editor.trumbowyg-reset-css h4{color:#111 !important;background:none !important;margin:0 !important;padding:0 !important;font-weight:bold !important}.trumbowyg-editor.trumbowyg-reset-css h1{font-size:32px !important;line-height:38px !important;margin-bottom:20px !important}.trumbowyg-editor.trumbowyg-reset-css h2{font-size:26px !important;line-height:34px !important;margin-bottom:15px !important}.trumbowyg-editor.trumbowyg-reset-css h3{font-size:22px !important;line-height:28px !important;margin-bottom:7px !important}.trumbowyg-editor.trumbowyg-reset-css h4{font-size:16px !important;line-height:22px !important;margin-bottom:7px !important}.trumbowyg-dark .trumbowyg-textarea{background:#222;color:#fff;border-color:#343434}.trumbowyg-dark .trumbowyg-box{border:1px solid #343434}.trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen{background:#111}.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{text-shadow:0 0 7px #ccc}@media screen and (min-width: 0 \0 ){.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6) !important}}@supports(-ms-accelerator: true){.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6) !important}}.trumbowyg-dark .trumbowyg-box svg{fill:#fff;color:#fff}.trumbowyg-dark .trumbowyg-button-pane{background-color:#222;border-bottom-color:#343434}.trumbowyg-dark .trumbowyg-button-pane::before,.trumbowyg-dark .trumbowyg-button-pane::after{background:#343434}.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after{background-color:#343434}.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg{color:rgba(0,0,0,0)}.trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::after{background-color:#2a2a2a}.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover,.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,.trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active{background-color:#333}.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after{border-top-color:#fff}.trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg{color:#ecf0f1;fill:rgba(0,0,0,0)}.trumbowyg-dark .trumbowyg-dropdown{border-color:#343434;background:#333;box-shadow:rgba(0,0,0,.3) 0 2px 3px}.trumbowyg-dark .trumbowyg-dropdown button{background:#333;color:#fff}.trumbowyg-dark .trumbowyg-dropdown button:hover,.trumbowyg-dark .trumbowyg-dropdown button:focus{background:#222}.trumbowyg-dark .trumbowyg-modal-box{background-color:#333;color:#fff}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title{border-bottom:1px solid #555;color:#fff;background:#3c3c3c}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row{border-color:#222}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos{color:#eee;background-color:#2f2f2f;border-right-color:#222}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span{color:#eee;background-color:#2f2f2f;border-color:#343434}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span.trumbowyg-msg-error{color:#e74c3c}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error input,.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error select,.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error textarea{border-color:#e74c3c}.trumbowyg-dark .trumbowyg-modal-box input,.trumbowyg-dark .trumbowyg-modal-box select,.trumbowyg-dark .trumbowyg-modal-box textarea{border-color:#343434;color:#fff;background:#222}.trumbowyg-dark .trumbowyg-modal-box input:hover,.trumbowyg-dark .trumbowyg-modal-box input:focus,.trumbowyg-dark .trumbowyg-modal-box select:hover,.trumbowyg-dark .trumbowyg-modal-box select:focus,.trumbowyg-dark .trumbowyg-modal-box textarea:hover,.trumbowyg-dark .trumbowyg-modal-box textarea:focus{border-color:#626262}.trumbowyg-dark .trumbowyg-modal-box input:focus,.trumbowyg-dark .trumbowyg-modal-box select:focus,.trumbowyg-dark .trumbowyg-modal-box textarea:focus{background-color:#2f2f2f}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{background:#1b7943}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover,.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus{background:#25a25a}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{background:#176437}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{background:#333;color:#ccc}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover,.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus{background:#444}.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{background:#111}.trumbowyg-dark .trumbowyg-overlay{background-color:rgba(15,15,15,.6)}
/* ==========================================================================
    MESSENGER LAYOUT: WRAPPER, LISTEN, HEADER
    ========================================================================== */

.chat-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
#chat-dynamic-viewport {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative; /* Anker für chat-scroll-down-btn */
}
.chat-list-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: var(--xs);
    position: relative;
    padding: var(--xs);
    padding-top: 4rem;
}
.chat-list {
    display: flex;
    flex-direction: column;
    gap: var(--xs);
    flex: 1 1 0;
    min-height: 0;
}
/* Neuer-Chat-Button (floating, bottom-right) */
.new-chat-btn {
    position: absolute;
    bottom: var(--xs);
    right: var(--xs);
    z-index: 10;
    min-width: auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.new-chat-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 5px 14px rgba(0,0,0,0.28);
}
.new-chat-btn i {
    transform: scaleX(-1);
}
/* Datums-Trenner zwischen Nachrichten */
.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: bold;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: var(--xs);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
/* Neue-Chat-Ansicht */
.new-chat-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: var(--xs);
    position: relative;
    padding: var(--xs);
}
.contact-section-label {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
    padding: 0 var(--xxs);
    margin-top: var(--xxs);
}
.contact-item {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--xs);
    color: var(--accent);
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-radius: var(--border-radius, 0.4rem);
    padding: var(--xxs) var(--xs);
}
.contact-item:hover {
    background-color: var(--item-color, var(--SO));
    color: var(--item-text-color, var(--white));
}
.chat-item {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--xs);
    color: var(--accent);
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.chat-item:hover {
    background-color: var(--item-color, var(--SO));
    color: var(--item-text-color, var(--white));
}
.messenger-init-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--m);
}
.messenger-init-spinner .spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid var(--light);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.chat-history-top-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
}

.chat-history-top-end-hint {
    text-align: center;
    font-size: 0.78rem;
    opacity: 0.6;
    padding: 0.35rem 0 0.5rem;
}
    /* --------------------------------------------------------------------------
        HEADER: MENUS AND COMPOSE DRAWER
        -------------------------------------------------------------------------- */
.chat-header-menu {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}
.chat-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 12rem;
    max-width: 19rem;
    z-index: 200;
    flex-direction: column;
    padding: var(--xxs) 0;
    color: var(--dark);
}
.chat-menu-dropdown.open {
    display: flex;
}
.chat-menu-item {
    display: flex;
    align-items: center;
    gap: var(--xs);
    padding: 0 var(--xs);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    color: var(--accent);
    font-size: 0.9rem;
    font-family: 'ss_semibold', sans-serif;
    text-transform: uppercase;
}
.chat-menu-item:hover {
    color: var(--accent);
}
/* ── Chat-Compose-Panel (Header-Drawer) ── */
.chat-compose-panel {
    position: relative;
    z-index: 98;
    margin: 0 var(--xs);
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-0.55rem);
    transition: max-height 0.28s cubic-bezier(0.32,0.72,0,1), opacity 0.22s ease;
    flex-shrink: 0;
    box-shadow: 0 -4px 20px rgb(0 0 0 / .22);
    background-color: var(--basic-light);
}
.chat-compose-panel.ccp-open { max-height: 40rem; overflow-y: auto; opacity: 1; transition: max-height 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease; }
.ccp-section { padding: 0.5rem 0 0.35rem 0; }
/* Heading über der Teilnehmerliste */
.ccp-list-heading {
    margin: 0.5rem 0.75rem 0.25rem;
    font-size: 0.75rem; font-family: 'bn_bold', sans-serif;
    opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em;
}
/* Tiles im CCP: a-Tags brauchen dieselbe Optik wie button.ui-tile-btn */
#ccp-menu-section a.ui-tile-btn {
    text-decoration: none; color: inherit;
}
#ccp-menu-section .ui-tile-btn.ui-tile-btn--disabled,
#ccp-menu-section a.ui-tile-btn.ui-tile-btn--disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

/* Buttons im Messenger niemals schrumpfen */
#messenger button,
#messenger .button,
#messenger .smallbutton,
#messenger .ui-tile-btn,
#messenger .bap-info-chat-btn,
#messenger .mht-btn {
    flex-shrink: 0 !important;
}

.ccp-compose-status { 
    padding: 0.3rem 0.6rem 0 0.6rem; 
    display: flex; 
    flex-direction: column;
    gap: var(--xs); 
}
.ccp-notify-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.28rem 0.45rem; font-size: 0.8rem;
    background: rgba(255,255,255,0.12); border-radius: 0.3rem; margin-bottom: 0.3rem;
}
.ccp-attach-list { display: flex; flex-wrap: wrap; gap: 0.3rem; padding-top: 0.1rem; }
.ccp-attach-chip {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.4rem; background: rgba(255,255,255,0.15);
    border-radius: 0.35rem; font-size: 0.75rem; cursor: pointer;
}
.ccp-attach-chip:hover { background: rgba(255,255,255,0.25); }
.ccp-attach-thumb {
    width: 1.5rem; height: 1.5rem; border-radius: 0.2rem;
    background-size: cover; background-position: center; flex-shrink: 0; display: inline-block;
}
/* ── CCP Teilnehmer-Liste ── */
.ccp-participants-list {
    padding: var(--xxs);
    gap: var(--xxs);
    display: flex;
    flex-direction: column;
    max-height: 12rem;
    min-height: 0;
    overflow-y: auto;
    --mask-scrollbar-width: 4px;
    --mask-scrollbar-thumb: rgba(255,255,255,0.2);
    --mask-scrollbar-thumb-hover: rgba(255,255,255,0.35);
}
.ccp-participants-list .messenger-person-row {
    width: 100%;
    flex: 0 0 auto;
}

/* Einheitliche Personenzeile im Messenger: End-Buttons nicht schrumpfen */
.messenger-person-row {
    min-width: 0;
}
.messenger-person-row .bar_main {
    min-width: 0;
}
.messenger-person-row .bar_name,
.messenger-person-row .bar_info {
    overflow: hidden;
    text-overflow: ellipsis;
}
.messenger-person-row .bar_end {
    flex: 0 0 auto;
    grid-auto-flow: column;
    grid-auto-columns: 2rem;
    gap: 0.2rem;
    margin-left: 0.35rem;
}
.messenger-person-row .bar_end .bap-info-chat-btn {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
}
    /* --------------------------------------------------------------------------
            CHAT VIEW: SEARCH, BUBBLES, MESSAGES
            -------------------------------------------------------------------------- */

    /* ── Input Compose Panel (ICP) – klappt unter dem Chat-Input auf und schiebt ihn hoch ── */
.icp-panel {
    position: relative; z-index: 90;
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s cubic-bezier(0.32,0.72,0,1), opacity 0.22s ease;
    border-radius: 0 0 0.5rem 0.5rem;
    flex-shrink: 0;
    background-color: var(--basic-light);
    display: flex;
    flex-direction: column;
}
.icp-panel.icp-open { max-height: 20rem; overflow: hidden; opacity: 1; transition: max-height 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease; }
/* Nur der Compose-Status-Bereich (Anhänge + Notify-Bar) scrollt – die Tiles bleiben fix */
#icp-compose-status {
    max-height: 10rem;
    --mask-scrollbar-width: 4px;
    --mask-scrollbar-thumb: rgba(0,0,0,0.15);
    --mask-scrollbar-thumb-hover: rgba(0,0,0,0.25);
}
.chat-input-wrapper.icp-open { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* ── ICP-Statusbadge hinter dem Plus-Button ── */
.icp-plus-badge {
    display: flex; align-items: center; gap: 0.2rem;
    cursor: pointer;
}
.icp-plus-bdg-item {
    display: inline-flex; align-items: center; gap: 0.15rem;
    font-size: 0.8rem; font-family: 'bn_bold', sans-serif;
    background: rgba(0,0,0,0.08); border-radius: 0.8rem;
    padding: 0.1rem 0.35rem; white-space: nowrap; opacity: 0.85;
    color: var(--accent);
}
.icp-plus-bdg-item--notify { color: var(--IL); background: none; font-size: 0.9rem; }
/* Badge automatisch ausblenden wenn ICP-Panel geöffnet ist */
#chat-form:has(#icp-panel.icp-open) #icp-plus-badge { display: none !important; }
#chat-form { border-radius: 0.5rem; }
#chat-form:has(.icp-panel.icp-open) { box-shadow: 0 -4px 20px rgb(0 0 0 / .22); }
.chat-header {
    display: flex;
    align-items: center;
    padding: 4.25rem var(--xs) 0 var(--xs);
}
.chat-header-gradient {
    padding-bottom: 0.35rem;
}
.chat-header-inner {
    background-color: var(--chat-header-color);
    color: var(--chat-header-txt);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    z-index: 99;
}
/* DOM-Suchleiste */
.chat-dom-search-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.35rem;
    margin: var(--xxs) var(--xs);
    flex-shrink: 0;
    height: 2rem;
}
.chat-dom-search-bar input {
    border: none !important;
    background: transparent !important;
    outline: none;
    flex: 1;
    height: 2rem;
    min-width: 0;
    font-family: inherit;
    font-size: 1.15rem;
    letter-spacing: inherit;
    color: var(--IL);
    margin: 0;
    padding: 0;
}
.chat-dom-search-bar button { 
    min-width: auto; 
    background: transparent;
    color: var(--PD);
    padding: 0;
}
.chat-dom-search-bar input::-webkit-search-cancel-button { display: none; }
.message-text ul { margin: 0.2em 0 0.15em 1.3em; padding: 0; }
.message-text li { margin: 0.05em 0; }
.chat-search-highlight {
    background: var(--highlight);
    padding: 0 1px;
}
.chat-search-highlight.chat-search-highlight--current {
    background: var(--highlight);
}
.chat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s);
    flex: 1 1 0;
    padding: var(--xs);
    --mask-scrollbar-thumb-hover: rgba(0,0,0,0.3);
}
.message-wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
    position: relative;
    background: transparent;
}
.message-wrapper .avatar {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 1.7rem;
    aspect-ratio: 1 / 1;
    position: relative;
}
.chat-header .chat-avatar-wrapper .online-status,
.message-wrapper .avatar .online-status {
    width: 11px;
    height: 11px;
}
.message-wrapper .avatar .online-status {
    animation: none;
}
.chat-item .chat-avatar-wrapper .online-status {
    width: 14px;
    height: 14px;
}
/* ── Tipp-Indikator (drei hüpfende Punkte) ── */
.typing-dots { display:inline-flex; gap:3px; align-items:center; }
.typing-dots span {
    display:block; width:6px; height:6px; border-radius:50%;
    background:currentColor; opacity:0.5;
    animation:typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes typing-bounce {
    0%,80%,100% { transform:translateY(0); opacity:0.4; }
    40%          { transform:translateY(-5px); opacity:1; }
}
.typing-indicator-wrapper { pointer-events:none; }
.chat-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}
.message {
    position: relative;
    display: flex; 
    grid-template-columns: auto;
    flex-direction: column;
    max-width: 95%;
    margin-left: 10px;
    margin-right: auto;
    padding: var(--xxs);
    background: var(--bubble-color);
    gap: 0 !important;
}
.message:has(.msg-attachments-box) {
    width: 95%;
}
.message.box small {
    display: flex;    
    flex-wrap: nowrap; 
    gap: 3px;
    white-space: nowrap;
    align-items: center;
    justify-content: space-between;
    width: auto;
}
.message::before {
    content: none !important;
    display: none !important;
}
/* innere Blase: neutral, enthält den eigentlichen Inhalt */
.message-body {
    display: flex;
    flex-direction: column;
    min-width: 5rem!important;
    gap: 0.2rem;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    border-radius: calc(var(--border-radius, 0.4rem) - 2px);
    color: var(--bubble-text-color);
}
.message-wrapper.my_message .message-body {
    background-color: transparent;
}
.message-text {
    margin-bottom: -0.35rem;
    padding: 0 var(--xxs);
}
.message-text.msg-emoji-only {
    font-size: 3rem;
    line-height: 1.15;
    margin-bottom: 0;
}
/* WhatsApp-Formatierung: Links, Code */
.message-text a { color: inherit; text-decoration: underline; word-break: break-all; }
.message-text code {
    font-family: monospace; font-size: 0.88em;
    background: rgba(0,0,0,0.12); border-radius: 0.2rem; padding: 0.05em 0.25em;
}
.message-wrapper:not(.my_message) .message {
    border-top-left-radius: 0 !important;
}
.message-wrapper:not(.my_message) .message::after {
    position: absolute;
    top: 0;
    left: -9px;
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 10px 10px 0px;
    border-color: transparent var(--bubble-color, var(--SO)) transparent transparent;
}
.message-wrapper.my_message {
    justify-content: flex-end;
}
.message-wrapper.my_message .message {
    border-bottom-right-radius: 0 !important;
    margin-right: 10px;
    margin-left: auto;
    max-width: 80%;
}
.message-wrapper.my_message .message::after {
    position: absolute;
    top: auto;
    left: auto;
    bottom: 0;
    right: -9px;
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0px 0px 10px;
    border-color: transparent transparent transparent var(--bubble-color, var(--SO));
}
.message-wrapper.my_message .message small {
    margin-left: auto;
}
.send_at {
    font-size: 0.6rem;
    opacity: 0.5;
}
/* ── Read-Receipt-Indikator ── */
.read-receipt {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
}
/* Zeitstempel in Sprechblasen: normaler Kontrast auf neutralem Grund */
.message .send_at {
    mix-blend-mode: normal;
    filter: none;
    opacity: 0.4;
}
.bap-info-chat-btn { font-size: 0.9rem; background-color: transparent; color: var(--PD); }
.bap-info-chat-btn:hover { background-color: transparent; color: var(--black); }
.chat-input-area {
    padding: var(--xs);
    padding-top: 0.35rem;
    border-radius: 0.5rem 0.5rem 0 0;
}
/* ── Antwort-Vorschau ── */
.chat-reply-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem var(--xs, 0.5rem);
    margin-bottom: 0.3rem;
    background: rgba(0,0,0,0.06);
    border-left: 3px solid var(--accent, var(--SO));
    border-radius: 0.3rem;
    font-size: 0.8rem;
}
.chat-input-wrapper .chat-reply-preview {
    margin: var(--xxs) var(--xxs) 0.3rem var(--xxs);
    border-radius: 0.3rem;
}
.reply-preview-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.8;
}
.reply-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.2rem;
    opacity: 0.5;
    font-size: 0.9rem;
    line-height: 1;
}
.reply-clear-btn:hover { opacity: 1; }

/* ── Zitat in gesendeter/empfangener Nachricht ── */
.msg-reply-quote {
    cursor: pointer;
    border-left: 3px solid var(--bubble-text-color, currentColor);
    background: color-mix(in srgb, var(--bubble-text-color, currentColor) 20%, transparent);
    border-radius: 0.3rem;
    padding: 0.3rem 0.5rem 0.25rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.35;
    transition: opacity 0.15s;
    width: -webkit-fill-available;
    width: stretch;
}
.msg-reply-quote:hover { opacity: 0.8; }
.msg-reply-author {
    font-weight: bold;
    opacity: 0.85;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-reply-text {
    opacity: 0.75;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* msg-highlight: auf message-wrapper, animiert innere .message-Box via CSS */
.message-wrapper.msg-highlight .message {
    animation: _msgHighlightPulse 0.8s ease-out;
}
.message-wrapper.msg-highlight .message::after { animation: _msgHighlightAfterPulse 0.8s ease-out; }
@keyframes _msgHighlightPulse {
    0%   { outline: 3px solid var(--bubble-color, var(--highlight)); outline-offset: 0; }
    50%  { outline: 3px solid var(--bubble-color, var(--highlight)); outline-offset: 0.4rem; }
    100% { outline: 3px solid transparent;        outline-offset: 0.6rem; }
}
@keyframes _msgHighlightAfterPulse {
    0%   { filter: drop-shadow(0 0 1px var(--bubble-color, var(--highlight))); }
    50%  { filter: drop-shadow(0 0 5px var(--bubble-color, var(--highlight))); }
    100% { filter: drop-shadow(0 0 0px transparent); }
}

/* ── Eingabe-Wrapper: übernimmt .searchbar-Look, Textarea + Aktionsleiste ── */
.chat-input-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
}
.chat-textarea {
    width: 100% !important;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    resize: none;
    overflow: hidden;
    height: calc(1.5em + 0.5rem); /* initial: genau eine Zeile */
    min-height: calc(1.5em + 0.5rem);
    max-height: 8rem;
    padding: var(--xxs);
    font-family: inherit;
    font-size: inherit;
    display: block;
    transition: height 0.1s ease;
}
.chat-textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ── Eingabe: ContentEditable (WhatsApp-like Live-Formatierung) ── */
.chat-textarea-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: calc(1.5em + 0.5rem);
}
/* ContentEditable überschreibt transparenz/overlay-Trick */
.chat-textarea-wrap .chat-textarea[contenteditable] {
    color: var(--IL);
    caret-color: inherit;
    position: static;
    z-index: auto;
    white-space: pre-wrap;
    word-break: break-word;
    height: auto;
    min-height: calc(1.5em + 0.5rem);
    max-height: 6rem;
    overflow-y: auto;
    overflow-x: hidden;
    outline: none;
    cursor: text;
}
.chat-textarea-wrap .chat-textarea[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--PD);
    pointer-events: none;
    display: block;
}
/* Inline-Formatierungs-Styles im Eingabefeld (WhatsApp-look) */
.chat-textarea[contenteditable] strong { font-weight: bold; }
.chat-textarea[contenteditable] em     { font-style: italic; }
.chat-textarea[contenteditable] s      { text-decoration: line-through; }
.chat-textarea[contenteditable] code   {
    font-family: monospace;
    font-size: 0.88em;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    padding: 0 2px;
}

.chat-input-actions {
    display: flex;
    align-items: center;
}
.chat-attach-menu {
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.15rem;
}
.chat-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    opacity: 0.45;
    color: inherit;
    border-radius: 0.3rem;
    transition: opacity 0.15s;
    font-size: 1.2rem;
}
.chat-attach-btn:hover { opacity: 0.9; }
.chat-attach-btn.notify-active { opacity: 1 !important; color: var(--IL) !important; }
/* Anhang-Vorschau über dem Eingabefeld */
.chat-attach-preview {
    padding: 0.4rem 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
/* Bilder-Vorschau: mehrere nebeneinander */
.ap-img-grid { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ap-img-cell { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.ap-img-box  { position: relative; width: 72px; height: 72px; }
.ap-img-box img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 0.4rem; display: block;
}
.ap-img-name {
    font-size: 0.65rem; max-width: 72px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0.65; text-align: center;
}
/* X-Kreis: absolut oben-rechts für Bilder, statisch am Ende für Dateien */
.ap-remove-circle {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: var(--white); border: none;
    font-size: 0.6rem; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; flex-shrink: 0; min-width: auto;
}
.ap-remove-circle:hover { background: rgba(190,0,0,0.85); }
.ap-img-box .ap-remove-circle {
    position: absolute; top: -5px; right: -5px; z-index: 1;
}
/* Datei-Zeile: volle Breite */
.ap-file-row {
    display: flex; align-items: center; gap: 0.4rem;
    background: var(--SO-l, rgba(0,0,0,0.07));
    border-radius: 0.4rem; padding: 0.3rem 0.5rem;
    font-size: 0.82rem; width: 100%; box-sizing: border-box;
}
.ap-file-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0.8;
}
/* ── Anhang-Box in Nachrichten-Bubble ───────────────────────────────── */
.msg-attachments-box {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;           /* Kinder auf volle Breite dehnen */
    gap: var(--xxs);
    background: rgba(0,0,0,0.07);  /* wie Quote-Hintergrund */
    border-radius: 0.5rem;          /* alle Ecken gleich */
    padding: 0.45rem 0.5rem;
}
/* Bilder-Box erscheint ÜBER dem Text → margin-bottom statt margin-top */
.msg-attachments-box.msg-att-box--top {
    margin-top: 0;
    margin-bottom: 0.4rem;
}
/* Bilder-Grid: 1 Bild = volle Breite, 2+ = 2 Spalten */
.msg-att-images-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
}
.msg-att-images-grid.msg-att-img-count-2,
.msg-att-images-grid.msg-att-img-count-3,
.msg-att-images-grid.msg-att-img-count-4 {
    grid-template-columns: 1fr 1fr;
}
/* 5+ Bilder: 3 normale Zellen, 4. Zelle ist Subgrid */
.msg-att-images-grid.msg-att-img-count-big {
    grid-template-columns: 1fr 1fr;
}
.msg-att-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem;
    border-radius: 0.35rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.msg-att-subgrid .msg-att-img-wrap {
    border-radius: 0.3rem;
    aspect-ratio: 1 / 1;
}
.msg-att-more-count {
    aspect-ratio: 1 / 1;
    background: rgba(0,0,0,0.52);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: zoom-in;
    border-radius: 0;
}
/* Jede Bildzelle: 1:1 */
@keyframes msg-img-shimmer {
    0%   { background-position: 100% 100%; }
    100% { background-position:   0%   0%; }
}
.msg-att-img-wrap {
    aspect-ratio: 1 / 1;
    border-radius: 0.35rem;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
    background: rgba(0, 0, 0, 0.1);
}
.msg-att-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bubble-color, var(--basic-light));
    background-image: linear-gradient(135deg, transparent 25%, var(--shimmer-color) 50%, transparent 75%);
    background-size: 300% 300%;
    background-repeat: no-repeat;
    animation: msg-img-shimmer 2.6s infinite linear;
    z-index: 90;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity 0.5s ease;
}
.msg-att-img-wrap.img-loaded::before {
    opacity: 0;
    pointer-events: none;
    animation: none;
}
.msg-att-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.msg-att-img-wrap.img-loaded img {
    opacity: 1;
}
/* _file.html.twig-Button: volle Breite der Box */
.msg-attachments-box .file-info-container {
    font-size: 0.78rem;
    display: flex !important;       /* inline-flex von .bar-btn überschreiben */
    width: 100% !important;
    box-sizing: border-box;
}
.msg-attachments-box .bar_main {
    flex: 1 1 0;
    min-width: 0;
}
.msg-attachments-box .bar_name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-attachment-expiry {
    font-size: 0.72rem;
    opacity: 0.55;
    margin-top: 0.05rem;
    margin-left: auto;
    display: flex;
    align-items: center;
}
.msg-attachment-expiry--soon { opacity: 0.9; color: var(--BW); }
/* ── Messenger-Lightbox ──────────────────────────────────────── */
#msg-lb-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.92);
    align-items: center; justify-content: center;
}
#msg-lb-overlay.active { display: flex; }
#msg-lb-container {
    position: relative; display: flex; flex-direction: column;
    align-items: center; gap: 0.5rem;
    max-width: 95vw; max-height: 95vh;
}
#msg-lb-img {
    max-width: 90vw; max-height: 85vh;
    object-fit: contain; border-radius: 0.5rem;
    display: block;
}
#msg-lb-caption {
    color: rgba(255,255,255,0.65); font-size: 0.8rem;
    max-width: 80vw; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#msg-lb-counter {
    color: rgba(255,255,255,0.4); font-size: 0.72rem;
}
#msg-lb-close {
    position: fixed; top: 0.75rem; right: 0.75rem;
    background: rgba(255,255,255,0.15); border: none; color: var(--white);
    font-size: 1.3rem; line-height: 1; width: 2.2rem; height: 2.2rem;
    border-radius: 50%; cursor: pointer; z-index: 1; min-width: auto;
}
#msg-lb-prev, #msg-lb-next {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.15); border: none; color: var(--white);
    font-size: 1.5rem; line-height: 1; width: 2.5rem; height: 2.5rem;
    border-radius: 50%; cursor: pointer; z-index: 1; min-width: auto;
}
#msg-lb-prev { left: 0.75rem; }
#msg-lb-next { right: 0.75rem; }
#msg-lb-prev:hover, #msg-lb-next:hover, #msg-lb-close:hover {
    background: rgba(255,255,255,0.3);
}
.chat-send-btn { 
    color: var(--accent); 
    min-width: 0 !important; 
    margin-left: auto;
}
.chat-send-btn:hover { opacity: 1; color: var(--accent-dark); }
.chat-send-btn:disabled { opacity: 0.25 !important; cursor: default; }
.chat-send-btn.is-sending { opacity: 1 !important; pointer-events: none; cursor: default; }
.chat-send-btn.send-error { color: var(--AE) !important; animation: _sendErrShake 0.4s ease; }
@keyframes _sendErrShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.chat-menu-danger { color: var(--AE) !important; }
.msg-deleted { opacity: 0.45; font-size: 0.9em; }

    /* --------------------------------------------------------------------------
        CHAT INPUT, ATTACHMENTS, LIGHTBOX
        -------------------------------------------------------------------------- */

    /* --------------------------------------------------------------------------
        BUBBLE ACTION PANEL (BAP)
        -------------------------------------------------------------------------- */

/* Ausgewählter Zustand */
.message-wrapper.bap-selected {
    background-color: var(--light);
    border-radius: 0.5rem;
    padding: var(--xxs);
    margin: calc(var(--xxs) * -1);
}
.message-wrapper.bap-selected > .message {
    filter: drop-shadow(0 0 10px rgb(0 0 0 / .22));
}
.chat-box.bap-mode .message-wrapper { cursor: pointer; }

/* ── CCP/ICP offen: alle Bubbles stärker dimmen + leichter Blur ─────── */
.chat-box.ccp-active .message-wrapper {
    opacity: 0.35 !important;
    filter: blur(1px);
    transition: opacity 0.2s, filter 0.2s;
}
.chat-box.ccp-active .message-wrapper,
.chat-box.ccp-active .message-wrapper * {
    pointer-events: none !important;
    cursor: default !important;
}
.chat-box.ccp-active .msg-hover-toolbar,
.chat-box.ccp-active .message-wrapper:hover .msg-hover-toolbar {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── BAP: sobald ≥1 Element ausgewählt ──────────────────────────────── */
/* Alle nicht-ausgewählten schwach gedimmt, ausgewählte & hover voll */
.chat-box.bap-mode.bap-has-selection .message-wrapper {
    opacity: 0.65 !important;
    filter: none;
    transition: opacity 0.2s;
}
.chat-box.bap-mode.bap-has-selection .message-wrapper.bap-selected,
.chat-box.bap-mode.bap-has-selection .message-wrapper:hover {
    opacity: 1 !important;
    filter: none !important;
}
/* Klick-Events in Bubbles deaktivieren – nur der Wrapper selbst ist tappbar */
.chat-box.bap-mode.bap-has-selection .message-wrapper * {
    pointer-events: none !important;
}
.chat-box.bap-mode.bap-has-selection .message-wrapper {
    pointer-events: auto !important;
}
/* Zitatlink bleibt klickbar */
.chat-box.bap-mode.bap-has-selection .message-wrapper .msg-reply-quote {
    pointer-events: auto !important;
    cursor: pointer;
}

/* ── Hover-Toolbar (MHT) ─────────────────────────────────
    Pill-Menü am oberen Rand der Bubble. Bleibt im Wrapper
    (kein Portal) und wird per CSS-Hover sichtbar.          */
.msg-hover-toolbar {
    position: absolute;
    top: -2rem; 
    right: 0.75rem;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--basic-light);
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    padding: var(--xxs);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    white-space: nowrap;
}
/* Fremde Nachrichten: Toolbar links ausrichten */
.message-wrapper:not(.my_message) .msg-hover-toolbar {
    right: auto; left: 0.75rem;
}
/* Hover-Sichtbarkeit direkt (kein media-query nötig) */
.message-wrapper:hover .msg-hover-toolbar            { opacity: 1; pointer-events: auto; }
.chat-box.bap-mode .message-wrapper .msg-hover-toolbar { opacity: 0 !important; pointer-events: none !important; }

/* Aktions-Buttons */
.mht-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    border-radius: 0.5rem;
    color: var(--accent, #555); font-size: 0.82rem; line-height: 1;
    transition: background 0.1s, color 0.1s;
    min-width: auto;
    width: 1.75rem; 
    height: 1.75rem;
    filter: none;
}
.mht-btn:hover { background: var(--light); color: var(--accent-dark, #222); filter: none; }
.mht-btn--danger:hover { background-color: rgb(255 0  0 / 0.15)!important; color: var(--AE) !important; }

/* Emoji-Buttons */
.mht-emoji {
    background: none; border: none; cursor: pointer;
    font-size: 1.05rem; line-height: 1;
    padding: 0.08rem 0.1rem; border-radius: 0.5rem;
    transition: transform 0.1s, background 0.1s;
    min-width: auto;
    width: 1.75rem; 
    height: 1.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    filter: none;
}
.mht-emoji:hover { transform: scale(1.05); background: var(--light); filter: none; }
.mht-emoji.self-reacted {
    background: rgb(41 129 188 / .15);
    border-radius: 0.5rem;
}

/* Trennlinie zwischen Emojis und Aktionen */
.mht-sep {
    width: 1px; height: 1.1rem;
    background: rgba(0,0,0,0.12);
    margin: 0 0.12rem; flex-shrink: 0;
}

/* Chat-Inputbereich ausblenden wenn Panel aktiv */
.chat-input-area.bap-active { display: none !important; }
#chat-scroll-down-btn.bap-active { display: none !important; }

/* Panel selbst */
.bubble-action-panel {
    position: relative;
    z-index: 50;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.22);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.25s cubic-bezier(0.32,0.72,0,1), transform 0.25s cubic-bezier(0.32,0.72,0,1);
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--basic-light);
}
.bubble-action-panel.bap-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1), transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
.bap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem 0.3rem;
    font-size: 0.82rem;
    opacity: 0.85;
    gap: 0.2rem;
}
.bap-selection-count { 
    font-size: 1rem;
    padding: 0.1em 0.6em;
    background: var(--SO);
    color: var(--white);
    font-family: 'bn_bold' !important;
}
.bap-selection-count--clickable {
    cursor: pointer;
}
.bap-selection-count--clickable:hover {
    filter: brightness(1.06);
}
.bap-selection-count--clickable:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 2px;
}
.bap-nav-btn { opacity: 0.72; min-width: 0; }
.bap-nav-btn:hover { opacity: 1; }
/* Bubble-Navigations-Highlight: Linie bewegt sich vom message-body weg (wie quote-scroll) */
.bap-nav-current .message { animation: bapNavPulse 0.7s ease-out; }
/* ::after-Schwanzelt ebenfalls aufleuchten */
.bap-nav-current .message::after { animation: bapNavAfterPulse 0.7s ease-out; }
@keyframes bapNavPulse {
    0%   { outline: 2px solid rgba(255,255,255,0.75); outline-offset: 0; }
    50%  { outline: 2px solid rgba(255,255,255,0.4);  outline-offset: 0.35rem; }
    100% { outline: 2px solid transparent;            outline-offset: 0.6rem; }
}
@keyframes bapNavAfterPulse {
    0%   { filter: drop-shadow(0 0 1px rgba(255,255,255,0.8)); }
    40%  { filter: drop-shadow(0 0 3px rgba(255,255,255,0.4)); }
    100% { filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
}

/* Bestätigungs-Sub-Zeile (Löschen) */
.bap-confirm-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: var(--xxs);
}

/* Emoji-Raster */
.bap-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--xxs);
    padding: 0.3rem 0.75rem 0.4rem;
}
.bap-emoji-btn {
    background: none; border: none; font-size: 1.55rem; cursor: pointer;
    padding: 0.1rem; border-radius: 0.35rem; line-height: 1; text-align: center;
    min-width: 0;
    transition: transform 0.1s, background 0.1s;
}
.bap-emoji-btn:hover { background: var(--light); transform: scale(1.05); }
.bap-emoji-btn.bap-self-reacted {
    background: rgb(41 129 188 / .15);;
}

/* Info-Subview */
.bap-info-back, .bap-back-btn {
    background: none; border: none; cursor: pointer; color: inherit;
    font-size: 1rem; padding: 0 0.4rem 0 0; min-width: 0;
    display: flex; align-items: center; gap: 0.3rem;
    opacity: 0.8; line-height: 1;
}
.bap-info-back:hover, .bap-back-btn:hover { opacity: 1; }
.bap-info-toprow {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem 0.15rem;
}
.bap-info-inline-back {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    padding: 0;
    line-height: 1;
    min-width: 0;
}
.bap-info-inline-back:hover {
    opacity: 1;
    color: inherit;
}
.bap-info-filter-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    padding-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
}
.bap-info-filter-wrap::-webkit-scrollbar { display: none; }
.bap-info-toprow .chat-filter-row {
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
}
.bap-info-toprow .chat-filter-row::-webkit-scrollbar { display: none; }
.bap-info-toprow .chat-filter-row .chat-filter-box {
    flex: 0 0 auto;
}
.bap-info-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.bap-inline-info-view .bap-info-filter-wrap {
    padding: var(--xxs) var(--xs);
}
.bap-info-results {
    transition: opacity 0.16s ease;
}
.bap-info-results.is-updating {
    opacity: 0.45;
}
.bap-info-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
}
.bap-info-loading .progress-spinner {
    border-color: rgba(0,0,0,0.15);
    border-top-color: var(--SO);
}
.bap-info-section { padding: 0.3rem 0.75rem 0.5rem;}
.bap-info-section-title {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    opacity: 0.6; margin-bottom: 0.3rem;
}
.bap-info-row {
    display: flex; align-items: center; gap: 0.55rem;
    padding: var(--xxs);
    border-radius: 0.5rem;
}
.bap-info-section .messenger-person-row {
    width: 100%;
}
.bap-info-section.messenger-readers-list {
    max-height: 12rem;
    overflow-y: auto;
    --mask-scrollbar-width: 4px;
    --mask-scrollbar-thumb: rgba(255,255,255,0.2);
    --mask-scrollbar-thumb-hover: rgba(255,255,255,0.35);
}
.bap-info-section .messenger-person-row .bar_info {
    font-size: 0.72rem;
    opacity: 0.6;
}
.bap-info-avatar {
    width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; font-size: 2rem;
}
.bap-info-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bap-info-details { flex: 1; min-width: 0; line-height: 1.3; }
.bap-info-name { font-size: 0.85rem; font-weight: bold; }
.bap-info-time { font-size: 0.72rem; opacity: 0.6; }
.bap-reactions-section .bap-emoji-grid { padding-bottom: 0.2rem; }

/* Bearbeitungsansicht (Inline-Edit im Panel) */
.bap-edit-view { padding: 0.4rem 0.75rem 0.65rem; display: flex; flex-direction: column; gap: 0.45rem; }
.bap-edit-error { font-size: 0.78rem; opacity: 0.75; padding: 0.15rem 0; }

/* Weiterleitungsansicht (Inline-Forward im Panel) */
.bap-fwd-view { padding: 0.4rem 0.75rem 0.65rem; display: flex; flex-direction: column; gap: 0.3rem; }
.bap-fwd-search-wrap {
    display: flex; padding: 0 0 0.1rem;
}
.bap-fwd-search-wrap input.text {
    flex: 1; width: 100%;
}
.bap-fwd-list {
    max-height: 10rem;
    display: flex;
    flex-direction: column;
    --mask-scrollbar-width: 4px;
    --mask-scrollbar-thumb: rgba(255,255,255,0.2);
    --mask-scrollbar-thumb-hover: rgba(255,255,255,0.35);
}
.bap-fwd-item {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.35rem 0.4rem; border-radius: 0.45rem; cursor: pointer;
    transition: background 0.1s;
}
.bap-fwd-item:hover { background: rgba(255,255,255,0.2); }
.bap-fwd-avatar {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-family: 'bn_bold', sans-serif;
    background: rgba(255,255,255,0.25); color: var(--white); overflow: hidden;
}
.bap-fwd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bap-fwd-name { font-size: 0.83rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Scroll-nach-unten Button in der Chat-Box ── */
.chat-scroll-down-btn {
    position: absolute;
    bottom: 6.5rem; /* über dem Input-Bereich */
    right: 1rem;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
    font-size: 0.85rem;
    line-height: 1;
}
.chat-scroll-down-btn:hover { opacity: 1; transform: scale(1.1); }
.chat-scroll-down-btn.visible { display: flex; }

/* ── Kontextmenü: neue Elemente ── */
/* ── Emoji-Schnellleiste im Kontextmenü ── */
.bubble-ctx-emoji-bar {
    display: flex; gap: 0.2rem; padding: 0.35rem 0.5rem 0.1rem;
    flex-wrap: nowrap; overflow-x: auto;
}
.bubble-ctx-emoji-bar::-webkit-scrollbar { display: none; }
.emoji-quick-btn {
    background: none; border: none; font-size: 1.35rem; cursor: pointer;
    padding: 0.1rem 0.15rem; border-radius: 0.3rem; line-height: 1;
    min-width: 0; flex-shrink: 0;
    transition: transform 0.1s, background 0.1s;
}
.emoji-quick-btn:hover { background: var(--light); transform: scale(1.05); }
.emoji-quick-btn.self-reacted {
    background: rgb(41 129 188 / .15);
}

/* ── Emoji-Grid (Akkordeon) ── */
.bubble-ctx-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.1rem;
    padding: 0.3rem 0.5rem;
    width: 100%;
    box-sizing: border-box;
}
.emoji-grid-btn {
    background: none; border: none; font-size: 1.2rem; cursor: pointer;
    padding: 0.1rem 0.15rem; border-radius: 0.3rem; line-height: 1;
    min-width: 0;
    transition: transform 0.1s, background 0.1s;
}
.emoji-grid-btn:hover { background: rgba(0,0,0,0.08); transform: scale(1.15); }

.msg-interaction-strips {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    bottom: -0.5rem;
    left: 0.35rem;
    max-width: calc(100% - 0.7rem);
}

/* ── Reaktions-Chips unter der Bubble ── */
.msg-reaction-strip {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    height: 1.4rem;
    padding: 0.125rem 0.25rem;
    justify-content: flex-start;
    border-radius: 0.5rem;
    background-color: var(--basic-dark);
    min-width: 0;
}
.msg-reaction-chip {
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 0.85rem; line-height: 1.4;
    min-width: 0;
    height: auto;
    background: transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    filter: none;
}
.msg-strip-sep {
    width: 1px;
    height: 0.9rem;
    background: rgba(255,255,255,0.22);
    flex: 0 0 auto;
}
.reaction-total-count,
.forward-count {
    font-size: 0.72rem;
    opacity: 0.75;
    color: var(--accent-dark);
    line-height: 1;
}
.msg-forward-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    justify-content: center;
    height: 1.4rem;
    padding: 0.125rem 0.25rem;
    border-radius: 0.5rem;
    border: none;
    appearance: none;
    background-color: var(--basic-dark);
    font-size: 0.72rem;
    line-height: 1.4;
    min-width: 0;
    color: inherit;
    box-shadow: none;
}
.msg-forward-strip:hover {
    color: var(--dark);
}
.msg-forward-strip i {
    font-size: 0.74rem;
    opacity: 0.8;
    line-height: 1;
}

/* ── Reaktoren-Popup ── */
.bmo-reactors-popup {
    position: fixed; z-index: 9800;
    min-width: 10rem; max-width: 16rem;
    padding: 0.4rem 0; border-radius: 0.6rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
    font-size: 0.82rem;
}
.reactors-inner { display: flex; flex-direction: column; }
.reactors-tabs {
    display: flex; flex-wrap: wrap; gap: 0.2rem;
    padding: 0.3rem 0.5rem 0.4rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.reactors-tab {
    padding: 0.15rem 0.5rem; border-radius: 1rem;
    background: transparent; cursor: pointer; font-size: 0.8rem;
    border: 1px solid transparent; transition: background 0.12s;
    min-width: auto;
}
.reactors-tab.active { background: var(--SO); color: var(--white); border-color: transparent; gap:0.3rem; }
.reactors-tab span { opacity: 0.85; }
.reactors-panel { display: none; padding: 0.25rem 0.5rem; max-height: 10rem; overflow-y: auto; }
.reactors-panel.active { display: block; }
.reactor-row {
    display: grid;
    grid-template-columns: 1.5em 1fr;
    gap: 0.4em;
    padding: 0.15rem 0.3rem;
    align-items: center;
}
.reactor-emoji { text-align: center; }
.reactor-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── "Weitergeleitet"-Badge ── */
.msg-forwarded-badge {
    font-size: 0.7rem; opacity: 0.6;
    margin: -0.35rem -0.6rem 0.35rem;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex; align-items: center; gap: 0.3em;
}

/* ── Geleseninfo-Liste ── */
.bubble-ctx-seen-list {
    padding: 0.2rem 0.8rem 0.35rem;
    font-size: 0.78rem;
    display: flex; flex-direction: column; gap: 0.2rem;
    max-height: 9rem; overflow-y: auto;
}
.bubble-ctx-seen-list .messenger-person-row {
    width: 100%;
}
.bubble-ctx-seen-list .messenger-person-row .bar_info {
    font-size: 0.72rem;
    opacity: 0.6;
}
.seen-reader-row { display: flex; align-items: center; gap: 0.5em; }
.seen-reader-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.seen-reader-time { font-size: 0.75em; opacity: 0.5; }
.seen-loading { padding: 0.3rem 0.5rem; opacity: 0.5; }

/* ── Forward-Modal ── */
.forward-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
}
.forward-modal {
    background: var(--white); color: var(--black);
    border-radius: 0.75rem; box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    width: min(24rem, 94vw); max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.forward-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-weight: bold;
}
.forward-modal-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; opacity: 0.6; padding: 0.2rem 0.4rem; border-radius: 0.3rem;
}
.forward-modal-close:hover { opacity: 1; background: rgba(0,0,0,0.07); }
.forward-modal-search {
    margin: 0.5rem 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 0.4rem;
    font-size: 0.9rem;
    width: calc(100% - 1.5rem);
    box-sizing: border-box;
}
.forward-modal-list {
    overflow-y: auto; flex: 1;
    padding: 0.25rem 0;
}
.forward-modal-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.9rem; cursor: pointer;
    transition: background 0.1s;
}
.forward-modal-item:hover { background: rgba(0,0,0,0.06); }
.forward-modal-item-name { font-size: 0.9rem; }
.forward-modal-item-avatar {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--SO); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: bold; flex-shrink: 0;
}
/* ── Unread-Badges ── */
.unread-badge,
.pbutton-badge {
    background-color: var(--highlight);
    color: var(--black);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    min-width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}
.pbutton-badge {
    position: absolute;
    bottom: 0.1rem;
    right: 0.1rem;
    font-size: 0.75rem;
    font-family: 'bn_bold';
    padding: 0.1rem 0.25rem;
    pointer-events: none;
}
/* ── Chat-Filter-Boxes (analog zu doc-filter-box in _event_documents) ── */
.chat-list-view .chat-filter-row {
    display: flex;
    gap: var(--xxs);
}
.chat-list-view .chat-filter-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--xxs);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--accent-light);
}
.chat-list-view .chat-filter-box .stat-count {
    font-family: 'bn_bold';
    font-size: 1.1rem;
    line-height: 0.8;
    padding-top: 0.2rem;
}
.chat-list-view .chat-filter-box .stat-label { font-size: 0.7rem; }
.chat-list-view .chat-filter-box.active {
    background: var(--IL);
    color: var(--white);
}
.chat-list-view .chat-filter-box.disabled {
    opacity: 0.35;
    pointer-events: none !important;
    cursor: default;
}
    /* --------------------------------------------------------------------------
        FILTERS, BADGES, SUPPORT TOGGLE
        -------------------------------------------------------------------------- */
/* Variante: unchecked = rechts + rot (→ offline), checked = links + grün (→ online) */
.switch-label--support .slider                  { background: var(--ST); }
.switch-label--support .slider::before          { transform: translateX(1rem); }
.switch-label--support input:checked ~ .slider  { background: var(--PT); }
.switch-label--support input:checked ~ .slider::before { transform: translateX(0); }
/* Persistente Position (≥500px): absolut oben links im Messenger-Wrapper */
@media (min-width: 500px) {
    #support-indicator-wrap {
        position: absolute;
        top: 1.2rem;
        left: var(--xs);
        z-index: 99999;
        display: flex !important;
    }
    /* Platz im .chat-list-view für den absoluten Toggle freistellen */
    .chat-wrapper { position: relative; }
    /* Inline-Wrapper in der normalen Listenposition verstecken (id überschreibt das) */
    .support-toggle-inline { display: none !important; }
}
/* ── Support-Indikator: gemeinsamer Wrapper ─────────────────────────────── */
.support-indicator-wrap {
    display: flex;
    align-items: center;
    gap: 0.4em;
}
/* Farbiger Kreis mit Icon */
.support-indicator-dot {
    width: 2rem;
    height: 2rem;
    min-width: auto;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: filter 0.15s;
}
.support-indicator-dot:hover { filter: brightness(1.15); }
.support-indicator-dot--online  { background: var(--PT); }
.support-indicator-dot--offline { background: var(--ST); }
.chat-edit-cancel-btn {
    min-width: auto;
}
.msg-edited-indicator,
.msg-instant-notify-indicator {
    font-size: 0.75rem;
}
.message-body small span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
}
.media-gallery-empty {
    margin-top: 4.5rem;
}

    /* --------------------------------------------------------------------------
        CHAT FRAGMENT: EXTRACTED INLINE STYLE HELPERS
        -------------------------------------------------------------------------- */
.chat-fragment-wrapper {
    display: contents;
}
.chat-header-back-btn {
    cursor: pointer;
    font-size: 1rem;
    color: var(--chat-header-txt);
}
.chat-header-back-btn:hover {
    color: var(--chat-header-txt);
}
.chat-header-avatar {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 2rem;
}
.chat-header-avatar--rounded {
    border-radius: 0.3rem;
}
.chat-header-avatar--circle {
    border-radius: 50%;
}
.chat-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat-avatar-initials {
    background-color: var(--chat-header-color);
    color: var(--chat-header-txt);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'bn_bold';
    font-size: 52%;
}
.chat-header-group-fallback,
.chat-header-support-fallback {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background-color: var(--chat-header-color);
    color: var(--chat-header-txt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.chat-header-group-fallback {
    border-radius: 0.3rem;
}
.chat-header-support-fallback {
    border-radius: 50%;
}
.chat-header-icon-52 {
    font-size: 52%;
    color: var(--chat-header-txt);
}
.chat-avatar-wrapper--profile {
    cursor: pointer;
}
.chat-header-title-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.chat-header-title {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-header-subtitle {
    font-size: 0.75rem;
    opacity: 0.75;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 0.35em;
    overflow: hidden;
}
.chat-header-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-header-title-bold {
    font-weight: bold;
}
.chat-encrypted-badge {
    display: none;
    align-items: center;
    gap: 0.2em;
    font-size: 0.85em;
    opacity: 0.8;
    flex-shrink: 0;
    white-space: nowrap;
}
.chat-header-source {
    font-size: 0.72rem;
    opacity: 0.65;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-header-source-icon {
    margin-right: 0.3em;
}
.chat-header-context-code {
    font-size: 0.75em;
    opacity: 0.5;
    margin-left: 0.5em;
}
.chat-header-menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0.2rem 0.3rem;
    display: flex;
    align-items: center;
}
.bap-info-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'bn_bold', sans-serif;
    font-size: 52%;
    color: var(--white);
}
.chat-dom-search-icon {
    opacity: 0.5;
    flex-shrink: 0;
}
.chat-dom-search-count {
    font-size: 0.8rem;
    opacity: 0.55;
    white-space: nowrap;
}
.msg-encrypted-lock-icon {
    font-size: 0.8em;
    opacity: 0.55;
}
.msg-encrypted-pending {
    opacity: 0.6;
}
.msg-attachment-expiry-icon {
    font-size: 0.65em;
    margin-right: 0.25rem;
    height: 0.75rem;
    display: flex;
    align-items: center;
}
.message-text--typing {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25em 0.5em;
}
.msg-meta {
    margin-left: auto;
}
.msg-indicator-icon {
    font-size: 0.65em;
    opacity: 0.45;
}
.chat-empty-text {
    margin: auto;
}
.chat-preview-notice {
    padding: 0.6rem 1rem;
    background: var(--highlight);
    font-size: 0.85em;
    text-align: center;
    opacity: 0.9;
}
.chat-preview-notice-icon {
    margin-right: 0.4em;
}
.chat-send-btn-inline {
    background: transparent;
    filter: none;
    min-width: auto;
}
.bap-nav-btn-hidden {
    display: none;
    cursor: pointer;
}
.bap-selection-center {
    display: flex;
    flex: 1;
    justify-content: center;
}
.bap-close-btn {
    cursor: pointer;
}
.msg-avatar-shell {
    overflow: visible !important;
}
.msg-avatar-shell--clickable {
    cursor: pointer;
}
.msg-avatar-figure {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}
.msg-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'bn_bold';
    font-size: 52%;
    border-radius: 50%;
}
.msg-author-row {
    margin-bottom: -0.2rem;
}
.msg-author-link {
    cursor: pointer;
}

/**
 * BMO Visitor Chat Widget Styles
 * Datei: files/core/css/visitor_chat.css
 */

/* ── Container ──────────────────────────────────────────────────────── */
.bmo-visitor-chat {
    --vc-color: hsl(212, 55%, 42%);
    --vc-color-dark: hsl(212, 55%, 32%);
    --vc-radius: 1rem;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    font-family: inherit;
}

/* ── Öffnen-Button ──────────────────────────────────────────────────── */
.bmo-vc-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    background-color: var(--vc-color);
    color: #fff;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    transition: background-color 0.15s, transform 0.1s;
}
.bmo-vc-trigger:hover  { background-color: var(--vc-color-dark); }
.bmo-vc-trigger:active { transform: scale(0.97); }
.bmo-vc-trigger .icon  { font-family: 'bn_icons', sans-serif; font-size: 1.1rem; }

/* ── Chat-Panel ──────────────────────────────────────────────────────── */
.bmo-vc-panel {
    position: absolute;
    bottom: 3.8rem;
    right: 0;
    width: min(22rem, 92vw);
    min-height: 18rem;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--vc-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.bmo-vc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--vc-color);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}
.bmo-vc-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: 'bn_icons', sans-serif;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
    opacity: 0.8;
}
.bmo-vc-close:hover { opacity: 1; }

/* ── Nachrichten-Liste ───────────────────────────────────────────────── */
.bmo-vc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #f5f5f7;
}

/* ── Einzelne Nachricht ──────────────────────────────────────────────── */
.bmo-vc-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}
.bmo-vc-msg.mine    { align-self: flex-end; align-items: flex-end; }
.bmo-vc-msg.theirs  { align-self: flex-start; align-items: flex-start; }

.bmo-vc-bubble {
    padding: 0.55rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}
.bmo-vc-msg.mine   .bmo-vc-bubble { background-color: var(--vc-color); color: #fff; border-bottom-right-radius: 0.2rem; }
.bmo-vc-msg.theirs .bmo-vc-bubble { background-color: #fff; color: #222;            border-bottom-left-radius: 0.2rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.bmo-vc-meta {
    font-size: 0.72rem;
    color: #888;
    margin-top: 0.2rem;
    padding: 0 0.2rem;
}

/* ── Name-Eingabe ────────────────────────────────────────────────────── */
.bmo-vc-name-row {
    padding: 0.5rem 0.75rem 0;
}
.bmo-vc-name-input {
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    background: #f9f9f9;
}

/* ── Eingabe-Zeile ───────────────────────────────────────────────────── */
.bmo-vc-input-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid #eee;
    background: #fff;
}
.bmo-vc-input {
    flex: 1;
    resize: none;
    border: 1px solid #ddd;
    border-radius: 0.65rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.4;
    max-height: 7rem;
    overflow-y: auto;
}
.bmo-vc-input:focus { outline: 2px solid var(--vc-color); border-color: transparent; }

.bmo-vc-send {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    background-color: var(--vc-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-family: 'bn_icons', sans-serif;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}
.bmo-vc-send:hover    { background-color: var(--vc-color-dark); }
.bmo-vc-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Status-Zeile ────────────────────────────────────────────────────── */
.bmo-vc-status {
    margin: 0;
    padding: 0.3rem 0.75rem 0.5rem;
    font-size: 0.8rem;
    text-align: center;
}

/* ── Responsive: auf kleinen Screens nicht fixed positionieren ───────── */
@media (max-width: 480px) {
    .bmo-visitor-chat {
        bottom: 0.75rem;
        right: 0.75rem;
    }
    .bmo-vc-panel {
        width: calc(100vw - 1.5rem);
        right: 0;
    }
}