#agendaBox ul {
   list-style-type: none;
}

#agendaBox ul.teaser-speaker li {
   float: left;
   margin-left: 0px;
}

#agendaBox ul.bulletsList {
   list-style-type: square;
}

#agendaBox .tab-heading {
	padding: 15px 15px;
}

#agendaBox .tab-pane.layout1 {
 padding:15px; 
}

#agendaBox .tab-pane {
 padding:0px; 
}

#agendaBox .panel {
    position: relative;
}

#agendaBox ul.nav-tabs li.nav-item a {
    color: inherit;
    text-decoration: none;
}

#agendaBox .panel-type-keynote h3 {
	font-weight: bold;
}

#agendaBox td.session-timing div {
	padding: 0px 20px;
	line-height: 1.2;
}

#agendaBox td .panel-heading,
 #agendaBox td .panel-heading div {
	font-size: 1.2rem;
}

#agendaBox td.session .panel {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

#agendaBox td.session .panel > .panel-heading {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

#agendaBox td.session-timing {
	width: 10%;
}

#agendaBox table.table-multitrack td.session-timing-for-coltotal-2 {
	width: 10%;
}

#agendaBox td.session-col-0,
 #agendaBox td.session-col-1 {
	width: 90%;
}

#agendaBox table.table-multitrack td.multitrack-session.session-coltotal-2 {
	width: 45%;
}

#agendaBox td.session-col-3 {
	width: 30%;
}

#agendaBox td.session-col-4 {
	width: 22.5%;
}

#agendaBox table.table-multitrack td.multitrack-session.session-colitem-0 {
	width: 90%;
}


#agendaBox td.session-colitem-12 {
	width: 60%;
}

#agendaBox td .panel-type-group > .panel-body {
	padding: 0px 0px;
	margin: 0px 0px;
}

#agendaBox td .panel-body ul,
 #agendaBox td .panel-body li {
	padding: 0px 0px;
	margin: 0px 0px;
}

#agendaBox td .panel-body li div {
	padding-right: 0px;
	padding-left: 0px;
}

#agendaBox .table .td-first {
	width: 100px;
}

#agendaBox .sessiontags {
	position: absolute;
	bottom: 5px;
	right: 20px;
}

#agendaBox .sessiontags li {
	float: left;
	font-size: 12px;
}

#agendaBox .sessiontags li::before {
	content: "\00a0|\00a0"
}

#agendaBox .sessiontags li:first-child::before {
	content: ""
}


#agendaBox .hero-unit.speakersbox {
	min-height: 200px;
	height: 200px;
	padding: 30px 30px;
}

#agendaBox .panel-title {
	display: block;
	font-weight: bold;
}

#agendaBox .panel-title.lvl-1 {
	text-transform: uppercase;
	display: block;
	font-weight: normal;
}

#agendaBox .table-mainonlygroup .panel-title {
	font-weight: normal;
}

#agendaBox .table-mainonlygroup .panel-title.lvl-1 {
	font-weight: bold;
}

#agendaBox .speakerName {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
}

#agendaBox .speakerhead {
	text-decoration: underline;
}


/** Slider Definition **/
#agendaSlider-wrap{position: relative; margin: 0 auto; overflow: hidden; width: 100%; position: relative;}
#agendaSlider{list-style:none; margin-bottom: 0px; position: relative;}
#agendaSlider li{float: left; margin: 0 20px 0px 0 !important;}
#agendaSlider li a img{}

#agendaSlider .carousel-controls{margin: 0 auto; width: 100%;list-style:none;}
#agendaSlider .carousel-controls span {position:absolute;bottom:20px;font-size:40px;}

#agendaSlider .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
	top: -20%;
}


#agendaSlider li.withtextoverlay {
	overflow: hidden;
	position: relative;
}


#agendaSlider li.withtextoverlay div.caption {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 35%;
  padding: 10px 10px;
  overflow: hidden;
  background: #333333;
  background: rgba(0, 0, 0, 0.75);
  font-size: 0.9em;
}

#agendaSlider li.withtextoverlay div.caption span {
	display: block;
	margin: 0x;
	padding: 0x;
	width: 100%;
	color: #fff;
}

#agendaSlider li.withtextoverlay div.caption span.company {
  display: block;
  height: 18px;
  overflow: hidden;
}


#agendaSlider li:hover {
    opacity: 0.5;
    transition: all 0.3s ease;
    position: relative;
}


/** SOCIAL SHARING BUTTONS **/

#agendaBox .socialsharing {
    position: relative;
}

#agendaBox .socialsharing ul {
    margin: 0;
    padding: 5px;
}

#agendaBox .socialsharing ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

#agendaBox .socialsharing i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

#agendaBox .socialsharing i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

#agendaBox .socialsharing .fa-facebook:hover { /* round facebook icon*/
    background: #4060A5;
}

#agendaBox .socialsharing .fa-twitter:hover { /* round twitter icon*/
    background: #00ABE3;
}

#agendaBox .socialsharing .fa-google-plus:hover { /* round google plus icon*/
    background: #e64522;
}

#agendaBox .socialsharing .fa-github:hover { /* round github icon*/
    background: #343434;
}

#agendaBox .socialsharing .fa-pinterest:hover { /* round pinterest icon*/
    background: #cb2027;
}

#agendaBox .socialsharing .fa-linkedin:hover { /* round linkedin icon*/
    background: #0094BC;
}

#agendaBox .socialsharing .fa-flickr:hover { /* round flickr icon*/
    background: #FF57AE;
}

#agendaBox .socialsharing .fa-instagram:hover { /* round instagram icon*/
    background: #375989;
}

#agendaBox .socialsharing .fa-vimeo-square:hover { /* round vimeo square icon*/
    background: #83DAEB;
}

#agendaBox .socialsharing .fa-stack-overflow:hover { /* round stack overflow icon*/
    background: #FEA501;
}

#agendaBox .socialsharing .fa-dropbox:hover { /* round dropbox icon*/
    background: #017FE5;
}

#agendaBox .socialsharing .fa-tumblr:hover { /* round tumblr icon*/
    background: #3a5876;
}

#agendaBox .socialsharing .fa-dribbble:hover { /* round dribble icon*/
    background: #F46899;
}

#agendaBox .socialsharing .fa-skype:hover { /* round skype icon*/
    background: #00C6FF;
}

#agendaBox .socialsharing .fa-stack-exchange:hover { /* round stack exchange icon*/
    background: #4D86C9;
}

#agendaBox .socialsharing .fa-youtube:hover { /* round youtube icon*/
    background: #FF1F25;
}

#agendaBox .socialsharing .fa-xing:hover { /* round xing icon*/
    background: #005C5E;
}

#agendaBox .socialsharing .fa-rss:hover { /* round rss icon*/
    background: #e88845;
}

#agendaBox .socialsharing .fa-foursquare:hover { /* round foursquare icon*/
    background: #09B9E0;
}

#agendaBox .socialsharing .fa-youtube-play:hover { /* round youtube play button icon*/
    background: #DF192A;
}

#agendaBox ul.layout-agendaTeaserBox li, .schedule ol li {
	margin-left: 20px;
	margin-bottom: 3px;
}

#agendaBox ul.layout-agendaTeaserBox li {
	list-style: square;
}

/*
| 3.2. HOME PAGE SECTION: SPEAKERS CAROUSEL
|
| Some of the styles are not only for home page elements, but all
| are only for the speakers.
| _________________________________________________________________ */
#agendaBox  .speaker {
    margin-bottom: 40px;
}

#agendaBox .speaker.item {
    margin: 0;
}

#agendaBox .speaker span.name {
    font-size: 18px;
    line-height: 1em;
    margin: 5px 5px;
}

#agendaBox .speaker span.company {
    line-height: 1em;
    margin: 5px 5px;
    height: auto;
}

#agendaBox .speaker.featured:hover .speaker-name {
    color: #BC9F60;
}

#agendaBox .speaker.featured .speaker-name {
    color: #BC9F60;
}

#agendaBox .speaker.featured .read-more-link {
    color: #000;
}

#agendaBox .speaker .read-more-link {
    color: #BC9F60;
    display: none;
    height: 22px;
}

#agendaBox .speaker:hover .read-more-link {
    display: block;
    font-weight: bold;
    font-size: 14px;
    margin-left:5px;
}

#agendaBox .speaker:hover .speaker-about {
    display: none;
}

#agendaBox .speaker .read-more-link .readmore-icon {
    color: #BC9F60;
    font-size: 11px;
}

#agendaBox .speaker.featured .read-more-link .readmore-icon {
    color: #000;
}

#agendaBox .speaker .speaker-image {
    transition: all 0.3s ease;
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

#agendaBox .speaker .speaker-image:hover {
    opacity: 0.5;
    transition: all 0.3s ease;
    position: relative;
}

#agendaBox .speaker .speaker-about {
    font-size: 13px;
    margin-left:5px;
}

#agendaBox .speaker .exhibitor-info .content i {
    margin-right: 10px;
}

#agendaBox ul.shortformat {
	margin: 0;
	padding: 0;
}

#agendaBox ul.shortformat li {
	margin: 0;
	padding: 0;
	display: inline;
}


#agendaBox .card.speaker .card-header {
    min-height: 150px;
}

#agendaBox tr.col-cat-52 td.td-first div.panel-heading:after,
 #agendaBox tr.col-cat-54 td.td-first div.panel-heading:after {
  content: "";
  background-image:url('../../../_assets/a1a5c2feebcd9df6b4822eb8c1df5649/Images/240x60_premium.png');
  background-size: 100% 100%;
  display: inline-block;

  /*size */
  width:100px;
  height: 25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;
}

#agendaBox tr.col-cat-54 td.td-first div.panel-heading:after {
  background-image:url('../../../_assets/a1a5c2feebcd9df6b4822eb8c1df5649/Images/240x60_freemium.png');
}

#agendaBox tr.col-cat-589 td.td-first div.panel-heading:after {
  background-image:url('../../../_assets/a1a5c2feebcd9df6b4822eb8c1df5649/Images/240x60_mediathek.png');
}



@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	#agendaBox table, #agendaBox thead, #agendaBox tbody, #agendaBox th, #agendaBox td, #agendaBox tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#agendaBox thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#agendaBox tr { border: 1px solid #ccc; }
	
	#agendaBox td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		width: auto !important;
	}
	
	#agendaBox td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
}

/* ==========================================================================
   XMS VideoPlayer - Base Styles
   ========================================================================== */

.videoplayer {
    --vp-aspect-ratio: 16/9;
    --vp-max-width: 100%;
    --vp-columns: 3;
    --vp-gap: 1.5rem;
    --vp-play-btn-size: 4rem;
    --vp-play-btn-bg: rgba(0, 0, 0, 0.7);
    --vp-play-btn-color: #fff;
    --vp-card-bg: #fff;
    --vp-card-radius: 0.5rem;
    --vp-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Aspect Ratios
   ========================================================================== */

.ratio-16-9 {
    --vp-aspect-ratio: 16/9;
}

.ratio-1-1 {
    --vp-aspect-ratio: 1/1;
}

.ratio-9-16 {
    --vp-aspect-ratio: 9/16;
}

/* ==========================================================================
   Player Wrapper (Aspect Ratio Container with Cropping)
   ========================================================================== */

.videoplayer__player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: var(--vp-aspect-ratio);
    overflow: hidden;
    background: #000;
}

.videoplayer__iframe {
    border: 0;
}

/* Standard 16:9 - no cropping needed */
.videoplayer__player-wrapper.ratio-16-9 .videoplayer__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 1:1 Square - horizontal cropping */
.videoplayer__player-wrapper.ratio-1-1 .videoplayer__iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 177.78%; /* 16/9 = 1.7778 */
    height: 100%;
}

/* 9:16 Portrait - vertical cropping */
.videoplayer__player-wrapper.ratio-9-16 .videoplayer__iframe {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 177.78%; /* 16/9 = 1.7778 */
}

/* Portrait container constraint */
.videoplayer--single.ratio-9-16 {
    max-width: 400px;
}

/* ==========================================================================
   Thumbnail
   ========================================================================== */

.videoplayer__thumbnail {
    position: relative;
    aspect-ratio: var(--vp-aspect-ratio);
    overflow: hidden;
    background: #1a1a1a;
}

.videoplayer__thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.videoplayer__modal-trigger:hover .videoplayer__thumbnail-image {
    transform: scale(1.05);
}

.videoplayer__thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}

.videoplayer__thumbnail-placeholder--youtube {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

.videoplayer__thumbnail-placeholder--vimeo {
    background: linear-gradient(135deg, #1ab7ea 0%, #0088cc 100%);
}

/* ==========================================================================
   Play Button Overlay
   ========================================================================== */

.videoplayer__play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--vp-play-btn-size);
    height: var(--vp-play-btn-size);
    background: var(--vp-play-btn-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    pointer-events: none;
}

.videoplayer__play-button svg {
    width: 50%;
    height: 50%;
    margin-left: 4px; /* Optical centering of play icon */
    color: var(--vp-play-btn-color);
}

.videoplayer__modal-trigger:hover .videoplayer__play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.9);
}

.videoplayer__modal-trigger:focus .videoplayer__play-button {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ==========================================================================
   Modal Trigger
   ========================================================================== */

.videoplayer__modal-trigger {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.videoplayer__modal-trigger:focus {
    outline: none;
}

/* ==========================================================================
   Card Styles
   ========================================================================== */

.videoplayer__card {
    background: var(--vp-card-bg);
    border-radius: var(--vp-card-radius);
    overflow: hidden;
    box-shadow: var(--vp-card-shadow);
}

.videoplayer__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.videoplayer__card-body {
    padding: 1rem;
}

.videoplayer__card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Title (Single View)
   ========================================================================== */

.videoplayer--single .videoplayer__title {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
}

/* ==========================================================================
   Grid Layout (Legacy - now using Bootstrap row-cols)
   ========================================================================== */

.videoplayer__grid {
    display: grid;
    gap: var(--vp-gap);
}

/* Column configurations */
.cols-2 .videoplayer__grid {
    grid-template-columns: repeat(2, 1fr);
}

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

.cols-4 .videoplayer__grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .cols-4 .videoplayer__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .cols-3 .videoplayer__grid,
    .cols-4 .videoplayer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .cols-2 .videoplayer__grid,
    .cols-3 .videoplayer__grid,
    .cols-4 .videoplayer__grid {
        grid-template-columns: 1fr;
    }

    .videoplayer__card-body {
        padding: 0.75rem;
    }

    .videoplayer__card-title {
        font-size: 0.9375rem;
    }

    :root {
        --vp-gap: 1rem;
    }
}

/* ==========================================================================
   Error State
   ========================================================================== */

.videoplayer--error {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: var(--vp-card-radius);
    text-align: center;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .videoplayer__thumbnail-image,
    .videoplayer__play-button {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .videoplayer__play-button {
        background: #000;
        border: 2px solid #fff;
    }

    .videoplayer__card {
        border: 1px solid currentColor;
    }
}

/* ==========================================================================
   Card Slider (Bootstrap 5 Carousel)
   ========================================================================== */

.videoplayer-slider {
    --slides-per-view: 3;
}

/* Carousel Controls - bessere Sichtbarkeit */
.carousel-control-prev,
.carousel-control-next {
    width: 3rem;
    opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    background-size: 50%;
}

/* Carousel Indicators */
.carousel-indicators {
    bottom: -2.5rem;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--bs-secondary);
    opacity: 0.5;
}

.carousel-indicators .active {
    opacity: 1;
}

/* Spacing für Indicators */
.carousel {
    margin-bottom: 2rem;
}
/* PluginStyles AdServer */
/* AdvTeaser Stxyles */

.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

.teaserCardBox [class*="col-"] {
    margin-bottom: 1rem;
    padding-right: 0;
}

.teaserCardBox h5 {
    font-size: 1.15rem;
}

.teaserCardBox .row.itemlist .row {
    margin-right: 0 !important;
}

.contentincluder .carousel-inner {
	text-overflow:hidden;
}

.contentincluder .carousel-indicators li {
    background-color: #ece8e8;
}

.contentincluder .carousel-indicators li.active {
    background-color: #3973e6;
}


.contentincluder .carousel-control .carousel-control-icon {
    padding: 1rem;
    border-radius: 50%;
    font-size: 1rem;
    background-color: #ece8e8;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
    transition: color .2s ease;
}

/** HORIZONTAL/Vertical TAB CONTENT *************************/
.contentincluder.tabcontent .tab-content {
    border: 1px solid #ddd;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.contentincluder.tabcontent .nav-tabs .nav-link {
    border: 1px solid #dee2e6;
}

/** HORIZONTAL TAB CONTENT *************************/
.contentincluder.horizontal-tabcontent .nav-tabs li.nav-item > a.active {
    border-color: #dee2e6 #fff #fff #dee2e6 ;
}

.contentincluder.horizontal-tabcontent .nav-tabs li.nav-item > a.active:last-child {
    border-color: #dee2e6 #dee2e6 #fff #dee2e6;
}


/** VERTICAL TAB CONTENT *************************/

.contentincluder.vertical-tabcontent .nav-tabs .nav-link {
    border-top-left-radius: .25rem;
    border-top-right-radius: 0rem;
}

.contentincluder.vertical-tabcontent .nav-tabs li.nav-item > a.active {
    border-color: #dee2e6 #fff #fff #dee2e6;
}

.contentincluder.vertical-tabcontent .nav-tabs li.nav-item > a.active:last-child {
    border-color: #dee2e6 #fff #dee2e6 #dee2e6;
}


.nav-tabs .nav-item.bg-tabs-item .nav-link, .nav-tabs .nav-item.bg-tabs-item .nav-link {
	background-color: #f2f2f2;
	color: #343A40;
	font-weight: bold;
	border-style: outset;
    padding: 1em 0 1em;
}

.nav-tabs .nav-item.bg-tabs-item .nav-link.active, .nav-tabs .nav-item.bg-tabs-item .nav-link.active {
	background-color: #0068a9;
	color: #FFFFFF;
	font-weight: bold;
	border-style: outset;
}

.megatab > .contentincluder.tabcontent:first-child .nav-item .nav-link {
    font-size: 1.8rem;
}

.megatab > .contentincluder.tabcontent:first-child .nav-item .nav-link.active {
    background-color: #7a7a80 !important;
}

.megatab > .contentincluder.tabcontent:first-child .tab-content .tab-pane.active {
    background-color: #7a7a80 !important;
}

/**
 * xms_crmweb — Conversion-Layer Styles
 *
 * Komponenten:
 *   - BlurGate   (#xms-blur-gate)
 *   - Modal      (#xms-conversion-modal)
 *   - StickyCta  (#xms-sticky-cta)
 *   - FooterCta  (.xms-footer-cta)
 *
 * Zustandssteuerung via JS (conversion.js) durch CSS-Klassen —
 * kein inline display:block/none ausser beim initialen overlay-Hide.
 */

/* === BLUR GATE ================================================ */

.xms-blur-gate {
    position: relative;
}

/* Inaktiv/Standard: kein Platz, kein visueller Effekt */
.xms-blur-gate:not(.xms-blur-gate--active) {
    height: 0;
    overflow: hidden;
}

/* Eingeloggt: komplett entfernen */
.xms-blur-gate--inactive {
    display: none !important;
}

/* Aktiv: z-index damit Gate über dem Artikeltext liegt (position via JS inline) */
.xms-blur-gate.xms-blur-gate--active {
    z-index: 10;
}

/* Overlay: Gradient mit fixen Pixelwerten (unabhängig von Gate-Höhe),
   padding-top schiebt CTA-Inhalt in den vollen Weiss-Bereich */
.xms-blur-gate__overlay {
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0)   0px,
        rgba(255, 255, 255, 1)   160px
    );
    padding-top: 180px;
    padding-bottom: 40px;
    text-align: center;
}

.xms-blur-gate__inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
}

.xms-blur-gate__headline {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: #212529;
}

.xms-blur-gate__btn {
    display: block;
    max-width: 340px;
    margin: 0 auto .75rem;
}

.xms-blur-gate__register-mount {
    display: block;
    margin-bottom: .75rem;
}

.xms-blur-gate__login {
    display: block;
    margin-top: .75rem;
    font-size: .875rem;
    color: #6c757d;
    text-decoration: underline;
}

.xms-blur-gate__login:hover {
    color: #495057;
}


/* === CONVERSION MODAL ======================================== */

.xms-conversion-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

.xms-conversion-modal--visible {
    display: flex;
}

.xms-conversion-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    cursor: pointer;
}

.xms-conversion-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    max-width: 480px;
    width: calc(100% - 2rem);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    text-align: center;
}

.xms-conversion-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
    color: #6c757d;
}

.xms-conversion-modal__close:hover {
    color: #212529;
}

.xms-conversion-modal__body {
    padding-top: .5rem;
}

.xms-conversion-modal__headline {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #212529;
}

.xms-conversion-modal__subline {
    color: #6c757d;
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

.xms-conversion-modal__login {
    display: block;
    margin-top: .75rem;
    font-size: .875rem;
    color: #6c757d;
    text-decoration: underline;
}

.xms-conversion-modal__login:hover {
    color: #495057;
}


/* === STICKY CTA ============================================== */

.xms-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    z-index: 1040;
    padding: .6rem 0;
    transition: transform .25s ease;
}

.xms-sticky-cta--hidden {
    transform: translateY(110%);
    pointer-events: none;
}

.xms-sticky-cta__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.xms-sticky-cta__text {
    flex: 1 1 auto;
    font-size: .9rem;
    color: #212529;
    font-weight: 500;
}

.xms-sticky-cta__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.xms-sticky-cta__login {
    font-size: .875rem;
    color: #6c757d;
    text-decoration: underline;
    white-space: nowrap;
}

.xms-sticky-cta__login:hover {
    color: #495057;
}

.xms-sticky-cta__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
    color: #6c757d;
    flex-shrink: 0;
}

.xms-sticky-cta__close:hover {
    color: #212529;
}

@media (max-width: 575px) {
    .xms-sticky-cta__text {
        flex-basis: 100%;
    }
}


/* === FOOTER CTA ============================================== */

.xms-footer-cta {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1.75rem 1.5rem;
    margin: 2rem 0;
    text-align: center;
}

.xms-footer-cta__inner {
    max-width: 480px;
    margin: 0 auto;
}

.xms-footer-cta__headline {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #212529;
}

.xms-footer-cta__btn {
    display: inline-block;
}

.xms-footer-cta__login {
    display: block;
    margin-top: .75rem;
    font-size: .875rem;
    color: #6c757d;
    text-decoration: underline;
}

.xms-footer-cta__login:hover {
    color: #495057;
}

/* ==============================================
   XMS CTA Manager - CSS Styles
   Integration: Link in xms_systemext22
   Nur Farben, Schriften, Sonderformatierung
   Layout wird mit Bootstrap Grid realisiert
   ============================================== */

:root {
    --cta-primary: var(--bs-primary, #0d6efd);
    --cta-secondary: var(--bs-secondary, #6c757d);
    --cta-success: var(--bs-success, #198754);
    --cta-danger: var(--bs-danger, #dc3545);
    --cta-light: var(--bs-light, #f8f9fa);
    --cta-dark: var(--bs-dark, #212529);
    --cta-border: var(--bs-border-color, #dee2e6);
}

/* ==============================================
   ELEMENT: StatItem
   ============================================== */
.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cta-primary);
}

.stat-value--prominent {
    font-size: 3.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--cta-secondary);
}

.stat-icon {
    font-size: 2rem;
    color: var(--cta-primary);
}

.stat-item--bordered {
    border: 1px solid var(--cta-border);
    border-radius: 0.5rem;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==============================================
   ELEMENT: FeatureItem
   ============================================== */
.feature-icon {
    font-size: 2.5rem;
    color: var(--cta-primary);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ==============================================
   ELEMENT: StepItem
   ============================================== */
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--cta-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.step-connector {
    width: 2px;
    background-color: var(--cta-border);
    min-height: 2rem;
    flex-grow: 1;
}

/* ==============================================
   ELEMENT: TestimonialItem
   ============================================== */
.testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.6;
}

.testimonial-avatar img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

/* ==============================================
   ELEMENT: PackageItem
   ============================================== */
.package-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
    transform: translateY(-4px);
}

.package-card--featured {
    transform: scale(1.05);
    z-index: 1;
}

.package-card--featured:hover {
    transform: scale(1.05) translateY(-4px);
}

.price-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.price-period {
    font-size: 1rem;
}

.package-badge {
    margin-top: -0.5rem;
}

@media (max-width: 991.98px) {
    .package-card--featured {
        transform: none;
    }
    .package-card--featured:hover {
        transform: translateY(-4px);
    }
}

/* ==============================================
   LAYOUT: Pro/Contra Columns
   ============================================== */
.procon-column--pro {
    background-color: rgba(25, 135, 84, 0.05);
    border: 1px solid rgba(25, 135, 84, 0.2);
    border-radius: 0.5rem;
}

.procon-column--con {
    background-color: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 0.5rem;
}

/* ==============================================
   LAYOUT: CTA Banner Backgrounds
   ============================================== */
.cta-banner--dark {
    background-color: var(--cta-dark);
}

.cta-banner--primary {
    background-color: var(--cta-primary);
}

.cta-banner--light {
    background-color: var(--cta-light);
}

.cta-banner__bg {
    z-index: 0;
}

/* ==============================================
   LAYOUT: Section Backgrounds
   ============================================== */
.section--dark {
    background-color: var(--cta-dark);
    color: #fff;
}

.section--dark .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.section--dark .stat-value {
    color: #fff;
}

.section--dark .stat-icon {
    color: rgba(255, 255, 255, 0.9);
}

.section--light {
    background-color: var(--cta-light);
}

.section--primary {
    background-color: var(--cta-primary);
    color: #fff;
}

.section--primary .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ==============================================
   Responsive
   ============================================== */
@media (max-width: 991.98px) {
    .stat-value--prominent {
        font-size: 3rem;
    }
}

@media (max-width: 767.98px) {
    .stat-value {
        font-size: 2rem;
    }

    .stat-value--prominent {
        font-size: 2.5rem;
    }

    .step-connector {
        display: none;
    }
}

/* ==============================================
   LAYOUT: Image Cards (Themenschwerpunkte)
   ============================================== */

.topic-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.topic-card {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--cta-dark);
}

.topic-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.topic-card:hover .topic-card__bg {
    transform: scale(1.04);
    filter: brightness(0.85);
}

.topic-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        transparent 100%
    );
}

.topic-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
}

.topic-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.topic-card__link:hover {
    color: inherit;
    text-decoration: none;
}

.topic-card__label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.35rem;
}

.topic-card__title {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.topic-card__text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    margin: 0.5rem 0 0;
}

.topic-card__btn {
    display: inline-block;
    margin-top: 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 1px;
    transition: border-color 0.2s ease;
}

.topic-card__btn:hover {
    color: #fff;
    border-bottom-color: #fff;
    text-decoration: none;
}

/* ==============================================
   LAYOUT: ImageCards — Content Alignment
   ============================================== */

.topic-card--align-top .topic-card__content {
    bottom: auto;
    top: 0;
}

.topic-card--align-top .topic-card__overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        transparent 100%
    );
}

.topic-card--align-middle .topic-card__content {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

.topic-card--align-middle .topic-card__overlay {
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 991.98px) {
    .topic-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .topic-cards {
        grid-template-columns: 1fr;
    }

    .topic-card {
        aspect-ratio: 16 / 9;
    }
}

.tx-form {margin: 15px 15px; line-height:1.2rem; }
.tx-form fieldset {margin-top: 15px; margin-bottom:15px;}
.tx-form .actions {margin-top: 15px;}

.tx-form .confirmation-success {margin-top: 15px; margin-bottom:15px;}


.tx-form .loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/** CSS **/

#xmsSubscription .div-field-required label::after {
	content: " *";
}

#xmsSubscription label.checkbox,
#xmsSubscription label.multiple-checkbox,
#xmsSubscription label.radio,
#xmsSubscription label.multiple-radio {
	display: block;
	color: inherit;
	font-size: inherit;
}

#xmsSubscription label.radio,
#xmsSubscription label.multiple-radio {
	text-indent: -18px;
}

#footer .twt-list-timeline .twt-item {
    height: auto;
    min-height: auto;
    color: #000;
    padding: 0.8rem 0.8rem;
    text-transform: none;
    font-size: 0.8em;
    margin: 0;
}

#footer .list-group {
   border-radius: .25rem;
}

#footer ul.list-group li.twt-item p {
   margin: 0;
}

.widget-group.twt-list-timeline .widget-item [class*="col-"] {
    margin: 0;
}

.widget-group.twt-list-timeline .widget-item {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#footer .widget-group {
    padding: 0rem 0rem;
    border-radius: .25rem;
}

/* ============================================
   TYPO3 Adaptations — Prio 200
   Brücke zwischen Design System Tokens und TYPO3/Bootstrap HTML-Strukturen.
   Ergänzt Bootstrap (100) + Design System (110), wird von Projekt-CSS (700) überschrieben.
   ============================================ */

/* -----------------------------------------------
   Content Sections — OneColEvenOdd / Startseite
   Templates rendern <section id="slide{n}" class="content-section"> direkt in #page-main.
   odd/even-Background via CSS :nth-child auf section-Ebene (Full-Width).
----------------------------------------------- */
#page-main > section.content-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#page-main > section.content-section:nth-child(odd) {
    background-color: var(--section-odd-bg, transparent);
}

#page-main > section.content-section:nth-child(even) {
    background-color: var(--section-even-bg, var(--neutral-100, #F5F5F5));
}

/* Content-Row — Bootstrap-Spaltenstruktur innerhalb einer Section */
.content-section .content-row {
    display: flex;
    flex-wrap: wrap;
}

/* -----------------------------------------------
   Content-Element Wrapper — {ctype}Box
   Basis-Spacing für alle Content-Element-Typen.
----------------------------------------------- */
[class$="Box"] {
    margin-bottom: 1.5rem;
}

[class$="Box"]:last-child {
    margin-bottom: 0;
}

/* Häufige CType-Klassen */
.textBox,
.textpicBox,
.imageBox {
    margin-bottom: 1.5rem;
}

.headerBox {
    margin-bottom: 1rem;
}

.listBox,
.tableBox {
    margin-bottom: 1.5rem;
}

.htmlBox,
.rawBox {
    margin-bottom: 1rem;
}

/* -----------------------------------------------
   Navbar — Design System Integration
   BS5: navbar-dark setzt nur Textfarbe (kein Background).
   Background + Spacing explizit via Token.
----------------------------------------------- */
.navbar {
    border-bottom: 1px solid var(--neutral-200, #E5E5E5);
}

/* Light-Navbar (kein bg-primary-dark) */
.navbar:not(.bg-primary-dark) {
    background-color: var(--neutral-0, #fff);
}

.navbar:not(.bg-primary-dark) .navbar-brand {
    color: var(--space-primary, #0a0f3d);
    font-weight: 600;
}

.navbar:not(.bg-primary-dark) .nav-link {
    color: var(--space-primary, #0a0f3d);
}

.navbar:not(.bg-primary-dark) .nav-link:hover,
.navbar:not(.bg-primary-dark) .nav-link:focus {
    color: var(--space-secondary, #E10098);
}

.navbar:not(.bg-primary-dark) .nav-link.active,
.navbar:not(.bg-primary-dark) .nav-link.parent-active {
    color: var(--space-secondary, #E10098);
    font-weight: 600;
}

/* Dark-Navbar + Footer (bg-primary-dark) — Background via Design Token
   Element-Typ erhöht Spezifität gegenüber .bg-primary-dark aus dem Design System */
.navbar.bg-primary-dark,
footer.bg-primary-dark {
    background-color: var(--space-primary-dark, #000033);
}

.bg-primary-dark .navbar-brand {
    color: var(--neutral-0, #fff);
    font-weight: 600;
}

.bg-primary-dark .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.bg-primary-dark .nav-link:hover,
.bg-primary-dark .nav-link:focus {
    color: var(--space-accent, #00D9FF);
}

.bg-primary-dark .nav-link.active,
.bg-primary-dark .nav-link.parent-active {
    color: var(--neutral-0, #fff);
    font-weight: 600;
}

.bg-primary-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.bg-primary-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C 255%2C 255%2C 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Padding-top Ausgleich — Fixed-Top-Navbar ueberdeckt keinen Inhalt */
body.xms-page #page-main {
    padding-top: 3.5rem;
}

@media (min-width: 992px) {
    body.xms-page #page-main {
        padding-top: 4rem;
    }
}

/* Dropdown-Menü */
.bg-primary-dark .dropdown-menu {
    background-color: #fff;
}

.bg-primary-dark .dropdown-item {
    color: var(--space-primary, #0a0f3d);
}

.bg-primary-dark .dropdown-item:hover,
.bg-primary-dark .dropdown-item:focus {
    background-color: var(--neutral-100, #F5F5F5);
    color: var(--space-primary, #0a0f3d);
}

/* -----------------------------------------------
   Breadcrumb
----------------------------------------------- */
.breadcrumb-wrapper {
    padding: 0.5rem 0;
    background-color: var(--neutral-50, #FAFAFA);
    border-bottom: 1px solid var(--neutral-200, #E5E5E5);
}

/* -----------------------------------------------
   Sticky Footer — Footer immer am Seitenende
   body.xms-page: flex-column + min-height 100vh
   #page-main: flex-grow-1 via Bootstrap-Utility
----------------------------------------------- */
body.xms-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* -----------------------------------------------
   Footer
----------------------------------------------- */
footer {
    color: var(--neutral-200, #E5E5E5);
    flex-shrink: 0;
}

footer a,
footer .footer-link {
    color: var(--neutral-300, #D4D4D4);
    text-decoration: none;
}

footer a:hover,
footer .footer-link:hover {
    color: var(--space-accent, #00D9FF);
}

footer .network-link {
    color: var(--neutral-400, #A3A3A3);
    text-decoration: none;
    letter-spacing: 0.05em;
}

footer .network-link:hover {
    color: var(--space-accent, #00D9FF);
}

footer .footer-company {
    color: var(--neutral-100, #F5F5F5);
    font-size: 0.95rem;
}

/* -----------------------------------------------
   Image Positioning — fluid_styled_content textpic/image
   Übernommen aus xms_systemext22/Elements/content.css
----------------------------------------------- */
.image {
    display: block;
}

.image > img,
.image a > img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .image > img,
    .image a > img {
        margin: 0 auto;
    }
}

.image .caption {
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
}

.img-wrap {
    max-width: 100%;
}

.col-image {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Float-basierte Img-Positionierung */
.img-left .img-wrap  { float: left; }
.img-left .text      { clear: left; }
.img-right .img-wrap { float: right; }
.img-right .text     { clear: right; }

.img-beside-left figure.image,
.img-intext-left figure.image {
    float: left;
    margin-left: -15px;
    max-width: 50%;
    padding-left: 15px;
    padding-right: 0;
}

.img-beside-right figure.image,
.img-intext-right figure.image {
    float: right;
    margin-right: -15px;
    max-width: calc(50% + 30px);
    padding-left: 30px;
    padding-right: 15px;
}

.img-intext-left figure.image {
    padding-right: 30px;
    max-width: calc(50% + 30px);
}

.img-beside-left .text { padding-left: 30px; }

.img-beside-right,
.img-beside-left {
    overflow: hidden;
    zoom: 1;
}

.img-beside-right .text,
.img-beside-left .text {
    overflow: hidden;
    zoom: 1;
}

@media (max-width: 767px) {
    .img-beside-right .img-wrap,
    .img-beside-left .img-wrap {
        margin-left: -15px;
        margin-right: -15px;
        max-width: none;
        float: none;
    }
}

/* Caption-Positionierungen */
figure { position: relative; }

.caption {
    position: absolute;
    width: 100%;
    background-color: rgba(255,255,255,0.85);
}

.caption-bottom-center {
    bottom: 3rem;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.caption-bottom-right {
    bottom: 3rem;
    text-align: center;
    right: 10%;
    margin-right: 0;
}

.caption-bottom-left {
    bottom: 3rem;
    text-align: center;
    left: 10%;
    margin-left: 0;
}

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

@media (max-width: 992px) {
    .caption-bottom-right { right: 0; margin-right: auto; }
    .caption-bottom-left  { left: 0; margin-left: auto; }
}

@media (max-width: 518px) {
    .caption { position: relative; }
}

/* Uploads-Liste */
ul.uploads {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}
ul.uploads li.uploads-element img {
    margin-right: 1em;
}

/* -----------------------------------------------
   BC / Border Utilities
----------------------------------------------- */
.img-rounded,
.rounded-img { border-radius: 6px; }

.no-padding { padding: 0 !important; }

/* -----------------------------------------------
   Font-Size Utilities — .size-1 bis .size-5
   Redaktionell über tx_xms_extra_class nutzbar.
----------------------------------------------- */
.size-1 { font-size: 1.1rem; }
.size-2 { font-size: 1.3rem; }
.size-3 { font-size: 1.5rem; }
.size-4 { font-size: 1.7rem; }
.size-5 { font-size: 2rem; }

@media (min-width: 768px) {
    .size-1 { font-size: 1.3rem; }
    .size-2 { font-size: 1.5rem; }
    .size-3 { font-size: 2rem; }
    .size-4 { font-size: 3rem; }
    .size-5 { font-size: 3.5rem; }
}

/* Display-Utility — responsive Schriftgrößen */
.display-1 { font-size: 1.8rem; }
.display-2 { font-size: 1.5rem; }
.display-3 { font-size: 1.3rem; }
.display-4 { font-size: 1.1rem; }
.display-5 { font-size: 1rem; }

@media (min-width: 992px) {
    .display-1 { font-size: 3rem; }
    .display-2 { font-size: 2.5rem; }
    .display-3 { font-size: 2rem; }
    .display-4 { font-size: 1.5rem; }
    .display-5 { font-size: 1rem; }
}

/* -----------------------------------------------
   Width Utilities — .w-20 bis .w-80
   Redaktionell über tx_xms_extra_class nutzbar.
----------------------------------------------- */
.w-20 { min-width: 20%; max-width: 20%; }
.w-30 { min-width: 30%; max-width: 30%; }
.w-33 { min-width: 33%; max-width: 33%; }
.w-40 { min-width: 30%; max-width: 40%; }
.w-50 { min-width: 30%; max-width: 50%; }
.w-60 { min-width: 50%; max-width: 60%; }
.w-70 { min-width: 50%; max-width: 70%; }
.w-80 { min-width: 50%; max-width: 80%; }

@media (min-width: 992px) {
    .w-20 { width: 20%; }
    .w-30 { width: 30%; }
    .w-33 { width: 33%; }
    .w-40 { width: 40%; }
    .w-50 { width: 50%; }
    .w-60 { width: 60%; }
    .w-70 { width: 70%; }
    .w-80 { width: 80%; }
}

@media (max-width: 992px) {
    .w-20, .w-25, .w-30, .w-33, .w-40,
    .w-50, .w-60, .w-70, .w-75, .w-80 {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 576px) { .w-xs-grow { width: 100% !important; max-width: 100% !important; } }
@media (max-width: 768px) { .w-sm-grow { width: 100% !important; max-width: 100% !important; } }

/* -----------------------------------------------
   Max-Height Utilities — .h1/.mxh1 bis .h35/.mxh35
   Redaktionell über tx_xms_extra_class nutzbar.
----------------------------------------------- */
.h1,  .mxh1  { min-height: auto !important; height: 130px; overflow: hidden; }
.h15, .mxh15 { min-height: auto !important; height: 195px; overflow: hidden; }
.h2,  .mxh2  { min-height: auto !important; height: 260px; overflow: hidden; }
.h25, .mxh25 { min-height: auto !important; height: 325px; overflow: hidden; }
.h3,  .mxh3  { min-height: auto !important; height: 390px; overflow: hidden; }
.h35, .mxh35 { min-height: auto !important; height: 455px; overflow: hidden; }

/* -----------------------------------------------
   Spacing & Layout Utilities
----------------------------------------------- */
.p-normal { padding: 0.5rem; }

@media (min-width: 992px) {
    .p-normal { padding: 1.3rem; }
}

.horizontal-spacing * { margin-right: 0.3rem; }

.bold   { font-weight: bold; }
.normal { font-weight: normal; }

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

/* -----------------------------------------------
   Card Utilities — Hover-Effect, Overlay
----------------------------------------------- */
.card:active,
.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.22);
}

.card-element { min-height: 100%; }

.card.with-overlay .card-img-overlay {
    background-color: rgba(77,82,87,0.4);
}

.card.with-overlay .card-img-overlay a {
    color: #fff;
    line-height: 1;
}

/* -----------------------------------------------
   Blockquote
----------------------------------------------- */
blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
}

/* shiftfinance — Projekt-Theme (Neu-Stack KON-004) */
/* Nur seiten- und element-spezifische Ausnahmen. */
/* Token-Basis: --shift-* werden perspektivisch nach xms-tokens.css/.theme-shiftfinance verschoben. */

:root {
  --shift-primary: #01aeff;
  --shift-accent: #069aa2;
  --shift-btn: #01aeff;
  --shift-subheader: #e94a86;
  --shift-secondary: #f2f5f7;
  --shift-breakbox: #e94a86;
}

/* Stage-Hintergründe */
#page-904 #slide1, #page-904 #slide4, #page-904 #slide6, #page-904 #slide8,
#page-10776 #slide4,
#page-11393 #slide3, #page-11393 #slide4 {
  background: url(/fileadmin/images/event_banner/shift-finance/plattform/shift-finance.background.2000x600.jpg) no-repeat center center fixed;
  background-size: cover;
}

/* Event.Net Navigationseintrag */
#nav-item-11779 {
  background-color: #e3212f !important;
  font-weight: bold;
}

/* Highlight-Navigation */
#navlink11411 {
  background: #00aff2;
  color: #fff;
  font-weight: bold;
}

#drop907, #drop907 a {
  background-color: #00aff2;
  color: #fff;
  font-weight: bold;
}

#drop10296, #drop10296 a {
  background-color: #00aff2;
  color: #fff;
}

/* Mediathek-Tabelle (#c49938) */
div#c49938 table.table td:first-child,
div#c49938 table.table th:first-child { width: 40%; }
div#c49938 table.table td:nth-child(2),
div#c49938 table.table th:nth-child(2) { width: 20%; text-align: center; }
div#c49938 table.table td:nth-child(3),
div#c49938 table.table th:nth-child(3) { width: 20%; text-align: center; }
div#c49938 table.table td:nth-child(4),
div#c49938 table.table th:nth-child(4) { width: 20%; text-align: center; }
div#c49938 table.table thead tr { background-color: #00aff2; color: #fff; }
div#c49938 table.table tbody tr:nth-child(4),
div#c49938 table.table tbody tr:nth-child(9) { background-color: #dee2e6; }
div#c49938 table.table tbody tr:nth-child(3) td { vertical-align: bottom; }
div#c49938 table.table tbody tr:nth-child(3) td:nth-child(1) { vertical-align: top; }

/* Webinare-Tabelle (#c48659) */
div#c48659 table.table td:first-child,
div#c48659 table.table th:first-child { width: 25%; }
div#c48659 table.table td:nth-child(2),
div#c48659 table.table th:nth-child(2) { width: 15%; }
div#c48659 table.table td:nth-child(3),
div#c48659 table.table th:nth-child(3) { width: 15%; text-align: center; }
div#c48659 table.table td:nth-child(4),
div#c48659 table.table th:nth-child(4) { width: 15%; text-align: center; }
div#c48659 table.table td:nth-child(5),
div#c48659 table.table th:nth-child(5) { width: 15%; text-align: center; }
div#c48659 table.table td:nth-child(6),
div#c48659 table.table th:nth-child(6) { width: 15%; text-align: center; }
div#c48659 table.table thead tr { background-color: #00aff2; color: #fff; }