@charset "UTF-8";
/* Add your scss code here */
/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/
:root {
  --r-bg:#fff;
  /* Controls the background color */
  --r-bg-lgt: lighten(#9B2A3E, 30);
  /* Hintergrundfarbe aufgehellt */
  --r-bg-dk:#9B2A3E;
  /* Hintergrund dunkel */
  --r-tx:#000;
  /* Determines the color of the text. */
  --r-h1:#9B2A3E;
  /* Sets the color for h1, h2, and h3 headings. #2a3439*/
  --r-lk:#8a3324;
  /* Changes the link text color. */
  --r-lk-h:#79443b;
  /* 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:#354a21;
  /* Determines the button text color. */
  --r-tx-bt-h:#597d35;
  /* Alters the button text color on hover. */
  --r-bg-bt:#9B2A3E;
  /* Specifies the button background color. */
  --r-bg-bt-h:#efece1;
  /* Sets the button background color on hover. */
  --r-tx-bt:#fff;
  /* Schriftfarber Buttons */
  --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 {}

#primary-menu {}
#welcome-text {}

#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
*/
/* ------ Allgemeines ---------- */
#header-inner,
#primary-menu-inner,
.p-container-inner,
#footer-container-inner {
  max-width: var(--p-wd);
  margin: auto;
  background: --r-bg; }

html {
  background: var(--r-bg-lgt); }

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

#welcome-text-inner {
  width: 100vw; }

#header {
  background-image: linear-gradient(to right, var(--r-bg-dk) 0%, #fff 20%, var(--r-bg-dk) 150%); }

#main-container,
#page-title,
#main-container-inner,
#sidebar-box-main,
#region-inner,
#block-orgeltage-content {
  background-color: #fff; }

/* --------- Hauptmenue ---------- */
#main-menubar a,
#main-menubar--2 a {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt); }
  #main-menubar a a:hover,
  #main-menubar--2 a a:hover {
    background-color: var(--r-bg-bt-h); }

/* ------------ View Aktuelle Konzerte ----------- */
.image-style-w3css-narrow-xsm-300x300 {
  width: 300px; }

.view-startseite .view-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap; }

.card,
.view-startseite .views-row {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 1em; }

/* On mouse-over, add a deeper shadow */
.card:hover,
.views-row:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }

/* Add some padding inside the card container */
.container,
.views-view-responsive-grid__item-inner {
  padding: 0.5em 1em;
  flex: 1; }

/* ------------ Schriftgrößen ------------ */
h1,
h1.page-title-text {
  font-size: 2em; }

h2 {
  font-size: 1.7em; }

h3 {
  font-size: 1.4em; }

/* -------------- Das Instrument ------------- */
.register {
  width: 130px;
  text-align: left;
  height: 20px;
  padding: 2px 2px 0 10px;
  margin: 0;
  line-height: 1.0; }

.disposition {
  table-layout: auto;
  padding: 2px;
  background-color: #E8D0D2 !important;
  width: 800px;
  font-size: 0.8em; }

.fusszahl {
  padding: 2px 10px 0 0;
  width: 60px;
  text-align: right !important;
  padding-right: 1em !important;
  height: 20px;
  margin: 0;
  line-height: 1.0;
  border-right: 1px solid #ABABAB; }

.page-wrapper table tr:nth-child(2n+1) {
  background-color: var(--solo-odd, lightgrey); }
  .page-wrapper table tr:nth-child(2n+1) .main-box-inner {
    background-color: #fff; }

/* ---------- Presse ------------ */
.field--name-field-pressefotos .field__items,
.field--name-field-pressetexte .field__items {
  display: flex;
  justify-content: space-around; }
  .field--name-field-pressefotos .field__items .field__item,
  .field--name-field-pressetexte .field__items .field__item {
    padding: 0 1em; }

.field--name-field-pressetexte {
  margin: 0 1em; }

/* ------- Footer ---------- */
#footer-container,
.footer-box-inner {
  background-color: var(--r-bg-dk); }
  #footer-container p,
  .footer-box-inner p {
    color: #fff; }
  #footer-container h2,
  .footer-box-inner h2 {
    color: #fff;
    font-size: medium; }

#footer-box-third .footer-box-inner {
  justify-content: space-around;
  align-items: center; }
#footer-box-third .views-row {
  max-width: max-content;
  margin: auto;
  padding: 1em; }

.colorbox .solo-image {
  max-width: 300px; }

/* ----------- Konzert ----------- */
.info .field--name-field-media-image {
  float: left;
  margin: 1em 1em 1em 0; }

/*# sourceMappingURL=orgeltage-style.css.map */