/*
 * Example-Quote-System
 *
 * Hervorgehobene Zitat-/Prompt-Darstellung für Beispielanfragen.
 *
 * Funktionen:
 * - dekorative obere und untere Linie
 * - große typografische Anführungszeichen
 * - gleichmäßige vertikale Abstände
 * - Standardfarbe basiert auf var(--pcb-green)
 * - Farb-Modifier nutzen globale CSS-Variablen aus der Haupt-CSS
 */


/* =========================================================
   Example Quote
   ========================================================= */

.example-quote {
    --example-quote-color: var(--pcb-green);

    margin: 0;
    color: var(--package-black);
}


/* ---------------------------------------------------------
   Decorative Lines
   --------------------------------------------------------- */

.example-quote__line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.example-quote__rule {
    display: block;
    flex: 1 1 auto;
    height: 1px;

    background: var(--example-quote-color);
}


/* ---------------------------------------------------------
   Quote Marks
   --------------------------------------------------------- */

.example-quote__mark {
    display: block;
    flex: 0 0 auto;

    color: var(--example-quote-color);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 44px;
    font-weight: bold;
    line-height: 0.6;
}

.example-quote__line--top .example-quote__mark {
    transform: translateY(2px);
}

.example-quote__line--bottom .example-quote__mark {
    transform: translateY(1px);
}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.example-quote__content {
    margin: 10px 0;
    padding: 0 28px;

    font-size: 18px;
    font-style: italic;
    line-height: 1.8;
}


/* =========================================================
   Alignment Variants
   ========================================================= */

.example-quote--center .example-quote__content {
    text-align: center;
}

.example-quote--left .example-quote__content {
    text-align: left;
}


/* =========================================================
   Color Variants
   ========================================================= */

.example-quote--green {
    --example-quote-color: var(--pcb-green);
}

.example-quote--green-light {
    --example-quote-color: var(--pcb-green-2);
}

.example-quote--fr4 {
    --example-quote-color: var(--pcb-fr4);
}

.example-quote--black {
    --example-quote-color: var(--package-black);
}

.example-quote--grey {
    --example-quote-color: var(--dark-grey);
}

.example-quote--light-blue {
    --example-quote-color: var(--light-blue);
}

.example-quote--red {
    --example-quote-color: var(--red);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .example-quote__mark {
        font-size: 38px;
    }

    .example-quote__content {
        margin: 14px 0;
        padding: 0 18px;

        font-size: 16px;
        line-height: 1.7;
    }

}