.gastroampel {
    --ga-green: #2f9e5b;
    --ga-yellow: #e9a316;
    --ga-red: #d6403a;
    --ga-grey: #9aa1a9;
    --ga-text: #1f2933;
    --ga-muted: #5f6b76;
    --ga-border: #e3e7eb;
    --ga-bg: #ffffff;
    --ga-soft: #f4f6f8;
    color: var(--ga-text);
    font: inherit;
}

.gastroampel__head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--ga-soft);
    border-radius: 14px;
    margin-bottom: 1rem;
}
.gastroampel__signal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #2b2f36;
    border-radius: 12px;
    flex: none;
}
.gastroampel__lamp {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    opacity: .22;
}
.gastroampel__lamp.is-on { opacity: 1; box-shadow: 0 0 10px currentColor; }
.gastroampel__lamp--red { background: var(--ga-red); color: var(--ga-red); }
.gastroampel__lamp--yellow { background: var(--ga-yellow); color: var(--ga-yellow); }
.gastroampel__lamp--green { background: var(--ga-green); color: var(--ga-green); }
.gastroampel__headline { margin: 0; font-size: 1.15rem; }
.gastroampel__stand { margin: .25rem 0 0; color: var(--ga-muted); font-size: .875rem; }

.gastroampel__filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.gastroampel__filter button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid var(--ga-border);
    border-radius: 999px;
    background: var(--ga-bg);
    color: inherit;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.gastroampel__filter button span { color: var(--ga-muted); }
.gastroampel__filter button.is-active { background: var(--ga-text); border-color: var(--ga-text); color: #fff; }
.gastroampel__filter button.is-active span { color: rgba(255,255,255,.75); }
.gastroampel .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.gastroampel .dot--green { background: var(--ga-green); }
.gastroampel .dot--yellow { background: var(--ga-yellow); }
.gastroampel .dot--red { background: var(--ga-red); }

.gastroampel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.gastroampel__card {
    --ga-status: var(--ga-grey);
    display: flex;
    flex-direction: column;
    background: var(--ga-bg);
    border: 1px solid var(--ga-border);
    border-top: 5px solid var(--ga-status);
    border-radius: 14px;
    overflow: hidden;
}
.gastroampel__card[hidden] { display: none; }
.gastroampel__card--green { --ga-status: var(--ga-green); }
.gastroampel__card--yellow { --ga-status: var(--ga-yellow); }
.gastroampel__card--red { --ga-status: var(--ga-red); }
.gastroampel__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gastroampel__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.gastroampel__status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .95rem; }
.gastroampel__status strong { color: var(--ga-status); }
.gastroampel__card--yellow .gastroampel__status strong { color: #a86f00; }
.gastroampel__light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ga-status);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ga-status) 22%, transparent);
}
.gastroampel__card--green .gastroampel__light { animation: gastroampel-pulse 2.4s ease-in-out infinite; }
.gastroampel__detail { width: 100%; color: var(--ga-muted); font-size: .875rem; }

.gastroampel__name { margin: .25rem 0 0; font-size: 1.15rem; line-height: 1.3; }
.gastroampel__meta { margin: 0; color: var(--ga-muted); font-size: .875rem; }
.gastroampel__teaser { margin: 0; }

.gastroampel__offers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.gastroampel__offers li { padding: .2rem .6rem; background: var(--ga-soft); border-radius: 999px; font-size: .8rem; }

.gastroampel__hours { font-size: .875rem; }
.gastroampel__hours summary { cursor: pointer; color: var(--ga-muted); }
.gastroampel__hours ul { list-style: none; margin: .4rem 0 0; padding: 0; line-height: 1.6; }

.gastroampel__links { margin: auto 0 0; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9rem; }

.gastroampel__empty { color: var(--ga-muted); }
.gastroampel__note { margin-top: 1.25rem; color: var(--ga-muted); font-size: .8rem; }

@keyframes gastroampel-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ga-status) 22%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ga-status) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .gastroampel__card--green .gastroampel__light { animation: none; }
}
@media (max-width: 480px) {
    .gastroampel__head { padding: 1rem; gap: 1rem; }
    .gastroampel__list { grid-template-columns: 1fr; }
}