/* ==========================================================================
   fcb.css - gemeinsame Gestaltung von HurliBurli.de

   Wird von der Sammlungsansicht (fcbdata/) und der Website eingebunden.
   Enthaelt nur, was beide brauchen: Farben, Schrift, Kopf, Knoepfe.
   Keine Regeln fuer nackte Elemente ausser body und a - sonst wirkt diese
   Datei in Seiten hinein, fuer die sie nicht gemacht ist.

   Was nur die Sammlung braucht, steht in sammlung.css.
   ========================================================================== */

/* ---------- Grundwerte ---------- */
:root{
  --rot:#dc052d; --rot-dunkel:#a80323; --blau:#0066b2; --text:#16181d; --grau:#6b7280;
  --linie:#d8dbe0; --flaeche:#fff; --grund:#f2f3f5; --radius:10px;
  --schatten:0 1px 2px rgba(16,24,40,.06);
  --schatten-hoch:0 4px 12px rgba(16,24,40,.13);
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
     font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
      padding:10px 20px;background:var(--flaeche);
      border-bottom:3px solid var(--rot);box-shadow:var(--schatten)}
.kopf .logo img{height:64px;width:auto;display:block}
.titel{flex:1;min-width:0}
.titel h1{margin:0;font-size:25px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.titel p{margin:2px 0 0;font-size:13px;color:var(--grau)}

/* ---------- Knoepfe ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-block;padding:6px 13px;border:1px solid var(--linie);border-radius:999px;
      font-size:14px;font-weight:500;color:var(--text);background:var(--flaeche);
      line-height:1.35;box-shadow:var(--schatten);transition:.12s}
.chip:hover{border-color:var(--rot);color:var(--rot);box-shadow:var(--schatten-hoch);
            transform:translateY(-1px);text-decoration:none}
.chip:active{transform:translateY(0);box-shadow:var(--schatten)}
.chip.aktiv{background:var(--rot);border-color:var(--rot-dunkel);color:#fff;
            box-shadow:0 2px 8px rgba(220,5,45,.4)}
.chip.aktiv:hover{color:#fff;background:var(--rot-dunkel)}

/* ---------- Bier und Bulette ---------- */
.spende{display:block;margin:20px auto 0;width:150px}
.spende img{display:block;width:150px;height:auto;border-radius:8px;
            box-shadow:var(--schatten);transition:.12s}
.spende:hover img{box-shadow:var(--schatten-hoch);transform:translateY(-1px)}

/* ---------- Breiten ---------- */
/* Dazwischen wird es im Kopf eng - die Ueberschrift eine Stufe kleiner,
   damit sie nicht umbricht. */
@media (max-width:1100px){ .titel h1{font-size:20px} }

@media (max-width:860px){
  .kopf{gap:12px;padding:8px 12px}
  .kopf .logo img{height:44px}
  .titel h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .titel p{display:none}   /* umbricht sonst mehrzeilig und macht den Kopf hoch */
}