/* Grundregeln und Typografie */
html { box-sizing: border-box; font-size: 62.5%; overflow-y: scroll; }
*, *::before, *::after { box-sizing: inherit; }
body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, strong, ul, li, table, tr, th, td, header, footer, main, nav, section, article { border: 0; font: inherit; margin: 0; padding: 0; }
article, footer, header, main, nav, section { display: block; }
body { background: #fff; color: #333; font-family: "Open Sans", Arial, sans-serif; font-size: 1.6em; line-height: 1.5; }
img { height: auto; max-width: 100%; }
a { text-decoration: none; }
ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
.clear::after, .bnt-container::after { clear: both; content: ""; display: table; }
.site-wrapper { margin: 0 auto; position: relative; }
.page .site-wrapper { background: #f4f4f4; display: flex; flex-direction: column; min-height: 100vh; }
.bnt-container { margin: 0 auto; padding: 0 30px; width: 100%; }

h1, h2, h3, h4, h5, h6 { clear: both; color: #333; font-family: "Open Sans", Arial, sans-serif; font-weight: 700; line-height: 1.3; margin: .5em 0; }
h1 { font-size: 1.9em; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.6rem; }
h5, h6 { font-size: 1.5rem; }
p { margin-bottom: 1.6rem; }
strong { font-weight: 700; }
em { font-style: italic; }
main > h1:first-child { margin-top: 0; }

/* Kopfbereich und Navigation */
.site-header { background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .05); position: relative; z-index: 999; }
.site-header .bnt-container { display: table; }
.logo, .header-menu, .mobile-menu-trigger { display: table-cell; vertical-align: middle; }
.logo { padding: 3rem 0; }
.logo a { display: block; float: left; }
.logo-image-link { line-height: 0; }
.logo-fullsize { display: none; }
.logo-mobile { display: inline; }
.header-menu { display: none; }

#nav-primary { float: right; font-family: Montserrat, Arial, sans-serif; text-transform: uppercase; }
.nav li { position: relative; }
.nav a { text-decoration: none; }
.primary-menu > li { display: inline-block; font-weight: 400; margin-left: 3rem; position: relative; }
.primary-menu > li > a { color: #333; display: block; font-size: 1.6rem; padding: 1.5rem 0; }
.primary-menu > li > a:hover, .primary-menu > li.current-menu-item > a { color: #cb9d27; }

/* Mobilnavigation: JavaScript setzt nur die Klasse .mobile-menu-open. */
.mobile-menu-trigger { appearance: none; background: transparent; border: 0; color: #333; cursor: pointer; padding: 3rem 0; position: relative; width: 6rem; }
.mobile-menu-trigger-stick { background: currentColor; display: block; height: .4rem; margin-bottom: .4rem; width: 2.4rem; }
.mobile-menu-trigger-stick:last-child { margin-bottom: 0; }
.mobile-menu-close-container { padding: .5rem 30px 0; text-align: right; }
.mobile-menu-close { appearance: none; background: transparent; border: 0; color: #333; cursor: pointer; padding: 0; position: relative; }
.mobile-menu-close::before { content: "×"; font-family: Arial, sans-serif; font-size: 4rem; line-height: 1; }
#nav-mobile { background: rgba(255, 255, 255, .7); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); font-family: Montserrat, Arial, sans-serif; height: 100%; left: 0; max-width: none; opacity: 0; overflow-y: auto; padding: 1rem 0; pointer-events: none; position: fixed; top: 0; transition: backdrop-filter .25s ease, opacity .25s ease, -webkit-backdrop-filter .25s ease; width: 100%; z-index: 99999; }
#nav-mobile li { text-align: right; }
#nav-mobile li a { border: 0; color: #333; display: inline-block; font-size: 1.8rem; padding: 1rem 30px; text-align: right; text-transform: uppercase; }
#nav-mobile .primary-mobile-menu > li:first-child > a { border-top: 0; }
#nav-mobile li a:hover, #nav-mobile .current-menu-item > a { color: #cb9d27; }
#nav-mobile .current-menu-item > a { text-shadow: white 0 0 20px; }
.mobile-menu-open { bottom: 0; height: 100%; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; }
body.mobile-menu-open #nav-mobile { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 1; pointer-events: auto; }

/* Seitencontainer und Bildheader */
main { color: #333; margin: 0 auto; max-width: 1080px; padding: 50px 30px; }
.page main { flex: 1 0 auto; width: 100%; }
main a { color: #cb9d27; }
.page-header-image img { display: block; height: clamp(180px, 25.6vw, 324px); object-fit: cover; width: 100%; }
.content-header-image { display: block; height: auto; margin: 0 0 3.6rem; max-width: 100%; width: 100%; }
.vita-page p { hyphens: none; text-align: justify; }

/* Startseite */
html, body.home-page { height: 100%; }
body.home-page { --home-header-height: 140px; }
body.home-page main { align-items: center; background: url("/uploads/home/website_1-min-1.jpg") center / cover !important; display: flex; height: calc(100vh - var(--home-header-height)); height: calc(100dvh - var(--home-header-height)); justify-content: flex-end; max-width: none; }
body.home-page .home-content-container { height: 280px; margin: 0 auto; max-width: 1080px; width: calc(100% - 60px); }
body.home-page #text-slider { height: 280px; margin-left: auto; position: relative; width: 58.93%; }
body.home-page .text-slideshow { height: 100%; line-height: 40px; position: relative; text-align: right; hyphens: none; }
body.home-page .text-slideshow article { color: #000; display: block; font-family: Montserrat, Arial, sans-serif; font-size: 30px; font-weight: 400; inset: 0; line-height: 40px; opacity: 0; position: absolute; text-shadow: 0 0 20px #fff; transition: opacity 800ms ease; visibility: hidden; }
body.home-page .text-slideshow article.is-active { opacity: 1; visibility: visible; }
body.home-page .text-slideshow span { color: #cb9d27; display: block; font-family: Montserrat, Arial, sans-serif; font-size: 25px; font-style: italic; font-weight: 400; line-height: 40px; }

/* Termine */
div.events { background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .05); margin-bottom: 30px; transition: all 2s ease; }
div.events:hover { box-shadow: 0 0 30px rgba(0, 0, 0, .15); transform: scale(1.005); transition: all 400ms ease; }
div.events p { line-height: 1.3; margin: 3px 0; padding: 0; white-space: pre-wrap; }
div.events table, div.events td { border: 0; margin: 0; }
div.events td { padding: 20px; vertical-align: baseline; }
div.events td.lefttd { white-space: nowrap; width: 140px; }
div.events p.grey { color: #aaa; font-weight: 700; margin-bottom: 2px; }
div.events h3 { color: #cb9d27; font-size: 1.2em; margin: 0; padding: 0; }

/* Medien, Brass for Africa und die schlanke Bild-Lightbox */
.brass-intro-image { float: right; margin: 0 0 1.5rem 2rem; }
.brass-intro-image img { display: block; height: auto; max-width: 212px; }
.brass-video-grid, .media-video-grid { display: grid; gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brass-video-grid > *, .media-video-grid > * { min-width: 0; }
.brass-video-grid { margin: 3rem 0; }
.media-video-grid { margin: 0 0 3rem; }
.brass-instagram { margin: 0 0 3rem; }
.brass-instagram a { align-items: center; background: #cb9d27; border-radius: 3px; color: #111; display: inline-flex; gap: .6rem; padding: 8px 20px; }
.brass-instagram a:hover, .brass-instagram a:focus { background: #b68b20; color: #111; }
.brass-instagram svg { fill: currentColor; height: 2.4rem; width: 2.4rem; }
.brass-donation-grid { display: grid; gap: 30px; grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr); margin-top: 3rem; }
.media-gallery { display: grid; gap: 10px; margin: 0 0 3rem; }
.media-gallery-cd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-gallery-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-gallery a { display: block; }
.media-gallery img { display: block; height: 100%; object-fit: cover; width: 100%; }
.image-lightbox-overlay { align-items: center; background: rgba(0, 0, 0, .9); display: flex; inset: 0; justify-content: center; padding: 3rem; position: fixed; z-index: 9999; }
.image-lightbox-overlay img { max-height: 100%; max-width: 100%; object-fit: contain; }
.image-lightbox-overlay button { background: transparent; border: 0; color: #fff; cursor: pointer; font: 3rem/1 Arial, sans-serif; position: absolute; right: 1.5rem; top: 1.5rem; }

/* Datenschutzfreundliche YouTube-Zwei-Klick-Lösung und Kontakt-Schaltfläche */
.youtube { align-items: center; aspect-ratio: 16 / 9; background: #181818; color: #fff; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 24px; position: relative; text-align: center; width: 100%; }
.youtube-title { align-self: stretch; color: inherit; font-size: 16px; font-weight: 400; margin: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.youtube-notice { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; margin: auto 0; max-width: 330px; padding: 12px 16px; }
.youtube-notice p { font-size: 13px; line-height: 1.1; margin: 0 0 12px; }
.youtube-notice button, .contact-email-button { background: #cb9d27; border: 0; border-radius: 3px; color: #111; cursor: pointer; font: inherit; padding: 8px 20px; }
.youtube-notice button { align-items: center; display: inline-flex; gap: .4em; }
.youtube-notice button svg { fill: currentColor; height: 1.1em; width: 1.1em; }
.youtube-notice button:hover, .youtube-notice button:focus { background: #dfbb54; }
.youtube-notice button:active { background: #b68b20; transform: translateY(1px); }
.youtube.is-loading > iframe { border: 0; inset: 0; opacity: 0; position: absolute; width: 100%; }
.media-video-grid > iframe, .brass-video-grid > iframe { aspect-ratio: 16 / 9; border: 0; display: block; height: auto; width: 100%; }
.contact-email-button { display: inline-block; }
.contact-email-button:hover, .contact-email-button:focus { background: #b68b20; }

/* Footer */
.site-footer { color: #eaeaea; }
.site-footer a { color: #ccc; }
.site-footer a:hover { border-bottom: 1px solid; }
.sidebar-footer { background: #cb9d27; padding: 1px 0; }
.bottom-footer { background: #474747; color: #d8d8d8; }
.footer-copyright, .footer-menu { padding: 7px 0 8px; }
.footer-copyright { color: #bbb; }
.footer-copyright a { color: #bbb; }
.footer-menu { text-transform: uppercase; }
.footer-separator { color: #bbb; }

/* Responsive Anpassungen */
@media screen and (max-width: 1071px) {
  /* Kompakter Mobilheader: Logo links, Menübutton rechts. */
  body.home-page { --home-header-height: 73px; }
  .site-header .bnt-container { align-items: center; display: flex; justify-content: space-between; }
  .site-header .mobile-menu { display: contents; }
  .site-header .logo { order: 1; padding: 1.5rem 0 1rem; }
  .site-header .logo-mobile { height: 3em; width: auto; }
  .site-header .mobile-menu-trigger { display: block; margin-left: auto; order: 2; padding: 1.5rem 0; transform: translateY(-3px); width: 2.4rem; }
}

@media screen and (min-width: 1072px) {
  /* Ab 1072 px wird die Desktop-Navigation statt des Mobilmenüs gezeigt. */
  .site-header .logo-fullsize { display: inline !important; }
  .site-header .logo-mobile, .site-header .mobile-menu-trigger { display: none !important; }
  .site-header .header-menu { display: table-cell !important; }
}

@media screen and (min-width: 48.01em) {
  body.home-page main { justify-content: center; }
  .bottom-footer .bnt-container { align-items: center; display: flex; justify-content: space-between; }
  .bottom-footer .bnt-container::after { display: none; }
  .footer-copyright { text-align: right; }
}

@media screen and (min-width: 48em) and (max-width: 60em) {
  body.home-page main { background-image: url("/uploads/home/website_3-min-1.jpg") !important; }
}

@media screen and (min-width: 60em) and (max-width: 90em) {
  body.home-page main { background-image: url("/uploads/home/website_2-min-1.jpg") !important; }
  .primary-menu > li { margin-left: 1.5rem; }
}

@media screen and (min-width: 64em) {
  .bnt-container { max-width: 1080px; }
}

@media screen and (min-width: 120em) {
  .bnt-container { max-width: 1440px; }
  main { max-width: 1440px; }
}

@media screen and (max-width: 48em) {
  .logo { padding: 2rem 0; }
  h1, h2, h3, h4, h5, h6, p { hyphens: auto; word-break: break-word; }
  main { padding: 4rem 30px; }
  body.home-page main { align-items: flex-end; background-image: url("/uploads/home/website_5-min-1.jpg") !important; min-height: 20em; }
  body.home-page .home-content-container { height: auto; margin: 0; width: 100%; }
  body.home-page #text-slider, body.home-page .text-slideshow { height: auto; }
  body.home-page #text-slider { width: 65%; }
  body.home-page .text-slideshow article { background: rgba(255, 255, 255, .08); backdrop-filter: contrast(.85) saturate(1.2) blur(12px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px; box-shadow: 0 0 5px rgba(255, 255, 255, .1); color: #fff; display: none; font-size: 1.05em; line-height: 1.05em; margin: 5px; padding: 15px; position: static; text-align: center; text-shadow: 0 0 25px #000; }
  body.home-page .text-slideshow article.is-active { display: block; }
  body.home-page .text-slideshow span { font-size: .85em; line-height: 2em; }
  .vita-page p { text-align: left; }
  .brass-intro-image { float: none; margin: 0 0 1.5rem; }
  .brass-intro-image img { max-width: 100%; }
  .brass-video-grid, .brass-donation-grid, .media-video-grid { grid-template-columns: 1fr; }
  .media-gallery-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-menu { font-size: .8em; padding-bottom: 0; }
  .footer-copyright { font-size: .8em; padding-top: 0; }
}