/*
 * Kaufberatungskasten auf der Ergebnisseite.
 *
 * Alle Farben und Masse kommen aus den Marken-Token in dfi.css, die
 * ihrerseits aus CORPORATE-IDENTITY.md stammen. Hier steht kein einziger
 * Festwert -- wer die Marke aendert, aendert sie an einer Stelle.
 *
 * Der Kasten auf /cms/velux-hitzeschutz-markise/ war das gestalterische
 * Vorbild. Zwei Werte dort liegen knapp neben der CI (Rahmen #e6e0d8 statt
 * #EFE7DB, Amber #E8A33D statt #E0A04A) und der Amazon-Knopf ist
 * Amazon-Dunkelblau statt Terrakotta. Da die CI laut eigenem Schlusssatz die
 * oberste Referenz ist, gilt hier die CI: Knopf gefuellt Terrakotta,
 * Radius 9px, Affiliate-Knoepfe ueber die volle Breite (CI Abschnitt 5).
 */

.dfab {
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--dfi-rahmen);
    border-radius: var(--dfi-radius-karte);
    background: var(--dfi-surface);
}

/* Auf grossen Schirmen laeuft der Kasten neben den Fensterdaten mit. */
@media (min-width: 992px) {
    .dfab {
        position: sticky;
        top: 1.5rem;
    }
}

.dfab__titel {
    font-family: var(--dfi-serif);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin: 0 0 .25rem;
    color: var(--dfi-tinte);
}

.dfab__hinweis {
    color: var(--dfi-muted);
    font-size: .88rem;
    margin: 0 0 .5rem;
}

/* Innere Panels auf Creme, damit sie sich von der Surface-Karte absetzen,
   ohne eine neue Farbe einzufuehren. */
.dfab__row {
    margin: .9rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--dfi-rahmen);
    border-radius: var(--dfi-radius-panel);
    background: var(--dfi-creme);
}

.dfab__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .7rem;
}

.dfab__name {
    font-weight: 700;
    font-size: 1.06rem;
    color: var(--dfi-tinte);
}

/* Preise sind Kennzahlen -- laut CI in Newsreader. */
.dfab__preis {
    font-family: var(--dfi-serif);
    font-weight: 500;
    color: var(--dfi-muted);
    font-size: .95rem;
}

.dfab__unter {
    color: var(--dfi-muted);
    font-size: .9rem;
    margin: .25rem 0 .5rem;
}

.dfab__liste {
    list-style: none;
    margin: 0 0 .8rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .1rem .9rem;
}

.dfab__liste li {
    margin: 0;
    padding: 0;
    font-size: .86rem;
    line-height: 1.5;
}

/* Vor- und Nachteil sind eine Wertung -- dafuer ist die Ampel-Skala da. */
.dfab__plus  { color: var(--dfi-ampel-gut); }
.dfab__minus { color: var(--dfi-muted); }

/* CI Abschnitt 5: Affiliate-Knoepfe volle Breite, gefuellt Terrakotta. */
.dfab__knopf {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--dfi-terrakotta);
    color: var(--dfi-surface);
    text-decoration: none;
    font-family: var(--dfi-sans);
    font-weight: 600;
    font-size: .95rem;
    padding: .6rem 1.15rem;
    border-radius: var(--dfi-radius-knopf);
}

.dfab__knopf:hover,
.dfab__knopf:focus {
    background: var(--dfi-terrakotta-hover);
    color: var(--dfi-surface);
}

.dfab__fuss {
    color: var(--dfi-muted);
    font-size: .78rem;
    margin: .7rem 0 0;
    line-height: 1.4;
}

.dfab__fuss a { color: inherit; }