:root {
  --r-bg:#fff;
  /* Controls the background color */
  --r-bg-lgt: #f6ece3;
  /* Hintergrundfarbe aufgehellt */
  --r-bg-med: #c5b4d6;
  --r-bg-dkr: #b74245;
  --r-bg-w: #fff;
  /* Hintergrundfarbe Main Content */
  --r-tx:#000;
  /* Determines the color of the text. */
  --r-h1:#3f84ab;
  /* Sets the color for h1, h2, and h3 headings. #2a3439*/
  --r-lk:#8a3324;
  /* Changes the link text color. */
  --r-lk-h:#562380;
  /* Alters the hover color of link text. */
  --r-br:#f4f5f0;
  /* Specifies the border color. */
  --r-bg-fr:#f8f4ff;
  /* Defines the background color of input forms. */
  --r-tx-lk:#2c3e4c;
  /* Adjusts the menu link text color. */
  --r-tx-lk-h:#1520a6;
  /* Modifies the hover color of menu link text. */
  --r-bg-lk:#F2F7FD;
  /* Sets the menu link background color. */
  --r-bg-lk-h:#f8f8e8;
  /* Changes the hover background color of menu links. */
  --r-tx-bt:#fff;
  /* Determines the button text color. */
  --r-tx-bt-h: darken(--r-tx-bt, 20%);
  /* Alters the button text color on hover. */
  --r-bg-bt: #b74245;
  /* Specifies the button background color. */
  --r-bg-bt-h: lighten(--r-bg-bt, 20%);
  /* Sets the button background color on hover. */
  --p-wd:1280px;
  /*Seitenbreite*/
  --solo-gap:0; }

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}


#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}


https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/
#header {
  background-color: var(--r-bg-lgt); }

#block-klingendekirche-site-branding {
  width: 100%; }

.header-inner .branding-wrapper {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap; }

#welcome-text {
  position: relative;
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 85vh; }

#main-container {
  max-width: var(--p-wd); }

/* ----------- Footer-Menu ----------*/
#footer-menu {
  background: var(--r-bg-dkr);
  border-top: 0.2em solid var(--r-bg); }
  #footer-menu .btn-animate a,
  #footer-menu .solo-footer-menu__item a {
    color: var(--r-tx-bt); }

.footer-menu-second {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  justify-content: start;
  align-items: center; }

.footer-menu-second > * {
  margin-block: 0;
  margin-inline: 0; }

.solo-footer-menu ul-1,
.page-wrapper ul,
.page-wrapper ul li {
  background-color: inherit !important; }

.nav__menu-link {
  background-color: inherit !important; }

/*# sourceMappingURL=klingendekirche.css.map */