/* frontend.css – Copilot Gefahrgut Search */

/* =========================================================
   General
   ========================================================= */

/* ── Button Styles ── */
.cg-button-1, .cg-button-2, .cg-button-3, .cg-btn{
    cursor:        pointer;
    font-size:     var(--cg-font-size-sm);
    font-weight:   var(--cg-font-weight-normal);
    border-radius: var(--cg-radius-outer);
    transition: Background var(--cg-duration-normal);
    border: none;
    text-decoration: none;
    margin: auto 0;
}

.cg-button-1{
    background: var(--cg-color-brand-4);
    color: var(--cg-btn-primary-text);
    border-radius: var(--cg-radius-outer);
    padding: var(--cg-space-3) var(--cg-space-button-side);
}
.cg-button-1:hover{
    color: var(--cg-btn-primary-text) !important;
    background: var(--cg-color-brand-4);
}

.cg-button-2{
    background: var(--cg-btn-secondary-bg);
    color: var(--cg-btn-secondary-text);
    border-radius: var(--cg-radius-outer);
    padding: var(--cg-space-button-top) var(--cg-space-button-side);
}

.cg-button-3{
    background: var(--cg-btn-tercer-bg);
    color: var(--cg-btn-tercer-text);
    border-radius: var(--cg-radius-outer);
    padding: var(--cg-space-button-top) var(--cg-space-button-side);
    border:  1px solid var(--cg-btn-tercer-border);
}
.cg-button-delete{
    background: #c0392b;
}

.cg-button-add{
    background: transparent;
    display: flex;
    align-items: center;
    padding: var(--cg-space-button-top);
    gap: var(--cg-space-2);
    padding: var(--cg-space-2);
    border: 1px solid var(--cg-color-border);
    border-radius: var(--cg-radius-outer);
    background: var(--cg-color-bg);
    color: var(--cg-color-text-heading);
    cursor: pointer;
    font-size: var(--cg-font-size-sm);
    transition: border var(--cg-duration-normal);

}
.cg-button-add:hover{
    border-color: var(--cg-btn-secondary-bg);
}

.cg-wizard-continue{
    display: flex;
    align-items: center;
    gap: var(--cg-space-1);
}

.icon-info-sq{
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-left: 4px;
}
.icon-info-sq svg{
    stroke: var(--cg-color-brand-3)
}
.icon-info-sq svg path{
    fill: var(--cg-color-brand-3)
}

/* ── Trennlinie ────────────────────────────────────────────────────────── */
.cp-divider {
    border:     none;
    border-top: 1px solid var(--cg-color-border);
    margin:     var(--cg-space-1) 0;
}


/* ── Input Styles ── */
.cg-input {
    width:         100%;
    padding:       var(--cg-space-2) var(--cg-space-3);
    background:    var(--cg-color-bg);
    border:        2px solid var(--cg-color-border-hover);
    border-radius: var(--cg-radius-outer);
    color:         var(--cg-color-text-heading);
    font-size:     var(--cg-font-size-sm);
    outline:       none;
    box-sizing:    border-box;
    height: var(--cg-input-min-height);
}

.cg-input:focus {
    border-color: var(--cg-color-border-strong);
    outline: none;
}

/* ── Border Styles ── */
.gradient-border{
   border: 2px solid transparent;
   background-image:
		linear-gradient(var(--cg-color-bg-entry), var(--cg-color-bg-entry)),
		var(--cg-gradient-brand);
   background-origin: border-box;
   background-clip: padding-box,border-box;
   border-radius: var(--cg-radius-outer);
}

.gradient-background {
  background: var(--cg-gradient-background);
  border-radius: var(--cg-radius-outer);
}

/* ── Container Styles ── */
.cg-info {
    border-radius: var(--cg-radius-outer);
    padding: var(--cg-space-3) var(--cg-space-4);
    font-size: var(--cg-font-size-sm);
    color: var(--cg-color-text-2);
    line-height: var(--cg-line-height-normal);
}


/* Tooltip */
/* Tooltip */
.cg-tooltip {
    position: relative;
}

.cg-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cg-color-text-heading);
    color: var(--cg-color-bg-entry);
    padding: var(--cg-space-2) var(--cg-space-3);
    border-radius: var(--cg-radius-inner);
    box-shadow: var(--cg-shadow-2);
    font-size: var(--cg-font-size-xs);
    line-height: var(--cg-line-height-normal, 1.4);
    text-align: left;
    text-transform: none;
    white-space: pre-line;
    width: max-content;
    max-width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--cg-ease-1), visibility 0.2s var(--cg-ease-1);
    z-index: 20;
}

.cg-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--cg-color-text-heading);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--cg-ease-1), visibility 0.2s var(--cg-ease-1);
    z-index: 20;
}

.cg-tooltip:hover::after,
.cg-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

.cg-hint {
    color: var(--cg-color-text-3);           /* leicht ausgegraut */
    font-size: var(--cg-font-size-xs);
    margin-left: var(--cg-space-2);
    font-style: italic;    /* optional, wirkt oft "hinweisartig" */
}


.thinking-blob{
    width: 50px;
    height: 50px;
    position: relative;
    animation: morph 6s ease-in-out infinite, colors 8s ease-in-out infinite;
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    align-self: flex-start;
}

@property --c1 { syntax: '<color>'; inherits: false; initial-value: #8d9deb; }
@property --c2 { syntax: '<color>'; inherits: false; initial-value: #5ac8f8; }

@keyframes morph {
  0% {
      border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
  }
  14% {
      border-radius: 50% 50% 38% 62% / 55% 42% 58% 45%;
  }
  28% {
      border-radius: 35% 65% 60% 40% / 40% 58% 42% 60%;
  }
  42% {
      border-radius: 58% 42% 48% 52% / 62% 38% 62% 38%;
  }
  57% {
      border-radius: 44% 56% 35% 65% / 52% 55% 45% 48%;
  }
  71% {
      border-radius: 62% 38% 52% 48% / 38% 62% 38% 62%;
  }
  85% {
      border-radius: 48% 52% 62% 38% / 44% 50% 50% 56%;
  }
  100% {
      border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
  }
}

@keyframes colors {
  0% {
      --c1: #8d9deb;
      --c2: #5ac8f8;
  }
  25% {
      --c1: #34D399;
      --c2: #5ac8f8;
  }
  50% {
      --c1: #5ac8f8;
      --c2: #8d9deb;
  }
  75% {
      --c1: #5ac8f8;
      --c2: #34D399;
  }
  100% {
      --c1: #8d9deb;
      --c2: #5ac8f8;
  }
}


/* =========================================================================
   1. Karten-Basis (gemeinsames Grundgerüst aller Dashboard-Widgets)
   ========================================================================= */

.cg-widget {
	position: relative;
	background: var(--cg-color-bg-entry);
	border: 1px solid var(--cg-color-border);
	border-radius: var(--cg-radius-outer);
	box-shadow: var(--cg-shadow-1);
	padding: var(--cg-space-5);
	max-width: var(--cg-widget-width);
	font-family: inherit;
}


/* =========================================================
   Favoriten Count
   ========================================================= */
.cg-count-number {
    display: inline-block;
    transition: transform 0.15s ease, color 0.15s ease;
}

.cg-count-bump {
    transform: scale(1.4);
    color: #f5a623;
}

.cg-counter-wrap {
    font-size:   var(--cg-font-size-sm);
    color:       var(--cg-color-text-2);
    display:     flex;
    align-items: center;
    gap:         var(--cg-space-2);
}

#cg-count-label {
    font-weight: var(--cg-font-weight-bold);
    color:       var(--cg-color-text-heading);
    font-size:   var(--cg-font-size-lg);
}

/* --- svg --- */
.svg, .svg-small {
   height: var(--svg-medium);
   width: var(--svg-medium);
}

.svg-large {
   height: var(--svg-large);
   width: var(--svg-large);
}

.cg-content-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.icon-dark-background {
    filter: brightness(0) invert(1);
}

.cg-group-icon {
  aspect-ratio: 1;
  min-width: 25px;
  min-height: 25px;
  display: flex;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
}

/* ── Accordion ─────────────────────────────────── */
.cg-accordion {
    border-radius: var(--cg-radius-outer);
    overflow: hidden;
}
.cg-accordion-toggle {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: var(--cg-space-1);
    background: var(--cg-color-bg);
    border: none;
    cursor: pointer;
    font-size: var(--cg-font-size-sm);
    font-weight: var(--cg-font-weight-normal);
    color: var(--cg-color-text-3);
    text-align: left;
    transition: background var(--cg-duration-normal) var(--cg-ease-1);
}
.cg-accordion-toggle:focus { outline: none; }
.cg-accordion-arrow {
    display: inline-block;
    line-height: 1;
    transition: transform 0.25s var(--cg-ease-1);
}
.cg-accordion-arrow--open { transform: rotate(90deg); }
.cg-accordion-badge {
    margin-left: auto;
    background: var(--cg-color-highlight-dark);
    color: #fff;
    font-size: var(--cg-font-size-xs);
    font-weight: var(--cg-font-weight-bold);
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}
.cg-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--cg-ease-1), padding 0.3s var(--cg-ease-1);
    padding: 0;
}
.cg-accordion-body--open {
    max-height: 1000px;
    padding: 5px 0;
}
.cg-accordion-item {
    display: flex;
    align-items: flex-start;
    gap: var(--cg-space-2);
    padding: var(--cg-space-2);
}
.cg-accordion-item-text {
    flex: 1;
    font-size: var(--cg-font-size-sm);
    color: var(--cg-color-text-2);
}
.cg-accordion-toggle:focus       { outline: none; }

.cg-load-more-line {
    font-size: var(--cg-font-size-sm, 13px);
    color: var(--cg-color-text-2, #666);
    text-align: center;
    margin: var(--cg-space-2, 8px) 0;
}
.cg-load-more-link {
    color: var(--cg-color-brand-3);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s var(--cg-ease-1);
}
.cg-load-more-link:hover {
    color: var(--cg-color-brand-4);
}