.c-banner {
    --iconInfo: '\f129';
    --iconMediathek: '\f87c';
    --iconProgramm:'\e0d2';
    --iconStart:'\f78a';
    --iconPress: '\f044';
}

/* Allgemein Layout-1 */
.c-banner.layout-1 { background-color: #164194; margin-bottom: 50px; }
.c-banner.layout-1 .c-banner-back img { width: 100%; height: auto; }
.c-banner.layout-1 .c-banner--link { max-width: 1200px; display: flex; flex-wrap: wrap;  }
.c-banner.layout-1 .conversion {position: absolute; font-size: clamp(.4em,1.5vw,1em); }
.c-banner.layout-1 h2 {color: #fff; font-size: calc(30px + (55 - 30) * ((100vw - 320px) / (1320 - 320)));}
.c-banner.layout-1 h3 {color: #fff;}
.c-banner.layout-1 .button {font-size: clamp(.78em,1.6vw,1em); width: 50%; box-sizing: border-box; text-align: center; color: #c0c1c2; border-top: 1px solid #fff; border-right: 1px solid #fff; }
.c-banner.layout-1 .button a, .c-banner.layout-1 .button.passive { display: block; color: #fff; padding: 29px 0 14px 0; }
.c-banner.layout-1 .button.passive { color: #a1a1a1; }
.c-banner.layout-1 .button a span, .c-banner.layout-1 .button.passive span { font-size: 1.4em; }
.c-banner.layout-1 .button a:hover, .c-banner.layout-1 .button a.current { background-color: #bed730; color: #fff; transition: background-color, 300ms;  }
.c-banner.layout-1 .button a::before, .c-banner.layout-1 .button.passive::before { font: 200 3.15em var(--fontAwesome); display: block; margin-bottom: .3em; }


/* Sonderseiten Bundesjugendkongress */
.c-banner.layout-1.layout-6 .c-banner--link { display: flex; flex-wrap: wrap;  }
.c-banner.layout-1.layout-6 .conversion {top: 9%; display: flex; margin-left:10% }
.c-banner.layout-1.layout-6 .c-banner--pictures .image1 {  max-width: 123px;}
.c-banner.layout-1.layout-6 h2 { text-shadow: 1px 1px 3px #000; background-color: rgba(85, 93, 102, 0.3); padding: 1.5%; border-radius: 8px; margin-top:20px;}
.c-banner.layout-1.layout-6 .c-banner--pictures { text-align: center; padding: 24px 0;  }
.c-banner.layout-1.layout-6 .button.b1 a::before {content: var(--iconStart);}
.c-banner.layout-1.layout-6 .button.b2 a::before {content: '\f030'; /* '\f017' */ }
.c-banner.layout-1.layout-6 .button.b3 a::before {content: '\f7f3';}
.c-banner.layout-1.layout-6 .button.b4 a::before {content: '\f02d';}
.c-banner.layout-1.layout-6 .button.b4.passive::before {content: '\f02d';}
.c-banner.layout-1.layout-6 .button.passive { padding-top:27px }

/* Bundeskongress 2026 */
.c-banner.layout-1.layout-7 .conversion { color: #fff; top: 14%; left: 4%;}
.c-banner.layout-1.layout-7 h2 {font-size: 5.3em; }
.c-banner.layout-1.layout-7 h3 {font-size: 2.6em; }
.c-banner.layout-1.layout-7 .button a:hover, .c-banner.layout-1.layout-7 .button a.current { background-color: #c7d300; color: #164194; transition: background-color, 300ms;  }
.c-banner.layout-1.layout-7 .button.b1 a::before {content: var(--iconStart);}
.c-banner.layout-1.layout-7 .button.b2 a::before {content: var(--iconProgramm);}
.c-banner.layout-1.layout-7 .button.b3 a::before, .c-banner.layout-1.layout-7 .button.b3.passive::before {content: var(--iconPress);}
.c-banner.layout-1.layout-7 .button.b4 a::before, .c-banner.layout-1.layout-7 .button.b4.passive::before {content: var(--iconMediathek);}



/* Fachkommissionen > Verkehrssicherheit + Inklusion */
.c-banner.layout-2 { background-color: #64696f; margin-bottom:50px; }
.c-banner.layout-2 .c-banner--link { display: flex; flex-wrap: wrap;  }
.c-banner.layout-2 .button { width: 50%; box-sizing: border-box; text-align: center; color: #c0c1c2; border-top: 1px solid #fff; border-right: 1px solid #fff; }
.c-banner.layout-2 .button.b1 {border-left: 1px solid #fff ;}
.c-banner.layout-2 .button a { display: block; color: #fff; padding: 29px 0 14px 0; height: 100%; }
.c-banner.layout-2 .button a span { font-size: .9em; }
.c-banner.layout-2 .button a:hover, .c-banner.layout-2 .button a.current { background-color: #164194; transition: background-color, 300ms;}
.c-banner.layout-2 .button a:before {font: 300 2.15em var(--fontAwesome); display: block; position:relative; bottom: 14px;}
.c-banner.layout-2 .button.b1 a:before {content: '\f1ea';}
.c-banner.layout-2 .button.b2 a:before {content: '\f51c';}
.c-banner.layout-2 .button.b3 a:before {content: '\f500';}
.c-banner.layout-2 .button.b4 a:before {content: '\f073';}

/* Allgemein Fix-Nav Mobil */
.c-banner.mobile-banner  { z-index: 2; width: 100%; margin-bottom: 0; }
.c-banner.mobile-banner .c-banner--link .button { width: auto; flex: 1; border-top: 1px solid #566a73; border-right: 1px solid #566a73; }
.c-banner.mobile-banner .c-banner--link .button span  { display: none; }
.c-banner.mobile-banner .c-banner--link .button a, .c-banner.mobile-banner .c-banner--link .button.passive { padding: 14px 0; }
.c-banner.mobile-banner .c-banner--link .button::before, .c-banner.mobile-banner .c-banner--link .button a::before {  font-size: 2.2em; font-weight: 200; }
.c-banner.mobile-banner .button a::before, .c-banner.mobile-banner .button.passive::before { transform: scale(.8);}

@media (min-width: 768px) {

    /* Allgemein Layout-1 */
    .c-banner.layout-1 .c-banner-back {position: relative; }
    .c-banner.layout-1 .c-banner--link { margin: 0 auto; }
    .c-banner.layout-1 .button { flex: 1; width: auto; border-top: none;  }
    .c-banner.layout-1 .button.b1 {border-left: 1px solid #fff;}

    /* Sonderseiten Bundesjugendkongress */
    .c-banner.layout-1.layout-6 .conversion { top: 14%; }
    .c-banner.layout-1.layout-6 .c-banner--pictures { padding:0;  }
    body:not(.newcomer) .c-banner.layout-1.layout-6 .c-banner--link { margin-left: 15.5%; }
    .c-banner.layout-1.layout-6 .c-banner--pictures .image1 { position: absolute; left: .8%; margin-top: 1.5%; max-width: 81px;}

    /* Bundeskongress 2026 */
    .c-banner.layout-1.layout-7 .conversion {top: 4%;}

    /* Fachkommissionen > Verkehrssicherheit  */
    .c-banner.layout-2 .button { width: 25%; }
}

@media (min-width: 1200px) {

    /* Sonderseiten Bundesjugenkongress */
    .c-banner.layout-1.layout-6 .c-banner--link {}
    body:not(.newcomer) .c-banner.layout-1.layout-6 .c-banner--link { margin: auto; }
    .c-banner.layout-1.layout-6 .c-banner--pictures .image1 { max-width: 94px; margin-top: 17px;}
}