/* ═══════════════════════════════════════════════════════════════
   FLASCHENFINDER | price_history.css (Preisverlauf, Detailseite)
   Eine Linie (2px, Primaerfarbe), Flaeche als 10%-Hauch, Raster als
   Haarlinien. Beschriftung in Textfarben, nie in der Linienfarbe.
   ═══════════════════════════════════════════════════════════════ */
.ff-ph__intro { margin-bottom: 14px; }

.ff-ph__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}
@media (min-width: 768px) { .ff-ph__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ff-ph__stat {
    background: var(--ff-bg);
    border: 1px solid var(--ff-border-light);
    border-radius: var(--ff-radius-md);
    padding: 10px 12px;
}
.ff-ph__stat dt { font-size: 13px; color: var(--ff-text-light); margin: 0 0 2px; }
.ff-ph__stat dd { font-size: 18px; font-weight: 600; color: var(--ff-text); margin: 0; }
.ff-ph__muted { display: block; font-size: 13px; font-weight: 400; color: var(--ff-text-light); }
.ff-ph__badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ff-primary-dark);
    background: #E4F0F0;
    border-radius: var(--ff-radius-pill);
    padding: 1px 8px;
    vertical-align: middle;
}

.ff-ph__chart { margin: 0 0 8px; }
.ff-ph__plot {
    position: relative;
    height: 200px;
    margin-left: 64px;          /* Platz fuer die Euro-Beschriftung */
    margin-right: 8px;
}
@media (min-width: 768px) { .ff-ph__plot { height: 240px; } }
.ff-ph__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ff-ph__line {
    fill: none;
    stroke: var(--ff-primary);
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.ff-ph__area { fill: var(--ff-primary); fill-opacity: .1; stroke: none; }
.ff-ph__grid {
    position: absolute; left: 0; right: 0;
    border-top: 1px solid var(--ff-border-light);
}
.ff-ph__ylabel {
    position: absolute; right: 100%;
    transform: translateY(-50%);
    padding-right: 8px;
    font-size: 12px;
    color: var(--ff-text-light);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ff-ph__dot {
    position: absolute;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--ff-primary);
    box-shadow: 0 0 0 2px var(--ff-bg);
}
.ff-ph__mlabel {
    position: absolute;
    transform: translate(-100%, -150%);
    font-size: 12px;
    font-weight: 600;
    color: var(--ff-text);
    background: var(--ff-bg);
    padding: 0 4px;
    white-space: nowrap;
}
.ff-ph__mlabel--low { transform: translate(-50%, 60%); }
.ff-ph__xaxis {
    position: relative;
    height: 22px;
    margin: 6px 8px 0 64px;
}
.ff-ph__xlabel {
    position: absolute;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--ff-text-light);
    white-space: nowrap;
}
.ff-ph__xlabel--start { transform: none; }
.ff-ph__xlabel--end { transform: translateX(-100%); }

.ff-ph__cross {
    position: absolute; top: 0; bottom: 0;
    border-left: 1px solid var(--ff-text-light);
    pointer-events: none;
}
.ff-ph__tip {
    position: absolute; top: 0;
    transform: translate(-50%, -110%);
    background: var(--ff-text);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: var(--ff-radius-sm);
    white-space: nowrap;
    pointer-events: none;
}
.ff-ph__chart[data-ready] .ff-ph__plot { cursor: crosshair; touch-action: pan-y; }

.ff-ph__table { margin: 8px 0; }
.ff-ph__table summary {
    cursor: pointer;
    color: var(--ff-primary);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.ff-ph__table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ff-ph__table th,
.ff-ph__table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ff-border-light); }
.ff-ph__table td:last-child,
.ff-ph__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }