/* ==================================================
   AI SEARCH CSS – STUFE I
   ==================================================
   Nur KI-spezifische Hilfsregeln.
   Das Grunddesign der Seite kommt aus content.css.
   ================================================== */






/* ==================================================
   NUR STARTBEREICH: linke + rechte Kachel
   ================================================== */

.ai-search-simulator {
    display: block;
    width: 100%;
}

.ai-search-start__intro {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    text-align: center;
}

.ai-search-start__title {
    width: 100%;
    text-align: center !important;
}

.ai-search-start__intro p {
    margin: 0;
    font-size: 10px;
    text-align: center;
}

.ai-search-simulator .analysis-tool__form {
    width: 100%;
}

.ai-search-simulator .analysis-tool__form-grid--button {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.ai-search-simulator .analysis-tool__hint,
.ai-provider-panel p {
    font-size: 10px;
}

.ai-provider-panel #aiProviderIntro p {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}

.analysis-tool__loading:not([hidden]) {
    display: flex;
    align-items: center;
}

#aiQuestions {
    margin-top: 14px;
}

#aiQuestions li {
    margin-bottom: 8px;
}

#aiQuestions li:last-child {
    margin-bottom: 0;
}

#aiMessage.is-error {
    color: var(--analysis-error);
}

@media (max-width: 900px) {
    }

/* Dynamische Breite der Score-Leiste ohne Inline-Styles im JavaScript. */
.ai-score-0 { width: 0%; }
.ai-score-1 { width: 1%; }
.ai-score-2 { width: 2%; }
.ai-score-3 { width: 3%; }
.ai-score-4 { width: 4%; }
.ai-score-5 { width: 5%; }
.ai-score-6 { width: 6%; }
.ai-score-7 { width: 7%; }
.ai-score-8 { width: 8%; }
.ai-score-9 { width: 9%; }
.ai-score-10 { width: 10%; }
.ai-score-11 { width: 11%; }
.ai-score-12 { width: 12%; }
.ai-score-13 { width: 13%; }
.ai-score-14 { width: 14%; }
.ai-score-15 { width: 15%; }
.ai-score-16 { width: 16%; }
.ai-score-17 { width: 17%; }
.ai-score-18 { width: 18%; }
.ai-score-19 { width: 19%; }
.ai-score-20 { width: 20%; }
.ai-score-21 { width: 21%; }
.ai-score-22 { width: 22%; }
.ai-score-23 { width: 23%; }
.ai-score-24 { width: 24%; }
.ai-score-25 { width: 25%; }
.ai-score-26 { width: 26%; }
.ai-score-27 { width: 27%; }
.ai-score-28 { width: 28%; }
.ai-score-29 { width: 29%; }
.ai-score-30 { width: 30%; }
.ai-score-31 { width: 31%; }
.ai-score-32 { width: 32%; }
.ai-score-33 { width: 33%; }
.ai-score-34 { width: 34%; }
.ai-score-35 { width: 35%; }
.ai-score-36 { width: 36%; }
.ai-score-37 { width: 37%; }
.ai-score-38 { width: 38%; }
.ai-score-39 { width: 39%; }
.ai-score-40 { width: 40%; }
.ai-score-41 { width: 41%; }
.ai-score-42 { width: 42%; }
.ai-score-43 { width: 43%; }
.ai-score-44 { width: 44%; }
.ai-score-45 { width: 45%; }
.ai-score-46 { width: 46%; }
.ai-score-47 { width: 47%; }
.ai-score-48 { width: 48%; }
.ai-score-49 { width: 49%; }
.ai-score-50 { width: 50%; }
.ai-score-51 { width: 51%; }
.ai-score-52 { width: 52%; }
.ai-score-53 { width: 53%; }
.ai-score-54 { width: 54%; }
.ai-score-55 { width: 55%; }
.ai-score-56 { width: 56%; }
.ai-score-57 { width: 57%; }
.ai-score-58 { width: 58%; }
.ai-score-59 { width: 59%; }
.ai-score-60 { width: 60%; }
.ai-score-61 { width: 61%; }
.ai-score-62 { width: 62%; }
.ai-score-63 { width: 63%; }
.ai-score-64 { width: 64%; }
.ai-score-65 { width: 65%; }
.ai-score-66 { width: 66%; }
.ai-score-67 { width: 67%; }
.ai-score-68 { width: 68%; }
.ai-score-69 { width: 69%; }
.ai-score-70 { width: 70%; }
.ai-score-71 { width: 71%; }
.ai-score-72 { width: 72%; }
.ai-score-73 { width: 73%; }
.ai-score-74 { width: 74%; }
.ai-score-75 { width: 75%; }
.ai-score-76 { width: 76%; }
.ai-score-77 { width: 77%; }
.ai-score-78 { width: 78%; }
.ai-score-79 { width: 79%; }
.ai-score-80 { width: 80%; }
.ai-score-81 { width: 81%; }
.ai-score-82 { width: 82%; }
.ai-score-83 { width: 83%; }
.ai-score-84 { width: 84%; }
.ai-score-85 { width: 85%; }
.ai-score-86 { width: 86%; }
.ai-score-87 { width: 87%; }
.ai-score-88 { width: 88%; }
.ai-score-89 { width: 89%; }
.ai-score-90 { width: 90%; }
.ai-score-91 { width: 91%; }
.ai-score-92 { width: 92%; }
.ai-score-93 { width: 93%; }
.ai-score-94 { width: 94%; }
.ai-score-95 { width: 95%; }
.ai-score-96 { width: 96%; }
.ai-score-97 { width: 97%; }
.ai-score-98 { width: 98%; }
.ai-score-99 { width: 99%; }
.ai-score-100 { width: 100%; }

/* ==================================================
   KI-SUCHANALYSE: NUR INHALT DER LINKEN START-CARD
   Das äußere Grid und .card kommen weiterhin aus content.css.
   ================================================== */

.ai-search-start-inner {
    width: 100%;
}

.ai-search-start-h2 {
    margin: 0 0 14px !important;
    text-align: center !important;
}

.ai-search-start-h3 {
    margin: 0 0 30px !important;
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-shadow: none !important;
}

.ai-search-start-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.ai-search-start-field {
    min-width: 0;
}

.ai-search-start-label {
    display: block;
    margin: 0 0 7px;
    color: #203665;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
}

.ai-search-start-input {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #b9c6d2;
    border-radius: 6px;
    background: #ffffff;
    color: #1f2937;
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.3;
}

.ai-search-start-input:focus {
    border-color: #244c7c;
    outline: 3px solid rgba(36, 76, 124, 0.14);
}

.ai-search-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 270px;
    min-height: 48px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 6px;
    background: #244c7c;
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    cursor: pointer;
}

.ai-search-start-button:hover {
    background: #173657;
}

.ai-search-start-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.ai-search-loading {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: 6px;
    margin: 14px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(32, 54, 101, 0.18);
}

.ai-search-loading[hidden] {
    display: none;
}

.ai-search-loading-bar {
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: #81ab2e;
    animation: ai-search-loading-move 1.1s ease-in-out infinite;
}

@keyframes ai-search-loading-move {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(320%);
    }
}

@media (max-width: 760px) {
    .ai-search-start-h3 br {
        display: none;
    }

    .ai-search-start-form {
        grid-template-columns: 1fr;
    }

    .ai-search-start-button {
        width: 100%;
        min-width: 0;
    }
}

/* ==================================================
   SIMULIERTE KI-ANTWORT IN DER LINKEN STARTKACHEL
   ================================================== */

.ai-search-start-answer {
    width: 100%;
    max-width: 820px;
    margin: 24px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(32, 54, 101, 0.25);
}

.ai-search-start-answer[hidden] {
    display: none;
}

.ai-search-start-answer-title {
    margin: 0 0 10px !important;
    color: #203665;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-shadow: none !important;
}

.ai-search-start-answer-text {
    margin: 0 !important;
    color: #203665 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* ==================================================
   RECHTE STARTKACHEL: FLACHE ANBIETERLISTE
   Keine innere Kachel / kein weißer Container.
   ================================================== */

.ai-provider-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ai-provider-list[hidden] {
    display: none;
}

.ai-provider-item {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(32, 54, 101, 0.22);
    background: transparent;
}

.ai-provider-item:last-child {
    border-bottom: 0;
}

.ai-provider-name,
.ai-provider-domain,
.ai-provider-type {
    display: block;
    overflow-wrap: anywhere;
}

.ai-provider-name {
    color: #203665;
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 700;
}

.ai-provider-domain,
.ai-provider-type {
    margin-top: 2px;
    color: #203665;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 400;
}

.ai-provider-empty {
    margin: 18px 0 0;
    padding: 0;
    color: #203665;
    font-size: 10px;
    line-height: 1.4;
}