:root {
  --main-color: #aa00ff;
  /*--font-family: "Tahoma", sans-serif !important;*/
}

body {
  font-family: var(--font-family), "Tahoma", sans-serif !important;
}

main > .container {
  padding: 70px 15px 20px;
}

#header {
  color: white !important;
}

a.btn-primary {
  color: white !important;
}

.footer {
  background-color: #f5f5f5;
  font-size: .9em;
  height: 60px;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

.not-set {
  color: #c55;
  font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
  content: '';
  left: 3px;
  display: inline-block;
  width: 0;
  height: 0;
  border: solid 5px transparent;
  margin: 4px 4px 2px 4px;
  background: transparent;
}

a.asc:after {
  border-bottom: solid 7px #212529;
  border-top-width: 0;
}

a.desc:after {
  border-top: solid 7px #212529;
  border-bottom-width: 0;
}

.grid-view th {
  white-space: nowrap;
}

.hint-block {
  display: block;
  margin-top: 5px;
  color: #999;
}

.error-summary {
  color: #a94442;
  background: #fdf7f7;
  border-left: 3px solid #eed3d7;
  padding: 10px 20px;
  margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
  padding-top: 7px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
  .nav li > form > button.logout {
    display: block;
    text-align: left;
    width: 100%;
    padding: 10px 0;
  }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
  outline: none;
}

.form-group {
  margin-bottom: 1rem;
}

.bg-dark {
  background-color: var(--main-color) !important;
}

.btn-primary {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
}

.pagination {
  justify-content: center;
}

.pagination .page-item:not(.active) > a {
  color: var(--main-color) !important;
}

.pagination .page-item.active > a {
  background-color: var(--main-color) !important;
}

.cart {

}

.cart > .cart-item {
  align-items: center;
  display: grid;
  padding: 16px;
  gap: 16px;
  grid-template-columns: 1fr 100px 100px 100px 20px;
  grid-template-areas:
    "title amount price sum action";
}

.cart > .cart-item.cart-item-event:not(:first-child) {
  border-top: 1px solid #c0c6ca;
}

.cart > p {
  padding: 16px;
  text-align: center;
  grid-column-end: 4;
}

.cart > .cart-item.cart-header {
  background: #c0c6ca;
}

.cart > .cart-item.cart-summary {
  border-top: 2px solid #c0c6ca;
  text-align: right;
}

.cart > .cart-summary > .cart-summary-price {
  grid-column-start: 1;
  grid-column-end: 5;
}

.cart > .cart-item > .right {
  text-align: right;
}

.cart > .cart-item > .cart-item-title {
  grid-area: title;
}

.cart > .cart-item > .cart-item-amount {
  grid-area: amount;
}

.cart > .cart-item > .cart-item-price {
  grid-area: price;
}

.cart > .cart-item > .cart-item-sum {
  grid-area: sum;
}

.cart > .cart-item > .action {
  grid-area: action;
}

@media (max-width: 768px) {
  .cart > .cart-item {
    grid-template-columns: 1fr 75px;
  }

  .cart > .cart-item:not(.cart-header):not(.cart-item-event) {
    grid-template-areas:
    "title title"
    "amount action"
    "price sum";
  }
}

.search-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.search-tags > .item {
  background: var(--main-color);
  border-radius: 6px;
  color: white;
  display: inline-block;
  padding: 3px 6px;
}

.search-tags > .item > i {
  cursor: pointer;
  margin-left: 8px;
}

button.search-view {
  padding: 8px;
  line-height: 12px;
}

.navbar .form-group {
  background: white;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.navbar .form-group > input {
  border: none;
  outline: none;
}

.navbar .form-group > i.fa {
  cursor: pointer;
  padding: 10px 6px 10px 0;
}

.navbar .form-group > i.fa:hover {
  color: var(--main-color)
}

picture {
  display: block;
  padding: 12px 0;
  text-align: center;
  width: 100%;
}

.cart-breadcrumbs {
  background-color: #f5f5f5;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px;
}

.cart-breadcrumbs .line {
  background-color: #1e2125;
  flex-grow: 1;
  height: 3px;
  margin-top: 40px;
}

.cart-breadcrumbs .step > .number {
  background-color: #929397;
  color: #fff;
  font-size: 54px;
  text-align: center;
  margin: 0 auto;
  width: 100px;
}

.cart-breadcrumbs .step.active > .number {
  background-color: var(--main-color);
  cursor: pointer;
}

.cart-breadcrumbs .step > .label {
  text-align: center;
  font-size: 20px;
}

@media (max-width: 768px) {
  .cart-breadcrumbs .line {
    margin-top: 25px;
  }

  .cart-breadcrumbs .step > .number {
    font-size: 32px;
    width: 50px;
  }

  .cart-breadcrumbs .step > .label {
    font-size: 13px;
  }
}

/* Filter-Panel */
.filter-panel {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 20px;
}

.filter-panel-header {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 12px;
  margin-bottom: 16px !important;
}

/* Detailseite: Titel + Zurück-Button nebeneinander; bricht der Titel um,
   rutscht der Button unter den Titel statt in ihn hinein */
.event-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 8px;
}

.event-detail-header h1 {
  flex: 1 1 300px;
  min-width: 0;
  margin-bottom: 0;
}

.event-back-btn {
  white-space: nowrap;
}

/* Listenansicht */
.event-list {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 8px 16px;
}

.event-list-item {
  display: contents;
}

.event-list-item:first-child::before,
.event-list-item::after {
  border-bottom: 1px solid var(--bs-border-color);
  content: "";
  grid-column: 1 / 4;
}

.event-list-item:first-child {
  border-top: 1px solid var(--bs-border-color);
}

.event-list-date,
.event-list-info,
.event-list-action {
  align-self: center;
}

.event-list-date {
  font-weight: 600;
  white-space: nowrap;
}

.event-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.event-list-info strong {
  font-size: 1rem;
}

.event-list-info span {
  font-size: 0.875rem;
  color: #555;
}

@media (max-width: 576px) {
  .event-list {
    grid-template-columns: 1fr;
    gap: 16px 0;
  }

  .event-list-item:first-child::before,
  .event-list-item::after {
    grid-column: 1;
  }

  .event-list-date {
    font-size: 0.9rem;
  }

  .event-list-action {
    justify-self: end;
  }
}

/* Ansicht-Umschalter */
.view-toggle {
  align-items: center;
}

/* Sucheingabe ohne Label-Abstand */
.site-index .field-eventfilter-search {
  margin-bottom: 0;
}

.scroll-up-button.is-visible {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.scroll-up-button {
  bottom: 1.5rem;
  cursor: pointer;
  opacity: 0;
  position: fixed;
  right: 1.5rem;
  transform: scale(0);
  transition: 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  visibility: hidden;
  z-index: 700;
}

.event-details {
  margin-bottom: 0.5rem;
}

.event-details th,
.event-details td {
  padding: 0.2rem 0;
  vertical-align: top;
  border: 0;
}

.event-details th {
  width: 1%;
  white-space: nowrap;
  padding-right: 1.5rem;
  font-weight: 700;
}

.event-details .event-description > :first-child {
  margin-top: 0;
}

.event-details .event-description > :last-child {
  margin-bottom: 0;
}

table .l {
  text-align: left;
  width: 1px;
  white-space: nowrap;
}

table .r {
  text-align: right;
  width: 1px;
  white-space: nowrap;
}

table > tfoot td {
  font-weight: bold;
}

.shop-action {
  display: flex;
  justify-content: space-between
}
/* trackboard#84/#91: Outline-Buttons (z.B. "Jetzt registrieren", "Jetzt anmelden")
   einheitlich in der Theme-Farbe statt Bootstrap-Blau; Hover/Active mit weißem Text.
   !important wegen der globalen Regel `a { color: inherit !important; }` im Theme-CSS */
.btn-outline-primary {
  color: var(--main-color) !important;
  border-color: var(--main-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #fff !important;
}

/* trackboard#109: Kundenkonto-Dashboard (Icon-Buttons, Tabs, einklappbare Bestellkarten) */
.account-actions .btn {
  min-width: 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.order-header {
  cursor: pointer;
  user-select: none;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease-in-out;
}

.order-header:hover {
  background-color: #e9ecef;
}

.order-header .toggle-icon {
  transition: transform 0.3s ease;
  color: var(--main-color);
}

.order-header[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

/* Tabs angelehnt an den Kacheln/Liste-Umschalter der Startseite */
.account-tabs .nav-link {
  color: #495057 !important;
}

.account-tabs .nav-link.active {
  background-color: var(--main-color) !important;
  color: #fff !important;
  border-color: var(--main-color) !important;
}

.account-tabs .nav-link:hover:not(.active) {
  background-color: #6c757d !important;
  color: #fff !important;
  border-color: #6c757d !important;
}

/* trackboard#109: Untermenue "Mein Konto" - Icons in Textfarbe, Hover/Aktiv in der
   Theme-Farbe (#25332b) mit weisser Schrift statt Bootstrap-Blau */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--main-color);
  color: #fff !important;
}

/* trackboard#109: Badge "Zahlung ausstehend" in der Theme-Textfarbe statt Weiß/Schwarz */
.badge.bg-warning {
  color: var(--main-color) !important;
}

/* trackboard#116: Popover am Reservierungs-Timer in der Navbar */
.cart-timer-popover {
  max-width: 320px;
}

.cart-timer-popover .popover-header {
  font-weight: bold;
}

.cart-timer-popover .popover-body p {
  margin-bottom: 0.5rem;
}

/* trackboard#84/#87: Passwort-Sichtbarkeits-Toggle (Auge-Icon im Passwortfeld) */
.pw-toggle {
  position: absolute;
  right: 0.25rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6c757d;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  cursor: pointer;
}

.pw-toggle:hover {
  color: var(--main-color);
}

.form-control.pw-has-toggle {
  padding-right: 2.5rem;
}

/* FTG-Feedback #84/#87: das grüne Häkchen / rote Ausrufezeichen der Bootstrap-
   Feldvalidierung lag über dem Auge -> Icon nach links neben den Toggle rücken */
.form-control.pw-has-toggle.is-valid,
.form-control.pw-has-toggle.is-invalid {
  padding-right: 4.25rem;
  background-position: right 2.5rem center;
}