/* ===========================================================================
   Herkunftshinweis — EIN Aussehen für alle Kästen der Art
   „woher kommt dieser Inhalt und wie sehr kannst du ihm trauen".

   Markup:    templates/herkunft/herkunft-hinweis.html
   Verhalten: src/features/shared/task-editor/herkunftHinweis.js

   Benutzt vom Bild-Import (was nicht entziffert wurde) und vom Ergänzen
   (welche Felder erfunden wurden). Vorher hatte der Bild-Kasten sein eigenes
   Aussehen — der zweite hätte es kopiert, und ab dann wären es zwei Stellen
   für dieselbe Sache.

   Alle Farben über die Variablen aus `variables.css`: hart gesetzte Werte
   brechen beim Aussehenswechsel.
   =========================================================================== */

.herkunft-hinweis {
    position: relative;
    margin-bottom: 1rem;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--color-success-text);
    background: var(--color-success-tint);
    color: var(--color-success-text);
}

/* Die drei Stufen. Sie kommen als `data-stufe` aus dem JavaScript, das die fachliche
   Entscheidung trifft — die Bedeutung der Farbe steht hier. */
.herkunft-hinweis[data-stufe="mittel"] {
    border-left-color: var(--color-warning-deep);
    background: var(--color-warning-light);
    color: var(--color-warning-deep);
}

.herkunft-hinweis[data-stufe="niedrig"] {
    border-left-color: var(--color-error-text);
    background: var(--color-error-light);
    color: var(--color-error-text);
}

.herkunft-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.herkunft-symbol {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
}

.herkunft-text {
    margin: 0.375rem 0 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.herkunft-liste {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.herkunft-punkt {
    margin-bottom: 0.125rem;
}

.herkunft-schliessen {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    border-radius: 0.25rem;
}

.herkunft-schliessen:hover {
    opacity: 1;
    background: var(--color-bg-dark);
}