:root {
  --r-bg:#f7f0d9;
  /* Controls the background color */
  --r-bg-lgt: lighten(--r-bg, 20%);
  /* Hintergrundfarbe aufgehellt */
  --r-bg-med: darken(--r-bg, 20%);
  --r-bg-dkr: darken(--r-bg, 40%);
  --r-bg-w: #fff;
  /* Hintergrundfarbe Main Content */
  --r-tx:#000;
  /* Determines the color of the text. */
  --r-h1:#881a1a;
  /* 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
*/
#main-container {
  max-width: var(--p-wd); }

/* ----------- Footer-Menu ----------*/
#footer-menu {
  background: var(--r-bg-dkr); }

.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; }

/* ---------- Seitenhintergrund -------------- */
html {
  position: relative;
  background-image: url("images/sommer.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh !important;
  background-attachment: fixed; }

/*------------- Schnee ------------- 
body {
	
background-image: 
    url('images/schnee1.png'),
    url('images/schnee2.png'),
    url('images/schnee3.png');

animation: schnee 25s linear infinite;

@keyframes schnee {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}
}*/
/* ------------- Weihnachten ------------- 
#page-wrapper  {
			
	background: url("images/christbaumkugel.png") no-repeat fixed;
	  	
}*/
#page-wrapper,
.solo-outer,
.path-frontpage region-inner {
  background: none !important; }

h1, h2, h3, .site-slogan {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 900; }

h1.page-title-text {
  font-size: 2em;
  padding-block: 0; }

h1.page-title-text span {
  line-height: 1.2em; }

h2 {
  font-size: 1.5em; }

/* ------------- Fotogalerien ----------------- 
.view-fotogalerien .view-content {
	display:flex;
	justify-content: space-around;
	flex-wrap:wrap;
	gap:2em;
	
	
	@media all and (max-width: 600px) {
		flex-direction:column;
	}
	
	.views-row {
		display:flex;
		flex-basis:33.3%;
	    flex-wrap:wrap;
	    margin:1em;
	}
	
	.views-field-title {
		hyphens:auto
	}
	
} */
.view-zuchttiere .view-content,
.view-fotogalerien .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em; }
  @media only screen and (max-width: 1250px) {
    .view-zuchttiere .view-content,
    .view-fotogalerien .view-content {
      grid-template-columns: repeat(2, minmax(400px, 1fr)); } }
  @media only screen and (max-width: 800px) {
    .view-zuchttiere .view-content,
    .view-fotogalerien .view-content {
      grid-template-columns: repeat(2, minmax(300px, 1fr)); } }
  @media only screen and (max-width: 600px) {
    .view-zuchttiere .view-content,
    .view-fotogalerien .view-content {
      grid-template-columns: 1fr; }
      .view-zuchttiere .view-content .views-row,
      .view-fotogalerien .view-content .views-row {
        margin: 0 auto; } }
  .view-zuchttiere .view-content .views-row,
  .view-fotogalerien .view-content .views-row {
    display: flex;
    flex-direction: column; }
  .view-zuchttiere .view-content .views-field-title,
  .view-fotogalerien .view-content .views-field-title {
    hyphens: auto;
    line-height: 1.2;
    margin-top: 0.5em; }

/* ------------ Fotogalerie ----------------- */
.node--type-fotoalbum .field__items {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; }
  .node--type-fotoalbum .field__items .field__item {
    padding: 0.5em; }

/* ----------- Zuchttiere -------------- */
.field--name-field-vater .field__label,
.field--name-field-mutter .field__label {
  font-weight: bold; }

.info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 1em; }

/* ----------- gtranslate ----------- */
#block-bkh-gtranslate a.img--is-clickable {
  height: auto; }

/* ------------ Hauptnavigation ------------- */
#block-bkh-hauptnavigation {
  background-color: var(--r-bg); }

@media all and (min-width: 400px) {
  #block-bkh-hauptnavigation-2 {
    display: none; } }

/* ------------- Startseite ------------- */
.path-frontpage .region-inner {
  background: none; }

#block-bkh-views-block-slider-block-1 {
  position: absolute;
  left: 4em;
  bottom: 5em; }
  @media all and (max-width: 600px) {
    #block-bkh-views-block-slider-block-1 {
      left: 0;
      bottom: 0;
      margin: 0 auto; } }

.path-frontpage #footer-menu {
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75) !important;
  width: auto; }
  .path-frontpage #footer-menu #footer-menu-inner {
    padding: 0; }

#block-bkh-gtranslate-2 {
  background-color: var(--r-bg);
  padding: 1em; }

/* ----------- Nachrichten ------------- */
.view-nachrichten .views-row {
  border-bottom: 2px dotted grey;
  margin: 1em 0;
  padding: 0.5em 0; }

.nachricht {
  display: flex;
  justify-content: flex-start;
  gap: 1.5em;
  align-items: center; }
  @media only screen and (max-width: 600px) {
    .nachricht {
      flex-wrap: wrap; } }

.views-field-field-text p {
  hyphens: auto;
  overflow-wrap: break-word; }

/* ------------- Kitten ----------- */
.plus {
  font-size: 3em;
  font-weight: bold;
  margin: 0.25em 1em; }

.eltern {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; }
  @media only screen and (max-width: 700px) {
    .eltern {
      flex-direction: column; } }

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 0.5em;
  margin: 0.5em;
  display: flex;
  overflow: hidden;
  position: relative; }

.views-field-field-kitten a.img--is-clickable > img.solo-image {
  width: unset; }

.fieldset-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .fieldset-wrapper .field:not(:last-child) {
    margin-block-end: 0; }
  @media only screen and (max-width: 700px) {
    .fieldset-wrapper {
      flex-direction: column; } }

fieldset {
  background-color: #fff; }

.event {
  display: flex;
  justify-content: flex-start; }

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