@import url('/system/modules/alkacon.mercury.bistuemer.ebk/configuration/ebk.standard.master.xml');
@import url('/.themes/v5.min.css');
@import url('/export/sites/webstart/.mercury/.mod/generator-v2.css');
@import url('/export/sites/webstart/.mercury/.mod/v5.css');
@import url('/export/sites/demo-s-11/0-caritas-shared/m-access/m-access.css');
/*################## Zur Übernahme ins generelle CSS###################*/
.flex-col .box {flex-grow: 1;}
.type-contact .body {display: unset;}
.type-contact .only-text .body .text {margin-left: unset; margin-top: 0 !important;}

.box.off .link a {
    color: transparent !important; visibility: visible !important;} 
.subline .body h1, .subline .body h2 {color: var(--my-main-theme);}
.h-meta a:after {display: none !important;}
@media (min-width: 1014px) {
    .head-image .image-src-box.presized > .image-copyright, .type-slider.head-img .slide-wrapper .copyright {
        left: unset !important;
        right: 30px;
        top: unset;
        bottom: 0;
       
    }
}
@media (max-width: 763.98px) {
.type-contact .body .text {width: unset;}
}
/*################## ENDE Übernahme ins generelle CSS###################*/


/* --- EIGENE ERWEITERUNG: ORANGE ALS ZUSATZFARBE --- */

/* 1. Eine flexible Klasse, die du an jedes Element hängen kannst */
.text-orange {
    color: #ff6600 !important;
}

/* 2. Eine spezielle orangefarbene Box */
.box.box-orange {
    border-color: #ff6600;
    background-color: #fff5e6; /* Sehr helles Orange für den Hintergrund */
}

/* 3. Wenn nur Überschriften in einer "orangenen Subline" orange sein sollen */
.subline.theme-orange .body h1, 
.subline.theme-orange .body h2 {
    color: #ff6600;
}

/* Überschreibt die Akzentfarbe 3 im gesamten Theme für Hintergründe */
.bg-accent-3 {
  background-color: #ff6600 !important;
  color: #ffffff !important; /* Weißer Text sorgt für optimale Lesbarkeit auf Orange */
}

/* Passt Links innerhalb dieses orangenen Hintergrunds an */
.bg-accent-3 a {
  color: #ffffff !important;
  text-decoration: underline;
}

.bg-accent-3 a:hover {
  color: #ffe6d5 !important; /* Sehr helles Creme-Orange beim Drüberfahren */
}


/* 1. Die globalen Mercury-Farbvariablen für Akzent 3 verbiegen */
:root {
  --my-accent-3: #ff6600 !important;
  --my-accent-3-rgb: 255, 102, 0 !important;
  --my-accent-3-bg: #ff6600 !important;
}

/* 2. Die CSS-Klassen direkt überschreiben und das Grün erzwingen */
.bg-accent-3, 
[class*="bg-accent-3"],
.bg-theme-accent-3 {
  background-color: #ff6600 !important;
  background-image: none !important; /* Entfernt eventuelle Farbverläufe */
  color: #ffffff !important; /* Textfarbe auf weiß setzen */
}

/* 3. Text und Links innerhalb dieser Box lesbar machen */
.bg-accent-3 h1, .bg-accent-3 h2, .bg-accent-3 h3, 
.bg-accent-3 h4, .bg-accent-3 h5, .bg-accent-3 h6, 
.bg-accent-3 p, .bg-accent-3 div {
  color: #ffffff !important;
}

.bg-accent-3 a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.bg-accent-3 a:hover {
  color: #ffe6d5 !important;
}




.box-theme .table {color: #fff;}
.box-theme .table-striped>tbody>tr:nth-of-type(odd)>* {--my-table-striped-color: #444;}
a[href^="http://"]:not([href*="opencms.erzbistum-koeln.de/.mercury/kopiervorlage-v5-neu/"]):after,
a[href^="https://"]:not([href*="opencms.erzbistum-koeln.de/.mercury/kopiervorlage-v5-neu/"]):after, .symbol:after {font-family: var(--my-icon-font-family);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: " \f08e";
    margin-left: 2px;
    font-size: 1.2rem;
    color: unset;
    padding: 6px 0 0 6px;
}
.symbol:after {font-size: unset;

  padding: unset;
  margin-right: 4px;}
  
a[href^="http://"]:not([href*="kirche-koenigswinter.de/"]):after,
a[href^="https://"]:not([href*="kirche-koenigswinter.de/"]):after, .symbol:after {font-family: var(--my-icon-font-family);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: " \f08e";
    margin-left: 2px;
    font-size: 1.2rem;
    color: unset;
    padding: 6px 0 0 6px;
}
.area-foot a[href^="http://"]:not([href*="kirche-koenigswinter.de/"]):after,
.area-foot a[href^="https://"]:not([href*="kirche-koenigswinter.de/"]):after, 
.area-foot a[href^="http://"]:not([href*="opencms.erzbistum-koeln.de/.mercury/kopiervorlage-v5-neu/"]):after,
.area-foot a[href^="https://"]:not([href*="opencms.erzbistum-koeln.de/.mercury/kopiervorlage-v5-neu/"]):after, .area-foot .symbol:after {display: none;}


.symbol:after {font-size: unset;

  padding: unset;
  margin-right: 4px;} 
  

@media (max-width: 763.98px) {
    .type-slider.text-below-on-xs .slide-wrapper .titlecaption {
        font-size: 2rem;}
		}