@charset "utf-8";

:root{


/* 
    --color-red-hsl:            0 100% 35%;
    --color-red:            hsl(var(--color-red-hsl));
*/


    --color-red:            #B30000;
    --color-white:          #FFFFFF;
    --color-black:          #000000;
    --color-gray:           #a7a7a7;
    --color-middle-gray:    #bbbbbb;
    --color-light-gray:     #d4d4d4;

    --color-red-hover:      #D60000;
    --color-red-active:     #800000;

    --color-gray-lines:     #e5e5e5;
    --color-light-gray-lines: #c1c1c1;
    --color-gray-active:    #E6E6E6;

    --color-shadow:         #0000003d;
    --color-shadow-hover:   #00000024;

    --color-red-text:       #B30000;
    --color-white-text:     #FFFFFF;
    --color-black-text:     #000000;
    --color-gray-text:      #595959;
    --color-light-gray-text:  #898989;

    /* Button Color */
    --color-white-button:   #FFFFFF;
    --color-white-button-hover:   #FFFFFF;

    /* Special boxes */
    --color-body-background:      #E8E5DC;
    --color-placeholder:          #171515;

    /* Fire Camp */
    --color-yellow:         #FF9B05;
    --color-yellow-hover:   #FFC266;
    --color-yellow-text:    #FF9B05;

    /* accordion */
    --color-accordion-title: #585858;
    --color-accordion-title-background-hover: #ded6bc;

    /* footer  */
    --color-footer-background-hover:   #ffffff14;
    --color-footer-gray-text:          #a5a5a5;
    --color-footer-headline:    #dcdcdc;


    --radius:8px;

    --transparent: transparent;

    /* ------- Menu ------- */

    --color-menu-gray:           #a7a7a7;
    --color-menu-middle-gray:    #bbbbbb;
    --color-menu-light-gray:     #d4d4d4;
    --color-menu-light-gray-text:   #878787;

    --color-menu-gray-lines:     #e5e5e5;
    --color-menu-light-gray-lines: #c1c1c1;
    --color-menu-gray-active:    #E6E6E6;

    /* ------- Poweremail --------- */

    --form-control-hover:  #f0f0f0;
    --form-checkbox-dark-brown : #444;
    --form-right-border-bottom: #d4d0c5;
    --form-select-border: #979997;
    --form-color-text: #555;
    --form-right-background: #eae8e1;
    --form-focus-border: #d2d2d2;
    --form-error-background: #ffdfdf;
    --color-green-box-text: #367500;
    --color-green-box-background: #e9fbd5;
    --color-green-box-border: #598800;
    --color-form-control-green-background: #efffef;
    --color-form-control-green-border: #90cc90;
    --form-input-background: #DCD9CF;
    --form-input-green-border-2: #7fc900;
    --form-input-border-2: #B3B0A7;


    /* ------- Styles Content --------- */

    --d8d8d8: #D8D8D8;
    --table-background-hover: #f5f5f5;
    --table-background-even: #f2f2f2;
    --facebook-a-background: #437ecc;
    --facebook-a-hover: #4e8ee2;
    --speaker-box-shadow: #ababab;



    /* ------- TV show ------ */

    --tvshow-background-hover: #f3f2ef;
    --tvshow-btn-red: #00b5ff;
    --tvshow-btn-red-hover: #00aff9;
    --tvshow-right-h2: #009dff;



    /* ------ one2one ---------*/
    --one2one-background:   #2795a6;
    --list-one2one-hover:   var(--color-shadow-hover);
    --list-one2one-background-hover:   transparent;

    /*---------  Firecamp ------- */

    --color-firecamp-right-text: #ffffff;

    --color-firecamp-background-gradient-1: #c10002;
    --color-firecamp-background-gradient-2: #5a0000;

    --color-firecamp-background-gradient-hover-1: #c10002;
    --color-firecamp-background-gradient-hover-2: #5a0000;

    --color-firecamp-accordion: #464646;
    --color-firecamp-accordion-background-content: #ffffff;
    --color-firecamp-accordion-background-title: #c00000;
    --color-firecamp-accordion-background-title-active: #ff9b05;

    --firecamp-img-shadow: #ff0000;
    --firecamp-button-text: #000000;


    /* ----------- SOE -------- */

      --color-soe-page-bg: #c9d3db;
      --color-soe-heading-blue: #002560;
      --color-soe-heading-orange: #e67f00;
      --color-soe-red: #c60501;
      --color-soe-red-hover: #ff0000;
      --color-soe-white: #ffffff;
      --color-soe-tab-bg: #e1caca;
      --color-soe-upload-bg: #eae8e2;
      --color-soe-button-orange: #ff9d00;
      --color-soe-button-orange-border: #fe9e00;
      --color-soe-button-orange-hover: #ffbe57;
      --color-soe-footer-bg: #101b2d;
      --color-soe-success-text: #367500;
      --color-soe-success-bg: #e9fbd5;
      --color-soe-success-border: #598800;
      --color-soe-black: #000000;


}


html{
    -webkit-text-size-adjust: none;
}

body{
  font-family: 'Roboto Slab', Arial, sans-serif;
  /* font-family: metronic-slab, Arial, sans-serif; */
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  margin:0px;
  padding:0px;
  background-color: var(--color-body-background);
  color: var(--color-black-text);
  margin-top: 70px;
}

body.body-margin{
    margin-top: 0px;
}

/* ---------------- MOBILE FIRST :)----------------*/

#space {
    width: 100%;
    padding: 0 0%;
}
#container{
    margin: 0 auto;
    max-width: 1180px;
    display: block;
}


/* NEW Footer */

#footer {
    height: auto;
    background: url(../sysimages/footer/footer-ghana-800.webp),#1a1a1a;
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat;
    color: var(--color-footer-gray-text);
    width: 100%;
    padding: 10px 5% 80px 5%;
    box-sizing: border-box;
}

#footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));


    gap: 34px;
    padding: 33px 0 25% 0;
    max-width: 1180px;
    margin: 0 auto;
}

/* If the last item is odd (only one in last row) */

#footer-container > :last-child:nth-child(odd) {
  grid-column: span 2;
}



#header {
    position: fixed; /* fixed menu */
    top: 0; /* fixed menu */
    box-shadow: var(--color-black) 0 0px 10px 0; /* fixed menu */
    z-index: 55;
    display: block;
    width: 100%;
    height: 70px;
    background: var(--color-black);
    transition: top 0.25s ease-out; /* fixed menu */
}

#header.header-relative{
    position: relative;
    top:0px;
    margin-bottom: 0;
}
.extraHeight #header.header-relative {  margin-bottom: 50px; }

/* Hide Menu / Header + Ajust Menu / Header */
#header.hide-header{
    top: -70px;
    transition: top 0.4s ease-out;
}



#logo-red-line {
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    border: solid 0px var(--color-red);
    border-bottom: solid 1px var(--color-red);
    height: 55px;    
}

a#logo {
    display: block;
    height: 50px;
    width: 160px;
    margin: -46px auto -3px auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    border: 0;
    background-color: var(--color-white);
}

a#logo:lang(de) {
    /*background-image: url("../sysimages/cfan-logo_de.png");*/
    width: 170px;
}

a#logo:lang(fr) {
    /*background-image: url("../sysimages/cfan-logo_fr.png");*/
    /*width: 135px;*/
}

a#logo:lang(cs) {
    /*background-image: url("../sysimages/cfan-logo_cs.png");*/
    width:170px;
}

a#logo:lang(es) {
    width:128px;
}



a#logo {background-image: url(../sysimages/cfan-logo_white_en.svg);}
a#logo:lang(de) {background-image: url(../sysimages/cfan-logo_white_de.svg);}
a#logo:lang(fr) {background-image: url(../sysimages/cfan-logo_white_fr.svg);}
a#logo:lang(cs) {background-image: url(../sysimages/cfan-logo_white_cs.svg);}
a#logo:lang(es) {background-image: url(../sysimages/cfan-logo_white_es.svg);}


#header-container {
    max-width: 1180px;
    margin: 0 auto;
    height: 70px;
}

#main {
    float: left;
    position: relative;
    z-index: 10;
    width: 100%;
}

#content {
    float: left;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 10%);
    padding-bottom: 30px;
    padding-top: 20px;
    border-radius: var(--radius);
    /* overflow: hidden; */
    margin-bottom: 30px;
}

#top-banner #right{
    margin-top: 0;
}

#right {
    float: left;
    position: relative;
    z-index: 0;
    width: 84%;
    height: fit-content;
    block-size: min-content;
    font-size: 16px;
    line-height: 25px;
    background-color: var(--color-white);
    padding: 13px 3% 0px 3%;
    margin: 10px 5% 30px 5%;      /* ---------- TEST --------*/
    border-radius: var(--radius);
	box-shadow: 0 0 8px 0 #00000021;
}

#right:empty { display: none; }

img {
    width: 100%;
    height: auto;
    border: none;
    vertical-align: middle;
    border-radius: var(--radius);
}

.spacer {
    clear: both;
}

/* -------------------- SPENDINO -----------*/

.spendino-formular{
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 40px;
}

/* ------------ TEST TOP NEWS ----------*/
.displaynone{
  display:none;
}

/* ---------- Counter ---------*/

#counter {
    display: block;
    width: 100%;
    background-color: var(--color-red);
    height: 35px;
    margin-bottom: clamp(5px,0.9vw,10px);
}

.count {
    float: left;
    font-family: metronic-slab-narrow,Arial,sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: 35px;
    color: var(--color-white-text);
    width: 143px;
    padding: 0px 0px 0px 3%;
    text-align: right;
}

.count-text {
    color: var(--color-white-text);
    font-size: 12px;
    float: left;
    padding: 6px 0px 0px 7px;
    line-height: 12px;
}

span.count-share {
    float: right;
}

span.count-text-share {
    color: var(--color-white-text);
    font-size: 10px;
    float: right;
    padding: 9px 21px 0px 0px;
    line-height: 10px;
    display: none;
}

.count-share img {
    width: auto;
    height: 23px;
    padding: 6px;
}

/* iframe */
iframe{}

/* ---------- Donate iframe ---------*/

#donate-iframe{
  width: 90%;
  margin: 0 5% 30px 5%;
  border-radius: var(--radius);
}

.paymentoptions{
  width: 88%;
  margin: -20px 6% 30px 6%;
}


/* ---------- NEWS ALLGEMEIN ----------*/

/* div#top-banner { line-height: 0px; } */

.news-1.topnews a {
    background-color: var(--color-white);
    margin-bottom: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    padding-bottom:0;
}

.news-1.topnews h2 {
    margin-top: -19px;
    margin-bottom: 5px;
} 

.topnews-text {
    padding-bottom: 7%;
    margin: 0px 5% 0 5%;
}

.transparent { display: none;}

.news-1 a,
.news-2 a,
.news-4 a,
.news-5 a,
.news-6 a,
.news-related-wrap a{
    display: block;
    padding-bottom: 0px;
    background: var(--color-white);
    box-shadow: 0 0 4px 0 var(--color-shadow);
    border-radius: var(--radius);
    overflow: hidden;

}

.news-bibelstudie a,
.news-schedule a{
    box-shadow: none;
    margin-bottom: 0;
}

.news-1 img,
.news-2 img,
.news-4 img,
.news-5 img,
.news-6 img,
.news-related-wrap img{
    border-radius: var(--radius) var(--radius) 0 0;
}

.news-schedule{

}

.news-1 h1,
.news-2 h1,
.news-4 h1,
.news-5 h1,
.news-6 h1,
.news-bibelstudie h1,
.news-related-wrap h1,
.news-events h1{
    margin: 0;
    position: relative;
}

.news-1 h2,
.news-2 h2,
.news-4 h2,
.news-5 h2,
.news-6 h2,
.news-bibelstudie h2,
.news-related-wrap h2,
.news-events h2{
    text-transform: uppercase;
    color: var(--color-red-text);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.5px;
    padding: 0;
    margin: 0 0 2px 0;
    position: relative;
    display: table;
}

.news-1 a:hover,
.news-2 a:hover,
.news-4 a:hover,
.news-5 a:hover,
.news-6 a:hover,
.news-bibelstudie a:hover,
.news-schedule a:hover,
.news-related-wrap a:hover{
    background: var(--color-white-button-hover);
    text-decoration: none;
    box-shadow: 0px 3px 7px 0px var(--color-shadow-hover);
    position: relative;
}



.news-bibelstudie a:hover,
.news-schedule a:hover {
    box-shadow: 0px 0px 17px 0px var(--color-shadow-hover);
    border-top: solid 1px transparent;
    border-radius: var(--radius);
}

.news-bibelstudie a:hover + a,
.news-schedule a:hover + a {
    border-top: solid 1px transparent;
}

.news-1 a h2 { 
    background-color: var(--color-white); 
    transition: background-color 0.1s linear, color 0.1s linear;
}

.news-1 a:hover h2 { 
    background-color: var(--color-white); 
    transition: background-color 0.1s linear, color 0.1s linear;
}


.news-1 p,
.news-2 p,
.news-4 p,
.news-5 p,
.news-6 p,
.news-bibelstudie p,
.news-schedule p,
.news-related-wrap p,
.news-events p{
    color: var(--color-black-text);
    font-size: 15px;
    line-height: 21px;
    margin: 8px 0 0 0;
    position: relative;
}


/* -------------------------------- NEWS-1 ---------------------------*/

.news-1{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(5px, 1.3vw, 8px);
    margin-bottom: clamp(5px, 1.3vw, 8px);
}

.news-1 .news-text{
    padding: 0 5% 15px 5%;
}

.news-1 p {
    font-size: 14px;
    line-height: 20px;
}
.news-1 h1 {
    font-size: 28px;
    line-height: 32px;
}

.news-1 h2 {
    padding: 5px 8px 1px 8px;
    margin: -20px 0px 5px 0;
}

/* -------------------------------- NEWS-2 ----------------------*/

.news-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(5px, 1.3vw, 8px);
    margin-bottom: clamp(5px, 1.3vw, 8px);
}

.news-2 .news-text {
    padding: 10px 5% 20px 5%;
}

.news-2 h1{
    font-size: 16px;
    line-height: 19px;
}

.news-2 h2{
  font-size: 12px;
}

.news-2 p {
    display:none;
}


/* -------------------------------- NEWS-4 + Related -----------------------------*/
.news-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(5px, 1.3vw, 8px);
    margin-bottom: clamp(5px, 1.3vw, 8px);
}

.news-4 .news-text {
    padding: 10px 5% 20px 5%;
}

.news-4 h1 {
    font-size: 16px;
    line-height: 19px;
}

.news-4 h2 {
  font-size: 12px;
}

.news-4 p {
    display:none;
}

/* ------------------------------- NEWS-6 -------------------------------*/

.news-6{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(5px, 1.3vw, 8px);
    margin-bottom: clamp(5px, 1.3vw, 8px);
}

.news-6 img,
.news-6 .video-wrapper-list,
.news-6 .video-container {
    width: 38%;
    float: left;
    display: block;
    border-radius: 0px 0px 0px 4px;
}

.news-6 .video-container {
    padding-bottom: 21%;
}

.news-6 .news-text {
    float: left;
    width: 62%;
    padding: 7px 10px 3px 10px;
    box-sizing: border-box;
}

.news-6 h1{
    margin: 0;
    font-size: 16px;
    line-height: 19px;
}

.news-6 h2{
    margin: 0 0 2px 0;
    padding: 0;
    font-size: 12px;
}

.news-6 p {
    display:none;
}


/* -------------------------------- NEWS-4 + Related -----------------------------*/


.news-related-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(5px, 1.3vw, 8px);
    margin-bottom: clamp(5px, 1.3vw, 8px);
}
.news-related-wrap > :first-child {
        grid-column: span 3;
}

.news-related-wrap .news-text{
    padding: 10px 5% 20px 5%;
}

.news-related-wrap h1{
    font-size: 16px;
    line-height: 19px;
}

.news-related-wrap h2{
  font-size: 12px;
}

.news-related-wrap p {
    display:none;
}







/* ------------------ BOTTOM NEWS -------------------*/

#main #bottom-news:empty{
    display: none;
}

#bottom-news {
    display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
    padding-left: 5%;
    padding-right: 5%;
    gap: clamp(5px,1.3vw,8px);
    margin-bottom: 10px;
}

#bottom-news > :first-child {

}

#bottom-news a{
    border-top: var(--color-gray-lines) solid 1px;
    border-radius: var(--radius);
    overflow: hidden;
}

#bottom-news .news-text{
    float: left;
    display: block;
    box-sizing: border-box;
    padding-left: 3%;
    width: 65%;
}

#bottom-news img,
#bottom-news .video-wrapper-list,
#bottom-news .video-container {
    display: block;
    float: left;
    width: 38%;
    border-radius: var(--radius);
}

#bottom-news .video-container{
    padding-bottom: 21%;
}

#bottom-news h1{
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 19px;
}

#bottom-news h2{
    display: block;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height:16px;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: var(--color-red-text);
}

#bottom-news > h1,
#bottom-news > div > h1{
    margin: 0 0 10px 0;
    font-size: 28px;
    line-height: 34px;
    width: 100%;
}



#bottom-news p{
    display: none;
    color: var(--color-black-text);
    font-size: 14px;
    line-height: 21px;
}




/* ------------------------------- NEWS-Bibelstudie + News Schedule -------------------------------*/
#list-news-bibelstudie,
#list-news-schedule {
    margin-left: 5%;
    margin-right: 5%;
}

#list-news-bibelstudie .float-block,
#list-news-schedule .float-block {
    float: left;
    width: 59%;
    overflow: visible;
}

.news-bibelstudie img,
.news-bibelstudie .video-wrapper-list,
.news-bibelstudie .video-container,
.news-schedule img,
.news-schedule .video-wrapper-list,
.news-schedule .video-container {
    display: block;
    float: left;
    width: 35%;
    margin-right: 3%;
    border-radius: var(--radius);
}

.news-bibelstudie .video-container,
.news-schedule .video-container{  padding-bottom: 18.5%; }

.news-bibelstudie a,
.news-schedule a{
    width: 100%;
    float: left;
    border-top: var(--color-gray-lines) solid 1px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.news-bibelstudie a .float-block,
.news-schedule a .float-block{
    transform: translateX(0px);
    transition: all 0.2s ease;
    padding: 0px 0 10px 0;
}

.news-bibelstudie a:hover .float-block,
.news-schedule a:hover .float-block{
    transform: translateX(10px);
    transition: all 0.2s ease;
}

.news-bibelstudie h1,
.news-schedule h1{
    float: left;
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
    clear: both;
    font-size: 16px;
    line-height: 19px;
}

.news-bibelstudie h2,
.news-schedule h2{
    margin: 0;
    float: left;
    padding: 0;
    display: block;
    font-size: 12px;
}

.news-schedule h2{ font-size: 14px; }

.news-bibelstudie p,
.news-schedule p {
    display:none;
}


/* ------------------- NEWS-EVENTS --------------*/

.news-events {
    margin: 0 5% 0 5%;
}

.news-events a {
    display: block;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-decoration: none;
    background: transparent;
    padding: 0%;
    box-shadow: 0 0 8px 0 var(--color-shadow);
    overflow: hidden;
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.news-events a:hover {
    text-decoration: none;
    background: var(--color-white-button-hover);
    box-shadow: none;
    box-shadow: 0 0 0px 0 var(--color-shadow);
    transition: all 0.2s ease;
}

.news-events a:active {
    background: #e4e4e4;
    box-shadow: none;
}

.news-events img {
    float: left;
    width: 40%;
    height: 76px;
    object-fit: cover;
}

.news-events-content {
    display: block;
    box-sizing: border-box;
    width: 60%;
    float: left;
    padding: 8px;
}

.news-events-left {
    float: left;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    transform: translateX(0px);
    transition: all 0.2s ease;
}

a:hover .news-events-left {
    float: left;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    transform: translateX(10px);
    transition: all 0.2s ease;
}

.news-events-right {
    float: right;
    box-sizing: border-box;
    padding: 10px 5% 30px 5%;
    width: 100%;
    display: none;
}


.news-events h2 {
    display: block;
    width: 90%;
    font-size: 11px;
    letter-spacing: 0.3px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.news-events h1 {
    font-size: 18px;
    line-height: 22px;
}

.news-events p {
    margin: 0;
}


/* --------------------- NEWS Single -------------*/

.default .header-bild-full-text {
    margin-top: -40px;
}

.social {
  float: left;
    clear: both;
    width: 90%;
    margin: 0 5% 0px 5%;
    position: relative;
    z-index: 10;
}

.like, .share, .twitter {
    float: left;
    width: 22%;
}

.news-backlink-wrap a {
    margin: 5px 10px 10px 5%;
}

.news-backlink-wrap {
    clear: both;
}


/* -------- NEWS Single right Side -------*/

#right .bild-full-header-text { float: left; margin-bottom: 20px; }
#right .bild-full-header-text h2 { margin-left: 0%; }
#right .social { margin-left: 0%; width: 100%; }
#right .bild-full-header-text .news-related-wrap { display: none; }

/* -------- NEWS Single Related News ---------*/

.news-related-wrap {
    margin:0 5% 20px 5%;
}

.news-related-wrap h4 {
    width: 100%;
    font-size: 25px;
    line-height: 28px;
    margin: 10px 0 10px 0;
}



.news-related-wrap a:nth-child(odd) {
    margin-right: 0%;
}

.news-related-wrap h1{
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 5px;
}

#main .bild-full-header-text .news-related-wrap p{ 
    margin: 0;
    font-size: 13px;
    line-height: 18px;
}



/* ----------- SPECIAL Mystery of the Magi --------*/

a#news-2693, #bottom-news a#news-2693 { background: linear-gradient(#070127 80%,#070127); border-radius:var(--radius);}
a#news-2693:hover, #bottom-news a#news-2693:hover { background: linear-gradient(#070127 80%,#371f48);}
#news-2693 h2, #bottom-news #news-2693 h2 { color: #ffcb71;}
#news-2693 h1, #bottom-news #news-2693 h1 { color: #86b6c1;}
#news-2693 p, #bottom-news #news-2693 p { color: #feebc3;}
.teaser-datum-titel a#news-2693 h4 {color: #ffcb71;}
.teaser-datum-titel a#news-2693 h3 {color: #86b6c1;}

/* ----------- SPECIAL He is Risen --------*/

a#news-2781, #bottom-news a#news-2781 {
    background: linear-gradient(#070127 80%,#070127);
    border-radius:var(--radius);
}

a#news-2781:hover, #bottom-news a#news-2781:hover {
    background: linear-gradient(#070127 80%,#371f48);
}

#news-2781 h2, #bottom-news #news-2781 h2 { color: #ffe3b3;}
#news-2781 h1, #bottom-news #news-2781 h1 { color: #b19fbc;}
#news-2781 p, #bottom-news #news-2781 p { color: #cdc6d3;}
.teaser-datum-titel a#news-2781 h4 {color: #ffe3b3;}
.teaser-datum-titel a#news-2781 h3 {color: #b19fbc;}


.shariff li a {
    border-radius: var(--radius);
}

.shariff .orientation-horizontal li {
    margin-right: 1.8%;
    min-width: 80px;
    width: auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.shariff .orientation-horizontal.col-3 li {
    min-width: 80px;
    max-width: 200px;
}

.shariff .orientation-horizontal.col-3 li .share_text {
    text-indent: 0;
    display: inline;
}

.shariff li .share_count, .shariff li .share_text {
    font-size: 13px;
}

#main .shariff li a {
    opacity: 1;
    transform: translateX(0px);
}


/* ---------   RED BUTTONS -----------*/

.btn-red, .download{
    background-color: var(--color-red);
    border-radius: var(--radius);
    border: 0px solid var(--color-red);
    display: block;
    text-decoration: none;
    text-align: center;
    color:var(--color-white-text);
    font-weight: 700;
    cursor:pointer;
}

.btn-red:hover, .download:hover {
    background-color: var(--color-red-hover);
    text-decoration: none;
}

.btn-red:active, .btn-red.active, .download:active {
	box-shadow: inset 0px 10px 10px -10px var(--color-shadow);
    background-color: var(--color-red-active);
}

.read-more-btn, .download{
    box-sizing: border-box;
    width: 100%;
    min-width: 170px;
    display: inline-block;
    float: left;
    margin: 5px 10px 12px 0;
    padding: 12px 20px;
    font-size: 15px;
    line-height: 21px;
}

.current > .btn-red{ background-color: var(--color-red-hover); }


/* --------- TOP RIGHT 3 BUTTONS --------*/

.special-btn {
  display:inline-block;
  cursor:pointer;
    padding: 4% 10%;
    width: 80%;
    margin: 0% 0 4% 0;
    font-size: 18px;
    line-height: 20px;
}

.special-btn:active {
  position:relative;
  top:1px;
}



/* ------------------------------ TERMIN TEASER ---------------------*/
.teaser-datum-titel img,
.teaser-datum-titel .video-wrapper-list,
.teaser-datum-titel .video-container {
    width: 33%;
    height: auto;
    float: left;
    display: block;
    border-radius: var(--radius);
}

.teaser-datum-titel .video-container {
    padding-bottom: 18%;
}


.teaser-datum-titel a{
    width: 100%;
    float: left;
    border-top: solid 1px var(--color-gray-lines);
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 0;
}

.teaser-datum-titel h3{
    float: left;
    display: block;
    width: 63%;
    clear: right;
    margin: 0 1% 0 3%;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
}

.teaser-datum-titel h4{
    margin: 0 0 3px 3%;
    float: left;
    padding: 0 0 0 0%;
    display: block;
    font-size: 12px;
    color: var(--color-red-text);
    width: 64%;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 16px;
}

.teaser-datum-titel a.read-more-btn{
    position: relative;
    display: block;
    margin: 5px 0 20px 0;
    border: 0;
}

.teaser-datum-titel a:hover {
    background-color: var(--color-white-button-hover);
    border-top: solid 1px var(--color-white);
    box-shadow: 0 0 10px 0 var(--color-shadow);
    /*transition: all 0.1s linear;*/
    border-radius: var(--radius);
}

.teaser-datum-titel a > :nth-last-child(-n+2) {
    transform: translateX(0px);
    transition: all 0.2s ease;
}

.teaser-datum-titel a:hover > :nth-last-child(-n+2) {
    transform: translateX(5px);
    transition: all 0.2s ease;
}

.teaser-datum-titel a:active {
    background-color: var(--color-gray-active);
    box-shadow: 0 0 0px 0 var(--color-shadow);
}

.teaser-datum-titel a:hover + a {
    border-top: solid 1px transparent;
}

.teaser-datum-titel a:hover + a.btn-red:last-child {
    border-top: none;
}

.teaser-datum-titel a.read-more-btn:hover{
	background-color: var(--color-red-hover);
    border: none;
    border-radius: var(--radius);
}




/* ---------------------- FOOTER FORM ---------------*/



#footer ul {
    list-style: inside none;
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
    display: block;
}


/* ---------- FOOTER -----------*/

div#footer-container > div {
    display: grid;
    align-content: start;
}

#footer h1{
    float: left;
    width: 100%;
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 20px 0;
    color: var(--color-footer-headline);
    border-bottom: dotted 1px;
    padding-bottom: 8px;
}

#footer h2 {
    margin: 0 0 5px 0;
}

#footer a {
    color: var(--color-footer-gray-text);
    font-size: 13px;
    line-height: 30px;
    width: 100%;
    display: block;
    height: auto;
    transform:translateX(0);
}

#footer li:hover a {
    color: var(--color-white-text);
    text-decoration: none;
    transform:translateX(10px);
}

#footer li a {
    padding: 3px 0;
}

#footer li:hover {
    background-color: var(--color-footer-background-hover);
    border-radius: var(--radius);
}

#footer li:active {
    background-color: var(--color-footer-background-hover);
}

#footer p{
    font-size: 13px;
    line-height: 21px;
    margin-top: 0px;
}

#footer a.btn-red.read-more-btn {
    color: var(--color-white-text);
    text-decoration: none;
    line-height:21px;
}

#footer .social-btn a {
    display: block;
    width: 57px;
    height: 57px;
}




button, input, optgroup, select, textarea {
    margin: 0 0 3px 0;
    font: inherit;
    color: inherit;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

label {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 17px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}







button, select {
    text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}


.submit-btn {
    display:block;
    cursor:pointer;
    padding: 8px 20px;
    margin: 5px 0 0 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    cursor: pointer;
}

.submit-btn:hover {
    display:block;
    cursor:pointer;
    padding: 8px 20px;
    margin: 5px 0 0 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    cursor: pointer;
}


/* ------- Social --------*/

.social-btn {
    float: left;
    margin-bottom: 15px;
    width:100%
}

.social-btn a{
    display: block;
    float: left;
    width: 57px;
    height: 57px;
    background-size: 600%;
}

.social-btn a:hover{
    background-position-y: center; 
}

.social-btn a:active{
    background-position-y: bottom; 
}

.footer-facebook{
    background-image: url("../sysimages/social_4.png");
}
.footer-youtube{
    background-image: url("../sysimages/social_4.png");
    background-position-x: -57px;
}
.footer-instagram{
    background-image: url("../sysimages/social_4.png");
    background-position-x: -114px;
}


/* ----- ACCORDION Menu Donation -------*/

.accordion, .accordion * {
    box-sizing:border-box;
}

.accordion {
    width: 90%;
    overflow:hidden;
    box-shadow:0px 1px 4px rgba(0,0,0,0.30);
    border-radius: var(--radius);
    background: var(--color-white);
    margin: 0px 5% 20px 5%;
}

#right .accordion{ 
    width: 100%;
    margin: 0 0 20px 0;
    background: var(--color-body-background);
}

/*----- Section Titles -----*/
.accordion-section-title {
    width: 100%;
    padding: 10px 5% 10px 8%;
    display: inline-block;
    border-bottom: 1px solid var(--color-white);
    background: var(--color-body-background);
    transition: all linear 0.15s;
    color: var(--color-accordion-title);
    font-weight: 700;
    font-size: 18px;
}

#right .accordion-section-title {
    border-bottom: 1px solid var(--color-body-background);
    background: var(--color-white);
    color: var(--color-black-text);
}

.accordion-section-title::before {
    content: "";
    display: inline-block;
    position: relative;
    left: -12px;
    top: -4px;
    width: 9px;
    height: 9px;
    overflow: hidden;
    border: 3px solid var(--color-accordion-title);
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    transform: rotate(45deg);
    box-sizing: border-box;
    transition: all 0.3s linear;
}

.accordion-section-title.active::before {
    transform: rotate(-135deg);
    top: 0px;
}

.accordion-section-title:hover:before, .accordion-section-title.active:before{
    border: 3px solid var(--color-red);
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;  
}

#right .accordion-section-title:hover:before, #right .accordion-section-title.active:before{
    border: 3px solid var(--color-white);
    border-top: 3px solid transparent;
    border-left: 3px solid transparent; 
}
    

.accordion-section-title.active, .accordion-section-title:hover {
    background: var(--color-accordion-title-background-hover);
    color:var(--color-black-text);
    text-decoration:none;
}

#right .accordion-section-title.active, #right .accordion-section-title:hover {
    background: var(--color-red);
    color: var(--color-white-text);
}

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
    padding: 0px 15px;
    display:none;
}

#right .accordion p {
    margin-top: 10px;
}

.accordion ul {
    margin-left: 0%;
    margin-right: 5%;
}

/* ----- Bank Account Logo -----*/
img.anbi { width: 100px; }


/* ------ ISSUU Viewer ---------*/

table#issuusb-shadow {
  margin-right: 0%;
  margin-left: 0%;
}




/* ---------------- Animation ------------*/
.animation a {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

.animation a.visible {
  opacity: 1;
  transform: translateX(0);
}






/* ----------------------------- Style ------------------------*/

h1, h2, h3, h4 {
    font-family: metronic-slab-narrow, sans-serif;
    font-weight: 700;
    color: var(--color-black-text);
    text-decoration: none;
    text-wrap: balance;
}

h2{ font-family:'Roboto Slab',Arial,sans-serif; }

h1 { font-size: 28px; line-height: 34px; }
h2 { font-size: 16px; line-height: 22px; color: var(--color-red-text); }
h3 { font-size: 28px; line-height: 34px; }
h4 { font-size: 12px; }

h1, h3 { margin: 0 5% 15px 5%; }
h2 { margin: auto 5% 5px 5%; }

h1 span{ display: block; }
h1 span:after { content:' '; }

.news-1 h2,
.news-2 h2,
.news-4 h2,
.news-5 h2,
.news-6 h2,
.news-bibelstudie h2,
.news-related-wrap h2,
.teaser-datum-titel h3,
.teaser-datum-titel h4,
#bottom-news h2,
#right .content h2,
.text-im-bild h2,
#footer h1{ font-weight: 700; font-family:'Roboto Slab',Arial,sans-serif; }


.text-im-bild h2{
    margin-bottom: -2px;
}

a {
    text-decoration: none;
    color: var(--color-red-text);
}

a:hover{
    text-decoration: underline;
}

ul, ol {
    margin-left: 5%;
    margin-right: 5%;
    display: flow-root;
}

ul.contentList {
    display: table;
}




blockquote {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 90%;
    margin: 20px 5% 20px 5%;
    font-size: 20px;
    line-height: 27px;
    border-left: 5px solid var(--color-red-hover);
    padding-bottom: 0px;
    padding-left: 10px; 
}

.blog-style-inner blockquote,
.blog-style-inner span.quote-left{
    margin-left: 0;
}

blockquote em{
    font-weight: 700;
    display: block;
}

blockquote p {
    margin: 0;
    padding: 0;
}

blockquote sub{
    display: block;
    font-size: 12px;
}

hr{
  width: 90%;
  height: 0;
  padding-top: 0px;
  border: solid 0px var(--color-red);
  border-bottom: solid 1px var(--color-red);
  margin: 20px 5% 20px 5%;
}

span.quote-left-placeholder{}
span.quote-right-placeholder{}


span.quote-left {
    display: block;
    float: none;
    width: 90%;
    margin: 20px 0% 20px 0%;
    font-size: 20px;
    line-height: 27px;
    border-left: 5px solid var(--color-red-hover);
    padding-bottom: 0px;
    padding-left: 10px;
    position: relative;
    background-color: inherit;
    color: inherit;
}

span.quote-left sub,
span.quote-right sub {
    display: block;
    font-size: 13px;
    line-height: 15px;
    vertical-align: inherit;
    margin-top: 6px;
}

span.quote-left-placeholder sub,
span.quote-right-placeholder sub {
    vertical-align: baseline;
    font-size: inherit;
}



span.quote-left b,
span.quote-right b,
b span.quote-left,
b span.quote-right,
span.quote-left strong,
span.quote-right strong,
strong span.quote-left,
strong span.quote-right,
i span.quote-left,
i span.quote-right,
span.quote-left i,
span.quote-right i,
em span.quote-left,
em span.quote-right,
span.quote-left em,
span.quote-right em {
  font-weight: 700;
  font-style: normal;
}

sup { line-height: 13px; }

#main .header-bild-links-text blockquote p,
#main .header-bild-rechts-text blockquote p,
#main .header-bild-links-inside-text blockquote p,
#main .header-bild-center-text blockquote p,
#main .header-bild-full-text blockquote p,
#main .bild-center-header-text blockquote p,
#main .bild-full-header-text blockquote p {
    margin-left: 0;
    margin-right: 0;
}

.indent {
    margin-left: 10%;
}


/* -------- Signiture Daniel Peter Reinhard LAGACY --------*/

span.signi-daniel { background-image: url('../sysimages/signi-daniel-2026.jpg'); }
span.signi-peter-van { background-image: url('../sysimages/signi-peter-van.jpg'); }
span.signi-reinhard { background-image: url('../sysimages/signi-reinhard.jpg'); }
span.signi-ilka { background-image: url('../sysimages/signi-ilka.jpg'); }
span.signi-lukas { background-image: url('../sysimages/signi-lukas.jpg'); }

/* -------- Signiture Daniel Peter Reinhard NEW end 2025 --------*/

p.signi-daniel { background-image: url('../sysimages/signi-daniel-2026.jpg'); }
p.signi-peter-van { background-image: url('../sysimages/signi-peter-van.jpg'); }
p.signi-reinhard { background-image: url('../sysimages/signi-reinhard.jpg'); }
p.signi-ilka { background-image: url('../sysimages/signi-ilka.jpg'); }
p.signi-lukas { background-image: url('../sysimages/signi-lukas.jpg'); }

span.signi-daniel, span.signi-peter-van, span.signi-reinhard, span.signi-ilka, span.signi-lukas{
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    width: 290px;
    padding-top: 90px;
    margin-bottom: 0px;
    font-style: italic;
    font-weight: 700;
}

p.signi-daniel, p.signi-peter-van, p.signi-reinhard, p.signi-ilka, p.signi-lukas{
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    width: 290px;
    padding-top: 90px;
    margin-bottom: 10px;
    font-style: italic;
    font-weight: 700;
}

.blog-style span.signi-daniel, .blog-style span.signi-peter-van, .blog-style span.signi-reinhard, .blog-style span.signi-ilka, .blog-style span.signi-lukas { width: 250px; }
.blog-style p.signi-daniel, .blog-style p.signi-peter-van, .blog-style p.signi-reinhard, .blog-style p.signi-ilka { width: 250px; }

#right span.signi-daniel, #right span.signi-reinhard, #right span.signi-peter-van, #right span.signi-ilka { width: 100%; padding-top: 25vw; }
#right p.signi-daniel, #right p.signi-reinhard, #right p.signi-peter-van, #right p.signi-ilka, #right p.signi-lukas { width: 100%; padding-top: 25vw; }

/* ---------------- MOBILE FIRST :)----------------*/
#top-banner {
    /* margin-bottom: 1%; */
    background-color: var(--color-white);
    border-radius: 0 0 var(--radius) var(--radius);
}

#content > div:first-child,
#content > div:first-child.layout-1 {
    margin-top: -20px;
}

#content > div:first-child.header-bild-links-text,
#content > div:first-child.header-bild-links-inside-text,
#content > div:first-child.header-bild-rechts-text,
#content > div:first-child.header-bild-center-text,
#content > div:first-child.header-bild-full-text,
#content > div:first-child.file-download,
#content > div:first-child.default {
    margin-top: 0px;
}

#content > div:first-child img,
#content > div:first-child.layout-1 img {
    border-radius: 0;
}

#content .default {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}


/* ------ Google Search ----*/


.search-container{
    margin-left: 5%;
    margin-right: 5%;
}

.search-container table {
    width: 100%;
    margin-left: 0;
}

.search-container form.gsc-search-box {
    max-width: 100%;
    font-size: 14px;
    margin: 0;
}

.search-container .gsc-result-info {
    padding: 4px 0px 0 0px;
}

.search-container .gsc-webResult.gsc-result{
    padding: 10px 0px 15px 0px;
}

.search-container .gsc-orderby-container {
    padding-right: 24px;
}

.search-container .gs-web-image-box, .search-container .gs-promotion-image-box {
    float: left;
    padding: 2px 3% 2px 0px;
}


.search-container .gs-web-image-box .gs-image, .search-container .gs-promotion-image-box .gs-promotion-image {
    height: auto;
    width: 120px;
}

.search-container .gsc-control-cse .gs-spelling,
.search-container .gsc-control-cse .gs-result .gs-title,
.search-container .gsc-control-cse .gs-result .gs-title * {
    font-size: 16px;
    line-height: 22px;
}

.search-container .gsc-control-cse,
.search-container .gsc-control-cse .gsc-table-result {
    font-size: 14px;
    line-height: 19px;
}




figure {
    height: auto;
    border: none;
    margin: 0 0 10px 0;
}

figure:last-of-type{
    margin: 0 0 20px 0;
}

#top-banner figure:last-of-type {
    margin: 0;
}

figcaption {
    margin: 5px 0 20px 0;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
}

.block{
    width: 50%;
    float: left;
}

.block h3 {
    margin-left: 0;
}

#main #content .block p{
    margin: 0 0 1em 0;
}

table {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

#main .header-bild-links-text p,
#main .header-bild-links-inside-text p,
#main .header-bild-rechts-text p,

#main .header-bild-center-text p,
#main .header-bild-full-text p,

#main .bild-center-header-text p,
#main .bild-full-header-text p,
#main .text-im-bild p,

#top-banner .header-bild-links-text p,
#top-banner .header-bild-links-inside-text p,
#top-banner .header-bild-rechts-text p,

#top-banner .header-bild-center-text p,
#top-banner .header-bild-full-text p,

#top-banner .bild-center-header-text p,
#top-banner .bild-full-header-text p

{
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0;
}

#main .header-bild-links-text,
#main .header-bild-links-inside-text,
#main .header-bild-rechts-text,

#main .header-bild-center-text,
#main .header-bild-full-text,

#main .bild-center-header-text,
#main .bild-full-header-text,
#main .text-im-bild {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}


/* ---- border-radius fix---- */
#main .header-bild-full-text{
    border-radius: 0;
}

.header-bild-full-text img{
    border-radius: 0;
}

#top-banner img{
    border-radius: 0 0 var(--radius) var(--radius);
}

#main .header-bild-links-text figcaption { margin: 5px 0 0 0; }
#top-banner .header-bild-links-text figcaption { margin: 5px 5% 0 5%; }

#main .header-bild-links-text figure {
    float: left;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    clear: both;
}

#top-banner .header-bild-links-text figure {
    float: left;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    clear: both;
}



#top-banner .header-bild-links-inside-text figcaption{ margin: 5px 10px 0 0; }

#main .header-bild-links-inside-text figcaption{ margin: 5px 10px 0 10px; }

#main .header-bild-links-inside-text figure,
#top-banner .header-bild-links-inside-text figure{
    width: 40%;
    float: left;
    margin-right: 2%;
    clear: both;
}

#main .header-bild-rechts-text figcaption,
#top-banner .header-bild-rechts-text figcaption{ margin: 5px 10px 0 0; }

#main .header-bild-rechts-text figure,
#top-banner .header-bild-rechts-text figure{
    width: 45%;
    float: right;
    margin-left: 5%;
}


#main .header-bild-center-text figure,
#top-banner .header-bild-center-text figure{
    width: 90%;
    margin-left: 5%;
}

#main .header-bild-full-text figure{

}

#main .bild-center-header-text figure,
#top-banner .bild-center-header-text figure{
    margin-left: 5%;
    width: 90%;
}

#main .bild-full-header-text figcaption,
#top-banner .bild-full-header-text figcaption{ margin: 5px 5% 0 5%; }

#main .header-bild-full-text figcaption,
#top-banner .header-bild-full-text figcaption{ margin: 5px 5% 0 5%; }

#main .bild-full-header-text figure{

}

#main .header-bild-full-text figure{

}


/* ------- TEXT IM BILD -------*/

.text-im-bild-unten-links {
    padding-bottom: 1px;
}

.text-im-bild {
    padding-bottom: 20px;
    padding-top: 10px;
}

.text-im-bild h1 {
  padding-bottom:10px;
  margin-bottom:0px;
}


.text-im-bild p {
    font-size: 16px;
    line-height: 22px;
    margin: 0px 5% 0px 5%;
    position: relative;
}

/* für content seiten */
#content .text-im-bild {
    padding-bottom: 0px;
    margin-top: 10px;
}

#content .text-im-bild p {
    margin-bottom: 1em;
}

.text-im-bild-unten-links figure:last-of-type,
.text-im-bild-unten-rechts figure:last-of-type,
.text-im-bild-oben-links figure:last-of-type,
.text-im-bild-oben-rechts figure:last-of-type{
    margin: 0 0 10px 0;
}

.text-im-bild-unten-links img,
.text-im-bild-unten-rechts img,
.text-im-bild-oben-links img,
.text-im-bild-oben-rechts img{
    border-radius: 0 0 var(--radius) var(--radius);
}



/* ---------- BLOG STYLE -------*/

.blog-style {
    display: flex;
    clear: both;
}

.blog-style img{
    border-radius: var(--radius) 0 0 var(--radius);
}

#content > .blog-style:first-child {
    margin-top: 20px;
}

.blog-style-inner{
    float: left;
    width: 87%;
}

.blog-date{
  position: relative;
    float: left;
    width: 13%;
}

span.blog-year {
    padding: 2px 0 0px 0;
    font-size: 21px;
    display: block;
    text-align: center;
}

span.blog-day {

    font-weight: 700;
    display: block;
    text-align: center;
    font-size: 23px;
    color: var(--color-red-text);
    margin: 2px 0 -5px 0;
}

span.blog-month {

    font-weight: 700;
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--color-red-text);
    margin: 0px 0 10px 0;
    text-transform: uppercase;
}

span.blog-line{
  position: absolute;
  display: block;
  left: 50%;
    width: 3px;
    background: linear-gradient(var(--color-red), var(--color-white));
    height: 70%;
}

.blog-style h1, .blog-style h2, .blog-style h3 {
    margin-left: 0;
}

.blog-style h1, .blog-style h3{
    font-size: 21px;
    line-height: 26px;
}

.blog-style h2 {
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 4px;
}

.blog-style p{
    margin-right: 5%;
}


.blog-style .mansonry img{
    border-radius: var(--radius);
}


.blog-style ol, .blog-style ul{
  margin-left: 0;
  padding-left: 18px;
}






/* ------------ NEW Gallery Mansory ------*/


.gallery {
  --gap: 2px;
  --target-row-height: 150px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: 20px;
}

.item2 {
  margin: 0;
  min-width: 0;

  flex:
    calc(var(--r) * 1000)
    1
    calc(var(--target-row-height) * var(--r));
}

.item2 img {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--color-gray);
  aspect-ratio: var(--r);
}

.gallery figure:last-of-type{
    margin: 0;
}


/* ------ Caption -------- */


.item2 {
  display: grid;
}

.item2 > * {
  grid-area: 1 / 1; /* stack */
}

/* caption styling */
.item2 figcaption {
  align-self: end;
  padding: 15px;
  color: white;
  background: rgba(0,0,0,0.6);
  border-radius: var(--radius);
  font-weight: 100;

  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.item2:hover figcaption {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}


.pswp .pswp__caption__center {
    max-width: 510px;
    font-size: 15px;
    padding: 30px;
    line-height: 24px;
}




/* ------------------------------ RIGHT CONTENT ---------------------*/

#right p {
    margin-top: 0;
}

#right>h1, #right>div>h1, #right>h2, #right>h3, #right>h4 {
    margin: 0 0 10px;
}

#right>div>h2, #right>h2{
    margin-bottom: 0;
}

#right .content{
    display: block;
    position: relative;
    float: left;
    width: 100%;
    margin: 10px 0;
}


#right .content img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: 0px;
    margin-bottom: 10px;
}

#right a:hover .content {
    background-color: var(--color-white);
    margin: 10px -5%;
    padding: 0 5%;
}
#right .content h1{
    display: block;
    clear: right;
    font-size: 28px;
    line-height: 35px;
    margin: 0% 0% 10px 0;
}

#right .content h2{
    display: block;
    font-size: 13px;
    line-height: 17px;
    color: var(--color-red-text);
    text-transform: uppercase;
    font-weight: 700;
    margin: auto 0% 0px 0;
}

#right .content h3 {
    font-size: 22px;
    line-height: 27px;
    margin: auto 0% 12px 0;
}

#right .content p{
    color: var(--color-black-text);
    width: 100%;
    margin: 0px 0% 12px 0;
}






/* -------- TEST Workaround same height ----*/
#bottom-news .default {
    display: flex;
    flex-wrap: wrap;
}


/* ------------- TABLE ---------*/

#main #content table p {
    margin-left: 0;
}
.contenttable th,
.contenttable td{
    padding: 10px 10px;
    border-bottom: 2px solid white;
}

.contenttable th{
    background-color: var(--color-red);
    color: var(--color-white-text);
    padding: 15px 10px;
    text-align: center;
}

.contenttable tr {
    background-color: var(--color-body-background);
    text-align: center;
}

.contenttable tr:hover {background-color: #f5f5f5}
.contenttable tr:nth-child(even) {background-color: #f2f2f2}

.contenttable th:nth-child(1) { text-align: left;}
.contenttable td:nth-child(1) { text-align: left;}

.is-hotel{ width: 40%; }
.is-comfort{ width: 30%; }
.is-deluxe{ width: 30%; }


/* ------- FACEBOOK Page ------*/

a#facebook {
    background-color: #437ecc;
    margin: 0 auto;
    color: var(--color-white-text);
    position: relative;
    display: table;
    height: 35px;
    text-decoration: none;
    box-sizing: border-box;
    border-radius: var(--radius);
    margin-bottom: 10px;
    margin-top: 4px;
}

a#facebook:hover{
    text-decoration:none;
    background-color: #4e8ee2;
}

#main a#facebook{
    display:block;
    float:left;
    margin-right: 7px;
}

#facebook .fa {
    width: 35px;
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
}

#facebook .share_count, #facebook .share_text {
    font-weight: 400;
    font-size: 13px;
    vertical-align: middle;
    line-height: 30px;
    padding-right: 20px;
}

/* --------------- SPEAKER ----------------*/


ul#speakers {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

#speakers li {
    width: 22%;
    float: left;
    list-style: none;
    margin-bottom: 30px;
    padding-right: 3%;
}

#speakers img {
    object-fit: cover;
    border-radius: 110px;
    box-shadow: 0 3px 14px 0px #ababab;
    width: 100%;
    height: 132px;
    margin-bottom: 10px;
}

span.speaker-title {
    display: block;
    width: 100%;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    text-align: center;
}

span.speaker-name {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 800;
}

#right #speakers li {
    width: 30%;
    margin-bottom: 15px;
}

#right #speakers img {
    height: 105px;
}













/* ###########################---- MOBILE ab 360 px --------#########################*/

@media (min-width: 360px) {






/* -------------------------------- NEWS-1 -----------------------------*/


/* -------------------------------- NEWS-2 -----------------------------*/

.news-2 h1{
    font-size: 19px;
    line-height: 22px;
}


/* -------------------------------- NEWS-4 + Related -----------------------------*/

.news-4 h1,
.news-related-wrap h1{
    font-size: 19px;
    line-height: 22px;
}

/* ------------------------------- NEWS-6 -------------------------------*/

.news-6 h1{
    font-size: 19px;
    line-height: 22px;
}


/* --------------------------- BOTTOM NEWS ---------------------*/

#bottom-news {
    width: 100%;
    margin-bottom: 30px;
}

#bottom-news a {
}


#bottom-news h1{
    margin: 0;
    font-size: 19px;
    line-height: 22px;
}

#bottom-news > h1,
#bottom-news > div > h1{
    margin: 0 0 10px 0;
    font-size: 28px;
    line-height: 34px;
}

#bottom-news img,
#bottom-news .video-wrapper-list,
#bottom-news .video-container {
    width: 35%;
}






  
#right span.signi-daniel,
#right span.signi-reinhard,
#right span.signi-peter-van,
#right span.signi-ilka,
#right span.signi-lukas {
    width: 100%;
    padding-top: min(9vw,110px);
}

#right p.signi-daniel,
#right p.signi-reinhard,
#right p.signi-peter-van,
#right p.signi-ilka,
#right p.signi-lukas {
    width: 100%;
    padding-top: min(9vw,110px);
}



/* ------------------------------ RIGHT CONTENT ---------------------*/

#right .content h1{

    font-size: 28px;
    line-height: 35px;
}

#right .content h2{

    font-size: 15px;
}

/* -------- BOTTOM TEASER ---------*/

#bottom-news h1{
    font-size: 19px;
    line-height: 22px;
}

#bottom-news > h1,
#bottom-news > div > h1{
    margin: 0 0 10px 0;
    font-size: 28px;
    line-height: 34px;
}




/* ------------------------------- NEWS-Bibelstudie + Schedule-------------------------------*/

.news-bibelstudie h1,
.news-schedule h1{
    font-size: 19px;
    line-height: 22px;
}

.news-schedule p {
    display: block;
    float: left;
    width: 100%;
    margin: 0;
}


/* ------------------------------ TERMIN TEASER ---------------------*/

.teaser-datum-titel h1{
    font-size: 19px;
    line-height: 22px;

}



    
}




/* #########################----------- IPAD klein ab 550 ----------############################*/

@media (min-width: 550px) {

#main {
  width: 65%;
  margin-top: 0px;
}

#top-banner #right{
    margin-top: 0;
}

#right {
  width: 32%;
  margin: 10px 0 30px 1%;
  padding: 15px 1% 0 1%;
}
  
#top-banner ~ #space #right {
    margin-top: 10px;
}

#top-banner ~ #space #main {
    margin-top: 10px;
}

#space {
    width: 96%;
    padding: 0 2%;
}

/* ------------------------------ RIGHT CONTENT ---------------------*/


#right>h1, #right>div>h1{
    font-size: 20px;
}

#right p{
    font-size: 13px;
    line-height: 18px;
}    

#right .content{
}

#right a:hover .content{
    margin: 10px 0% 10px -5%;
    padding: 0 0% 0 5%;
}


#right .content h1{
    font-size: 20px;
    line-height: 28px;
}

#right .content h2{
    font-size: 12px;
    line-height: 16px;
}

#right .content h3 {
    font-size: 17px;
    line-height: 21px;
}






/* ---------- NEW FOOTER ---------*/

#footer {
    background: url(../sysimages/footer/footer-ghana-1500.webp),#1a1a1a;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}

/* ------- Counter -------*/

#counter {
    height: 50px;
    border-radius: var(--radius);
}

.count {
    font-size: 31px;
    line-height: 49px;
    width: 165px;
    padding: 0px 8px 0px 15px;
}

.count-text {
    font-size: 14px;
    padding: 8px 0px 0px 0px;
    line-height: 17px;
}

span.count-text-share {
    font-size: 14px;
    line-height: 17px;
}

.count-share img {
    width: auto;
    height: 36px;
    padding: 7px;
    display: none;
}

    
/* -------------------------------- NEWS-1 TOP-NEWS ---------------------------*/

div#top-banner {
    max-width: 1180px;
    z-index: 30;
    position: relative;
    background-color: var(--color-white);
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 10%);
    margin: 0 auto 0 auto;
}


.topnews h1 span {
    display: inline;
}    

    
/* -------------------------------- NEWS-1 ---------------------------*/

.news-1 a,
.news-2 a,
.news-4 a,
.news-5 a,
.news-6 a,
.news-bibelstudie a,
.news-related-wrap a {
    overflow: hidden;
}

.news-1 .news-text{
    padding: 0 5% 20px 5%;
}

.news-1 h1 {
    font-size: 29px;
    line-height: 33px;
}
  
/* -------------------------------- NEWS-2 ----------------------*/
    

.news-2 h1{
  font-size: 17px;
  line-height: 20px;
}
    

/* -------------------------------- NEWS-4 + Related-----------------------------*/

.news-4 h1,
.news-related-wrap h1{
    font-size: 17px;
    line-height: 20px;
}


/* ------------------------------- NEWS-6 -------------------------------*/
.news-6 img,
.news-6 .video-wrapper-list,
.news-6 .video-container{
    width: 35%;
}

.news-6 .video-container {
    padding-bottom: 18%;
}

.news-6 a{
    padding-bottom: 0;
    padding-top: 0;
}
.news-6 h1{
    margin: 0px 0 2% 0;
    font-size: 19px;
    line-height: 22px;
}

.news-6 p {
  display:none;
}



/* ---------------------- Bottom News ---------------*/

#bottom-news {
    padding-left: 0;
    padding-right: 0;
}




/* ------------------------------- NEWS-Bibelstudie + Schedule-------------------------------*/

.news-bibelstudie a,
.news-schedule a{
    padding-bottom: 10px;
    padding-top: 10px;
}
.news-bibelstudie h1,
.news-schedule h1{
    font-size: 19px;
    line-height: 22px;
}


/* ---------------- 3 RED BUTTON -------------------*/


.special-btn {
    width: 80%;
    margin: 0 0% 4% 0%;
    padding: 4% 10%;
    font-size: 16px;
    line-height: 20px;
}


/* ------------------------------ TERMIN TEASER ---------------------*/
.teaser-datum-titel img,
.teaser-datum-titel .video-wrapper-list,
.teaser-datum-titel .video-container {
  display: none;
}

.teaser-datum-titel a{

}

.teaser-datum-titel h3{
    width: 96%;
    font-size: 15px;
}

.teaser-datum-titel h4{
    width: 97%;
    font-size: 10px;
    line-height: 14px;
}

/* ------------------------------ ACCORDION ---------------------*/


#right .accordion-section-title {
    padding: 10px 28px;
}

#right .accordion-section-content {
    padding: 0px 15px;
 }






}


/* ###########################------------------- IPAD ab 720 ------------------------###############*/

@media (min-width: 720px) {

body{
  margin-top: 105px; /* fixed menu */
}

.body-margin{
    margin-top: 0px;
}

#main {
  width: 65%;
}

#header{
    height: 105px;
    margin-bottom: 50px;
}

#header-container {
    height: 105px;
}

#space {
    width: 96%;
    padding: 0 2%;
}

#content {
    padding-top: 40px;
}

/* Hide Menu / Header + Ajust Menu / Header */
#header.hide-header{
    top: -105px;
}

.count{
    font-size: 36px;
    width: 192px;    
}

/* --------- NEW FOOTER ----------*/

#footer-container {
    /* grid-template-columns: 1fr 1fr 1fr; */
}

#footer li a {
    padding: 0;
}



/* -------------------- SPENDINO -----------*/

.spendino-formular{
    margin-left: 20%;
    margin-right: 5%;
}
  
/* ------------- Donate iframe ----------*/

#donate-iframe {
    width: 75%;
    margin: 0 5% 30px 20%;
}
  
.paymentoptions{
  width: 74%;
  margin: -20px 5% 30px 20%;
}


/* -------------------------------- NEWS-1 TOP-NEWS ---------------------------*/


.news-1.topnews {
    position: relative;
    margin-bottom: 0;
}

.topnews a{
    padding-bottom: 0px;
}
 
.topnews a .topnews-text{
    transform: translateY(0px);
    transition: all 0.2s;
}

.transparent {
    display: block;
    background-image: url(../sysimages/trans.png);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-size: 100% 100%;
    background-position: 0 -80%;
    background-repeat: no-repeat;
    opacity: 0.8;
    pointer-events: none;
    border-radius: 0 0 4px 4px;
}
  
#content .transparent { bottom: 10px; }

.transparent-oben-links { background-image: url(../sysimages/trans-oben-links.png);}
.transparent-oben-rechts { background-image: url(../sysimages/trans-oben-rechts.png);}
.transparent-unten-rechts { background-image: url(../sysimages/trans-unten-rechts.png);}
    
.topnews-text {
    position: absolute;
    bottom: 7%;
    width: 100%;
    padding-bottom: 0px;
    margin: 0;
}
    
.topnews h2{
    margin-left: 3%;
}
    
.topnews h1 span {
    display: block;
}   

.topnews h1{
    color: var(--color-white-text);
    margin-left: 3%;
}

.news-1.topnews a:hover h1 {
    color: var(--color-white-text);
    text-decoration: underline;
}
    
.topnews p{
    color: var(--color-white-text);
    width: 55%;
    margin-left: 3%;
}
    
.news-1.topnews h2 {
    padding: 1px 8px 1px 8px;
}





/* -------------------------------- NEWS-1 ---------------------------*/
.news-1 .news-text {
    padding: 0px 5% 30px 5%;
}

.news-1 h1 {
    font-size: 29px;
    line-height: 35px;
    margin-top: 10px;
}

/* -------------------------------- NEWS-2 ----------------------*/
  
.news-2{
    grid-template-columns: 1.5fr 1fr;
}

.news-2 .news-text {
    padding: 15px 20px 25px 20px;
}

.news-2 h1{
  font-size: 29px;
  line-height: 33px;
}
  
.news-2 a:nth-child(2) h1{
    font-size: 20px;
    line-height: 23px;
}



/* -------------------------------- NEWS-4 -----------------------------*/

.news-4 h1,
.news-related-wrap h1{
    font-size: 22px;
    line-height: 25px;
}

/* ------------------------------- NEWS-6 -------------------------------*/

.news-6 h1{
    margin: 0px 0 2% 0;
    font-size: 22px;
    line-height: 25px;
}

.news-6 .news-text{
    width: 65%;
}

.news-6 p {
  display:none;
}


/* --------------------- BOTTOM NEWS ------------------*/


#bottom-news h1 {
    font-size: 22px;
    line-height: 25px;
}
#bottom-news h2 {
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 2px;
}


#bottom-news > h1,
#bottom-news > div > h1 {
    margin: 0 0 10px 0;
    font-size: 36px;
    line-height: 40px;
}

#bottom-news a .news-text{
    transform: translateX(0);
    transition: all 0.2s;
}


#bottom-news a:hover .news-text{
    transform: translateX(5px);
}



/* ------------------- NEWS hover ------------------- */
/* 
.news-1 a .news-text,
.news-2 a .news-text,
.news-4 a .news-text,
.news-5 a .news-text,
.news-related-wrap a .news-text{
    transform: translateY(0);
    transition: all 0.2s;
}

.news-1 a .news-text h2{
    transform: translateY(0px);
    transition: all 0.2s;
}

.news-1 a:hover .news-text,
.news-2 a:hover .news-text,
.news-4 a:hover .news-text,
.news-5 a:hover .news-text,
.news-related-wrap a:hover .news-text {
    transform: translateY(-5px);
    transition: all 0.2s;
}

.news-1 a:hover .news-text h2{
    transform: translateY(5px);
    transition: all 0.2s;
}
*/


.news-1 a,
.news-2 a,
.news-4 a,
.news-5 a,
.news-6 a,
.news-related-wrap a{
    transition: filter 0.2s;
    filter: brightness(1);
}



.news-1 a:hover,
.news-2 a:hover,
.news-4 a:hover,
.news-5 a:hover,
.news-6 a:hover,
.news-related-wrap a:hover{
    filter: brightness(1.2);
}

.news-1.topnews a:hover{
    transform: none;
    opacity: 0.9;
}





/* ------------------------------- NEWS-Bibelstudie + Schedule -------------------------------*/

#list-news-bibelstudie,
#list-news-schedule {
    margin-left: 20%;
    margin-right: 5%;
}

.news-bibelstudie h1,
.news-schedule h1{
    font-size: 19px;
    line-height: 22px;
}

.news-schedule h2 {
    font-size: 16px;
}

.news-bibelstudie p {
    display:none;
}


/* ------- Related News ---------*/

.news-related-wrap {
    width: 75%;
    margin-left: 20%;
}

/* ------------------------ NEWS-EVENTS -----------------------------*/

.news-events {
    margin: 0 5% 0 20%;
}

.news-events a {

}


  
.news-events a:hover h1 {
    text-decoration: none;
}
  
.news-events-content{
    width: 58%;
}
  
.news-events-right {
    padding: 5px 5% 30px 0%;
}
  
.news-events h2 {
    margin-left: 0;
}
  
.news-events h1 {
    font-size: 19px;
    line-height: 22px;
}
  
.news-events p {
    margin: 0;
}

/* ------------------------------ TERMIN TEASER ---------------------*/

.teaser-datum-titel img,
.teaser-datum-titel .video-wrapper-list,
.teaser-datum-titel .video-container {
    display: block;
}

.teaser-datum-titel h3{
    width: 63%;
}

.teaser-datum-titel h4{
    width: 64%;
    font-size: 12px;
}



/* ------------------------------ NEWS SINGLE ---------------------*/
.news-backlink-wrap a {
    margin: 5px 10px 10px 20%;
}


/* ------------------------------ SOCIAL -----------------------*/
.social {
  width: 75%;
    margin: 0 5% 0 20%;
}


/* ------------------------------ ACCORDION -----------------------*/

#content .accordion {
    width: 75%;
    margin-left: 20%;
    margin-right: 5%;
}

.accordion-section-title {
    padding-left: 5%;
}





ul, ol {
    margin-left: 20%;
}

blockquote, span.quote-left, mark.quote-left {
        float: left;
        margin: 20px 5% 20px -15%;
        max-width: 60%;
        width: auto;
}

blockquote {
    margin: 20px 5% 20px 8%;
    width: 45%;
}
  
.blog-style-inner blockquote, .blog-style-inner span.quote-left, .blog-style-inner mark.quote-left{
    margin-left: 0;
}
  
hr{
  width: 75%;
  margin: 20px 5% 20px 20%;
}

h1{
    font-size: 36px;
    line-height: 40px;
    margin-left: 20%;
    margin-top: 0;
}

h2, h3{
    margin-left: 20%;
}

figcaption {
    margin: 5px 5% 20px 0;
}

.block{
  width: 40%;
  float: left;
}

#content > div:first-child,
#content > div:first-child.layout-1 {
    margin-top: -40px;
}

/* -------- Signiture Daniel Reinhard --------*/
span.signi-daniel,
span.signi-peter-van,
span.signi-reinhard,
span.signi-ilka,
span.signi-lukas{
    width: 350px;
    padding-top: 110px;
}

p.signi-daniel,
p.signi-peter-van,
p.signi-reinhard,
p.signi-ilka,
p.signi-lukas{
    width: 350px;
    padding-top: 110px;
}

.blog-style span.signi-daniel, .blog-style span.signi-peter-van, .blog-style span.signi-reinhard, .blog-style span.signi-ilka, .blog-style span.signi-lukas { width: 350px; }
.blog-style p.signi-daniel, .blog-style p.signi-peter-van, .blog-style p.signi-reinhard, .blog-style p.signi-ilka, .blog-style p.signi-lukas { width: 350px; }


#main .header-bild-links-text p,
#main .header-bild-links-inside-text p,
#main .header-bild-rechts-text p,

#main .header-bild-center-text p,
#main .header-bild-full-text p,

#main .bild-center-header-text p,
#main .bild-full-header-text p,

#top-banner .header-bild-links-text p,
#top-banner .header-bild-links-inside-text p,
#top-banner .header-bild-rechts-text p,

#top-banner .header-bild-center-text p,
#top-banner .header-bild-full-text p,

#top-banner .bild-center-header-text p,
#top-banner .bild-full-header-text p
{
    margin-left: 20%;
}

#main .header-bild-links-text figure,
#top-banner .header-bild-links-text figure {
    float: left;
    width: 40%;
    margin-right: 2%;
    margin-left: 0;
}

#main .header-bild-links-text figcaption,
#top-banner .header-bild-links-text figcaption {
    margin: 5px 0 0 10px;
}

#main .header-bild-links-inside-text figure,
#top-banner .header-bild-links-inside-text figure{
    width:30%;
    margin-left: 20%;
}

#main .header-bild-rechts-text figure,
#top-banner .header-bild-rechts-text figure{
    width:35%;
}


#main .header-bild-center-text figure,
#top-banner .header-bild-center-text figure{
    width: 80%;
    margin-left: 20%;
}

#main .bild-center-header-text figure,
#top-banner .bild-center-header-text figure{
    margin-left: 20%;
    width: 80%;
}
  
#main .header-bild-links-inside-text figcaption{ margin: 5px 10px 0 0; }


.header-bild-center-text img, .bild-center-header-text img{
    border-radius: var(--radius) 0 0 var(--radius);
}

.header-bild-links-text img{
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ------------------- TEXT IM BILD ----------------*/

.text-im-bild-unten-links {
    position: relative;
    padding-bottom: 0px;
}

.text-im-bild-oben-links {
    position: relative;
    padding-top: 0px;
}

.text-im-bild-oben-rechts{
    position: relative;
    padding-top: 0px;
}

.text-im-bild-unten-rechts{
    position: relative;
    padding-bottom: 0px;
}

/* Text im Bild content area Anpassung */
#content .text-im-bild-unten-links,
#content .text-im-bild-oben-links,
#content .text-im-bild-oben-rechts,
#content .text-im-bild-unten-rechts {
    float:left;
}


#top-banner .text-im-bild,
#main .text-im-bild {
    position: absolute;
    z-index: 30;
    bottom: 3%;
    margin-left: 3%;
    margin-right: 3%;
    pointer-events: none;
}


.text-im-bild-oben-links .text-im-bild,
.text-im-bild-oben-rechts .text-im-bild{ top: 10%; }

.text-im-bild-oben-rechts .text-im-bild,
.text-im-bild-unten-rechts .text-im-bild {
    right: 0;
}

.text-im-bild h1 {
    color: var(--color-white-text);
    margin-left: 0;
    margin-bottom: 8px;
    padding-bottom:0px;
    text-shadow: 0px 0px 55px rgba(0, 0, 0, 0.69);
    width:max-content;
}

.text-im-bild h2 {
    width: max-content;
    margin-left: 0;
    background-color: var(--color-white);
    text-transform: uppercase;
    color: var(--color-red-text);
    font-size: 15px;
    line-height: 21px;
    padding: 3px 10px 3px 10px;
    position: relative;
    display: table;
    margin-bottom: 2px;
}

.text-im-bild p {
    color: var(--color-white-text);
    width: 100%;
    margin-left: 0%;
}

#content .text-im-bild h1,
#content .text-im-bild h2{
    margin-left: 5%;
}
  
#content .text-im-bild-unten-links,
#content .text-im-bild-oben-links,
#content .text-im-bild-unten-rechts,
#content .text-im-bild-oben-rechts{ margin-bottom: 20px; }

.text-im-bild-oben-rechts h1,
.text-im-bild-unten-rechts h1 {
    margin-right: 0;
    text-align: right;
    float: right;
    width: 94%;
}

.text-im-bild-oben-rechts h2,
.text-im-bild-unten-rechts h2,

.text-im-bild-oben-rechts p,
.text-im-bild-unten-rechts p {
    margin-right: 0;
    text-align: right;
    float: right;
}


/* -------- BLOG STYLE ----------*/

.blog-style-inner{
    width: 80%;
}

.blog-date{
    width: 20%;
}  
  
.blog-style h1, .blog-style h3 {
    font-size: 22px;
    line-height: 27px;
}

.blog-style h2 { font-size: 16px; }

span.blog-day {
    font-size: 34px;
    margin: 5px 0 5px 0;
}

span.blog-month {
    font-size: 19px;
    margin: 1px 0 10px 0;
}
  
table {
    width: 75%;
    margin-left: 20%;
}






/* ------------------------------ RIGHT CONTENT ---------------------*/


#right figcaption {
   /* margin: 2% 5% 0 3%; */
    margin: 5px 5% 0 0;
}

#right>h1, #right>div>h1{
    font-size: 24px;
}

#right>h1, #right>div>h1, #right>h2, #right>h3, #right>h4 {
    margin-left: 0;
}

#right p{
    font-size: 13px;
    line-height: 18px;
}    

#right .content h1{
    font-size: 24px;
    line-height: 30px;
    margin-left: 0;
}

#right .content h2{
    margin: auto 0% 0px 0;
}

#right .content h3 {
    font-size: 22px;
    line-height: 27px;
}






/* ----------- Search -------*/

.search-container{
    margin-left: 20%;
    margin-right: 5%;
}








}

/* ###################---------- DESKTOP ab 960 -------------########## */

@media (min-width: 960px) {
#main {
  width: 68%;
}

#right {
  width: 29%;
}

#space {
    width: 98%;
    padding: 0 1%;
}

.news-1 h2,
.news-2 h2,
.news-4 h2,
.news-5 h2,
.bibelstudie h2,
.news-related-wrap h2 {
    font-size: 14px;
    line-height: 16px;
}
    
/* ------- Counter -------*/

span.count-text-share {
    display: block;
}

.count-share img {
    display: block;
}

/* -------------------------------- NEWS-1 ---------------------------*/

.news-1.topnews h2 {
    margin-left: 3%;
    padding: 1px 8px 1px 8px;
}

.news-1 h1 {
    font-size: 33px;
    line-height: 39px;
    margin-top: 12px;
}
    
.news-1 h1 span {
    display: inline;
}

    
.news-1 p{
    font-size: 15px;
    line-height: 21px;
}    
    
/* -------------------------------- NEWS-2 ----------------------*/


.news-2 .news-text {
    padding: 15px 20px 30px 20px;
}

.news-2 h1{
    font-size: 31px;
    line-height: 36px;
}

.news-2 a:nth-child(2) h1{
    font-size: 22px;
    line-height: 27px;
}
  
.news-2 p {
    display:block;
}  

/* -------------------------------- NEWS-4 -----------------------------*/

.news-4 .news-text,
.news-related-wrap .news-text{
    padding: 20px 20px 30px 20px;
}

.news-4 h1,
.news-related-wrap h1{
    font-size: 23px;
    line-height: 28px;
}
.news-related-wrap h2 {
    font-size: 14px;
    margin: 0 0 2px 0;
}
.news-4 p,
.news-related-wrap p{
    display: block;
}


/* ------------------------------- NEWS-6 -------------------------------*/

.news-6 h2 {
    font-size: 14px;
    margin: 0 0 2px 0;
}

.news-6 h1{
    margin: 0 0 3px 0;
    font-size: 23px;
    line-height: 28px;
}
  
.news-6 h1 span {
    display: inline;
}
.news-6 p {
    display: block;
    margin: 0;
}

.news-6 .news-text{
        padding: 13px 15px 10px 18px;
}

  /* ------------------------------- BOTTOM NEWS -----------------------*/


#bottom-news {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

#bottom-news .news-text {
    padding: 15px;
    width: 100%;
}

#bottom-news > :first-child {
    grid-column: span 3;
}



#bottom-news a {
    padding-bottom: 10px;
    background: var(--color-white);
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 15%);
    filter: brightness(1.0);
    transition: filter 0.2s;
}
  
#bottom-news a:hover {
    background: var(--color-white-button-hover);
    text-decoration: none;
    box-shadow: 0px 3px 7px 0px var(--color-shadow-hover);
    position: relative;
}

#bottom-news a .news-text{
    transform: translateX(0);
    transition: all 0.2s;
}

#bottom-news a:hover{
    filter: brightness(1.2);
}

#bottom-news a:hover .news-text{
    transform: translateX(0px);
}

#bottom-news img,
#bottom-news .video-wrapper-list,
#bottom-news .video-container {
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
}



#bottom-news .video-container{
    padding-bottom: 56%;
}



#bottom-news h2 {
    font-size: 14px;
    margin: 0 0 3px 0;
}
  
#bottom-news a h1 {
    margin: 0 0 3px 0;
    font-size: 23px;
    line-height: 27px;
}

#bottom-news p {
    display: block;
    margin: 0;
}

#bottom-news > h1,
#bottom-news > div > h1 {
    margin: 10px 0 0 0;
    font-size: 36px;
    line-height: 40px;
}





/* ------------------------------- NEWS-Bibelstudie + Schedule-------------------------------*/

.news-bibelstudie h1,
.news-schedule h1{
    font-size: 23px;
    line-height: 27px;
}
.news-bibelstudie h2 {
    font-size: 14px;
}
.news-bibelstudie h1 span,
.news-schedule h1 span {
    display: inline;
}
.news-bibelstudie p {
    display: block;
    float: left;
    width: 100%;
    margin: 0;
}

/* ------------------------ NEWS-EVENTS -----------------------------*/

.news-events-content {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 58%;
    padding: 14px 11px 11px 11px;
}
  
.news-events img {
    float: left;
    width: 40%;
    height: 97px;
    object-fit: cover;
}
  
.news-events a:hover h1 {
    text-decoration: none;
} 
  

.news-events-left {
    padding: 0;
    width: 100%;
}

.news-events-right {
    width: 56%;
    margin-right: 0%;
    transition: all 0.2s;
}
  
.news-events a:hover .news-events-left {

}
  
.news-events a:hover .news-events-right {
    width: 56%;

}
  
.news-events h1 {
    font-size: 23px;
    line-height: 27px;
}

.news-events h2 {
    font-size: 14px;
    line-height: 14px;
    width: 90%;
}
  
/* ------- Single Related News --------*/

#main .bild-full-header-text .news-related-wrap p {
    font-size: 15px;
    line-height: 21px;
}

/* ---------------- 3 RED BUTTON -------------------*/

#main .read-more-btn, #main .download {
    width: auto;
}


.special-btn {
    padding: 5% 10%;
    margin: 0 0% 3% 0%;
    font-size: 21px;
}

/* ------------------------------ TERMIN TEASER ---------------------*/

.teaser-datum-titel img,
.teaser-datum-titel .video-wrapper-list,
.teaser-datum-titel .video-container {
    
}    
    
.teaser-datum-titel h3{
    width: 63%;
}

.teaser-datum-titel h4{
    width: 64%;
}

/* ----------------- Donate ------------- */
  
.paymentoptions{
    width: 50%;
    margin: -20px 0% 30px 34%;
}


/* ------------------------------ FOOTER FORM ---------------------*/





.text-im-bild p { width: 70%; }
  
  
/* --- Blog Style ---*/

span.blog-line {
    width: 3px;
}

.blog-style h1, .blog-style h3 {
    font-size: 27px;
    line-height: 33px;
}

.blog-style h2 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 5px;
}


/* ------------------------------ RIGHT CONTENT ---------------------*/


#right>h1, #right>div>h1{
    font-size: 28px;
}

#right p {
    font-size: 15px;
    line-height: 21px;
}

#right .content h1{
    font-size: 28px;
    line-height: 36px;
}

#right .content h2{
    font-size: 14px;
    line-height: 20px;
}















}

/* ########################--------- DESKTOP ab 1140 -------###############*/

@media (min-width: 1140px) {

  
 
/* -------------------------------- NEWS-1 ---------------------------*/

.news-1 h1 {
    font-size: 40px;
    line-height: 47px;
}
    
/* -------------------------------- NEWS-2 ----------------------*/

.news-2 h1{
    font-size: 36px;
    line-height: 41px;
}

.news-2 a:nth-child(2) h1{
    font-size: 26px;
    line-height: 32px;
}

/* -------------------------------- NEWS-4 -----------------------------*/

.news-4 h1{
    font-size: 32px;
    line-height: 37px;
}

/* ------------------------------- NEWS-6 -------------------------------*/

.news-6 h1{
    font-size: 28px;
    line-height: 30px;
}

.news-6 .news-text{
    padding: 16px 25px 11px 20px;
}
    
/* ---------------------- NEWS-Bibelstudie + Schedule --------------------*/

.news-bibelstudie h1{
    font-size: 24px;
    line-height: 29px;
}

.news-schedule h2 {
    font-size: 18px;
    line-height: 22px;
}
    

/* ------------------------------- 3 RED BUTTON ----------------------*/

.special-btn {
  padding: 4% 10%;
}


/* ------------------------------ TERMIN TEASER ---------------------*/
    
.teaser-datum-titel h1{
    font-size: 17px;
    line-height: 24px;
}

.teaser-datum-titel h2{
    font-size: 14px;
    line-height: 18px;
}

    
/* ------------------------- FOOTER ---------------*/


#footer {
    background: url(../sysimages/footer/footer-ghana-2500.webp),#1a1a1a;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}

    #footer-container {
        grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
    }

#footer-container > :last-child:nth-child(odd) {
    grid-column: auto;
    order: -1;
}



.text-im-bild p { width: 55%; }  
  
h1 span {
    display: inline;
}

/* ------------------------------ RIGHT CONTENT ---------------------*/



#right>h1, #right>div>h1{
    font-size: 32px;
}

#right p {
    font-size: 16px;
    line-height: 25px;
}

#right a:hover .content {
    background-color: var(--color-white);
    margin-left: -10px;
    padding-left: 10px;
}
#right .content h1{
    font-size: 32px;
    line-height: 40px;
}


}