/* Auflistungen — Frontend. Theme-adaptiv: erbt Schrift/Farbe, Akzent via --afl-accent. */
.afl { --afl-accent: #c0392b; --afl-line: color-mix(in srgb, currentColor 14%, transparent); --afl-mut: color-mix(in srgb, currentColor 62%, transparent); --afl-soft: color-mix(in srgb, currentColor 5%, transparent); --afl-pad: 1rem; font-size: 1rem; }
.afl--d-tight  { --afl-pad: .6rem; }
.afl--d-airy   { --afl-pad: 1.5rem; }
.afl *, .afl *::before, .afl *::after { box-sizing: border-box; }

.afl-head { margin-bottom: 1.4rem; }
.afl-title { margin: 0 0 .2rem; }
.afl-subtitle { margin: 0; color: var(--afl-mut); font-size: 1.05rem; }
.afl-desc { margin: .5rem 0 0; color: var(--afl-mut); }
.afl-empty { color: var(--afl-mut); font-style: italic; padding: 1rem 0; }
.afl-group { font-size: 1.15rem; margin: 1.6rem 0 .7rem; padding-bottom: .3rem; border-bottom: 2px solid var(--afl-accent); display: inline-block; }

/* Filterleiste */
.afl-filter { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.afl-search { padding: .5rem .8rem; border: 1px solid var(--afl-line); border-radius: 999px; font: inherit; min-width: 200px; background: var(--afl-soft); color: inherit; }
.afl-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.afl-chip { padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--afl-line); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.afl-chip.is-active { background: var(--afl-accent); color: #fff; border-color: var(--afl-accent); }

/* Gemeinsame Zell-Typen */
.afl-item-title { font-weight: 700; }
.afl-item-desc { margin: .25rem 0 0; color: var(--afl-mut); font-size: .92rem; line-height: 1.45; }
.afl-item-meta { margin-top: .3rem; color: var(--afl-mut); font-size: .82rem; }
.afl-price, .afl-menu-price, .afl-card-price, .afl-cl-price { font-weight: 700; color: var(--afl-accent); white-space: nowrap; }
.afl-num { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--afl-soft); font-size: .82em; font-weight: 700; }
.afl-badges { display: inline-flex; gap: .3rem; flex-wrap: wrap; vertical-align: middle; }
.afl-badge { --afl-badge: #666; display: inline-block; background: var(--afl-badge); color: #fff; border-radius: 999px; padding: .08em .55em; font-size: .72em; font-weight: 600; line-height: 1.4; }
.afl-stars { color: var(--afl-line); letter-spacing: 1px; white-space: nowrap; }
.afl-star--on { color: var(--afl-accent); }
.afl-star--half { background: linear-gradient(90deg, var(--afl-accent) 50%, color-mix(in srgb, currentColor 22%, transparent) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.afl-bool--on { color: #16a34a; font-weight: 700; }
.afl-bool--off { color: var(--afl-mut); }
.afl-link { color: var(--afl-accent); text-decoration: none; font-weight: 600; font-size: .9em; }
.afl-link:hover { text-decoration: underline; }
.afl-color { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 4px; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--afl-line); }
.afl-img { width: 100%; height: auto; display: block; }
.afl-sold { display: inline-block; margin-top: .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #dc2626; }
.afl-item--sold { opacity: .55; }

/* Klickbar */
.afl--clickable .is-clickable { cursor: pointer; transition: background .12s, transform .12s; }
.afl--clickable .is-clickable:hover { background: var(--afl-soft); }
.afl--clickable .is-clickable:focus-visible { outline: 2px solid var(--afl-accent); outline-offset: 2px; }

/* ---------- SPEISEKARTE (menu) ---------- */
.afl-menu { display: flex; flex-direction: column; }
.afl-menu-item { display: flex; gap: .9rem; align-items: flex-start; padding: var(--afl-pad) .3rem; border-bottom: 1px solid var(--afl-line); border-radius: 8px; }
.afl-menu-item:last-child { border-bottom: 0; }
.afl-menu-main { flex: 1; min-width: 0; }
.afl-menu-line { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.afl-menu-no { margin-right: .1rem; }
.afl-leader { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--afl-line); align-self: flex-end; transform: translateY(-.28em); }
.afl-menu-rating { margin-top: .25rem; }
.afl-menu-go { align-self: center; color: var(--afl-mut); font-size: 1.4rem; line-height: 1; }
.afl-thumb { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--afl-soft); }
.afl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- KARTEN & RASTER ---------- */
.afl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.afl-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.afl-card { border: 1px solid var(--afl-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: var(--afl-soft); position: relative; }
.afl-card .afl-thumb { width: 100%; height: 160px; border-radius: 0; }
.afl-grid .afl-card .afl-thumb { height: 120px; }
.afl-card-body { padding: var(--afl-pad); display: flex; flex-direction: column; gap: .35rem; }
.afl-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.afl-card-no { position: absolute; top: .5rem; left: .5rem; z-index: 1; }
.afl-card-badges { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ---------- KOMPAKTE LISTE ---------- */
.afl-clist { list-style: none; margin: 0; padding: 0; }
.afl-clist .afl-item { display: flex; align-items: center; gap: .7rem; padding: calc(var(--afl-pad) * .7) .3rem; border-bottom: 1px solid var(--afl-line); }
.afl-cl-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--afl-soft); }
.afl-cl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.afl-cl-main { flex: 1; min-width: 0; }
.afl-cl-desc { display: block; color: var(--afl-mut); font-size: .85rem; }
.afl-cl-go { color: var(--afl-mut); }

/* ---------- TABELLE ---------- */
.afl-tablewrap { overflow-x: auto; }
.afl-table { width: 100%; border-collapse: collapse; }
.afl-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--afl-line); vertical-align: middle; }
/* Vertikale Spaltenlinien (dünn) — nicht hinter der letzten Spalte. */
.afl-table td:not(:last-child) { border-right: 1px solid var(--afl-line); }
/* Bilder in der Tabelle: einheitlich klein & quadratisch, passend zur Zeilenhöhe
   (statt spaltenbreit). object-fit:cover → alle Bilder exakt gleich groß & breit. */
.afl-table .afl-img { width: 48px; height: 48px; object-fit: cover; display: inline-block; vertical-align: middle; }
.afl-al-center { text-align: center; }
.afl-al-right { text-align: right; }
.afl-cell--go { color: var(--afl-mut); width: 1.5rem; text-align: right; }
@media (max-width: 620px) { .afl-hide-mobile { display: none; } }

/* ---------- POPUP ---------- */
.afl-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.afl-modal[hidden] { display: none; }
.afl-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.afl-modal__box { position: relative; z-index: 1; background: canvas, #fff; background: Canvas; color: CanvasText; max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
@supports not (background: Canvas) { .afl-modal__box { background: #fff; color: #1a1a1a; } }
.afl-modal__x { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); font-size: 1.3rem; line-height: 1; cursor: pointer; color: inherit; }
.afl-modal__x:hover { background: rgba(0,0,0,.16); }
.afl-pl-img img { width: 100%; height: auto; display: block; }
.afl-pl-content { padding: 1.3rem 1.4rem 1.5rem; }
.afl-pl-title { margin: 0 0 .8rem; }
.afl-pl-rows { display: flex; flex-direction: column; gap: .5rem; }
.afl-pl-row { display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; padding-bottom: .5rem; border-bottom: 1px solid var(--afl-line); }
.afl-pl-row:last-child { border-bottom: 0; }
.afl-pl-label { color: var(--afl-mut); font-size: .85rem; font-weight: 600; flex: 0 0 auto; }
.afl-pl-value { text-align: right; }
.afl-pl-value .afl-multiline, .afl-pl-row:has(.afl-multiline) { text-align: left; }
/* image_top ist Standard (Bild oben, dann Inhalt) */
.afl-pl--image_left .afl-pl { display: flex; }
.afl-pl--image_left .afl-pl-img { flex: 0 0 42%; }
.afl-pl--image_left .afl-pl-img img { height: 100%; object-fit: cover; }
.afl-pl--text_only .afl-pl-img { display: none; }
.afl-pl--card .afl-pl-content { padding: 1.5rem; }
.afl-cta { display: inline-block; margin-top: 1.2rem; padding: .7rem 1.3rem; border-radius: 10px; font-weight: 700; text-decoration: none; text-align: center; }
.afl-cta--primary { background: var(--afl-accent); color: #fff; }
.afl-cta--outline { border: 2px solid var(--afl-accent); color: var(--afl-accent); }
.afl-cta:hover { filter: brightness(1.08); }

/* Übersichtsseite */
.afl-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.afl-index-card { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem; border: 1px solid var(--afl-line, #e5e7eb); border-radius: 12px; text-decoration: none; color: inherit; }
.afl-index-card:hover { border-color: var(--afl-accent, #c0392b); }
.afl-index-title { font-weight: 700; }
.afl-index-sub { color: color-mix(in srgb, currentColor 60%, transparent); font-size: .9rem; }