/*
 * Schäfer-Lehmann-Brennofen-Outlet-Plugin – style.css
 * Farben: Weiß + gedämpftes Rot / Rosé-Akzente
 * Layout: 1 Spalte (mobil) → 2 Spalten (≥ 640 px)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

/* ── Designvariablen ── */
:root {
    --bfo-bg:           #ffffff;
    --bfo-surface:      #fdfafa;
    --bfo-border:       #f0e6e6;
    --bfo-shadow:       rgba(180, 40, 40, 0.08);

    --bfo-red:          #c0392b;
    --bfo-red-dark:     #962d22;
    --bfo-red-light:    #e8c5c2;
    --bfo-red-muted:    #f5eeee;

    --bfo-text:         #1a1212;
    --bfo-text-body:    #4a3f3f;
    --bfo-text-dim:     #9b8888;

    --bfo-radius:       10px;
    --bfo-radius-sm:    6px;
    --bfo-transition:   0.22s ease;

    --bfo-font-head:    'Playfair Display', Georgia, serif;
    --bfo-font-body:    'Source Sans 3', 'Helvetica Neue', sans-serif;
}


/* ══════════════════════════════════════════════════════════════
 *  GRID
 * ══════════════════════════════════════════════════════════════ */
.bfo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 1.5rem 0;
}

@media (min-width: 640px) {
    .bfo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}


/* ══════════════════════════════════════════════════════════════
 *  KARTE
 * ══════════════════════════════════════════════════════════════ */
.bfo-card {
    position: relative;
    background: var(--bfo-surface);
    border: 1px solid var(--bfo-border);
    border-radius: var(--bfo-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 3px var(--bfo-shadow),
        0 4px 12px var(--bfo-shadow);
    transition:
        transform var(--bfo-transition),
        box-shadow var(--bfo-transition);
}

.bfo-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 2px 6px var(--bfo-shadow),
        0 12px 28px rgba(180, 40, 40, 0.13);
}


/* ── Verkaufstyp-Banner (oben links) ── */
.bfo-verkaufstyp {
    position: absolute;
    top: 0.75rem;
    left: 0;
    z-index: 10;
    font-family: var(--bfo-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem 0.3rem 0.65rem;
    border-radius: 0 var(--bfo-radius-sm) var(--bfo-radius-sm) 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.bfo-vt--eigenverkauf  { background: var(--bfo-red); color: #fff; }
.bfo-vt--kundenauftrag { background: #3d2b2b; color: #f5e8e8; }


/* ── Bild-Block ── */
.bfo-card__bild-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bfo-red-muted);
}

.bfo-card__bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.bfo-card:hover .bfo-card__bild {
    transform: scale(1.04);
}

.bfo-card__bild--placeholder {
    background: linear-gradient(135deg, var(--bfo-red-muted) 40%, #f8efef 100%);
}
.bfo-card__bild--placeholder::after {
    content: '🔥';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    opacity: 0.3;
}


/* ── Fotobeschreibung (Overlay) ── */
.bfo-card__fotobeschreibung {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.6rem 1rem;
    font-family: var(--bfo-font-body);
    font-size: 0.78rem;
    font-style: italic;
    color: #fff;
    background: linear-gradient(to top, rgba(30,10,10,.7) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--bfo-transition), transform var(--bfo-transition);
}

.bfo-card:hover .bfo-card__fotobeschreibung {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    .bfo-card__fotobeschreibung { opacity: 1; transform: none; }
}


/* ── Titel & Text ── */
.bfo-card__titel {
    font-family: var(--bfo-font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bfo-text);
    margin: 1.1rem 1.1rem 0.4rem;
    line-height: 1.35;
}

.bfo-card__text {
    font-family: var(--bfo-font-body);
    font-size: 0.9rem;
    color: var(--bfo-text-body);
    line-height: 1.65;
    margin: 0 1.1rem 1.1rem;
    flex-grow: 1;
}


/* ── Meta-Leiste: Zustand + Preis ── */
.bfo-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--bfo-border);
    margin-top: auto;
}


/* ── Zustand-Badge ── */
.bfo-badge {
    display: inline-block;
    font-family: var(--bfo-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--bfo-radius-sm);
    padding: 0.28rem 0.7rem;
    background: var(--bfo-red-light);
    color: var(--bfo-red);
    border: 1px solid color-mix(in srgb, var(--bfo-red) 20%, transparent);
}

.bfo-badge--neu        { background: #d4edda; color: #1d6a34; border-color: #a8d5b5; }
.bfo-badge--wie-neu    { background: #d1ecf1; color: #0c5460; border-color: #9dd7e2; }
.bfo-badge--sehr-gut   { background: #fff3cd; color: #856404; border-color: #ffd98e; }
.bfo-badge--gut        { background: var(--bfo-red-light); color: var(--bfo-red); }
.bfo-badge--akzeptabel { background: #e8e8e8; color: #555;   border-color: #ccc; }


/* ── Preis ── */
.bfo-card__preis {
    font-family: var(--bfo-font-head);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bfo-red);
    white-space: nowrap;
    letter-spacing: -0.01em;
}


/* ══════════════════════════════════════════════════════════════
 *  KONTAKT-BUTTON
 * ══════════════════════════════════════════════════════════════ */
.bfo-card__footer {
    padding: 0.9rem 1.1rem 1.1rem;
    border-top: 1px solid var(--bfo-border);
}

.bfo-kontakt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;

    font-family: var(--bfo-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff;

    background: var(--bfo-red);
    border: 2px solid var(--bfo-red);
    border-radius: var(--bfo-radius-sm);
    padding: 0.65rem 1rem;

    cursor: pointer;
    transition:
        background var(--bfo-transition),
        border-color var(--bfo-transition),
        transform var(--bfo-transition),
        box-shadow var(--bfo-transition);
}

.bfo-kontakt-btn:hover,
.bfo-kontakt-btn:focus-visible {
    background: var(--bfo-red-dark);
    border-color: var(--bfo-red-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.35);
    outline: none;
}

.bfo-kontakt-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.bfo-kontakt-btn svg {
    flex-shrink: 0;
    transition: transform var(--bfo-transition);
}

.bfo-kontakt-btn:hover svg {
    transform: scale(1.15);
}


/* ── Leer-Meldung ── */
.bfo-leer {
    font-family: var(--bfo-font-body);
    color: var(--bfo-text-dim);
    text-align: center;
    padding: 2rem 0;
}


/* ══════════════════════════════════════════════════════════════
 *  RESPONSIVE FEINTUNING
 * ══════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
    .bfo-card__meta {
        flex-direction: column;
        align-items: flex-start;
    }
    .bfo-card__preis { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bfo-card,
    .bfo-card__bild,
    .bfo-card__fotobeschreibung,
    .bfo-kontakt-btn  { transition: none; }
    .bfo-card:hover   { transform: none; }
    .bfo-card:hover .bfo-card__bild { transform: none; }
    .bfo-kontakt-btn:hover { transform: none; box-shadow: none; }
}