/**
 * CiviCRM Custom Styles – grenzenlos e.V.
 * Modern Edition: Animationen, Glasmorphism-Akzente, weiche Schatten
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300&display=swap');

/* ============================================================
   Variables
   ============================================================ */
.crm-container {
  --gl-red:           #8b2635;
  --gl-red-dark:      #6b1a26;
  --gl-red-light:     #f7eced;
  --gl-red-mid:       #d4939a;
  --gl-red-glow:      rgba(139, 38, 53, 0.18);

  --gl-dark:          #1a1a1a;
  --gl-dark-mid:      #3d3d3d;
  --gl-muted:         #888888;
  --gl-muted-light:   #cccccc;

  --gl-border:        #ebebeb;
  --gl-border-soft:   #f3f3f3;
  --gl-bg:            #f9f9f9;
  --gl-bg-white:      #ffffff;

  --gl-success:       #3a6b3a;
  --gl-success-bg:    #eef5ee;
  --gl-error:         #8b2635;
  --gl-error-bg:      #f7eced;

  /* Animation Tokens */
  --gl-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gl-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --gl-duration:      0.22s;
  --gl-duration-slow: 0.4s;

  /* Schatten-System */
  --gl-shadow-xs:     0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --gl-shadow-sm:     0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --gl-shadow-md:     0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --gl-shadow-lg:     0 20px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --gl-shadow-red:    0 4px 20px rgba(139, 38, 53, 0.22);
  --gl-shadow-red-lg: 0 8px 32px rgba(139, 38, 53, 0.28);

  --gl-radius:        8px;
  --gl-radius-lg:     14px;
  --gl-radius-xl:     20px;
  --gl-radius-pill:   100px;

  font-family: 'Lato', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gl-dark);
  background: var(--gl-bg);
}

/* ============================================================
   Links
   ============================================================ */
.crm-container a,
.crm-container a:link,
.crm-container a:visited {
  color: var(--gl-red);
  text-decoration: none;
  transition: color var(--gl-duration) var(--gl-ease);
}

.crm-container a:hover {
  color: var(--gl-red-dark);
  text-decoration: underline;
}

/* ============================================================
   Seiten-Titel
   ============================================================ */
#crm-container .crm-title {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--gl-dark);
  margin-bottom: 1.2em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--gl-border);
}

/* ============================================================
   h3
   ============================================================ */
.crm-container h3 {
  background-color: transparent;
  color: var(--gl-red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 8px 0;
  border-left: none;
  border-bottom: 2px solid var(--gl-red);
  border-radius: 0;
  margin: 0 0 1.2em;
  display: block;
}

.crm-container h3.nobackground,
.crm-container .crm-form-block h3 {
  background-color: transparent;
}

/* ============================================================
   Form-Block – Glasmorphism-Karte
   ============================================================ */
.crm-container .crm-form-block,
.crm-container div.crm-form-block {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius-lg);
  padding: 22px 26px;
  margin-bottom: 16px;
  box-shadow: var(--gl-shadow-sm);
  transition: box-shadow var(--gl-duration-slow) var(--gl-ease),
              transform var(--gl-duration-slow) var(--gl-ease);
}

.crm-container .crm-form-block:hover,
.crm-container div.crm-form-block:hover {
  box-shadow: var(--gl-shadow-md);
}

/* ============================================================
   Fieldset
   ============================================================ */
.crm-container fieldset {
  border-top: 1px solid var(--gl-border);
  margin: 16px 0;
  padding: 4px 0;
}

.crm-container fieldset legend {
  color: var(--gl-red);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0 8px;
}

/* ============================================================
   Labels
   ============================================================ */
div.crm-container .form-layout td.label,
div.crm-container .form-layout-compressed td.label {
  color: var(--gl-muted);
  font-weight: 400;
  font-size: 0.9em;
}

/* ============================================================
   Inputs – moderne Focus-Animation
   ============================================================ */
.crm-container input.crm-form-text,
.crm-container input.crm-form-password,
.crm-container input.dateplugin,
.crm-container select.crm-form-select,
.crm-container textarea,
.crm-container select {
  border: 1.5px solid var(--gl-border);
  border-radius: var(--gl-radius);
  background-image: none !important;
  background-color: var(--gl-bg-white);
  color: var(--gl-dark);
  padding: 7px 12px;
  height: auto;
  font-family: inherit;
  font-size: inherit;
  box-shadow: var(--gl-shadow-xs);
  transition: border-color var(--gl-duration) var(--gl-ease),
              box-shadow var(--gl-duration) var(--gl-ease),
              transform var(--gl-duration) var(--gl-ease);
}

.crm-container input.crm-form-text:hover,
.crm-container input.crm-form-password:hover,
.crm-container select.crm-form-select:hover,
.crm-container textarea:hover {
  border-color: var(--gl-red-mid);
  box-shadow: var(--gl-shadow-sm);
}

.crm-container input.crm-form-text:focus,
.crm-container input.crm-form-password:focus,
.crm-container select.crm-form-select:focus,
.crm-container textarea:focus {
  outline: none;
  border-color: var(--gl-red);
  box-shadow: 0 0 0 4px var(--gl-red-glow), var(--gl-shadow-sm);
  transform: translateY(-1px);
}

.crm-container input.crm-form-text[disabled],
.crm-container input.crm-form-password[disabled],
.crm-container select.crm-form-select[disabled] {
  background-image: none !important;
  background-color: var(--gl-bg);
  color: var(--gl-muted-light);
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================================================
   Required / Error
   ============================================================ */
.crm-container .crm-marker {
  color: var(--gl-red);
  font-weight: 700;
}

.crm-container .crm-error,
.crm-container .crm-inline-error {
  background: var(--gl-error-bg);
  color: var(--gl-error);
  border-radius: var(--gl-radius);
  padding: 6px 10px;
  border: 1px solid var(--gl-red-mid);
}

/* ============================================================
   Buttons – animierte Schatten + Spring-Effekt
   ============================================================ */
.crm-container a.button,
.crm-container a.button:link,
.crm-container a.button:visited,
.crm-container .ui-dialog-buttonset .ui-button,
.crm-container .crm-button {
  background: var(--gl-red);
  border: none;
  color: #fff;
  text-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--gl-radius-pill);
  padding: 8px 22px;
  cursor: pointer;
  box-shadow: var(--gl-shadow-red);
  display: inline-block;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  transition: background var(--gl-duration) var(--gl-ease),
              box-shadow var(--gl-duration) var(--gl-ease),
              transform var(--gl-duration) var(--gl-spring);
}

/* Schimmer-Effekt beim Hover */
.crm-container .crm-button::before,
.crm-container a.button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.4s var(--gl-ease);
}

.crm-container .crm-button:hover::before,
.crm-container a.button:hover::before {
  left: 100%;
}

.crm-container .crm-button:hover,
.crm-container .crm-button:focus,
.crm-container .ui-dialog-buttonset .ui-button:hover,
.crm-container .ui-dialog-buttonset .ui-button:focus,
.crm-container a.button:hover,
.crm-container a.button:focus {
  background: var(--gl-red-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--gl-shadow-red-lg);
}

.crm-container .crm-button:active,
.crm-container a.button:active {
  transform: translateY(0px);
  box-shadow: var(--gl-shadow-red);
}

/* Sekundär */
.crm-container .crm-button-type-cancel,
.crm-container .crm-button-type-back {
  background: transparent;
  border: 1.5px solid var(--gl-border);
  color: var(--gl-dark-mid);
  box-shadow: var(--gl-shadow-xs);
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  border-radius: var(--gl-radius-pill);
}

.crm-container .crm-button-type-cancel:hover,
.crm-container .crm-button-type-back:hover {
  background: var(--gl-bg);
  border-color: var(--gl-muted-light);
  color: var(--gl-dark);
  transform: translateY(-1px);
  box-shadow: var(--gl-shadow-sm);
}

.crm-container .crm-button-disabled,
.crm-container .crm-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Tabellen – moderne Karten-Optik
   ============================================================ */
.crm-container table {
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius-lg);
  overflow: hidden;
  box-shadow: var(--gl-shadow-sm);
  transition: box-shadow var(--gl-duration-slow) var(--gl-ease);
}

.crm-container table:hover {
  box-shadow: var(--gl-shadow-md);
}

.crm-container .crm-form-block table {
  border: none;
  box-shadow: none;
}
.crm-container .crm-form-block table:hover {
  box-shadow: none;
}

/* Header */
.crm-container th,
.crm-container table.display thead th,
.crm-container table thead.sticky th {
  background: linear-gradient(135deg, var(--gl-red) 0%, var(--gl-red-dark) 100%);
  border-color: var(--gl-red-dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 12px 14px;
}

.crm-container table.form-layout-compressed tbody th.label {
  background: var(--gl-bg);
  color: var(--gl-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Aktive Sortierung */
.crm-container table thead th.sorting_asc,
.crm-container table thead th.sorting_desc {
  background: linear-gradient(135deg, var(--gl-red-dark) 0%, #4a0f18 100%);
  color: #fff;
}

/* Sticky Header */
.crm-sticky thead {
  background: var(--gl-red);
}

/* Zebrastreifen */
.crm-container .odd-row,
.crm-container .odd,
tbody.scrollContent {
  background-color: var(--gl-bg-white);
}

.crm-container .even-row,
.crm-container .even,
tbody.scrollContent tr.alternateRow {
  background-color: #fcfcfc;
}

/* Zeilen-Hover Animation */
.crm-container table.row-highlight tr,
.crm-container table.selector tr {
  transition: background-color var(--gl-duration) var(--gl-ease),
              box-shadow var(--gl-duration) var(--gl-ease);
}

.crm-container table.row-highlight tr:hover td,
.crm-container table.selector tr:hover td {
  background-color: var(--gl-red-light) !important;
}

.crm-container .crm-row-selected td {
  background-color: var(--gl-red-light) !important;
}

/* Zellen */
.crm-container td {
  color: var(--gl-dark);
  border-bottom: 1px solid var(--gl-border-soft);
  padding: 11px 14px;
  transition: background-color var(--gl-duration) var(--gl-ease);
}

.crm-container table.selector td {
  border-right: 1px solid var(--gl-border-soft);
}

/* ============================================================
   E-Mail Links – animierte Pills
   ============================================================ */
.crm-container td a[href^="mailto"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gl-red-light);
  border: 1px solid var(--gl-red-mid);
  color: var(--gl-red-dark);
  font-size: 0.82rem;
  padding: 3px 10px 3px 8px;
  border-radius: var(--gl-radius-pill);
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  transition: background var(--gl-duration) var(--gl-ease),
              transform var(--gl-duration) var(--gl-spring),
              box-shadow var(--gl-duration) var(--gl-ease);
  text-decoration: none;
}

.crm-container td a[href^="mailto"]::before {
  content: "\f0e0";
  font-family: "FontAwesome";
  font-size: 0.72rem;
  flex-shrink: 0;
  opacity: 0.6;
}

.crm-container td a[href^="mailto"]:hover {
  background: var(--gl-red-mid);
  color: var(--gl-red-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--gl-red-glow);
}

/* ============================================================
   Action-Items – schweben beim Hover
   ============================================================ */
.crm-container table td .crm-hover-button.action-item,
.crm-container a.crm-hover-button.action-item {
  font-size: 0.82rem;
  padding: 3px 10px;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-bg-white);
  border: 1px solid var(--gl-border);
  color: var(--gl-dark-mid);
  opacity: 1;
  box-shadow: var(--gl-shadow-xs);
  transition: background var(--gl-duration) var(--gl-ease),
              transform var(--gl-duration) var(--gl-spring),
              box-shadow var(--gl-duration) var(--gl-ease);
}

.crm-container .crm-hover-button:hover,
.crm-container a.crm-hover-button:hover {
  background-image: none;
  background-color: var(--gl-red-light);
  border: 1px solid var(--gl-red-mid);
  color: var(--gl-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--gl-red-glow);
}

/* ============================================================
   Kontakt-Detail-Panel
   ============================================================ */
.crm-container div.contact_panel,
.crm-container div.contact_panel td,
.crm-container table.crm-info-panel,
.crm-container table.crm-info-panel td,
#crm-container div.contact_details,
.crm-container #customFields div.contact_panel td {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
}

.crm-container div.contact_panel td.label,
.crm-container #customFields div.contact_panel td.label,
.crm-container table.crm-info-panel td.label {
  background-color: var(--gl-bg) !important;
  color: var(--gl-muted) !important;
  font-weight: 400 !important;
  border-right: 1px solid var(--gl-border-soft) !important;
}

.crm-container .crm-content-block,
#crm-container .crm-content-block {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border-radius: var(--gl-radius-lg);
  box-shadow: var(--gl-shadow-sm);
}

#crm-container .ui-tabs-panel {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border: 1px solid var(--gl-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--gl-radius-lg) var(--gl-radius-lg) !important;
}

.crm-container .crm-section {
  border-bottom: 1px solid var(--gl-border-soft);
  padding: 7px 0;
  transition: background var(--gl-duration) var(--gl-ease);
}

.crm-container .crm-section:last-child {
  border-bottom: none;
}

.crm-container .crm-section .label {
  color: var(--gl-muted);
  font-weight: 400;
}

/* ============================================================
   Accordion – smooth expand
   ============================================================ */
.crm-container .crm-accordion-header,
.crm-container .collapsed .crm-accordion-header,
.crm-container details > .crm-accordion-header {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.03em;
  border-radius: var(--gl-radius);
  padding: 10px 16px;
  transition: background var(--gl-duration) var(--gl-ease),
              box-shadow var(--gl-duration) var(--gl-ease);
}

.crm-container div.crm-accordion-header,
.crm-container details[open] > .crm-accordion-header {
  border-radius: var(--gl-radius) var(--gl-radius) 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.crm-container .crm-accordion-header:hover,
.crm-container .crm-accordion-header:focus {
  background: linear-gradient(135deg, var(--gl-red) 0%, var(--gl-red-dark) 100%);
  box-shadow: var(--gl-shadow-red);
}

.crm-container .crm-accordion-header.active {
  background: linear-gradient(135deg, var(--gl-red-dark) 0%, #4a0f18 100%);
}

.crm-container .crm-accordion-wrapper .crm-accordion-body {
  border: 1px solid var(--gl-border);
  border-top: none;
  border-radius: 0 0 var(--gl-radius) var(--gl-radius);
  background: var(--gl-bg-white);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
}

/* ============================================================
   Tabs – Unterstrich-Stil mit gleitender Animation
   ============================================================ */
.crm-container .ui-tabs .ui-tabs-nav {
  background: var(--gl-bg-white);
  border-bottom: 1px solid var(--gl-border);
  padding: 0 6px;
}

.crm-container .crm-tab-button a,
.crm-container .ui-tabs .ui-tabs-nav li a {
  color: var(--gl-muted);
  font-weight: 400;
  font-size: 0.9rem;
  padding: 10px 16px !important;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  transition: color var(--gl-duration) var(--gl-ease),
              border-color var(--gl-duration) var(--gl-ease);
  margin-bottom: -1px;
}

.crm-container .ui-tabs .ui-tabs-nav li a:hover {
  color: var(--gl-red);
  border-bottom-color: var(--gl-red-mid);
  text-decoration: none;
}

.crm-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.crm-container .ui-tabs .ui-tabs-nav li.ui-state-active a {
  color: var(--gl-red);
  background: transparent;
  border-bottom: 2px solid var(--gl-red);
  font-weight: 700;
}

/* ============================================================
   Status / Alerts
   ============================================================ */
.crm-container .status {
  background-color: #fdf8f0;
  border: 1px solid #d4b483;
  color: var(--gl-dark);
  border-radius: var(--gl-radius-lg);
  padding: 12px 16px;
  box-shadow: var(--gl-shadow-xs);
}

.crm-container .status.crm-ok {
  background-color: var(--gl-success-bg);
  border-color: #a3c4a3;
  color: var(--gl-success);
  border-radius: var(--gl-radius-lg);
}

.crm-container div.messages {
  border-radius: var(--gl-radius-lg);
  padding: 12px 16px;
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow-xs);
}

.crm-container .help,
.crm-container #help {
  background-color: var(--gl-red-light);
  border: 1px solid var(--gl-red-mid);
  color: var(--gl-dark);
  border-radius: var(--gl-radius-lg);
  font-size: 0.9em;
  box-shadow: var(--gl-shadow-xs);
}

.crm-container .description {
  color: var(--gl-muted);
  font-size: 0.88em;
  font-style: italic;
}

/* ============================================================
   Dialog / Modal – schwebt herein
   ============================================================ */
.crm-container .ui-dialog-titlebar.ui-widget-header {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  color: #fff;
  border-radius: var(--gl-radius-lg) var(--gl-radius-lg) 0 0;
  font-family: inherit;
  font-weight: 300;
  letter-spacing: 0.03em;
  padding: 14px 18px;
}

.crm-container .ui-dialog-titlebar .ui-button {
  background-color: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  transition: color var(--gl-duration) var(--gl-ease),
              background var(--gl-duration) var(--gl-ease);
  border-radius: var(--gl-radius);
}

.crm-container .ui-dialog-titlebar .ui-button:hover {
  background-color: var(--gl-red);
  color: #fff;
}

.crm-container .crm-dialog,
.crm-container.ui-dialog {
  border-radius: var(--gl-radius-lg);
  box-shadow: var(--gl-shadow-lg);
  border: none;
}

/* ============================================================
   Pager
   ============================================================ */
.crm-container .crm-pager {
  background-color: var(--gl-bg-white);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius-lg);
  padding: 8px 12px;
  box-shadow: var(--gl-shadow-xs);
}

/* ============================================================
   Search Tasks
   ============================================================ */
.crm-container .crm-search-tasks,
.crm-container .crm-tasks {
  background-color: var(--gl-bg);
  border: 1px solid var(--gl-border);
  color: var(--gl-dark);
  border-radius: var(--gl-radius-lg);
  box-shadow: var(--gl-shadow-xs);
}

/* ============================================================
   Suchstatus
   ============================================================ */
.crm-container #search-status {
  background-color: var(--gl-red-light) !important;
  border: 1px solid var(--gl-red-mid) !important;
  color: var(--gl-dark) !important;
  border-radius: var(--gl-radius-lg) !important;
}

/* ============================================================
   Wizard Steps
   ============================================================ */
#crm-container ul.wizard-bar li.current-step {
  background-color: var(--gl-red);
  border-color: var(--gl-red-dark);
  color: #fff;
  box-shadow: var(--gl-shadow-red);
}

/* ============================================================
   Checkboxen & Radios
   ============================================================ */
.crm-container input[type="checkbox"]:checked,
.crm-container input[type="radio"]:checked {
  accent-color: var(--gl-red);
}

/* ============================================================
   Buttons in Tabellen
   ============================================================ */
.crm-container table td input[type="button"],
.crm-container table td input[type="submit"] {
  background: var(--gl-red) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--gl-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 0.8rem !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: background var(--gl-duration) var(--gl-ease),
              transform var(--gl-duration) var(--gl-spring),
              box-shadow var(--gl-duration) var(--gl-ease) !important;
  box-shadow: var(--gl-shadow-red) !important;
}

.crm-container table td input[type="button"]:hover,
.crm-container table td input[type="submit"]:hover {
  background: var(--gl-red-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--gl-shadow-red-lg) !important;
}

/* ============================================================
   Verschachtelte Tabellen – Kästchen-Optik entfernen
   Betrifft z.B. Veranstaltungs-Teilnehmer-Statistiken
   ============================================================ */

/* Innere Tabellen in td-Zellen: keine eigene Box */
.crm-container td table,
.crm-container td table td,
.crm-container td table tr {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 1px 0 !important;
}

/* Zeilen in verschachtelten Tabellen: kein Abstand, keine Border */
.crm-container td table tr td {
  border-bottom: none !important;
  padding: 1px 4px !important;
  font-size: 0.88em;
  color: var(--gl-dark-mid);
}

/* Rote Links in den Stats bleiben lesbar */
.crm-container td table td a {
  color: var(--gl-red);
  font-weight: 600;
}

/* Outer-td die solche Tabellen enthalten: kein overflow-Abschnitt */
.crm-container table.selector td,
.crm-container table td {
  vertical-align: top;
}

/* nestedSelector / nestedActivitySelector komplett flach */
#crm-container table.nestedSelector,
#crm-container table.nestedSelector td,
#crm-container table.nestedSelector tr,
#crm-container table.nestedActivitySelector,
#crm-container table.nestedActivitySelector td {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .crm-container table.selector,
  .crm-container table.display {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .crm-container .crm-form-block {
    padding: 14px 16px;
  }
}

/* ============================================================
   Seiten-Überschrift (h1 ausserhalb crm-title, z.B. "CiviEvent")
   ============================================================ */
.crm-container h1,
#crm-container h1 {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--gl-dark);
  margin-bottom: 0.4em;
}

.crm-container h2,
#crm-container h2 {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--gl-dark-mid);
  margin-bottom: 0.8em;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.crm-container .crm-breadcrumb,
#crm-container .breadcrumb,
.crm-container ol.breadcrumb,
.crm-container .crm-nav-js {
  font-size: 0.82rem;
  color: var(--gl-muted);
  padding: 6px 0;
  margin-bottom: 12px;
}

.crm-container .crm-breadcrumb a,
#crm-container .breadcrumb a {
  color: var(--gl-muted);
  transition: color var(--gl-duration) var(--gl-ease);
}

.crm-container .crm-breadcrumb a:hover,
#crm-container .breadcrumb a:hover {
  color: var(--gl-red);
  text-decoration: none;
}

/* ============================================================
   CiviCRM Menubar (oben)
   ============================================================ */
#civicrm-menu,
.crm-menubar {
  background: var(--gl-dark) !important;
  border-bottom: 2px solid var(--gl-red) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

#civicrm-menu a,
.crm-menubar a {
  color: rgba(255,255,255,0.85) !important;
  transition: color var(--gl-duration) var(--gl-ease),
              background var(--gl-duration) var(--gl-ease) !important;
}

#civicrm-menu a:hover,
.crm-menubar a:hover {
  color: #fff !important;
  background: var(--gl-red) !important;
  text-decoration: none !important;
}

/* ============================================================
   Tooltip / Help-Popover (das dunkle Overlay im Screenshot)
   ============================================================ */
.crm-container .crm-tooltip {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-lg) !important;
  padding: 16px 18px !important;
}

#crm-container .crm-tooltip table,
#crm-container .crm-tooltip table tr td {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border: none !important;
}

.crm-container .crm-tooltip h2 {
  color: var(--gl-red) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--gl-border) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

.crm-container .crm-tooltip a,
.crm-container .crm-tooltip a:link {
  color: var(--gl-red) !important;
  text-decoration: underline !important;
}

/* Tooltip-Pfeil überschreiben */
.crm-container .crm-tooltip-wrapper {
  background-image: none !important;
}

/* ============================================================
   Notification Container (Toast oben rechts)
   ============================================================ */
#crm-notification-container div.ui-notify-message {
  background: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-lg) !important;
  border-left: 4px solid var(--gl-red) !important;
}

#crm-notification-container div.ui-notify-message h1 {
  color: var(--gl-dark) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

#crm-notification-container div.ui-notify-message p {
  color: var(--gl-dark-mid) !important;
}

#crm-notification-container div.ui-notify-message.success {
  border-left-color: var(--gl-success) !important;
}

#crm-notification-container div.ui-notify-message.error {
  border-left-color: var(--gl-red) !important;
}

#crm-notification-container div.ui-notify-message.info {
  border-left-color: #4a90c4 !important;
}

#crm-notification-container .ui-notify-message a.ui-notify-cross {
  color: var(--gl-muted) !important;
  transition: color var(--gl-duration) var(--gl-ease);
}

#crm-notification-container .ui-notify-message .ui-notify-cross:hover {
  color: var(--gl-red) !important;
}

/* Tabellen in Notifications */
.crm-container div.ui-notify-message td {
  background: var(--gl-bg) !important;
  border: 1px solid var(--gl-border) !important;
  color: var(--gl-dark) !important;
}

.crm-container div.ui-notify-message th {
  background: var(--gl-border-soft) !important;
  border: 1px solid var(--gl-border) !important;
  color: var(--gl-dark-mid) !important;
}

/* ============================================================
   Status-Box (fixed oben rechts beim Speichern)
   ============================================================ */
.crm-status-box-outer .crm-status-box-inner {
  background: rgba(26, 26, 26, 0.92) !important;
  border-radius: var(--gl-radius) !important;
  font-family: inherit !important;
  letter-spacing: 0.02em !important;
}

.crm-status-box-outer.status-success .crm-status-box-inner {
  background: rgba(58, 107, 58, 0.92) !important;
  border-left: 3px solid #6abf6a !important;
}

.crm-status-box-outer.status-error .crm-status-box-inner {
  background: rgba(107, 26, 38, 0.92) !important;
  border-left: 3px solid var(--gl-red) !important;
}

/* ============================================================
   Recently Viewed Bar
   ============================================================ */
#crm-recently-viewed li.crm-recently-viewed {
  background-color: var(--gl-bg-white) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius) !important;
  transition: box-shadow var(--gl-duration) var(--gl-ease),
              border-color var(--gl-duration) var(--gl-ease);
}

#crm-recently-viewed ul li.crm-recently-viewed:hover,
#crm-recently-viewed .crm-recentview-wrapper {
  background-color: var(--gl-red-light) !important;
  border-color: var(--gl-red-mid) !important;
}

#crm-recently-viewed a {
  color: var(--gl-red) !important;
}

/* ============================================================
   Autocomplete / Select2 Dropdown
   ============================================================ */
.crm-container .ac_results-inner,
.crm-container .crm-contact-actions-list-inner {
  background-color: var(--gl-bg-white) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-md) !important;
  padding: 6px !important;
}

.crm-container .ac_results li,
.crm-container .ac_results li a,
.crm-container .ac_results li a:visited {
  color: var(--gl-dark) !important;
  border-radius: var(--gl-radius) !important;
  transition: background var(--gl-duration) var(--gl-ease) !important;
}

.crm-container .ac_results li:hover,
.crm-container .ac_results li a:hover {
  background-color: var(--gl-red-light) !important;
  color: var(--gl-red-dark) !important;
}

/* ============================================================
   Panel / Dropdown-Menüs (Mehr-Button etc.)
   ============================================================ */
.crm-container ul.panel,
.crm-container .ac_results {
  background: transparent !important;
}

.crm-container .ac_results-inner,
.crm-container .crm-participant-list-inner,
.crm-container .crm-event-links-list-inner,
.crm-container .crm-contribpage-links-list-inner {
  background-color: var(--gl-bg-white) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-md) !important;
}

.crm-container .btn-slide .panel li a {
  color: var(--gl-dark) !important;
  transition: background var(--gl-duration) var(--gl-ease) !important;
  border-radius: var(--gl-radius) !important;
}

.crm-container .btn-slide .panel li a:hover,
.crm-container .crm-participant-list-inner li a:hover,
.crm-container .crm-event-links-list-inner li a:hover {
  background-color: var(--gl-red-light) !important;
  color: var(--gl-red-dark) !important;
}

.crm-container td ul.panel li {
  background-color: var(--gl-bg-white) !important;
}

/* ============================================================
   Kontakt-Detail – Summary Group im Tooltip
   ============================================================ */
.crm-container .crm-summary-group h2 {
  color: var(--gl-dark) !important;
  font-weight: 600 !important;
}

.crm-container .crm-summary-group .crm-section .label {
  color: var(--gl-muted) !important;
  background-color: transparent !important;
}

/* ============================================================
   Form-Layout Hintergrund in Kontakt-Panel
   ============================================================ */
.crm-container div.contact_panel td,
.crm-container table.crm-info-panel td,
#crm-container div.contact_details,
.crm-container #customFields div.contact_panel td {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
}

.crm-container div.contact_panel td.label,
.crm-container table.crm-info-panel td.label {
  background-color: var(--gl-bg) !important;
  color: var(--gl-muted) !important;
  font-weight: 400 !important;
  border-right: 1px solid var(--gl-border-soft) !important;
}

.crm-container .crm-content-block,
#crm-container .crm-content-block {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border-radius: var(--gl-radius-lg);
  box-shadow: var(--gl-shadow-sm);
}

#crm-container .ui-tabs-panel {
  background-color: var(--gl-bg-white) !important;
  color: var(--gl-dark) !important;
  border: 1px solid var(--gl-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--gl-radius-lg) var(--gl-radius-lg) !important;
}

/* ============================================================
   Reduced Motion – Animationen deaktivieren wenn gewünscht
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .crm-container *,
  .crm-container *::before,
  .crm-container *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   Top Navigation Bar
   ============================================================ */
#civicrm-menu,
ul#civicrm-menu,
.crm-menubar {
  background: var(--gl-dark) !important;
  border-bottom: 2px solid var(--gl-red) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
  font-family: 'Lato', system-ui, sans-serif !important;
  font-size: 13px !important;
}

#civicrm-menu li a,
.crm-menubar li a {
  color: rgba(255,255,255,0.80) !important;
  font-weight: 400 !important;
  padding: 8px 14px !important;
  border-radius: var(--gl-radius) !important;
  transition: color var(--gl-duration) var(--gl-ease),
              background var(--gl-duration) var(--gl-ease) !important;
  text-decoration: none !important;
}

#civicrm-menu li a:hover,
.crm-menubar li a:hover {
  color: #fff !important;
  background: var(--gl-red) !important;
  text-decoration: none !important;
}

/* Dropdown der Top-Nav */
#civicrm-menu li ul,
.crm-menubar li ul {
  background: var(--gl-bg-white) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-md) !important;
  padding: 6px !important;
  min-width: 180px !important;
}

#civicrm-menu li ul li a,
.crm-menubar li ul li a {
  color: var(--gl-dark) !important;
  padding: 7px 12px !important;
  border-radius: var(--gl-radius) !important;
  font-size: 13px !important;
  display: block !important;
}

#civicrm-menu li ul li a:hover,
.crm-menubar li ul li a:hover {
  background: var(--gl-red-light) !important;
  color: var(--gl-red-dark) !important;
}

/* ============================================================
   Linke Sidebar (Standalone / Riverlea)
   ============================================================ */
.crm-nav-item a,
.crm-nav-item span.crm-nav-label {
  color: rgba(255,255,255,0.78) !important;
  transition: color var(--gl-duration) var(--gl-ease),
              background var(--gl-duration) var(--gl-ease) !important;
}

.crm-nav-item a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.09) !important;
  text-decoration: none !important;
}

.crm-nav-item.active > a,
.crm-nav-item.crm-is-active > a,
.crm-nav-item[aria-current] > a {
  color: #fff !important;
  background: var(--gl-red) !important;
  border-radius: var(--gl-radius) !important;
  font-weight: 600 !important;
}

/* Sidebar-Sektions-Header */
.crm-nav-section-header,
.crm-nav-item.crm-nav-header {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 14px 16px 4px !important;
  pointer-events: none !important;
}

/* Trennlinien */
.crm-nav-item.crm-nav-divider,
nav hr {
  border-color: rgba(255,255,255,0.08) !important;
  margin: 6px 12px !important;
}

/* Sidebar-Hintergrund selbst */
[class*="crm-sidebar"],
[id*="crm-sidebar"],
aside.crm-nav,
nav.crm-nav {
  background: var(--gl-dark) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* Collapse-Toggle Button der Sidebar */
.crm-nav-toggle,
.crm-sidebar-toggle {
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
  border: none !important;
  transition: color var(--gl-duration) var(--gl-ease) !important;
}

.crm-nav-toggle:hover {
  color: #fff !important;
}

/* Badge/Counter in Nav-Items */
.crm-nav-item .crm-count,
.crm-nav-item .badge {
  background: var(--gl-red) !important;
  color: #fff !important;
  border-radius: var(--gl-radius-pill) !important;
  font-size: 0.7rem !important;
  padding: 1px 6px !important;
  font-weight: 700 !important;
}

/* ============================================================
   Dropdown-Panel (btn-slide "mehr" Menü)
   ============================================================ */
.crm-container span.btn-slide,
.crm-container a.btn-slide {
  color: var(--gl-red) !important;
  font-weight: 600 !important;
}

.crm-container .btn-slide-active .panel,
.crm-container ul.panel {
  background: transparent !important;
}

.crm-container .crm-participant-list-inner,
.crm-container .crm-event-links-list-inner,
.crm-container .crm-contribpage-links-list-inner,
.crm-container .crm-contact-actions-list-inner,
.crm-container .crm-create-new-list-inner,
.crm-container .ac_results-inner {
  background: var(--gl-bg-white) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-md) !important;
  padding: 6px !important;
  overflow: hidden !important;
}

.crm-container .btn-slide .panel li,
.crm-container td ul.panel li {
  background: transparent !important;
  border: none !important;
}

.crm-container .btn-slide .panel li a {
  color: var(--gl-dark) !important;
  padding: 7px 12px !important;
  border-radius: var(--gl-radius) !important;
  display: block !important;
  transition: background var(--gl-duration) var(--gl-ease),
              color var(--gl-duration) var(--gl-ease) !important;
  text-decoration: none !important;
}

.crm-container .btn-slide .panel li a:hover,
.crm-container .crm-participant-list-inner li a:hover,
.crm-container .crm-event-links-list-inner li a:hover,
.crm-container .crm-contact-actions-list-inner li a:hover {
  background: var(--gl-red-light) !important;
  color: var(--gl-red-dark) !important;
  text-decoration: none !important;
}

/* ============================================================
   Kontakt-Detail – komplette Überarbeitung
   ============================================================ */

/* Äußerer Wrapper */
.crm-container div.contact_panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Jede Panel-Sektion als eigene Karte */
.crm-container div.contact_panel .crm-summary-block {
  background: var(--gl-bg-white) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-sm) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  transition: box-shadow var(--gl-duration-slow) var(--gl-ease) !important;
}

.crm-container div.contact_panel .crm-summary-block:hover {
  box-shadow: var(--gl-shadow-md) !important;
}

/* Tabellen-Zellen im Kontakt-Panel flach & sauber */
.crm-container div.contact_panel table,
.crm-container div.contact_panel td,
.crm-container div.contact_panel tr {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Zeile: Label + Wert */
.crm-container div.contact_panel tr {
  border-bottom: 1px solid var(--gl-border-soft) !important;
  transition: background var(--gl-duration) var(--gl-ease) !important;
}

.crm-container div.contact_panel tr:last-child {
  border-bottom: none !important;
}

.crm-container div.contact_panel tr:hover {
  background: var(--gl-red-light) !important;
}

/* Label-Zelle */
.crm-container div.contact_panel td.label,
.crm-container #customFields div.contact_panel td.label {
  background: transparent !important;
  color: var(--gl-muted) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.03em !important;
  padding: 9px 12px 9px 16px !important;
  width: 38% !important;
  vertical-align: middle !important;
  border-right: none !important;
  white-space: nowrap !important;
}

/* Wert-Zelle */
.crm-container div.contact_panel td.view-value,
.crm-container div.contact_panel td:not(.label) {
  background: transparent !important;
  color: var(--gl-dark) !important;
  font-size: 0.93rem !important;
  padding: 9px 16px 9px 12px !important;
  vertical-align: middle !important;
}

/* crm-info-panel (rechte Spalte: Tags, Kontaktart etc.) */
.crm-container table.crm-info-panel {
  background: var(--gl-bg-white) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-sm) !important;
  overflow: hidden !important;
  width: 100% !important;
}

.crm-container table.crm-info-panel td {
  background: transparent !important;
  border-bottom: 1px solid var(--gl-border-soft) !important;
  padding: 9px 16px !important;
  color: var(--gl-dark) !important;
}

.crm-container table.crm-info-panel td.label {
  color: var(--gl-muted) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  background: transparent !important;
  width: 40% !important;
}

.crm-container table.crm-info-panel tr:last-child td {
  border-bottom: none !important;
}

.crm-container table.crm-info-panel tr:hover td {
  background: var(--gl-red-light) !important;
}

/* "Tags"-Überschrift in der rechten Spalte */
.crm-container .crm-summary-block .crm-block-title,
.crm-container .crm-summary-group h2 {
  color: var(--gl-red) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 10px 16px 8px !important;
  border-bottom: 1px solid var(--gl-border) !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Tabs über dem Kontakt-Panel */
.crm-container .ui-tabs .ui-tabs-nav li {
  background: transparent !important;
  border: none !important;
}

.crm-container .ui-tabs-nav {
  border-radius: var(--gl-radius-lg) var(--gl-radius-lg) 0 0 !important;
  overflow: hidden !important;
  padding: 0 8px !important;
}

/* Aktions-Buttons (Aktion, Bearbeiten) */
.crm-container .crm-actions-ribbon {
  margin-bottom: 14px !important;
}

.crm-container .crm-actions-ribbon .crm-button,
.crm-container .crm-actions-ribbon a.button {
  border-radius: var(--gl-radius-pill) !important;
  font-size: 0.82rem !important;
  padding: 6px 16px !important;
}

/* Edit-Stift-Icon in Panel-Zeilen */
.crm-container .crm-hover-button.crm-edit-btn,
.crm-container .crm-summary-block a.crm-hover-button {
  opacity: 0;
  transition: opacity var(--gl-duration) var(--gl-ease),
              transform var(--gl-duration) var(--gl-spring) !important;
}

.crm-container tr:hover .crm-hover-button,
.crm-container .crm-summary-block:hover a.crm-hover-button {
  opacity: 1 !important;
}

/* Inline-Edit aktiv */
.crm-container .crm-editable-enabled:hover {
  border: 1.5px dashed var(--gl-red-mid) !important;
  border-radius: var(--gl-radius) !important;
  cursor: pointer !important;
}