/* ============================================================================
   RAW'FILERS — CONTENT REVIEW TOOL
   Design-System "Editorial"  ·  v1.0
   ----------------------------------------------------------------------------
   Diese Datei ist die EINZIGE QUELLE für Farben, Schrift, Abstände und
   Komponenten-Styles. In jede interne Seite einbinden via:
       <link rel="stylesheet" href="/assets/design-system.css">
   (Pfad je nach Server-Struktur anpassen.)

   Grundprinzipien des Redesigns:
   - Editorial/Magazin-Look: Bild ist der Held, Titel groß, viel Weißraum
   - Reines Sans-Serif (Avenir, mit Fallback), Weiß + Hellgrau-Töne
   - Eine Akzentfarbe pro Bedeutung — niemals bunt um des Buntseins willen
   - Grün = Freigegeben, Rot = Abgelehnt (fix), restliche Status gedämpft
   - Hashtags im Social-Link-Blau
============================================================================ */

/* ----------------------------------------------------------------------------
   SCHRIFT
   Avenir wird selbst gehostet (woff2) über fonts.css — diese Datei VOR
   design-system.css laden. Dadurch sieht es auf Mac UND Windows identisch aus.
   Kein Google-Fonts-Import mehr nötig (Nunito Sans entfernt).
---------------------------------------------------------------------------- */
:root{
  /* === TINTE & TEXT === */
  --rf-ink:#16161A;        /* Haupttext, dunkle Flächen, primäre Buttons */
  --rf-ink-2:#33333A;      /* Fließtext / Caption */
  --rf-ink-soft:#5B5B62;   /* sekundärer Text */
  --rf-ink-faint:#9A9AA2;  /* Labels, Meta, Platzhalter-Text */
  --rf-ink-ghost:#C4C4CA;  /* leerer Zustand, sehr dezent */

  /* === FLÄCHEN === */
  --rf-paper:#FFFFFF;      /* Karten, Sidebar-Items aktiv, Topbar */
  --rf-paper-2:#F6F6F7;    /* App-Hintergrund, Werkzeug-Bereiche */
  --rf-paper-3:#EFEFF1;    /* Badges neutral, Hover-Flächen */
  --rf-paper-4:#E8E8EB;
  --rf-line:#E4E4E7;       /* Standard-Rahmen */
  --rf-line-soft:#EDEDF0;  /* dezente Trennlinien */

  /* === AKZENT: HASHTAGS === */
  --rf-link:#1D9BF0;       /* Social-Link-Blau */

  /* === STATUS-PALETTE === */
  /* Freigegeben — gedämpftes Salbei/Waldgrün */
  --rf-green:#3E6B47; --rf-green-bg:#EAF0EA; --rf-green-line:#CFE0D2;
  /* Abgelehnt — warmes Terracotta */
  --rf-red:#B5462E;   --rf-red-bg:#F7EAE5;   --rf-red-line:#EBD2C9;
  /* In Review — ruhiges Stahlblau */
  --rf-blue:#2D5577;  --rf-blue-bg:#E8EEF3;  --rf-blue-line:#D2DEE8;
  /* Entwurf / in Arbeit — gedämpftes Ocker */
  --rf-amber:#A07B2D; --rf-amber-bg:#F4EEDF; --rf-amber-line:#E7DBC0;
  /* Veröffentlicht — zurückgenommenes Aubergine/Mauve */
  --rf-mauve:#6B5570; --rf-mauve-bg:#EFEAF0; --rf-mauve-line:#DED2DF;

  /* === SCHRIFTFAMILIE === */
  --rf-sans:'Avenir Next','Avenir',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* === RADIEN === */
  --rf-radius-card:16px;
  --rf-radius-btn:9px;
  --rf-radius-pill:30px;

  /* === SIDEBAR-BREITE === */
  --rf-sidebar-w:230px;
}

/* ----------------------------------------------------------------------------
   BASIS-RESET (nur ergänzen, falls die Seite noch keinen hat)
---------------------------------------------------------------------------- */
.rf-scope *{box-sizing:border-box;margin:0;padding:0;}
.rf-scope{font-family:var(--rf-sans);background:var(--rf-paper-2);color:var(--rf-ink);font-size:14px;-webkit-font-smoothing:antialiased;}

/* ============================================================================
   APP-LAYOUT
============================================================================ */
.rf-app{display:flex;min-height:100vh;}
.rf-main{margin-left:var(--rf-sidebar-w);flex:1;display:flex;flex-direction:column;}

/* ============================================================================
   SIDEBAR  (helle Variante — weiss, abgestimmt 2026-06-04)
   Aktives Element = dunkle Pille, Avatar dunkel; Status bleiben die einzigen
   Farbträger, daher Badge in Tinte statt Rot.
============================================================================ */
.rf-sidebar{width:var(--rf-sidebar-w);background:var(--rf-paper);border-right:1px solid var(--rf-line);position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;z-index:200;overflow-y:auto;}
.rf-sb-logo{padding:28px 24px 22px;border-bottom:1px solid var(--rf-line-soft);}
.rf-sb-logo-mark{font-size:17px;font-weight:800;letter-spacing:.05em;color:var(--rf-ink);line-height:1;}
.rf-sb-logo-sub{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--rf-ink-faint);margin-top:7px;font-weight:700;}
.rf-sb-nav{padding:20px 14px;flex:1;}
.rf-sb-label{font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--rf-ink-faint);padding:0 11px 10px;margin-top:8px;}
.rf-sb-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--rf-ink-soft);text-decoration:none;cursor:pointer;transition:all .14s;margin-bottom:2px;}
.rf-sb-item:hover{background:var(--rf-paper-2);color:var(--rf-ink);}
.rf-sb-item.active,.rf-sb-item.active:hover{background:var(--rf-ink);color:#fff;}
.rf-sb-item svg{width:18px;height:18px;opacity:.7;flex-shrink:0;}
.rf-sb-item.active svg{opacity:1;}
.rf-sb-badge{margin-left:auto;background:var(--rf-ink);color:#fff;font-size:10px;font-weight:800;padding:1px 8px;border-radius:20px;min-width:20px;text-align:center;}
.rf-sb-item.active .rf-sb-badge{background:#fff;color:var(--rf-ink);}
.rf-sb-item.coming{opacity:.45;cursor:default;}
.rf-sb-item.coming:hover{background:transparent;color:var(--rf-ink-soft);}
.rf-sb-soon{margin-left:auto;font-size:9px;font-weight:600;color:var(--rf-ink-faint);letter-spacing:.05em;}
.rf-sb-divider{height:1px;background:var(--rf-line);margin:16px 12px;}
.rf-sb-bottom{padding:16px;border-top:1px solid var(--rf-line-soft);}
.rf-sb-user{display:flex;align-items:center;gap:11px;margin-bottom:6px;padding:6px 8px;}
.rf-sb-avatar{width:32px;height:32px;border-radius:50%;background:var(--rf-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.rf-sb-user-name{font-size:12.5px;font-weight:700;color:var(--rf-ink);}
.rf-sb-user-role{font-size:10px;color:var(--rf-ink-faint);margin-top:1px;}
.rf-sb-logout{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--rf-ink-soft);cursor:pointer;transition:all .14s;background:none;border:none;width:100%;font-family:inherit;}
.rf-sb-logout:hover{background:var(--rf-paper-2);color:var(--rf-ink);}
.rf-sb-logout svg{width:14px;height:14px;}

/* ============================================================================
   TOPBAR
   Anordnung nach Usability: Titel links · Refresh als Icon ·
   ZIP sekundär · primäre Aktion (Teilen) dunkel rechts außen
============================================================================ */
.rf-topbar{background:var(--rf-paper);border-bottom:1px solid var(--rf-line);padding:18px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:90;}
.rf-topbar-left{display:flex;flex-direction:column;gap:2px;}
.rf-topbar-kicker{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--rf-ink-faint);}
.rf-topbar-title{font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--rf-ink);}
.rf-topbar-actions{display:flex;gap:8px;align-items:center;}

.rf-icon-btn{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--rf-line);background:var(--rf-paper);color:var(--rf-ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .14s;}
.rf-icon-btn:hover{border-color:var(--rf-ink-faint);color:var(--rf-ink);}
.rf-icon-btn svg{width:16px;height:16px;}

.rf-btn{padding:10px 17px;border-radius:var(--rf-radius-btn);font-size:12.5px;font-weight:700;cursor:pointer;border:none;transition:all .14s;display:inline-flex;align-items:center;gap:7px;font-family:inherit;white-space:nowrap;}
.rf-btn svg{width:14px;height:14px;}
.rf-btn-ghost{background:transparent;color:var(--rf-ink-soft);border:1.5px solid var(--rf-line);}
.rf-btn-ghost:hover{border-color:var(--rf-ink-faint);color:var(--rf-ink);}
.rf-btn-zip{background:var(--rf-paper);color:var(--rf-ink);border:1.5px solid var(--rf-line);}
.rf-btn-zip:hover{border-color:var(--rf-ink-faint);}
.rf-btn-zip .rf-zip-dot{width:7px;height:7px;border-radius:50%;background:var(--rf-green);}
.rf-btn-share{background:var(--rf-ink);color:#fff;padding:10px 20px;}
.rf-btn-share:hover{background:#000;}
.rf-btn:disabled{opacity:.5;cursor:default;}

/* ============================================================================
   FILTERBAR
============================================================================ */
.rf-filterbar{background:var(--rf-paper);border-bottom:1px solid var(--rf-line-soft);padding:16px 40px;}
.rf-filter-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
.rf-fgroup{display:flex;flex-direction:column;gap:5px;}
.rf-flabel{font-size:9px;font-weight:800;color:var(--rf-ink-faint);letter-spacing:.14em;text-transform:uppercase;}
.rf-scope select,.rf-date-input{padding:9px 11px;border:1.5px solid var(--rf-line);border-radius:8px;font-size:13px;color:var(--rf-ink);background:var(--rf-paper);cursor:pointer;outline:none;font-family:inherit;font-weight:600;transition:border-color .14s;}
.rf-scope select{min-width:145px;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A9AA2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;-webkit-appearance:none;appearance:none;padding-right:30px;}
.rf-date-input{min-width:120px;color:var(--rf-ink-soft);}
.rf-scope select:focus,.rf-date-input:focus{border-color:var(--rf-ink);}
.rf-btn-reset{padding:9px 13px;border:1.5px solid var(--rf-line);border-radius:8px;background:var(--rf-paper);color:var(--rf-ink-soft);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:all .14s;}
.rf-btn-reset:hover{border-color:var(--rf-ink-faint);color:var(--rf-ink);}
.rf-filter-count{margin-left:auto;font-size:13px;color:var(--rf-ink-faint);font-weight:600;align-self:flex-end;padding-bottom:9px;}
.rf-filter-count strong{color:var(--rf-ink);font-weight:800;}

.rf-quick-row{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap;}
.rf-qpill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rf-radius-pill);font-size:12.5px;font-weight:700;color:var(--rf-ink-soft);cursor:pointer;border:1.5px solid var(--rf-line);background:var(--rf-paper);transition:all .14s;font-family:inherit;}
.rf-qpill:hover{border-color:var(--rf-ink-faint);color:var(--rf-ink);}
.rf-qpill.active{background:var(--rf-ink);color:#fff;border-color:var(--rf-ink);}
.rf-qdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.rf-qdot-red{background:var(--rf-red);}
.rf-qdot-blue{background:var(--rf-blue);}
.rf-qdot-green{background:var(--rf-green);}
.rf-qdot-mauve{background:var(--rf-mauve);}
.rf-qdot-ink{background:var(--rf-ink-faint);}

/* ============================================================================
   FEED-GRID
============================================================================ */
.rf-feed{padding:34px 40px 60px;}
.rf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:30px;align-items:start;}

/* ============================================================================
   POST-KACHEL  (Bild als Held → Redaktionsteil → Werkzeugbereich → Chat)
============================================================================ */
.rf-card{background:var(--rf-paper);border:1px solid var(--rf-line);border-radius:var(--rf-radius-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.rf-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px -22px rgba(20,20,26,.24);}

/* --- Medien --- */
.rf-card-media{position:relative;width:100%;aspect-ratio:4/5;background:var(--rf-paper-3);overflow:hidden;}
.rf-card-media img,.rf-card-media video{width:100%;height:100%;object-fit:cover;display:block;}
.rf-media-overlay-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:14px;pointer-events:none;}
.rf-media-chips{display:flex;gap:6px;pointer-events:auto;}
.rf-chip{font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:var(--rf-radius-pill);letter-spacing:.02em;backdrop-filter:blur(5px);}
.rf-chip-format{background:rgba(255,255,255,.92);color:var(--rf-ink-2);}
.rf-chip-channel{background:rgba(22,22,26,.82);color:#fff;}
.rf-media-date{font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:var(--rf-radius-pill);background:rgba(22,22,26,.82);color:#fff;backdrop-filter:blur(5px);pointer-events:auto;}
.rf-media-rm{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:rgba(22,22,26,.5);color:#fff;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .14s;z-index:4;}
.rf-card:hover .rf-media-rm{display:flex;}
.rf-media-rm:hover{background:rgba(22,22,26,.85);}
.rf-media-rm svg{width:13px;height:13px;}

/* Annotations-Pin (auf dem Bild) */
.rf-ann-pin{position:absolute;width:27px;height:27px;border-radius:50%;border:2.5px solid #fff;background:var(--rf-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.4);transition:transform .15s;z-index:3;transform:translate(-50%,-50%);}
.rf-ann-pin:hover,.rf-ann-pin.open{transform:translate(-50%,-50%) scale(1.12);}
.rf-ann-pin.resolved{background:var(--rf-green);}

/* Platzhalter wenn kein Medium */
.rf-media-ph{position:relative;width:100%;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--rf-paper-2);cursor:pointer;}
.rf-media-ph:hover{background:var(--rf-paper-3);}
.rf-media-ph svg{width:36px;height:36px;color:var(--rf-ink-ghost);}
.rf-media-ph-lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rf-ink-faint);}
.rf-media-ph-dim{font-size:10px;color:var(--rf-ink-ghost);font-weight:600;margin-top:-6px;}

/* --- Redaktioneller Teil (fließt, kein Formular) --- */
.rf-card-edit{padding:22px 22px 18px;flex:1;display:flex;flex-direction:column;}
.rf-card-kicker{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--rf-ink-faint);margin-bottom:9px;}
/* .rf-editable = Wrapper um ein bearbeitbares Feld; Stift erscheint bei Hover */
.rf-editable{position:relative;border-radius:8px;margin:0 -8px;padding:0 8px;transition:background .14s;}
.rf-editable:hover{background:var(--rf-paper-2);}
.rf-pencil{position:absolute;top:3px;right:4px;width:24px;height:24px;border-radius:7px;background:var(--rf-paper);border:1px solid var(--rf-line);color:var(--rf-ink-faint);cursor:pointer;display:none;align-items:center;justify-content:center;}
.rf-editable:hover .rf-pencil{display:flex;}
.rf-pencil:hover{color:var(--rf-link);border-color:var(--rf-link);}
.rf-pencil svg{width:12px;height:12px;}
.rf-card-title{font-size:22px;font-weight:800;line-height:1.18;color:var(--rf-ink);letter-spacing:-.025em;}
.rf-card-caption{font-size:13.5px;line-height:1.65;color:var(--rf-ink-2);white-space:pre-line;margin-top:12px;}
.rf-card-caption.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.rf-more-btn{background:none;border:none;cursor:pointer;font-size:11.5px;color:var(--rf-ink-soft);font-weight:700;padding:7px 0 0;font-family:inherit;display:inline-flex;align-items:center;gap:3px;}
.rf-more-btn:hover{color:var(--rf-ink);}
.rf-more-btn svg{width:11px;height:11px;}
.rf-card-hashtags{font-size:12.5px;line-height:1.7;color:var(--rf-link);font-weight:600;margin-top:13px;}
.rf-card-hashtags.empty{color:var(--rf-ink-ghost);}

/* --- Werkzeug-Bereich (Status, Deadline, Status-setzen) --- */
.rf-card-tools{margin-top:auto;border-top:1px solid var(--rf-line-soft);background:var(--rf-paper-2);}
.rf-tools-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 22px;}
.rf-status-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--rf-radius-pill);font-size:12px;font-weight:800;cursor:pointer;border:1.5px solid transparent;font-family:inherit;}
.rf-status-pill .rf-caret{font-size:9px;opacity:.55;margin-left:1px;}
.rf-status-dot{width:7px;height:7px;border-radius:50%;}
/* Status-Varianten — Klassen-Mapping siehe HANDOVER.md */
.rf-st-review{background:var(--rf-blue-bg);color:var(--rf-blue);border-color:var(--rf-blue-line);}
.rf-st-review .rf-status-dot{background:var(--rf-blue);}
.rf-st-ok{background:var(--rf-green-bg);color:var(--rf-green);border-color:var(--rf-green-line);}
.rf-st-ok .rf-status-dot{background:var(--rf-green);}
.rf-st-draft{background:var(--rf-amber-bg);color:var(--rf-amber);border-color:var(--rf-amber-line);}
.rf-st-draft .rf-status-dot{background:var(--rf-amber);}
.rf-st-pub{background:var(--rf-mauve-bg);color:var(--rf-mauve);border-color:var(--rf-mauve-line);}
.rf-st-pub .rf-status-dot{background:var(--rf-mauve);}
.rf-st-rejected{background:var(--rf-red-bg);color:var(--rf-red);border-color:var(--rf-red-line);}
.rf-st-rejected .rf-status-dot{background:var(--rf-red);}
.rf-tools-right{display:flex;align-items:center;gap:8px;}
.rf-deadline-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--rf-ink-soft);}
.rf-deadline-chip svg{width:13px;height:13px;color:var(--rf-ink-faint);}
.rf-status-set{width:32px;height:32px;border:1.5px solid var(--rf-line);border-radius:8px;background:var(--rf-paper);color:var(--rf-ink-soft);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;transition:all .14s;}
.rf-status-set:hover{border-color:var(--rf-ink-faint);color:var(--rf-ink);}
.rf-status-set svg{width:14px;height:14px;}

/* --- Hinweiszeile ("zuvor freigegeben…") --- */
.rf-card-note{padding:9px 22px;background:var(--rf-amber-bg);font-size:11px;color:var(--rf-amber);line-height:1.5;font-weight:600;border-top:1px solid var(--rf-amber-line);}
.rf-card-note a{color:var(--rf-ink);font-weight:800;text-decoration:underline;cursor:pointer;}

/* --- Freigabe-Chat --- */
.rf-card-chat{padding:14px 22px 18px;border-top:1px solid var(--rf-line-soft);background:var(--rf-paper-2);}
.rf-chat-label{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:800;color:var(--rf-ink-faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.rf-chat-label svg{width:12px;height:12px;}
.rf-chat-stream{background:var(--rf-paper);border:1px solid var(--rf-line);border-radius:10px;padding:16px 12px;text-align:center;font-size:12px;color:var(--rf-ink-faint);font-weight:600;margin-bottom:9px;}
.rf-chat-msgs{display:flex;flex-direction:column;gap:7px;margin-bottom:10px;}
.rf-chat-msg{max-width:85%;padding:8px 11px;border-radius:11px;font-size:12.5px;line-height:1.45;}
.rf-chat-msg.studio{align-self:flex-end;background:var(--rf-ink);color:#fff;}
.rf-chat-msg.client{align-self:flex-start;background:var(--rf-paper-3);color:var(--rf-ink);}
.rf-chat-input-row{display:flex;gap:8px;}
.rf-chat-input{flex:1;padding:9px 13px;border:1.5px solid var(--rf-line);border-radius:9px;font-size:12.5px;font-family:inherit;color:var(--rf-ink);outline:none;background:var(--rf-paper);transition:border-color .14s;}
.rf-chat-input:focus{border-color:var(--rf-ink);}
.rf-chat-input::placeholder{color:var(--rf-ink-ghost);}
.rf-chat-send{padding:9px 16px;background:var(--rf-ink);color:#fff;border:none;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:background .14s;}
.rf-chat-send:hover{background:#000;}

/* ============================================================================
   MODALS (Teilen / Verschieben etc.) — generisch im neuen Stil
============================================================================ */
.rf-modal-bg{display:none;position:fixed;inset:0;background:rgba(22,22,26,.55);z-index:300;align-items:center;justify-content:center;padding:20px;}
.rf-modal-bg.open{display:flex;}
.rf-modal{background:var(--rf-paper);border-radius:16px;padding:28px 26px;max-width:440px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.3);}
.rf-modal h2{font-size:18px;font-weight:800;color:var(--rf-ink);margin-bottom:6px;letter-spacing:-.02em;}
.rf-modal p{font-size:13px;color:var(--rf-ink-soft);line-height:1.6;margin-bottom:18px;}

/* ============================================================================
   MOBILE
============================================================================ */
.rf-hamburger{display:none;position:fixed;top:14px;left:16px;width:38px;height:38px;background:var(--rf-ink);border:none;border-radius:9px;cursor:pointer;z-index:300;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.rf-hamburger span{width:18px;height:2px;background:#fff;border-radius:1px;transition:all .2s;}
.rf-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;opacity:0;transition:opacity .25s;pointer-events:none;}

@media(max-width:900px){
  .rf-sidebar{transform:translateX(-100%);transition:transform .25s ease;}
  .rf-sidebar.open{transform:translateX(0);}
  .rf-main{margin-left:0;}
  .rf-hamburger{display:flex;}
  .rf-overlay{display:block;}
  .rf-overlay.open{opacity:1;pointer-events:all;}
  .rf-topbar,.rf-filterbar,.rf-feed{padding-left:18px;padding-right:18px;}
  .rf-topbar{padding-left:64px;flex-wrap:wrap;}
  .rf-topbar-actions{flex-wrap:wrap;}
}