/* =========================================
   XML SMART SEARCH — FRONTEND STYLES v6.1
   =========================================
   Anpassung per CSS Custom Properties:
   Alle Variablen im Theme-CSS überschreiben:

   #xss-search-container {
       --xss-primary:      #005177;
       --xss-card-bg:      #ffffff;
       --xss-border-color: #cccccc;
   }
   ========================================= */

#xss-search-container {
    /* --- Farben --- */
    --xss-primary:          #930985;
    --xss-primary-hover:    #7a0770;
    --xss-reset-bg:         #f0f0f1;
    --xss-reset-hover:      #e0e0e0;
    --xss-reset-color:      #930985;
    --xss-card-bg:          #ffffff;
    --xss-card-border:      #ffffff;
    --xss-field-bg:         #f9f9f9;
    --xss-field-border:     #eeeeee;
    --xss-label-color:      #ffffff;
    --xss-container-bg:     #ffffff;
    --xss-container-border: #ffffff;

    /* --- Abstände & Typografie --- */
    --xss-gap:                15px;
    --xss-card-padding:       15px;
    --xss-border-radius:      4px;
    --xss-font-size:          0.95rem;
    --xss-label-size:         0.85rem;

    /* --- Trennlinie Formular / Ergebnisse --- */
    --xss-divider-color:      #dddddd;  /* Farbe der Linie              */
    --xss-divider-thickness:  3px;      /* Stärke der Linie             */
    --xss-divider-gap-top:    20px;     /* Abstand über der Linie       */
    --xss-divider-gap-bottom: 40px;     /* Abstand unter der Linie      */

    /* --- Anwendung --- */
    background:    #f7f8fa /*var(--xss-container-bg);*/
    border:        1px solid var(--xss-container-border);
    border-radius: 8px;
    padding:       16px;
    max-width:     100%;
    font-family:   "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing:    border-box;
}

/* Theme-Reset: Alle Kinder des Containers bekommen saubere Ausgangswerte.
   Verhindert dass Divi / andere Themes margin/padding auf form, div, p setzen. */
#xss-search-container *,
#xss-search-container *::before,
#xss-search-container *::after {
    box-sizing: border-box;
	/*margin-bottom: 0px !important;*/
}

#xss-search-container form,
#xss-search-container fieldset {
    margin:  0 !important;
    padding: 0 !important;
    border:  none !important;
}

/* Paragraphen innerhalb des Containers resetten (Divi fügt oft margin-bottom hinzu) */
#xss-search-container p {
    margin:        0;
    margin-bottom: 0;
    padding:       0;
    background:    transparent;
    color:         inherit;
}

/* Trennlinie zwischen Suchformular und Ergebnissen */
#xss-results {
    margin-top:  var(--xss-divider-gap-bottom);
    padding-top: var(--xss-divider-gap-top);
    border-top:  var(--xss-divider-thickness) solid var(--xss-divider-color);
}

/* ---- SUCHFORMULAR ---- */

/* Zeilen-Container: jede konfigurierte Zeile ist ein eigener Flex-Row */
#xss-search-container .xss-filters-grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--xss-gap);
    width:          100%;
    background:     #930985 !important;
    /*border:         1px solid #930985 !important;*/
    border-radius:  6px !important;
    padding:        14px !important;
	margin-top: 	10px;
}

#xss-search-container .xss-filter-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--xss-gap);
    width:     100%;
}

#xss-search-container .xss-filter-item {
    display:        flex;
    flex-direction: column;
    flex:           1 1 180px;
}

/* Volltextsuche + Buttons: eigener Bereich direkt unter den Dropdowns */
.xss-search-bar {
    display:        flex !important;
    flex-direction: column !important;
    gap:            6px !important;
    margin-top:     12px !important;
    padding-top:    12px !important;
    border-top:     1px solid var(--xss-field-border) !important;
}

.xss-search-bar-label {
    font-weight:   600 !important;
    font-size:     1rem !important;
    color:         #202835 !important;
    margin:        0 !important;
    padding:       0 !important;
    display:       block !important;
}

.xss-search-bar-row {
    display:     flex !important;
    gap:         var(--xss-gap) !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
}

.xss-search-bar-row > input[type="text"] {
    flex:      1 1 0 !important;
    width:     0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height:    44px !important;
    box-sizing: border-box !important;
}

.xss-buttons {
    display:     flex !important;
    gap:         10px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    flex-wrap:   nowrap !important;
    margin:      0 !important;
    padding:     0 !important;
}

.xss-btn-search,
.xss-btn-reset {
    /*height:     44px !important;*/
    box-sizing: border-box !important;
    align-self: center !important;
}

.xss-last-import {
    display:    block !important;
    font-size:  0.78rem !important;
    color:      #999 !important;
    text-align: right !important;
    margin-top: 4px !important;
}

.xss-filter-item label,
.xss-text-search label {
    font-weight:   600 !important;
    font-size:     1rem !important;
    margin-bottom: 5px !important;
    color:         #ffffff !important;
}

#xss-search-container .xss-filter-item select,
#xss-search-container .xss-dropdown,
#xss-search-container .xss-text-search input[type="text"],
#xss-search-container .xss-search-bar-row input[type="text"] {
    padding:       10px 36px 10px 12px !important;
    /*border:        1px solid #930985 !important;*/
    border-radius: var(--xss-border-radius) !important;
    font-size:     var(--xss-font-size) !important;
    background:    #ffffff !important;
    color:         #202835 !important;
    width:         100% !important;
}

#xss-search-container .xss-filter-item select,
#xss-search-container .xss-dropdown {
    appearance:          none !important;
    -webkit-appearance:  none !important;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23202835' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 12px center !important;
    background-size:     12px 8px !important;
}

/* ---- BUTTONS ---- */

.xss-btn-search,
.xss-btn-reset {
    padding:       10px 20px !important;
    border:        none !important;
    border-radius: var(--xss-border-radius) !important;
    cursor:        pointer !important;
    font-weight:   600 !important;
    font-size:     0.9rem !important;
    margin:        0 !important;
    vertical-align: middle !important;
    transition:    background 0.15s ease;
}

.xss-btn-search {
    background: var(--xss-primary);
    color: #fff;
	/*Klaus*/
	margin-top: -20px !important;
}

.xss-btn-search:hover {
    background: var(--xss-primary-hover);
	/*margin-top: -20px !important;*/
}

.xss-btn-reset {
    background: var(--xss-reset-bg);
    color: var(--xss-reset-color);
	margin-top: -20px !important;
}

.xss-btn-reset:hover {
    background: var(--xss-reset-hover);
}

/* ---- ERGEBNISSE ---- */

.xss-results-container {
    margin-top: 20px;
}

.xss-result-card {
    display:       flex;
    align-items:   stretch;
    gap:           16px;
    background:    var(--xss-card-bg);
    border:        1px solid var(--xss-card-border);
    border-radius: 6px;
    padding:       var(--xss-card-padding);
    margin-bottom: var(--xss-gap);
    /*box-shadow:    0 2px 4px rgba(0, 0, 0, 0.05);*/
    width:         100%;
    transition:    box-shadow 0.18s ease, border-color 0.18s ease;
}

.xss-result-card--linked {
    cursor:   pointer;
    position: relative;
}

/* Ganze Karte klickbar: Die unsichtbare Fläche des Pfeil-Links deckt die ganze Karte ab
   ("Stretched Link"). Es bleibt bei einem einzigen Link pro Karte, Ziel und Tab unverändert. */
.xss-result-card--linked .xss-result-arrow {
    position: static;
}
.xss-result-card--linked .xss-result-arrow::before {
    content:  '';
    position: absolute;
    top:      0;
    right:    0;
    bottom:   0;
    left:     0;
    z-index:  1;
    border-radius: inherit;
}

.xss-result-card--linked:hover {
    box-shadow:   0 4px 14px rgba(0, 0, 0, 0.12);
    border-color: var(--xss-primary);
}

.xss-result-card-body {
    flex:        1;
    min-width:   0;
    align-self:  center;
}

/* ---- TITEL & FELDER (wie JobList) ---- */

.xss-result-title {
    display:         block;
    font-size:       22px;
    font-weight:     700;
    color:           #202835;
    margin-bottom:   16px;
    line-height:     1.4;
    white-space:     normal;
    overflow-wrap:   break-word;
}

#xss-search-container .xss-field-label {
    display:    inline !important;
    color:      #555555;
    font-size:  18px;
}

#xss-search-container .xss-field-value {
    display:     inline !important;
    color:       var(--xss-primary);
    font-weight: 500;
    margin-left: 4px;
    font-size:   18px;
}

#xss-search-container .xss-grid-item,
#xss-search-container .xss-flex-item {
    display:     block !important;
    font-size:   18px;
    margin-top:  3px;
    line-height: 1.4;
}

.xss-grid-item--title,
.xss-flex-item--title {
    margin-top:    0;
    margin-bottom: 6px;
}

/* Handy: kleinerer Stellentitel, damit er in der Regel höchstens 2 Zeilen braucht */
@media (max-width: 767px) {
    .xss-result-title {
        font-size:     17px;
        line-height:   1.3;
        margin-bottom: 10px;
        hyphens:       auto;
    }
    /* Felder unter dem Titel kleiner als der Titel */
    #xss-search-container .xss-field-label,
    #xss-search-container .xss-field-value,
    #xss-search-container .xss-grid-item,
    #xss-search-container .xss-flex-item {
        font-size: 15px;
    }
}
@media (max-width: 400px) {
    .xss-result-title {
        font-size: 16px;
    }
    #xss-search-container .xss-field-label,
    #xss-search-container .xss-field-value,
    #xss-search-container .xss-grid-item,
    #xss-search-container .xss-flex-item {
        font-size: 14px;
    }
}

/* ---- PFEIL-BUTTON (Suchergebnisse) — CSS-Pfeil, font-unabhängig ---- */

.xss-result-arrow {
    flex-shrink:     0;
    align-self:      center;
    width:           40px;
    height:          40px;
    border:          2px solid var(--xss-primary);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--xss-primary);
    text-decoration: none;
    transition:      background 0.18s ease, border-color 0.18s ease;
}

/* Unicode-Zeichen ausblenden — Pfeil kommt aus ::after */
.xss-result-arrow-icon {
    display: none;
}

/* CSS-Pfeil (Chevron) */
.xss-result-arrow::after {
    content:      '';
    display:      block;
    width:        9px;
    height:       9px;
    border-top:   2.5px solid #ffffff;
    border-right: 2.5px solid #ffffff;
    transform:    rotate(45deg) translateX(-2px);
    transition:   border-color 0.18s ease;
    flex-shrink:  0;
}

a.xss-result-arrow:hover,
.xss-result-card--linked:hover .xss-result-arrow {
    background:      #ffffff;
    text-decoration: none;
}

a.xss-result-arrow:hover::after,
.xss-result-card--linked:hover .xss-result-arrow::after {
    border-color: var(--xss-primary);
}

.xss-result-arrow--static {
    opacity: 0.5;
}

/* ---- LADE-OVERLAY ---- */

.xss-loading-overlay {
    display:         none;
    position:        absolute;
    inset:           0;
    background:      rgba(255, 255, 255, 0.82);
    z-index:         10;
    align-items:     center;
    justify-content: center;
    border-radius:   6px;
    min-height:      80px;
}

.xss-loading-overlay.is-visible {
    display: flex;
}

/* Spinner: Kreis mit einer offenen Seite, dreht sich */
.xss-spinner {
    width:        44px;
    height:       44px;
    border:       3px solid rgba(147, 9, 133, 0.2);
    border-top:   3px solid var(--xss-primary);
    border-radius: 50%;
    animation:    xss-spin 0.75s linear infinite;
}

@keyframes xss-spin {
    to { transform: rotate(360deg); }
}

/* ---- FELD-AUSGABE (Fallback-Liste) ---- */

.xss-fallback-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xss-field {
    padding: 6px 0;
    border-bottom: 1px solid var(--xss-field-border);
    font-size: var(--xss-font-size);
}

.xss-field:last-child {
    border-bottom: none;
}

/* ---- PRESET-HINWEIS ---- */

.xss-preset-hint {
    display:       inline-block !important;
    margin-bottom: 16px !important;
    padding:       6px 14px !important;
    background:    #f5f5f5 !important;
    /*border:        1px solid #930985 !important;*/
    border-radius: var(--xss-border-radius) !important;
    font-size:     var(--xss-label-size) !important;
    color:         #202835 !important;
}

/* ---- LADEINDIKATOR ---- */

.xss-loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}